/* styles.css for regex-line-filter */

:root {
  --regex-filter-vignette-width: 160px; /* Default width of the vignette area */
  --regex-filter-vignette-color: rgba(0, 0, 0, 0.4); /* Default color and opacity of the vignette */
  --regex-filter-transition-duration: 0.3s; /* Default fade-in/out speed for the vignette */
}

/* Rule to hide non-matching lines */
.regex-filter-hidden-line {
    display: none !important; /* Use !important to override potential theme styles */
}

/* --- Vignette Styles --- */
/* Make view-content a positioning context for pseudo-elements */
.workspace-leaf.mod-active .view-content {
    position: relative;
}

/* Define the pseudo-elements base styles for vignettes */
.workspace-leaf.mod-active .view-content::before,
.workspace-leaf.mod-active .view-content::after {
    content: '';
    position: absolute;
    top: 0;  /* Stretch full height */
    bottom: 0; /* Stretch full height */
    width: var(--regex-filter-vignette-width); /* Use CSS variable for width */
    z-index: 5; /* Ensure vignette is above content but ideally below UI elements like scrollbars */
    pointer-events: none; /* Vignette should not intercept mouse events */
    opacity: 0; /* Initially hidden */
    transition: opacity var(--regex-filter-transition-duration) ease-in-out; /* Use CSS variable for transition */
}

/* Left vignette gradient */
.workspace-leaf.mod-active .view-content::before {
    left: 0; /* Position on the left */
    background: linear-gradient(
        to right, /* Fade from left to right */
        var(--regex-filter-vignette-color) 0%, /* Use CSS variable for color */
        transparent 100%
    );
}

/* Right vignette gradient */
.workspace-leaf.mod-active .view-content::after {
    right: 0; /* Position on the right */
    background: linear-gradient(
        to left, /* Fade from right to left */
        var(--regex-filter-vignette-color) 0%, /* Use CSS variable for color */
        transparent 100%
    );
}

/* Rule to fade IN the vignettes ONLY when filter is active */
/* The ACTIVE_FILTER_BODY_CLASS constant in main.ts is 'regex-filter-active-body' */
body.regex-filter-active-body .workspace-leaf.mod-active .view-content::before,
body.regex-filter-active-body .workspace-leaf.mod-active .view-content::after {
    opacity: 1; /* Fade in */
}

/* --- Note Title Fading --- */
.inline-title {
    transition: opacity var(--regex-filter-transition-duration) ease-in-out;
}

body.regex-filter-fade-title .inline-title {
    opacity: var(--regex-filter-title-fade-opacity, 0.3);
}


/* --- Modal Styles (RegexInputModal & AddSavedRegexModal) --- */

/* Styles for RegexInputModal history buttons and layout */
.regex-filter-pinned-container,
.regex-filter-history-container {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-1);
    margin-top: var(--size-4-3);
    margin-bottom: var(--size-4-4);
    border-top: 1px solid var(--background-modifier-border);
    padding-top: var(--size-4-3);
}

.regex-filter-section-label {
    font-weight: 500;
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    margin-bottom: var(--size-4-1);
}

.regex-history-item-container {
   display: flex;
   align-items: center;
   padding: var(--size-2-1) var(--size-4-2);
   border-radius: var(--radius-s);
   transition: background-color 0.15s ease-out;
}

.regex-history-item-container:hover {
   background-color: var(--background-modifier-hover);
}

.regex-filter-history-item {
   flex-grow: 1;
   cursor: pointer;
   font-size: var(--font-ui-smaller);
   color: var(--text-normal);
}

.regex-item-controls {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    visibility: hidden; /* Hide controls by default */
}

.regex-history-item-container:hover .regex-item-controls {
    visibility: visible; /* Show on hover */
}

.clickable-icon {
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.15s ease-out;
}

.clickable-icon:hover {
    color: var(--text-accent);
}

.history-pin-icon {
   cursor: pointer;
   margin-left: var(--size-4-2);
   color: var(--text-muted);
}

.regex-history-item-container:hover .history-pin-icon {
   visibility: visible; /* Show on hover */
}

.regex-history-item-container.is-pinned .history-pin-icon {
   visibility: visible; /* Always show for pinned items */
   color: var(--text-accent); /* Use accent color for pinned icon */
}

.regex-history-item-container.is-pinned {
   background-color: var(--background-secondary-alt); /* A slightly different background for pinned items */
}

/* Ensure the text input control in the RegexInputModal can utilize available width */
.regex-filter-input-control .setting-item-control {
    width: 100%; /* Make the control div take full width */
}
.regex-filter-input-control .setting-item-control input[type="text"] {
    width: 100%; /* Make the text input element itself take full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Ensure text input in AddSavedRegexModal (and other modals using Setting) takes full width */
.modal-content .setting-item-control input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}


/* --- Settings Tab: Saved Regex Filters --- */
.saved-regex-list {
    margin-top: var(--size-4-3); /* 12px, space above the list or "no items" message */
}

/* Style for the "No saved regex filters yet..." message */
.saved-regex-list > p {
    color: var(--text-faint);
    font-style: italic;
    margin-top: var(--size-4-2); /* 8px */
    padding: var(--size-4-3); /* 12px */
    text-align: center;
    border: 1px dashed var(--background-modifier-border); /* Optional: subtle border */
    border-radius: var(--radius-m);
}

.saved-regex-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2); /* 8px space between items */
}

.saved-regex-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--size-4-2) var(--size-4-3); /* 8px top/bottom, 12px left/right */
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background-color: var(--background-secondary); /* Subtle background for list items */
}

.saved-regex-text {
  flex-grow: 1;
  margin-right: var(--size-4-3); /* 12px space before buttons */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-small);
  color: var(--text-normal);
}

/* Override for the Setting component used for buttons inside saved-regex-item */
/* This is to strip default Setting styling when nested for controls */
.saved-regex-item .setting-item {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
}

.regex-modal-footer-text {
    font-size: var(--font-ui-smaller);
    color: var(--text-faint);
    text-align: center;
    margin-top: var(--size-4-4);
    padding-top: var(--size-4-2);
    border-top: 1px solid var(--background-modifier-border);
}

/* Ensure the control part of the nested Setting doesn't add extra margins */
.saved-regex-item .setting-item-control {
  margin: 0;
  display: flex; /* Helps align buttons if needed */
  align-items: center;
}

/* Spacing for icon buttons (ExtraButton) within the control element */
.saved-regex-item .setting-item-control .clickable-icon {
  margin-left: var(--size-4-2); /* 8px */
}
/* No margin for the first button in the group */
.saved-regex-item .setting-item-control .clickable-icon:first-child {
  margin-left: 0;
}
.saved-regex-text-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.saved-regex-name {
    font-weight: bold;
    font-size: var(--font-ui-normal);
    color: var(--text-normal);
}

.saved-regex-subtext {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    font-family: var(--font-monospace);
}

/* Style for the active toggle button in settings */
.saved-regex-item .setting-item-control .is-active.is-active .clickable-icon,
.saved-regex-item .setting-item-control .is-active .clickable-icon {
    color: var(--text-accent);
}