/* Epika Rules v2.0.4 */

:root {
  --epika-rule-blue: #1261d8;
  --epika-rule-blue-dark: #0d53bd;
  --epika-rule-orange: #ff7b4a;
  --epika-rule-text: #252932;
  --epika-rule-muted: #6f7788;
  --epika-rule-line: #e3e7ed;
  --epika-rule-soft: #f6f8fb;
}

/* Native Sieve script editor is only used as an invisible engine. */
#V-PopupsSieveScript,
#V-PopupsSieveScript.epika-rules-v2-engine {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

#V-PopupsSieveScript::backdrop {
  background: transparent !important;
}

/* Hide only SnappyMail's dedicated Filters sub-view. SnappyMail keeps every
   visited settings view mounted in #V-SettingsPane, so broad :has() / direct
   pane selectors can accidentally hide Folders, Security, General, etc. */
#V-Settings-Filters > .form-horizontal,
#V-Settings-Filters > .alert,
#V-Settings-Filters > table.list-table,
#V-Settings-Filters > a[data-i18n="SETTINGS_FILTERS/BUTTON_ADD_SCRIPT"] {
  display: none !important;
}

/* Before the JS dashboard is ready, show a clean placeholder instead of the
   native Inactive / Simple / Advanced UI. The [hidden] attribute is controlled
   by SnappyMail and naturally suppresses this on every other settings route. */
#V-Settings-Filters:not([hidden])::before {
  content: "Kurallar yükleniyor…";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: #7c8492;
  font: 700 15px/1.4 Inter, Roboto, Arial, sans-serif;
}

/* The Epika dashboard lives next to SnappyMail's persistent sub-view nodes.
   Never hide sibling settings views globally: leaving /filters must be an
   ordinary native SnappyMail route transition. */
html.epika-rules-v2-page #V-Settings-Filters {
  display: none !important;
}

html.epika-rules-v2-page #V-SettingsPane > .epika-rules-v2-dashboard {
  display: block !important;
}

html.epika-rules-v2-page #V-SettingsPane:not(.epika-rules-v2-ready)::before {
  content: "Kurallar yükleniyor…";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: #7c8492;
  font: 700 15px/1.4 Inter, Roboto, Arial, sans-serif;
}

/* Settings shell */
#V-SettingsMenu,
#V-SettingsPane {
  box-sizing: border-box !important;
  font-family: Inter, Roboto, Arial, sans-serif !important;
}

#V-SettingsMenu {
  width: 276px !important;
  min-width: 276px !important;
  background: #f7f8fa !important;
  border-right: 1px solid #e4e8ee !important;
  box-shadow: none !important;
}

#V-SettingsMenu .b-toolbar {
  min-height: 72px !important;
  padding: 16px 18px !important;
  background: transparent !important;
  border: 0 !important;
}

#V-SettingsMenu .b-toolbar .toggleLeft {
  display: none !important;
}

#V-SettingsMenu .b-toolbar [data-i18n="GLOBAL/BACK"] {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 0 15px !important;
  color: #30343b !important;
  background: #eceff3 !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#V-SettingsMenu nav {
  padding: 4px 14px 36px !important;
}

#V-SettingsMenu nav a,
#V-SettingsMenu nav a * {
  box-sizing: border-box !important;
  min-height: 45px !important;
  margin: 2px 0 !important;
  padding: 11px 14px !important;
  overflow: hidden !important;
  color: #353941 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 730 !important;
  line-height: 1.3 !important;
}

#V-SettingsMenu nav a:hover,
#V-SettingsMenu nav a:hover * {
  color: #20242a !important;
  background: #eceff3 !important;
}

#V-SettingsMenu nav a.selected,
#V-SettingsMenu nav a.selected * {
  color: #12315f !important;
  background: #dce9fb !important;
  font-weight: 850 !important;
}

#V-SettingsPane {
  color: var(--epika-rule-text) !important;
  background: #fff !important;
  box-shadow: none !important;
}

#V-SettingsPane > .btn-toolbar {
  min-height: 58px !important;
  padding: 12px 20px !important;
  background: #fff !important;
  border-bottom: 1px solid #edf0f4 !important;
}

/* Rules dashboard */
.epika-rules-v2-dashboard {
  box-sizing: border-box;
  width: min(1160px, calc(100% - 56px));
  margin: 32px 28px 56px;
  color: var(--epika-rule-text);
}

.epika-rules-v2-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 28px 30px;
  background: var(--epika-rule-soft);
  border: 1px solid var(--epika-rule-line);
  border-radius: 22px;
}

.epika-rules-v2-kicker {
  margin: 0 0 7px;
  color: #8a919f;
  font-size: 13px;
  font-weight: 750;
}

.epika-rules-v2-hero h1 {
  margin: 0 0 9px;
  color: #22262d;
  font-size: clamp(27px, 2.4vw, 38px);
  font-weight: 880;
  line-height: 1.12;
}

.epika-rules-v2-hero p:not(.epika-rules-v2-kicker) {
  max-width: 690px;
  margin: 0;
  color: #677083;
  font-size: 14px;
  line-height: 1.55;
}

.epika-rules-v2-add,
.epika-rules-v2-empty-add,
.epika-rules-v2-retry {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 22px;
  color: #fff;
  background: var(--epika-rule-blue);
  border: 0;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(18, 97, 216, .18);
  cursor: pointer;
  font-size: 15px;
  font-weight: 850;
}

.epika-rules-v2-add:hover,
.epika-rules-v2-empty-add:hover,
.epika-rules-v2-retry:hover {
  background: var(--epika-rule-blue-dark);
}

.epika-rules-v2-status {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 18px 0;
  padding: 13px 16px;
  color: #707887;
  background: #f8f9fb;
  border: 1px solid var(--epika-rule-line);
  border-radius: 15px;
}

.epika-rules-v2-status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: #a7adb8;
  border-radius: 50%;
}

.epika-rules-v2-status.is-active .epika-rules-v2-status-dot {
  background: #30b56f;
  box-shadow: 0 0 0 4px rgba(48, 181, 111, .12);
}

.epika-rules-v2-status > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.epika-rules-v2-status strong {
  color: #3d424b;
  font-size: 13px;
}

.epika-rules-v2-status small {
  color: #818896;
  font-size: 12px;
}

.epika-rules-v2-master {
  margin-left: auto;
  padding: 8px 13px;
  color: #46505e;
  background: #fff;
  border: 1px solid #dfe4eb;
  border-radius: 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.epika-rules-v2-list {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--epika-rule-line);
  border-radius: 18px;
}

.epika-rules-v2-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 10px 17px;
  border-bottom: 1px solid #edf0f4;
}

.epika-rules-v2-card:last-child {
  border-bottom: 0;
}

.epika-rules-v2-card:hover {
  background: #f9fafc;
}

.epika-rules-v2-copy {
  min-width: 0;
  padding: 8px 0;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.epika-rules-v2-copy strong,
.epika-rules-v2-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.epika-rules-v2-copy strong {
  margin-bottom: 5px;
  color: #252932;
  font-size: 15px;
  font-weight: 820;
}

.epika-rules-v2-copy small {
  color: #747c8a;
  font-size: 12px;
}

.epika-rules-v2-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  padding: 0;
  background: #d6dae1;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.epika-rules-v2-toggle span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  transition: transform .16s ease;
}

.epika-rules-v2-toggle.is-on {
  background: var(--epika-rule-orange);
}

.epika-rules-v2-toggle.is-on span {
  transform: translateX(18px);
}

.epika-rules-v2-delete {
  width: 38px;
  height: 38px;
  padding: 0;
  color: #7b828e;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.epika-rules-v2-delete:hover {
  color: #c23c3c;
  background: #fff0f0;
}

.epika-rules-v2-empty,
.epika-rules-v2-error,
.epika-rules-v2-loading {
  padding: 52px 28px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--epika-rule-line);
  border-radius: 18px;
}

.epika-rules-v2-empty strong,
.epika-rules-v2-error strong,
.epika-rules-v2-loading strong {
  display: block;
  margin-bottom: 8px;
  color: #2a2e36;
  font-size: 18px;
}

.epika-rules-v2-empty p,
.epika-rules-v2-error p {
  max-width: 620px;
  margin: 0 auto 22px;
  color: #747c8a;
  font-size: 14px;
  line-height: 1.55;
}

.epika-rules-v2-loading span {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-bottom: 14px;
  border: 3px solid #dfe7f3;
  border-top-color: var(--epika-rule-blue);
  border-radius: 50%;
  animation: epika-rules-v2-spin .8s linear infinite;
}

@keyframes epika-rules-v2-spin { to { transform: rotate(360deg); } }

/* Filter popup */
#V-PopupsFilter.epika-rules-v2-filter-dialog {
  width: min(900px, calc(100vw - 36px)) !important;
  max-width: 900px !important;
  max-height: calc(100vh - 36px) !important;
  margin: auto !important;
  overflow: hidden !important;
  color: var(--epika-rule-text) !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 90px rgba(25, 33, 48, .28) !important;
  font-family: Inter, Roboto, Arial, sans-serif !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog::backdrop {
  background: rgba(31, 37, 48, .52) !important;
  backdrop-filter: blur(2px);
}

#V-PopupsFilter.epika-rules-v2-filter-dialog header {
  min-height: 76px !important;
  padding: 0 28px !important;
  background: #fff !important;
  border-bottom: 1px solid #e9edf2 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog header h3 {
  margin: 0 !important;
  color: #22262e !important;
  font-size: 28px !important;
  font-weight: 880 !important;
  line-height: 76px !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog header .close {
  top: 23px !important;
  right: 26px !important;
  color: #777f8b !important;
  font-size: 29px !important;
  opacity: 1 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog .modal-body {
  box-sizing: border-box !important;
  max-height: calc(100vh - 170px) !important;
  padding: 28px 30px 34px !important;
  overflow: auto !important;
  background: #fff !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog .control-group {
  margin: 0 0 16px !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog input:not([type="checkbox"]):not([type="radio"]),
#V-PopupsFilter.epika-rules-v2-filter-dialog select,
#V-PopupsFilter.epika-rules-v2-filter-dialog textarea {
  box-sizing: border-box !important;
  min-height: 48px !important;
  padding: 11px 14px !important;
  color: #252932 !important;
  background: #f4f5f7 !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog input:not([type="checkbox"]):not([type="radio"]):focus,
#V-PopupsFilter.epika-rules-v2-filter-dialog select:focus,
#V-PopupsFilter.epika-rules-v2-filter-dialog textarea:focus {
  background: #fff !important;
  border-color: #3278df !important;
  box-shadow: 0 0 0 3px rgba(50, 120, 223, .13) !important;
  outline: 0 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog input.span5 {
  width: 100% !important;
}

/* Checkbox/radio controls must keep their compact native/epika dimensions.
   The generic text-field rule previously forced min-height:48px + padding on
   them, which shifted the box away from its label. */
#V-PopupsFilter.epika-rules-v2-filter-dialog input[type="checkbox"],
#V-PopupsFilter.epika-rules-v2-filter-dialog input[type="radio"] {
  min-height: 0 !important;
  padding: 0 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog .legend {
  margin: 26px 0 14px !important;
  padding: 0 !important;
  color: #272b33 !important;
  border: 0 !important;
  font-size: 19px !important;
  font-weight: 850 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog .legend + .control-group,
#V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] {
  padding: 18px !important;
  background: #f8f9fb !important;
  border: 1px solid #e4e8ee !important;
  border-radius: 17px !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] .control-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] .control-group:last-child {
  margin-bottom: 0 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] .control-group > div {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  gap: 8px !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] select,
#V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] input {
  width: auto !important;
  flex: 1 1 0 !important;
  margin: 0 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog .delete-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  margin: 0 !important;
  color: #89909c !important;
  background: #fff !important;
  border: 1px solid #e0e4ea !important;
  border-radius: 11px !important;
  cursor: pointer !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog .btn {
  min-height: 42px !important;
  padding: 9px 15px !important;
  color: #343a45 !important;
  background: #fff !important;
  border: 1px solid #dce2e9 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog .legend:nth-of-type(2) ~ select.span3 {
  width: 100% !important;
  margin-bottom: 14px !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog .legend:nth-of-type(2) ~ div[data-bind*="actionTemplate"] {
  padding: 18px !important;
  background: #f8f9fb !important;
  border: 1px solid #e4e8ee !important;
  border-radius: 17px !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog div[data-bind*="actionTemplate"] select,
#V-PopupsFilter.epika-rules-v2-filter-dialog div[data-bind*="actionTemplate"] input:not([type="checkbox"]):not([type="radio"]),
#V-PopupsFilter.epika-rules-v2-filter-dialog div[data-bind*="actionTemplate"] textarea {
  width: 100% !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog footer {
  min-height: 76px !important;
  padding: 14px 24px !important;
  background: #fafbfc !important;
  border-top: 1px solid #e8ecf1 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog footer .buttonSave {
  min-width: 154px !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  color: #fff !important;
  background: var(--epika-rule-blue) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(18, 97, 216, .18) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog footer .buttonSave.is-busy {
  opacity: .75 !important;
  cursor: wait !important;
}

/* Toast */
.epika-rules-v2-toast {
  position: fixed;
  z-index: 100000;
  right: 24px;
  bottom: 24px;
  max-width: min(460px, calc(100vw - 48px));
  padding: 14px 18px;
  color: #fff;
  background: #253044;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(24, 31, 43, .28);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  font: 750 13px/1.45 Inter, Roboto, Arial, sans-serif;
}

.epika-rules-v2-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.epika-rules-v2-toast.is-error {
  background: #c53f3f;
}

@media (max-width: 760px) {
  #V-SettingsMenu {
    width: 100% !important;
    min-width: 100% !important;
  }

  .epika-rules-v2-dashboard {
    width: calc(100% - 24px);
    margin: 16px 12px 36px;
  }

  .epika-rules-v2-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 22px;
  }

  .epika-rules-v2-add {
    width: 100%;
  }

  .epika-rules-v2-status {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .epika-rules-v2-master {
    width: 100%;
    margin: 4px 0 0;
  }

  #V-PopupsFilter.epika-rules-v2-filter-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  #V-PopupsFilter.epika-rules-v2-filter-dialog .modal-body {
    max-height: calc(100vh - 152px) !important;
    padding: 20px 16px 28px !important;
  }

  #V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] .control-group > div {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] select,
  #V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] input {
    width: 100% !important;
  }
}


/* Existing messages / retroactive rules */
#V-PopupsFilter.epika-rules-v2-filter-dialog .epika-rules-v2-retro {
  margin-top: 24px !important;
  padding: 18px !important;
  background: #f4f8ff !important;
  border: 1px solid #d7e5fb !important;
  border-radius: 17px !important;
}

.epika-rules-v2-retro-toggle {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.epika-rules-v2-retro-toggle input {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  flex: 0 0 20px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  accent-color: var(--epika-rule-blue) !important;
}

.epika-rules-v2-retro-toggle span,
.epika-rules-v2-retro-toggle strong,
.epika-rules-v2-retro-toggle small {
  display: block !important;
}

.epika-rules-v2-retro-toggle strong {
  color: #283142 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.epika-rules-v2-retro-toggle small {
  margin-top: 4px !important;
  color: #6d788a !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.epika-rules-v2-retro-details {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid #dce7f6 !important;
}

.epika-rules-v2-retro-details[hidden],
.epika-rules-v2-retro-folder[hidden] {
  display: none !important;
}

.epika-rules-v2-retro-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
}

.epika-rules-v2-retro-field > span {
  color: #536075 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.epika-rules-v2-retro-field select {
  width: 100% !important;
}

.epika-rules-v2-retro-note {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  color: #52627a !important;
  background: rgba(255, 255, 255, .72) !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.epika-rules-v2-retro-note.is-error {
  color: #a43f3f !important;
  background: #fff2f2 !important;
}

.epika-rules-v2-retro-overlay {
  position: fixed;
  z-index: 100500;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(21, 29, 42, .42);
  backdrop-filter: blur(5px);
}

.epika-rules-v2-retro-overlay[hidden] {
  display: none !important;
}

.epika-rules-v2-retro-modal {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  padding: 24px;
  color: #273043;
  background: #fff;
  border: 1px solid #e2e7ee;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(20, 27, 40, .28);
  font-family: Inter, Roboto, Arial, sans-serif;
}

.epika-rules-v2-retro-modal-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.epika-rules-v2-retro-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: #145fcf;
  background: #e9f1fe;
  border-radius: 14px;
  font-size: 20px;
}

.epika-rules-v2-retro-modal-head strong,
.epika-rules-v2-retro-modal-head small {
  display: block;
}

.epika-rules-v2-retro-modal-head strong {
  color: #222a38;
  font-size: 20px;
  font-weight: 880;
}

.epika-rules-v2-retro-modal-head small {
  margin-top: 4px;
  color: #7a8495;
  font-size: 12px;
}

.epika-rules-v2-retro-progress {
  height: 8px;
  margin: 20px 0 16px;
  overflow: hidden;
  background: #edf0f5;
  border-radius: 999px;
}

.epika-rules-v2-retro-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #1766d8, #4c91ee);
  border-radius: inherit;
  transition: width .18s ease;
}

.epika-rules-v2-retro-summary {
  margin-top: 17px;
  color: #606b7c;
  font-size: 14px;
  line-height: 1.58;
}

.epika-rules-v2-retro-summary p {
  margin: 8px 0;
}

.epika-rules-v2-retro-summary .is-danger {
  padding: 11px 13px;
  color: #a53838;
  background: #fff1f1;
  border-radius: 12px;
}

.epika-rules-v2-retro-summary details {
  margin-top: 12px;
}

.epika-rules-v2-retro-summary pre {
  max-height: 160px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
  background: #f5f6f8;
  border-radius: 10px;
  font-size: 11px;
}

.epika-rules-v2-retro-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.epika-rules-v2-retro-actions button {
  min-height: 44px;
  padding: 0 17px;
  color: #3e4755;
  background: #fff;
  border: 1px solid #dbe1e9;
  border-radius: 13px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 820;
}

.epika-rules-v2-retro-actions button.is-primary {
  color: #fff;
  background: var(--epika-rule-blue);
  border-color: var(--epika-rule-blue);
}

.epika-rules-v2-retro-actions button.is-danger {
  color: #fff;
  background: #c94343;
  border-color: #c94343;
}

.epika-rules-v2-retro-actions button.is-ghost {
  color: #5f6876;
  background: #f7f8fa;
}

@media (max-width: 620px) {
  .epika-rules-v2-retro-details {
    grid-template-columns: 1fr !important;
  }
  .epika-rules-v2-retro-note {
    grid-column: 1 !important;
  }
  .epika-rules-v2-retro-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .epika-rules-v2-retro-actions button {
    width: 100%;
  }
}


/* v2.0.4 sender lists + explicit condition defaults */
html.epika-rules-v2-silent-filter #V-PopupsFilter {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] select[data-bind*="fieldOptions"] {
  min-width: 150px !important;
}

#V-PopupsFilter.epika-rules-v2-filter-dialog [data-bind="foreach: conditions"] select[data-bind*="typeOptions"] {
  min-width: 150px !important;
}

.epika-rules-v2-sender-lists {
  margin-top: 28px;
}

.epika-rules-v2-sender-lists-head {
  margin-bottom: 14px;
}

.epika-rules-v2-sender-lists-head h2 {
  margin: 0 0 6px;
  color: #262b33;
  font-size: 20px;
  font-weight: 880;
}

.epika-rules-v2-sender-lists-head p {
  margin: 0;
  color: #747d8d;
  font-size: 13px;
  line-height: 1.5;
}

.epika-rules-v2-sender-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.epika-rules-v2-sender-card {
  min-width: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--epika-rule-line);
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(31, 40, 57, .045);
}

.epika-rules-v2-sender-card.is-block {
  border-top: 3px solid #e45a5a;
}

.epika-rules-v2-sender-card.is-allow {
  border-top: 3px solid #35ad71;
}

.epika-rules-v2-sender-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.epika-rules-v2-sender-card-head > div {
  min-width: 0;
}

.epika-rules-v2-sender-card-head h3 {
  margin: 0 0 6px;
  color: #282d35;
  font-size: 17px;
  font-weight: 870;
}

.epika-rules-v2-sender-card-head p {
  margin: 0;
  color: #727b8b;
  font-size: 12px;
  line-height: 1.5;
}

.epika-rules-v2-sender-card-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0 8px;
  color: #596274;
  background: #f2f4f7;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 850;
}

.epika-rules-v2-list-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin-top: 18px;
}

.epika-rules-v2-list-form input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 43px;
  margin: 0 !important;
  padding: 0 13px !important;
  color: #303641 !important;
  background: #f8f9fb !important;
  border: 1px solid #e0e5ec !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  outline: 0 !important;
  font-size: 13px !important;
}

.epika-rules-v2-list-form input:focus {
  background: #fff !important;
  border-color: #82ace9 !important;
  box-shadow: 0 0 0 3px rgba(50, 120, 223, .11) !important;
}

.epika-rules-v2-list-form button {
  min-width: 68px;
  height: 43px;
  padding: 0 15px;
  color: #3e4653;
  background: #fff;
  border: 1px solid #dce2e9;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 820;
}

.epika-rules-v2-list-form button:hover {
  background: #f4f6f8;
}

.epika-rules-v2-list-form button:disabled,
.epika-rules-v2-list-form input:disabled {
  opacity: .6;
  cursor: wait;
}

.epika-rules-v2-list-entries {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}

.epika-rules-v2-list-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 38px;
  padding: 5px 7px 5px 11px;
  background: #f8f9fb;
  border: 1px solid #edf0f4;
  border-radius: 11px;
}

.epika-rules-v2-list-entry > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #454c58;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.epika-rules-v2-list-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  color: #8a929f;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.epika-rules-v2-list-remove:hover {
  color: #bd4040;
  background: #fff0f0;
}

.epika-rules-v2-list-empty {
  margin: 3px 0;
  color: #9aa1ad;
  font-size: 12px;
}

.epika-rules-v2-list-note {
  display: block;
  margin-top: 13px;
  color: #89919f;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .epika-rules-v2-sender-grid {
    grid-template-columns: 1fr;
  }
}