/* =====================================================================
   MODAL COMPONENTS - BEM with TaskNotes Plugin Scoping
   ===================================================================== */

/* =====================================================================
   NATURAL LANGUAGE INPUT - MINIMALIST STYLES
   ===================================================================== */

.tasknotes-plugin .nl-input-container {
    margin-bottom: var(--size-4-3);
}

.tasknotes-plugin .nl-input {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    font-size: var(--tn-font-size-lg);
    line-height: 1.5;
    transition: border-color 0.2s ease;
}

.tasknotes-plugin .nl-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: none;
}

.tasknotes-plugin .nl-button-container {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}

.tasknotes-plugin .nl-quick-create-button {
    padding: 6px 16px;
    font-size: var(--tn-font-size-lg);
    font-weight: 500;
    border-radius: var(--radius-s);
    border: none;
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tasknotes-plugin .nl-quick-create-button:hover {
    background: var(--interactive-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tasknotes-plugin .nl-parse-button {
    padding: 6px 14px;
    font-size: var(--tn-font-size-md);
    font-weight: 500;
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    color: var(--tn-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tasknotes-plugin .nl-parse-button:hover {
    background: var(--background-modifier-hover);
    color: var(--tn-text-normal);
    border-color: var(--interactive-accent);
}

.tasknotes-plugin .nl-show-detail-button {
    padding: 6px 8px;
    font-size: var(--tn-font-size-lg);
    font-weight: 600;
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--tn-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tasknotes-plugin .nl-show-detail-button:hover {
    background: var(--background-modifier-hover);
    color: var(--tn-text-normal);
    border-color: var(--interactive-accent);
}

.tasknotes-plugin .nl-preview-container {
    margin-top: var(--size-4-1);
    padding: var(--size-4-1);
    background: var(--background-primary-alt);
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
}

.tasknotes-plugin .nl-preview-item {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .nl-preview-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    opacity: 0.7;
}

.tasknotes-plugin .nl-preview-text-content {
    line-height: 1.3;
}

/* =====================================================================
   BASE MODAL CONTAINER STYLES
   ===================================================================== */

.tasknotes-plugin .due-date-modal,
.tasknotes-plugin .scheduled-date-modal,
.tasknotes-plugin .task-selector-modal {
    padding: var(--tn-spacing-xl);
    max-width: 580px;
    width: 100%;
    background: var(--tn-bg-primary);
    border-radius: var(--tn-radius-md);
    box-shadow: var(--tn-shadow-strong);
}

/* =====================================================================
   MODAL HEADERS AND HEADINGS
   ===================================================================== */

.tasknotes-plugin .due-date-modal .setting-item-heading,
.tasknotes-plugin .scheduled-date-modal .setting-item-heading {
    font-size: var(--tn-font-size-xl);
    font-weight: var(--tn-font-weight-semibold);
    color: var(--tn-text-normal);
    line-height: 1.3;
    border-bottom: 1px solid var(--tn-border-color);
    margin-bottom: var(--tn-spacing-lg);
    padding-bottom: var(--tn-spacing-md);
}

/* =====================================================================
   SHARED FORM COMPONENTS (BEM)
   ===================================================================== */

/* Form Group Container */
.tasknotes-plugin .modal-form__group {
    margin-bottom: var(--tn-spacing-lg);
    position: relative;
}

/* Form Labels */
.tasknotes-plugin .modal-form__label {
    display: block;
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-sm);
    line-height: 1.4;
}

/* Help Text */
.tasknotes-plugin .modal-form__help-text {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    margin-top: var(--tn-spacing-sm);
    line-height: 1.4;
    font-style: italic;
}

/* Input Container */
.tasknotes-plugin .modal-form__input-container {
    position: relative;
}

/* Base Input Styles */
.tasknotes-plugin .modal-form__input,
.tasknotes-plugin .modal-form__select {
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-primary);
    color: var(--tn-text-normal);
    font-family: inherit;
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-normal);
    line-height: 1.4;
    transition: border-color var(--tn-transition-fast);
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

/* Make select elements taller to prevent dropdown option clipping */
.tasknotes-plugin .modal-form__select {
    padding: var(--tn-spacing-lg) var(--tn-spacing-lg);
    min-height: 44px;
    line-height: 1.6;
}

.tasknotes-plugin .modal-form__input:hover,
.tasknotes-plugin .modal-form__select:hover {
    border-color: var(--tn-border-color-hover);
}

.tasknotes-plugin .modal-form__input:focus,
.tasknotes-plugin .modal-form__select:focus {
    border-color: var(--interactive-accent);
    box-shadow: none;
    outline: none;
}

/* Input Modifiers */
.tasknotes-plugin .modal-form__input--textarea {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

.tasknotes-plugin .modal-form__input--title {
    font-weight: var(--tn-font-weight-medium);
}

.tasknotes-plugin .modal-form__input--number {
    width: 80px;
    flex-shrink: 0;
}

/* =====================================================================
   CHARACTER COUNTER COMPONENT
   ===================================================================== */

.tasknotes-plugin .modal-form__char-counter {
    position: absolute;
    top: calc(-1 * var(--tn-spacing-lg));
    right: 0;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-weight: var(--tn-font-weight-normal);
    line-height: 1.4;
    pointer-events: none;
}

.tasknotes-plugin .modal-form__char-counter--warning {
    color: var(--tn-color-error);
    font-weight: var(--tn-font-weight-medium);
}

/* =====================================================================
   AUTOCOMPLETE COMPONENT
   ===================================================================== */

.tasknotes-plugin .modal-form__autocomplete {
    position: relative;
}

.tasknotes-plugin .modal-form__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--tn-bg-primary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    box-shadow: var(--tn-shadow-strong);
    z-index: var(--tn-z-dropdown);
    max-height: 240px;
    overflow-y: auto;
    padding: var(--tn-spacing-sm) 0;
}

.tasknotes-plugin .modal-form__suggestion {
    padding: var(--tn-spacing-sm) var(--tn-spacing-lg);
    cursor: pointer;
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    line-height: 1.5;
    transition: background-color var(--tn-transition-fast);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.tasknotes-plugin .modal-form__suggestion:hover,
.tasknotes-plugin .modal-form__suggestion--selected {
    background: var(--tn-interactive-hover);
}

/* =====================================================================
   DATE/TIME INPUT COMPONENTS
   ===================================================================== */

/* DateTime Container */
.tasknotes-plugin .modal-form__datetime-container {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    flex-wrap: wrap;
}

/* User-field date input: full width textbox; icon overlayed on the left */
.tasknotes-plugin .tn-date-control {
  position: relative;
  padding-left: 35px; /* reserve space for the icon to the left of the textbox */
}
.tasknotes-plugin .tn-date-control input[type="text"] {
  padding-left: 0; /* the padding-left is applied on the container */
}
.tasknotes-plugin .tn-date-control .user-field-date-picker-btn {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--tn-text-muted);
  z-index: 1;
}
.tasknotes-plugin .tn-date-control .user-field-date-picker-btn:hover {
  color: var(--text-normal);
}


/* Date and Time Input Modifiers */
.tasknotes-plugin .modal-form__input--date {
    flex: 1;
    min-width: 140px;
}

.tasknotes-plugin .modal-form__input--time {
    width: 120px;
    font-family: var(--tn-font-mono);
    flex-shrink: 0;
}

/* =====================================================================
   TIME ESTIMATE COMPONENT
   ===================================================================== */

.tasknotes-plugin .modal-form__time-estimate {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-md);
}

.tasknotes-plugin .modal-form__time-label {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-muted);
    white-space: nowrap;
}

/* =====================================================================
   RECURRENCE COMPONENTS
   ===================================================================== */

.tasknotes-plugin .modal-form__recurrence {
    position: relative;
}

.tasknotes-plugin .modal-form__recurrence-options {
    margin-top: var(--tn-spacing-lg);
    padding: var(--tn-spacing-lg);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-md);
}

.tasknotes-plugin .modal-form__recurrence-label {
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-md);
}

/* Interval Input Components */
.tasknotes-plugin .modal-form__interval-container {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    margin: var(--tn-spacing-md) 0;
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .modal-form__interval-label {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    font-weight: var(--tn-font-weight-medium);
    white-space: nowrap;
}

.tasknotes-plugin .modal-form__input--interval {
    width: 80px !important;
    min-width: 60px;
    flex-shrink: 0;
    text-align: center;
}

.tasknotes-plugin .modal-form__interval-unit {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    font-weight: var(--tn-font-weight-medium);
    white-space: nowrap;
}

/* RRule Options Container */
.tasknotes-plugin .modal-form__rrule-options {
    margin: var(--tn-spacing-md) 0;
}

/* RRule Labels */
.tasknotes-plugin .modal-form__rrule-label {
    display: block;
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-sm);
}

/* Monthly and Yearly Options */
.tasknotes-plugin .modal-form__monthly-mode,
.tasknotes-plugin .modal-form__yearly-options {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-md);
}

.tasknotes-plugin .modal-form__radio-option {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    flex-wrap: nowrap;
}

.tasknotes-plugin .modal-form__radio-option input[type="radio"] {
    width: auto;
    height: auto;
    flex: none;
    margin: 0;
}

.tasknotes-plugin .modal-form__select--position,
.tasknotes-plugin .modal-form__select--weekday,
.tasknotes-plugin .modal-form__select--month {
    width: auto;
    min-width: 120px;
    flex-shrink: 0;
}

.tasknotes-plugin .modal-form__input--day {
    width: 60px;
    text-align: center;
}

.tasknotes-plugin .modal-form__yearly-label {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    white-space: nowrap;
}

/* =====================================================================
   DETAILED FORM CONTAINER (TaskCreationModal specific)
   ===================================================================== */

.tasknotes-plugin .detailed-form-container {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-lg);
    width: 100%;
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out;
}

.tasknotes-plugin .detailed-form-container.hidden {
    display: none;
}




/* End Condition Options */
.tasknotes-plugin .modal-form__end-condition {
    margin: var(--tn-spacing-md) 0;
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .modal-form__end-options {
    display: flex;
    flex-direction: column;
    gap: var(--tn-spacing-sm);
    margin-top: var(--tn-spacing-md);
}

.tasknotes-plugin .modal-form__input--count {
    width: 80px;
    text-align: center;
}

.tasknotes-plugin .modal-form__count-label {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    white-space: nowrap;
}

/* RRule Summary */
.tasknotes-plugin .modal-form__rrule-summary {
    margin-top: var(--tn-spacing-md);
    padding: var(--tn-spacing-md);
    background: var(--tn-bg-primary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .modal-form__rrule-text {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-style: italic;
    line-height: 1.4;
}

/* Days of Week Grid */
.tasknotes-plugin .modal-form__days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--tn-spacing-md);
    margin-top: var(--tn-spacing-md);
    padding: var(--tn-spacing-lg);
    background: var(--tn-bg-primary);
    border-radius: var(--tn-radius-sm);
    border: 1px solid var(--tn-border-color);
}

.tasknotes-plugin .modal-form__day-checkbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tn-spacing-sm);
    cursor: pointer;
}

.tasknotes-plugin .modal-form__day-input {
    margin: 0;
    cursor: pointer;
    width: auto;
    height: auto;
    flex: none;
}

.tasknotes-plugin .modal-form__day-label {
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    user-select: none;
    line-height: 1;
}

/* =====================================================================
   BUTTON COMPONENTS
   ===================================================================== */

.tasknotes-plugin .modal-form__buttons {
    display: flex;
    gap: var(--tn-spacing-lg);
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--tn-spacing-xxl);
    padding-top: var(--tn-spacing-lg);
    border-top: 1px solid var(--tn-border-color);
}

/* Buttons use shared tn-btn system; no modal-specific overrides here */

/* Tertiary Button (Open note, etc.) */
.tasknotes-plugin .modal-form__button--tertiary {
    background: transparent;
    color: var(--tn-interactive-accent);
    border: none;
    padding: var(--tn-spacing-md);
}

.tasknotes-plugin .modal-form__button--tertiary:hover {
    background: var(--tn-interactive-hover);
    color: var(--tn-interactive-accent-hover);
}

/* Quick Date Buttons */
.tasknotes-plugin .modal-form__quick-actions {
    display: flex;
    gap: var(--tn-spacing-md);
    flex-wrap: wrap;
    margin-top: var(--tn-spacing-md);
}

.tasknotes-plugin .modal-form__button--quick-date {
    flex: 1;
    min-width: 0;
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    background: var(--tn-bg-secondary);
    color: var(--tn-text-normal);
    border: 1px solid var(--tn-border-color);
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .modal-form__button--quick-date:hover {
    background: var(--tn-interactive-hover);
    border-color: var(--tn-border-color-hover);
}

.tasknotes-plugin .modal-form__button--quick-date--clear {
    background: var(--tn-bg-primary);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .modal-form__button--quick-date--clear:hover {
    background: var(--tn-interactive-hover);
    color: var(--tn-text-normal);
}



/* =====================================================================
   QUICK DATE MODALS SPECIFIC
   ===================================================================== */

.tasknotes-plugin .due-date-modal__task-title,
.tasknotes-plugin .scheduled-date-modal__task-title {
    font-size: var(--tn-font-size-md);
    color: var(--tn-text-normal);
    margin-bottom: var(--tn-spacing-lg);
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    background: var(--tn-bg-secondary);
    border: 1px solid var(--tn-border-color);
    border-radius: var(--tn-radius-sm);
    font-weight: var(--tn-font-weight-medium);
}

/* =====================================================================
   TASK SELECTOR MODAL SPECIFIC
   ===================================================================== */

.tasknotes-plugin .task-selector-modal__suggestion {
    padding: var(--tn-spacing-md);
    border-radius: var(--tn-radius-sm);
    border-left: 3px solid transparent;
    transition: all var(--tn-transition-fast);
}

.tasknotes-plugin .task-selector-modal__suggestion:hover {
    background: var(--tn-interactive-hover);
}

.tasknotes-plugin .task-selector-modal__title {
    margin-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .task-selector-modal__task-title {
    font-weight: var(--tn-font-weight-medium);
    color: var(--tn-text-normal);
    font-size: var(--tn-font-size-md);
}

.tasknotes-plugin .task-selector-modal__task-title--completed {
    text-decoration: line-through;
    color: var(--tn-text-muted);
}

.tasknotes-plugin .task-selector-modal__task-title--high-priority {
    color: var(--tn-color-error);
    border-left-color: var(--tn-color-error);
}

.tasknotes-plugin .task-selector-modal__task-title--low-priority {
    color: var(--tn-text-muted);
}

.tasknotes-plugin .task-selector-modal__meta {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-sm);
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .task-selector-modal__due-date {
    padding: 2px var(--tn-spacing-xs);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-secondary);
    font-size: var(--tn-font-size-xs);
}

.tasknotes-plugin .task-selector-modal__due-date--overdue {
    background: rgba(var(--tn-color-error), 0.1);
    color: var(--tn-color-error);
}

.tasknotes-plugin .task-selector-modal__due-date--today {
    background: rgba(var(--tn-color-warning), 0.1);
    color: var(--tn-color-warning);
}

.tasknotes-plugin .task-selector-modal__contexts {
    display: flex;
    align-items: center;
    gap: var(--tn-spacing-xs);
}

.tasknotes-plugin .task-selector-modal__context-tag {
    padding: 1px var(--tn-spacing-xs);
    border-radius: var(--tn-radius-sm);
    background: var(--tn-bg-secondary);
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .task-selector-modal__status {
    padding: 2px var(--tn-spacing-xs);
    border-radius: var(--tn-radius-sm);
    font-size: var(--tn-font-size-xs);
    text-transform: capitalize;
    background: var(--tn-bg-secondary);
    color: var(--tn-text-normal);
}

/* =====================================================================
   ERROR STATES
   ===================================================================== */

.tasknotes-plugin .modal-form__error {
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    margin: var(--tn-spacing-md) 0;
    background: rgba(var(--tn-color-error), 0.1);
    border: 1px solid var(--tn-color-error);
    border-radius: var(--tn-radius-sm);
    color: var(--tn-color-error);
    font-size: var(--tn-font-size-sm);
    font-weight: var(--tn-font-weight-medium);
}

/* =====================================================================
   RESPONSIVE DESIGN
   ===================================================================== */

@media (max-width: 768px) {
    .tasknotes-plugin .due-date-modal,
    .tasknotes-plugin .scheduled-date-modal {
        padding: var(--tn-spacing-lg);
        max-width: 92vw;
    }

    .tasknotes-plugin .modal-form__buttons {
        flex-direction: column;
        gap: var(--tn-spacing-md);
    }

    .tasknotes-plugin .modal-form__button {
        width: 100%;
        justify-content: center;
    }

    .tasknotes-plugin .modal-form__days-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--tn-spacing-sm);
    }

    .tasknotes-plugin .modal-form__quick-actions {
        flex-direction: column;
    }

    .tasknotes-plugin .modal-form__button--quick-date {
        flex: none;
    }
}

/* =====================================================================
   ACCESSIBILITY ENHANCEMENTS
   ===================================================================== */

/* Focus styles are defined above - removed duplicate conflicting rules */

/* Screen reader only text */
.tasknotes-plugin .modal-form__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   ICS NOTE CREATION MODAL
   ===================================================================== */

.tasknotes-plugin .ics-note-creation-modal {
    width: 600px;
    max-width: 90vw;
}

.tasknotes-plugin .ics-event-preview {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-3);
    margin-bottom: var(--size-4-3);
}

.tasknotes-plugin .ics-event-preview h3 {
    margin: 0 0 var(--size-4-2) 0;
    color: var(--tn-interactive-accent);
}

.tasknotes-plugin .event-details > div {
    margin-bottom: var(--size-4-1);
    font-size: var(--tn-font-size-md);
    line-height: 1.4;
}

/* Align all modal setting controls to the right edge of the column */
.tasknotes-plugin .modal .setting-item .setting-item-control {
  flex: none;
  text-align: end;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--size-4-2);
}


.tasknotes-plugin .content-type-selector .setting-item-control {
    display: flex;
    gap: var(--size-4-2);
}

.tasknotes-plugin .content-type-buttons button {
    padding: var(--size-4-1) var(--size-4-3);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background: var(--background-primary);
    color: var(--tn-text-normal);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tasknotes-plugin .content-type-buttons button:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .content-type-buttons button.mod-cta {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
}

.tasknotes-plugin .content-preview {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-3);
    margin: var(--size-4-3) 0;
}

.tasknotes-plugin .content-preview h4 {
    margin: 0 0 var(--size-4-2) 0;
    color: var(--tn-interactive-accent);
}

.tasknotes-plugin .preview-details > div {
    margin-bottom: var(--size-4-1);
    font-size: var(--tn-font-size-md);
}

.tasknotes-plugin .template-variables {
    margin-top: var(--size-4-3);
}

.tasknotes-plugin .template-variables h5 {
    margin: 0 0 var(--size-4-2) 0;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tasknotes-plugin .variables-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-4-1);
}

.tasknotes-plugin .template-variable {
    background: var(--background-modifier-border);
    color: var(--tn-text-muted);
    padding: 2px var(--size-4-1);
    border-radius: var(--radius-s);
    font-size: var(--tn-font-size-sm);
    font-family: var(--font-monospace);
}

.tasknotes-plugin .modal-button-container {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-4-2);
    margin-top: var(--size-4-4);
    padding-top: var(--size-4-3);
    border-top: 1px solid var(--background-modifier-border);
}

/* =====================================================================
   ICS EVENT INFO MODAL
   ===================================================================== */

.tasknotes-plugin .ics-event-info-modal {
    width: 700px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 1000;
}

.tasknotes-plugin .ics-event-info-modal .modal-content {
    padding: var(--size-4-4);
    box-sizing: border-box;
}

.tasknotes-plugin .ics-event-info-modal * {
    box-sizing: border-box;
}

.tasknotes-plugin .ics-event-info-modal .modal-header h2 {
    margin: 0 0 var(--size-4-4) 0;
    color: var(--tn-interactive-accent);
}

.tasknotes-plugin .event-details-section,
.tasknotes-plugin .related-notes-section,
.tasknotes-plugin .action-buttons-section {
    margin-bottom: var(--size-4-4);
    padding-bottom: var(--size-4-3);
    border-bottom: 1px solid var(--background-modifier-border);
}

.tasknotes-plugin .event-details-section:last-of-type,
.tasknotes-plugin .related-notes-section:last-of-type,
.tasknotes-plugin .action-buttons-section:last-of-type {
    border-bottom: none;
}

.tasknotes-plugin .event-details-section h3,
.tasknotes-plugin .related-notes-section h3,
.tasknotes-plugin .action-buttons-section h3 {
    margin: 0 0 var(--size-4-3) 0;
    font-size: var(--tn-font-size-lg);
    color: var(--tn-text-normal);
}

.tasknotes-plugin .event-details-grid {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
}

.tasknotes-plugin .detail-row {
    display: flex;
    align-items: flex-start;
    gap: var(--size-4-2);
    font-size: var(--tn-font-size-md);
    margin-bottom: var(--size-4-2);
    line-height: 1.4;
    clear: both;
    overflow: hidden;
}

.tasknotes-plugin .detail-row strong {
    min-width: 120px;
    flex-shrink: 0;
    color: var(--tn-text-muted);
    font-weight: 500;
}

.tasknotes-plugin .detail-row span {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tasknotes-plugin .detail-row.description-row {
    flex-direction: column;
    gap: var(--size-4-1);
}

.tasknotes-plugin .description-content {
    background: var(--background-secondary);
    padding: var(--size-4-2);
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
    font-style: italic;
    white-space: pre-wrap;
}

.tasknotes-plugin .external-link {
    color: var(--interactive-accent);
    text-decoration: none;
}

.tasknotes-plugin .external-link:hover {
    text-decoration: underline;
}

.tasknotes-plugin .empty-state {
    text-align: center;
    color: var(--tn-text-muted);
    font-style: italic;
    padding: var(--size-4-4);
    background: var(--background-secondary);
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
}

.tasknotes-plugin .related-notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
}

.tasknotes-plugin .related-note-item {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-3);
    transition: background-color 0.2s ease;
}

.tasknotes-plugin .related-note-item:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .note-header {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    margin-bottom: var(--size-4-1);
}

.tasknotes-plugin .note-icon {
    font-size: var(--tn-font-size-lg);
    opacity: 0.7;
}

.tasknotes-plugin .note-header .internal-link {
    color: var(--tn-text-normal);
    text-decoration: none;
    font-weight: 500;
    flex: 1;
}

.tasknotes-plugin .note-header .internal-link:hover {
    color: var(--interactive-accent);
    text-decoration: underline;
}

.tasknotes-plugin .note-metadata {
    display: flex;
    gap: var(--size-4-2);
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .note-status,
.tasknotes-plugin .note-priority {
    background: var(--background-modifier-border);
    padding: 2px var(--size-4-1);
    border-radius: var(--radius-s);
    color: var(--tn-text-muted);
}

.tasknotes-plugin .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-4-2);
}

/* Use consistent button system */
.tasknotes-plugin .action-button {
    /* Remove individual styles - use tn-btn classes */
}

.tasknotes-plugin .action-button .button-icon {
    opacity: 0.7;
}

.tasknotes-plugin .content-type-buttons button {
    /* Remove individual styles - use tn-btn classes */
}

.tasknotes-plugin .action-button.primary-button {
    /* Remove individual styles - use tn-btn tn-btn--primary classes */
}

.tasknotes-plugin .action-button.secondary-button {
    /* Remove individual styles - use tn-btn tn-btn--secondary classes */
}

.tasknotes-plugin .action-button.secondary-button:hover {
    background: var(--background-modifier-hover);
}

.tasknotes-plugin .close-button-container {
    display: flex;
    justify-content: center;
    margin-top: var(--size-4-4);
    padding-top: var(--size-4-3);
    border-top: 1px solid var(--background-modifier-border);
}

/* =====================================================================
   ICS NOTE LINK MODAL (Fuzzy Selector)
   ===================================================================== */

.tasknotes-plugin .ics-note-link-suggestion {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-1);
    padding: var(--size-4-2);
}

.tasknotes-plugin .note-link-name {
    font-weight: 500;
    color: var(--tn-text-normal);
}

.tasknotes-plugin .note-link-path {
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-muted);
    font-style: italic;
}

