/* ================================================
   TASKNOTES SCOPED UTILITY CLASSES
   ================================================ 
   
   This file contains a comprehensive set of utility classes for the
   ChronoSync/TaskNotes plugin. All utilities are properly scoped under
   .tasknotes-plugin and follow the established naming conventions.
   
   Naming Convention: .tn-{property}-{value}
   All utilities use --tn- CSS variables for consistency
   
   Categories:
   - Layout Utilities (flexbox, grid, positioning)
   - Spacing Utilities (margin, padding, gap)
   - Typography Utilities (text alignment, font styles)
   - Display Utilities (visibility, display types)
   - Background & Border Utilities
   - State Utilities (hover, focus, loading)
   - Animation Utilities
   
   ================================================ */

/* ================================================
   LAYOUT UTILITIES - FLEXBOX
   ================================================ */

.tasknotes-plugin .tn-flex {
    display: flex;
}

.tasknotes-plugin .tn-flex-inline {
    display: inline-flex;
}

/* Flex Direction */
.tasknotes-plugin .tn-flex-row {
    flex-direction: row;
}

.tasknotes-plugin .tn-flex-col {
    flex-direction: column;
}

.tasknotes-plugin .tn-flex-row-reverse {
    flex-direction: row-reverse;
}

.tasknotes-plugin .tn-flex-col-reverse {
    flex-direction: column-reverse;
}

/* Flex Wrap */
.tasknotes-plugin .tn-flex-wrap {
    flex-wrap: wrap;
}

.tasknotes-plugin .tn-flex-nowrap {
    flex-wrap: nowrap;
}

.tasknotes-plugin .tn-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* Justify Content */
.tasknotes-plugin .tn-justify-start {
    justify-content: flex-start;
}

.tasknotes-plugin .tn-justify-end {
    justify-content: flex-end;
}

.tasknotes-plugin .tn-justify-center {
    justify-content: center;
}

.tasknotes-plugin .tn-justify-between {
    justify-content: space-between;
}

.tasknotes-plugin .tn-justify-around {
    justify-content: space-around;
}

.tasknotes-plugin .tn-justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.tasknotes-plugin .tn-items-start {
    align-items: flex-start;
}

.tasknotes-plugin .tn-items-end {
    align-items: flex-end;
}

.tasknotes-plugin .tn-items-center {
    align-items: center;
}

.tasknotes-plugin .tn-items-baseline {
    align-items: baseline;
}

.tasknotes-plugin .tn-items-stretch {
    align-items: stretch;
}

/* Align Self */
.tasknotes-plugin .tn-self-auto {
    align-self: auto;
}

.tasknotes-plugin .tn-self-start {
    align-self: flex-start;
}

.tasknotes-plugin .tn-self-end {
    align-self: flex-end;
}

.tasknotes-plugin .tn-self-center {
    align-self: center;
}

.tasknotes-plugin .tn-self-stretch {
    align-self: stretch;
}

/* Flex Growth and Shrink */
.tasknotes-plugin .tn-flex-1 {
    flex: 1 1 0%;
}

.tasknotes-plugin .tn-flex-auto {
    flex: 1 1 auto;
}

.tasknotes-plugin .tn-flex-initial {
    flex: 0 1 auto;
}

.tasknotes-plugin .tn-flex-none {
    flex: none;
}

.tasknotes-plugin .tn-grow {
    flex-grow: 1;
}

.tasknotes-plugin .tn-grow-0 {
    flex-grow: 0;
}

.tasknotes-plugin .tn-shrink {
    flex-shrink: 1;
}

.tasknotes-plugin .tn-shrink-0 {
    flex-shrink: 0;
}

/* Common Flex Combinations */
.tasknotes-plugin .tn-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tasknotes-plugin .tn-flex-between {
    display: flex;
    justify-content: space-between;
}

.tasknotes-plugin .tn-flex-around {
    display: flex;
    justify-content: space-around;
}

.tasknotes-plugin .tn-flex-evenly {
    display: flex;
    justify-content: space-evenly;
}

.tasknotes-plugin .tn-flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tasknotes-plugin .tn-flex-col-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ================================================
   LAYOUT UTILITIES - GRID
   ================================================ */

.tasknotes-plugin .tn-grid {
    display: grid;
}

.tasknotes-plugin .tn-grid-inline {
    display: inline-grid;
}

/* Grid Template Columns */
.tasknotes-plugin .tn-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Grid Template Rows */
.tasknotes-plugin .tn-grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.tasknotes-plugin .tn-grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

/* Grid Column Span */
.tasknotes-plugin .tn-col-span-1 {
    grid-column: span 1 / span 1;
}

.tasknotes-plugin .tn-col-span-2 {
    grid-column: span 2 / span 2;
}

.tasknotes-plugin .tn-col-span-3 {
    grid-column: span 3 / span 3;
}

.tasknotes-plugin .tn-col-span-4 {
    grid-column: span 4 / span 4;
}

.tasknotes-plugin .tn-col-span-full {
    grid-column: 1 / -1;
}

/* Grid Row Span */
.tasknotes-plugin .tn-row-span-1 {
    grid-row: span 1 / span 1;
}

.tasknotes-plugin .tn-row-span-2 {
    grid-row: span 2 / span 2;
}

.tasknotes-plugin .tn-row-span-3 {
    grid-row: span 3 / span 3;
}

.tasknotes-plugin .tn-row-span-full {
    grid-row: 1 / -1;
}

/* ================================================
   LAYOUT UTILITIES - POSITIONING
   ================================================ */

.tasknotes-plugin .tn-static {
    position: static;
}

.tasknotes-plugin .tn-fixed {
    position: fixed;
}

.tasknotes-plugin .tn-absolute {
    position: absolute;
}

.tasknotes-plugin .tn-relative {
    position: relative;
}

.tasknotes-plugin .tn-sticky {
    position: sticky;
}

/* Positioning Values */
.tasknotes-plugin .tn-inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.tasknotes-plugin .tn-top-0 {
    top: 0;
}

.tasknotes-plugin .tn-right-0 {
    right: 0;
}

.tasknotes-plugin .tn-bottom-0 {
    bottom: 0;
}

.tasknotes-plugin .tn-left-0 {
    left: 0;
}

.tasknotes-plugin .tn-top-auto {
    top: auto;
}

.tasknotes-plugin .tn-right-auto {
    right: auto;
}

.tasknotes-plugin .tn-bottom-auto {
    bottom: auto;
}

.tasknotes-plugin .tn-left-auto {
    left: auto;
}

/* ================================================
   SPACING UTILITIES - MARGIN
   ================================================ */

/* All sides */
.tasknotes-plugin .tn-m-0 {
    margin: 0;
}

.tasknotes-plugin .tn-m-xs {
    margin: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-m-sm {
    margin: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-m-md {
    margin: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-m-lg {
    margin: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-m-xl {
    margin: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-m-auto {
    margin: auto;
}

/* Horizontal */
.tasknotes-plugin .tn-mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.tasknotes-plugin .tn-mx-xs {
    margin-left: var(--tn-spacing-xs);
    margin-right: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-mx-sm {
    margin-left: var(--tn-spacing-sm);
    margin-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-mx-md {
    margin-left: var(--tn-spacing-md);
    margin-right: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-mx-lg {
    margin-left: var(--tn-spacing-lg);
    margin-right: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-mx-xl {
    margin-left: var(--tn-spacing-xl);
    margin-right: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Vertical */
.tasknotes-plugin .tn-my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.tasknotes-plugin .tn-my-xs {
    margin-top: var(--tn-spacing-xs);
    margin-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-my-sm {
    margin-top: var(--tn-spacing-sm);
    margin-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-my-md {
    margin-top: var(--tn-spacing-md);
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-my-lg {
    margin-top: var(--tn-spacing-lg);
    margin-bottom: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-my-xl {
    margin-top: var(--tn-spacing-xl);
    margin-bottom: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

/* Individual sides */
.tasknotes-plugin .tn-mt-0 {
    margin-top: 0;
}

.tasknotes-plugin .tn-mt-xs {
    margin-top: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-mt-sm {
    margin-top: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-mt-md {
    margin-top: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-mt-lg {
    margin-top: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-mt-xl {
    margin-top: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-mt-auto {
    margin-top: auto;
}

.tasknotes-plugin .tn-mr-0 {
    margin-right: 0;
}

.tasknotes-plugin .tn-mr-xs {
    margin-right: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-mr-sm {
    margin-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-mr-md {
    margin-right: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-mr-lg {
    margin-right: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-mr-xl {
    margin-right: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-mr-auto {
    margin-right: auto;
}

.tasknotes-plugin .tn-mb-0 {
    margin-bottom: 0;
}

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

.tasknotes-plugin .tn-mb-sm {
    margin-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-mb-md {
    margin-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-mb-lg {
    margin-bottom: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-mb-xl {
    margin-bottom: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-mb-auto {
    margin-bottom: auto;
}

.tasknotes-plugin .tn-ml-0 {
    margin-left: 0;
}

.tasknotes-plugin .tn-ml-xs {
    margin-left: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-ml-sm {
    margin-left: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-ml-md {
    margin-left: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-ml-lg {
    margin-left: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-ml-xl {
    margin-left: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-ml-auto {
    margin-left: auto;
}

/* ================================================
   SPACING UTILITIES - PADDING
   ================================================ */

/* All sides */
.tasknotes-plugin .tn-p-0 {
    padding: 0;
}

.tasknotes-plugin .tn-p-xs {
    padding: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-p-sm {
    padding: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-p-md {
    padding: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-p-lg {
    padding: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-p-xl {
    padding: var(--tn-spacing-xl);
}

/* Horizontal */
.tasknotes-plugin .tn-px-0 {
    padding-left: 0;
    padding-right: 0;
}

.tasknotes-plugin .tn-px-xs {
    padding-left: var(--tn-spacing-xs);
    padding-right: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-px-sm {
    padding-left: var(--tn-spacing-sm);
    padding-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-px-md {
    padding-left: var(--tn-spacing-md);
    padding-right: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-px-lg {
    padding-left: var(--tn-spacing-lg);
    padding-right: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-px-xl {
    padding-left: var(--tn-spacing-xl);
    padding-right: var(--tn-spacing-xl);
}

/* Vertical */
.tasknotes-plugin .tn-py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.tasknotes-plugin .tn-py-xs {
    padding-top: var(--tn-spacing-xs);
    padding-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-py-sm {
    padding-top: var(--tn-spacing-sm);
    padding-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-py-md {
    padding-top: var(--tn-spacing-md);
    padding-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-py-lg {
    padding-top: var(--tn-spacing-lg);
    padding-bottom: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-py-xl {
    padding-top: var(--tn-spacing-xl);
    padding-bottom: var(--tn-spacing-xl);
}

/* Individual sides */
.tasknotes-plugin .tn-pt-0 {
    padding-top: 0;
}

.tasknotes-plugin .tn-pt-xs {
    padding-top: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-pt-sm {
    padding-top: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-pt-md {
    padding-top: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-pt-lg {
    padding-top: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-pt-xl {
    padding-top: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-pr-0 {
    padding-right: 0;
}

.tasknotes-plugin .tn-pr-xs {
    padding-right: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-pr-sm {
    padding-right: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-pr-md {
    padding-right: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-pr-lg {
    padding-right: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-pr-xl {
    padding-right: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-pb-0 {
    padding-bottom: 0;
}

.tasknotes-plugin .tn-pb-xs {
    padding-bottom: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-pb-sm {
    padding-bottom: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-pb-md {
    padding-bottom: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-pb-lg {
    padding-bottom: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-pb-xl {
    padding-bottom: var(--tn-spacing-xl);
}

.tasknotes-plugin .tn-pl-0 {
    padding-left: 0;
}

.tasknotes-plugin .tn-pl-xs {
    padding-left: var(--tn-spacing-xs);
}

.tasknotes-plugin .tn-pl-sm {
    padding-left: var(--tn-spacing-sm);
}

.tasknotes-plugin .tn-pl-md {
    padding-left: var(--tn-spacing-md);
}

.tasknotes-plugin .tn-pl-lg {
    padding-left: var(--tn-spacing-lg);
}

.tasknotes-plugin .tn-pl-xl {
    padding-left: var(--tn-spacing-xl);
}

/* ================================================
   SPACING UTILITIES - GAP
   ================================================ */

.tasknotes-plugin .tn-gap-0 {
    --tn-gap-row: 0;
    --tn-gap-column: 0;
    gap: var(--tn-gap-row) var(--tn-gap-column);
}

.tasknotes-plugin .tn-gap-xs {
    --tn-gap-row: var(--tn-spacing-xs);
    --tn-gap-column: var(--tn-spacing-xs);
    gap: var(--tn-gap-row) var(--tn-gap-column);
}

.tasknotes-plugin .tn-gap-sm {
    --tn-gap-row: var(--tn-spacing-sm);
    --tn-gap-column: var(--tn-spacing-sm);
    gap: var(--tn-gap-row) var(--tn-gap-column);
}

.tasknotes-plugin .tn-gap-md {
    --tn-gap-row: var(--tn-spacing-md);
    --tn-gap-column: var(--tn-spacing-md);
    gap: var(--tn-gap-row) var(--tn-gap-column);
}

.tasknotes-plugin .tn-gap-lg {
    --tn-gap-row: var(--tn-spacing-lg);
    --tn-gap-column: var(--tn-spacing-lg);
    gap: var(--tn-gap-row) var(--tn-gap-column);
}

.tasknotes-plugin .tn-gap-xl {
    --tn-gap-row: var(--tn-spacing-xl);
    --tn-gap-column: var(--tn-spacing-xl);
    gap: var(--tn-gap-row) var(--tn-gap-column);
}

/* Column Gap */
.tasknotes-plugin .tn-gap-x-0 {
    --tn-gap-column: 0;
    gap: var(--tn-gap-row, 0) var(--tn-gap-column);
}

.tasknotes-plugin .tn-gap-x-xs {
    --tn-gap-column: var(--tn-spacing-xs);
    gap: var(--tn-gap-row, 0) var(--tn-gap-column);
}

.tasknotes-plugin .tn-gap-x-sm {
    --tn-gap-column: var(--tn-spacing-sm);
    gap: var(--tn-gap-row, 0) var(--tn-gap-column);
}

.tasknotes-plugin .tn-gap-x-md {
    --tn-gap-column: var(--tn-spacing-md);
    gap: var(--tn-gap-row, 0) var(--tn-gap-column);
}

.tasknotes-plugin .tn-gap-x-lg {
    --tn-gap-column: var(--tn-spacing-lg);
    gap: var(--tn-gap-row, 0) var(--tn-gap-column);
}

.tasknotes-plugin .tn-gap-x-xl {
    --tn-gap-column: var(--tn-spacing-xl);
    gap: var(--tn-gap-row, 0) var(--tn-gap-column);
}

/* Row Gap */
.tasknotes-plugin .tn-gap-y-0 {
    --tn-gap-row: 0;
    gap: var(--tn-gap-row) var(--tn-gap-column, 0);
}

.tasknotes-plugin .tn-gap-y-xs {
    --tn-gap-row: var(--tn-spacing-xs);
    gap: var(--tn-gap-row) var(--tn-gap-column, 0);
}

.tasknotes-plugin .tn-gap-y-sm {
    --tn-gap-row: var(--tn-spacing-sm);
    gap: var(--tn-gap-row) var(--tn-gap-column, 0);
}

.tasknotes-plugin .tn-gap-y-md {
    --tn-gap-row: var(--tn-spacing-md);
    gap: var(--tn-gap-row) var(--tn-gap-column, 0);
}

.tasknotes-plugin .tn-gap-y-lg {
    --tn-gap-row: var(--tn-spacing-lg);
    gap: var(--tn-gap-row) var(--tn-gap-column, 0);
}

.tasknotes-plugin .tn-gap-y-xl {
    --tn-gap-row: var(--tn-spacing-xl);
    gap: var(--tn-gap-row) var(--tn-gap-column, 0);
}

/* ================================================
   DISPLAY UTILITIES
   ================================================ */

.tasknotes-plugin .tn-block {
    display: block;
}

.tasknotes-plugin .tn-inline-block {
    display: inline-block;
}

.tasknotes-plugin .tn-inline {
    display: inline;
}

.tasknotes-plugin .tn-hidden {
    display: none;
}

.tasknotes-plugin .tn-table {
    display: table;
}

.tasknotes-plugin .tn-table-row {
    display: table-row;
}

.tasknotes-plugin .tn-table-cell {
    display: table-cell;
}

/* ================================================
   VISIBILITY UTILITIES
   ================================================ */

.tasknotes-plugin .tn-visible {
    visibility: visible;
}

.tasknotes-plugin .tn-invisible {
    visibility: hidden;
}

.tasknotes-plugin .tn-collapse {
    visibility: collapse;
}

/* ================================================
   TYPOGRAPHY UTILITIES
   ================================================ */

/* Text Alignment */
.tasknotes-plugin .tn-text-left {
    text-align: left;
}

.tasknotes-plugin .tn-text-center {
    text-align: center;
}

.tasknotes-plugin .tn-text-right {
    text-align: right;
}

.tasknotes-plugin .tn-text-justify {
    text-align: justify;
}

/* Font Weight */
.tasknotes-plugin .tn-font-thin {
    font-weight: 100;
}

.tasknotes-plugin .tn-font-light {
    font-weight: 300;
}

.tasknotes-plugin .tn-font-normal {
    font-weight: var(--tn-font-weight-normal);
}

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

.tasknotes-plugin .tn-font-semibold {
    font-weight: var(--tn-font-weight-semibold);
}

.tasknotes-plugin .tn-font-bold {
    font-weight: var(--tn-font-weight-bold);
}

/* Font Size */
.tasknotes-plugin .tn-text-xs {
    font-size: var(--tn-font-size-xs);
}

.tasknotes-plugin .tn-text-sm {
    font-size: var(--tn-font-size-sm);
}

.tasknotes-plugin .tn-text-base {
    font-size: var(--tn-font-size-md);
}

.tasknotes-plugin .tn-text-lg {
    font-size: var(--tn-font-size-lg);
}

.tasknotes-plugin .tn-text-xl {
    font-size: var(--tn-font-size-xl);
}

.tasknotes-plugin .tn-text-2xl {
    font-size: var(--tn-font-size-2xl);
}

/* Text Transform */
.tasknotes-plugin .tn-uppercase {
    text-transform: uppercase;
}

.tasknotes-plugin .tn-lowercase {
    text-transform: lowercase;
}

.tasknotes-plugin .tn-capitalize {
    text-transform: capitalize;
}

.tasknotes-plugin .tn-normal-case {
    text-transform: none;
}

/* Text Decoration */
.tasknotes-plugin .tn-underline {
    text-decoration: underline;
}

.tasknotes-plugin .tn-line-through {
    text-decoration: line-through;
}

.tasknotes-plugin .tn-no-underline {
    text-decoration: none;
}

/* Line Height */
.tasknotes-plugin .tn-leading-none {
    line-height: 1;
}

.tasknotes-plugin .tn-leading-tight {
    line-height: 1.25;
}

.tasknotes-plugin .tn-leading-snug {
    line-height: 1.375;
}

.tasknotes-plugin .tn-leading-normal {
    line-height: 1.5;
}

.tasknotes-plugin .tn-leading-relaxed {
    line-height: 1.625;
}

.tasknotes-plugin .tn-leading-loose {
    line-height: 2;
}

/* Text Colors */
.tasknotes-plugin .tn-text-normal {
    color: var(--tn-text-normal);
}

.tasknotes-plugin .tn-text-muted {
    color: var(--tn-text-muted);
}

.tasknotes-plugin .tn-text-faint {
    color: var(--tn-text-faint);
}

.tasknotes-plugin .tn-text-accent {
    color: var(--tn-text-accent);
}

.tasknotes-plugin .tn-text-success {
    color: var(--tn-color-success);
}

.tasknotes-plugin .tn-text-warning {
    color: var(--tn-color-warning);
}

.tasknotes-plugin .tn-text-error {
    color: var(--tn-color-error);
}

.tasknotes-plugin .tn-text-info {
    color: var(--tn-color-info);
}

/* ================================================
   BACKGROUND UTILITIES
   ================================================ */

.tasknotes-plugin .tn-bg-primary {
    background-color: var(--tn-bg-primary);
}

.tasknotes-plugin .tn-bg-secondary {
    background-color: var(--tn-bg-secondary);
}

.tasknotes-plugin .tn-bg-accent {
    background-color: var(--tn-interactive-accent);
}

.tasknotes-plugin .tn-bg-success {
    background-color: var(--tn-color-success);
}

.tasknotes-plugin .tn-bg-warning {
    background-color: var(--tn-color-warning);
}

.tasknotes-plugin .tn-bg-error {
    background-color: var(--tn-color-error);
}

.tasknotes-plugin .tn-bg-info {
    background-color: var(--tn-color-info);
}

.tasknotes-plugin .tn-bg-transparent {
    background-color: transparent;
}

/* ================================================
   BORDER UTILITIES
   ================================================ */

/* Border Width */
.tasknotes-plugin .tn-border-0 {
    border-width: 0;
}

.tasknotes-plugin .tn-border {
    border-width: 1px;
}

.tasknotes-plugin .tn-border-2 {
    border-width: 2px;
}

.tasknotes-plugin .tn-border-t {
    border-top-width: 1px;
}

.tasknotes-plugin .tn-border-r {
    border-right-width: 1px;
}

.tasknotes-plugin .tn-border-b {
    border-bottom-width: 1px;
}

.tasknotes-plugin .tn-border-l {
    border-left-width: 1px;
}

/* Border Style */
.tasknotes-plugin .tn-border-solid {
    border-style: solid;
}

.tasknotes-plugin .tn-border-dashed {
    border-style: dashed;
}

.tasknotes-plugin .tn-border-dotted {
    border-style: dotted;
}

.tasknotes-plugin .tn-border-none {
    border-style: none;
}

/* Border Color */
.tasknotes-plugin .tn-border-normal {
    border-color: var(--tn-border-color);
}

.tasknotes-plugin .tn-border-hover {
    border-color: var(--tn-border-color-hover);
}

.tasknotes-plugin .tn-border-accent {
    border-color: var(--tn-interactive-accent);
}

.tasknotes-plugin .tn-border-success {
    border-color: var(--tn-color-success);
}

.tasknotes-plugin .tn-border-warning {
    border-color: var(--tn-color-warning);
}

.tasknotes-plugin .tn-border-error {
    border-color: var(--tn-color-error);
}

.tasknotes-plugin .tn-border-transparent {
    border-color: transparent;
}

/* Border Radius */
.tasknotes-plugin .tn-rounded-none {
    border-radius: 0;
}

.tasknotes-plugin .tn-rounded-xs {
    border-radius: var(--tn-radius-xs);
}

.tasknotes-plugin .tn-rounded-sm {
    border-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .tn-rounded {
    border-radius: var(--tn-radius-md);
}

.tasknotes-plugin .tn-rounded-md {
    border-radius: var(--tn-radius-md);
}

.tasknotes-plugin .tn-rounded-lg {
    border-radius: var(--tn-radius-lg);
}

.tasknotes-plugin .tn-rounded-xl {
    border-radius: var(--tn-radius-xl);
}

.tasknotes-plugin .tn-rounded-full {
    border-radius: var(--tn-radius-full);
}

/* Individual corner radius */
.tasknotes-plugin .tn-rounded-t-sm {
    border-top-left-radius: var(--tn-radius-sm);
    border-top-right-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .tn-rounded-r-sm {
    border-top-right-radius: var(--tn-radius-sm);
    border-bottom-right-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .tn-rounded-b-sm {
    border-bottom-left-radius: var(--tn-radius-sm);
    border-bottom-right-radius: var(--tn-radius-sm);
}

.tasknotes-plugin .tn-rounded-l-sm {
    border-top-left-radius: var(--tn-radius-sm);
    border-bottom-left-radius: var(--tn-radius-sm);
}

/* ================================================
   SHADOW UTILITIES
   ================================================ */

.tasknotes-plugin .tn-shadow-none {
    box-shadow: none;
}

.tasknotes-plugin .tn-shadow-light {
    box-shadow: var(--tn-shadow-light);
}

.tasknotes-plugin .tn-shadow {
    box-shadow: var(--tn-shadow-medium);
}

.tasknotes-plugin .tn-shadow-medium {
    box-shadow: var(--tn-shadow-medium);
}

.tasknotes-plugin .tn-shadow-strong {
    box-shadow: var(--tn-shadow-strong);
}

.tasknotes-plugin .tn-shadow-hover {
    box-shadow: var(--tn-shadow-hover);
}

/* ================================================
   OVERFLOW UTILITIES
   ================================================ */

.tasknotes-plugin .tn-overflow-auto {
    overflow: auto;
}

.tasknotes-plugin .tn-overflow-hidden {
    overflow: hidden;
}

.tasknotes-plugin .tn-overflow-visible {
    overflow: visible;
}

.tasknotes-plugin .tn-overflow-scroll {
    overflow: scroll;
}

.tasknotes-plugin .tn-overflow-x-auto {
    overflow-x: auto;
}

.tasknotes-plugin .tn-overflow-x-hidden {
    overflow-x: hidden;
}

.tasknotes-plugin .tn-overflow-x-scroll {
    overflow-x: scroll;
}

.tasknotes-plugin .tn-overflow-y-auto {
    overflow-y: auto;
}

.tasknotes-plugin .tn-overflow-y-hidden {
    overflow-y: hidden;
}

.tasknotes-plugin .tn-overflow-y-scroll {
    overflow-y: scroll;
}

/* ================================================
   SIZE UTILITIES
   ================================================ */

/* Width */
.tasknotes-plugin .tn-w-auto {
    width: auto;
}

.tasknotes-plugin .tn-w-full {
    width: 100%;
}

.tasknotes-plugin .tn-w-screen {
    width: 100vw;
}

.tasknotes-plugin .tn-w-min {
    width: min-content;
}

.tasknotes-plugin .tn-w-max {
    width: max-content;
}

.tasknotes-plugin .tn-w-fit {
    width: fit-content;
}

/* Specific widths */
.tasknotes-plugin .tn-w-0 {
    width: 0;
}

.tasknotes-plugin .tn-w-px {
    width: 1px;
}

.tasknotes-plugin .tn-w-1 {
    width: 0.25rem;
}

.tasknotes-plugin .tn-w-2 {
    width: 0.5rem;
}

.tasknotes-plugin .tn-w-4 {
    width: 1rem;
}

.tasknotes-plugin .tn-w-8 {
    width: 2rem;
}

.tasknotes-plugin .tn-w-12 {
    width: 3rem;
}

.tasknotes-plugin .tn-w-16 {
    width: 4rem;
}

.tasknotes-plugin .tn-w-20 {
    width: 5rem;
}

.tasknotes-plugin .tn-w-24 {
    width: 6rem;
}

/* Height */
.tasknotes-plugin .tn-h-auto {
    height: auto;
}

.tasknotes-plugin .tn-h-full {
    height: 100%;
}

.tasknotes-plugin .tn-h-screen {
    height: 100vh;
}

.tasknotes-plugin .tn-h-min {
    height: min-content;
}

.tasknotes-plugin .tn-h-max {
    height: max-content;
}

.tasknotes-plugin .tn-h-fit {
    height: fit-content;
}

/* Specific heights */
.tasknotes-plugin .tn-h-0 {
    height: 0;
}

.tasknotes-plugin .tn-h-px {
    height: 1px;
}

.tasknotes-plugin .tn-h-1 {
    height: 0.25rem;
}

.tasknotes-plugin .tn-h-2 {
    height: 0.5rem;
}

.tasknotes-plugin .tn-h-4 {
    height: 1rem;
}

.tasknotes-plugin .tn-h-8 {
    height: 2rem;
}

.tasknotes-plugin .tn-h-12 {
    height: 3rem;
}

.tasknotes-plugin .tn-h-16 {
    height: 4rem;
}

.tasknotes-plugin .tn-h-20 {
    height: 5rem;
}

.tasknotes-plugin .tn-h-24 {
    height: 6rem;
}

/* Min/Max Width */
.tasknotes-plugin .tn-min-w-0 {
    min-width: 0;
}

.tasknotes-plugin .tn-min-w-full {
    min-width: 100%;
}

.tasknotes-plugin .tn-max-w-xs {
    max-width: 20rem;
}

.tasknotes-plugin .tn-max-w-sm {
    max-width: 24rem;
}

.tasknotes-plugin .tn-max-w-md {
    max-width: 28rem;
}

.tasknotes-plugin .tn-max-w-lg {
    max-width: 32rem;
}

.tasknotes-plugin .tn-max-w-xl {
    max-width: 36rem;
}

.tasknotes-plugin .tn-max-w-full {
    max-width: 100%;
}

.tasknotes-plugin .tn-max-w-none {
    max-width: none;
}

/* Min/Max Height */
.tasknotes-plugin .tn-min-h-0 {
    min-height: 0;
}

.tasknotes-plugin .tn-min-h-full {
    min-height: 100%;
}

.tasknotes-plugin .tn-max-h-full {
    max-height: 100%;
}

.tasknotes-plugin .tn-max-h-screen {
    max-height: 100vh;
}

/* ================================================
   Z-INDEX UTILITIES
   ================================================ */

.tasknotes-plugin .tn-z-0 {
    z-index: 0;
}

.tasknotes-plugin .tn-z-10 {
    z-index: 10;
}

.tasknotes-plugin .tn-z-20 {
    z-index: 20;
}

.tasknotes-plugin .tn-z-30 {
    z-index: 30;
}

.tasknotes-plugin .tn-z-40 {
    z-index: 40;
}

.tasknotes-plugin .tn-z-50 {
    z-index: 50;
}

.tasknotes-plugin .tn-z-auto {
    z-index: auto;
}

.tasknotes-plugin .tn-z-sticky {
    z-index: var(--tn-z-sticky);
}

.tasknotes-plugin .tn-z-dropdown {
    z-index: var(--tn-z-dropdown);
}

.tasknotes-plugin .tn-z-modal {
    z-index: var(--tn-z-modal);
}

.tasknotes-plugin .tn-z-tooltip {
    z-index: var(--tn-z-tooltip);
}

/* ================================================
   CURSOR UTILITIES
   ================================================ */

.tasknotes-plugin .tn-cursor-auto {
    cursor: auto;
}

.tasknotes-plugin .tn-cursor-default {
    cursor: default;
}

.tasknotes-plugin .tn-cursor-pointer {
    cursor: var(--cursor-link, pointer);
}

.tasknotes-plugin .tn-cursor-wait {
    cursor: wait;
}

.tasknotes-plugin .tn-cursor-text {
    cursor: text;
}

.tasknotes-plugin .tn-cursor-move {
    cursor: move;
}

.tasknotes-plugin .tn-cursor-help {
    cursor: help;
}

.tasknotes-plugin .tn-cursor-not-allowed {
    cursor: not-allowed;
}

.tasknotes-plugin .tn-cursor-grab {
    cursor: grab;
}

.tasknotes-plugin .tn-cursor-grabbing {
    cursor: grabbing;
}

/* ================================================
   USER SELECT UTILITIES
   ================================================ */

.tasknotes-plugin .tn-select-none {
    user-select: none;
}

.tasknotes-plugin .tn-select-text {
    user-select: text;
}

.tasknotes-plugin .tn-select-all {
    user-select: all;
}

.tasknotes-plugin .tn-select-auto {
    user-select: auto;
}

/* ================================================
   POINTER EVENTS UTILITIES
   ================================================ */

.tasknotes-plugin .tn-pointer-events-none {
    pointer-events: none;
}

.tasknotes-plugin .tn-pointer-events-auto {
    pointer-events: auto;
}

/* ================================================
   TRANSITIONS UTILITIES
   ================================================ */

.tasknotes-plugin .tn-transition-none {
    transition: none;
}

.tasknotes-plugin .tn-transition-fast {
    transition: background-color var(--tn-transition-fast), border-color var(--tn-transition-fast), box-shadow var(--tn-transition-fast), color var(--tn-transition-fast), opacity var(--tn-transition-fast), transform var(--tn-transition-fast);
}

.tasknotes-plugin .tn-transition {
    transition: background-color var(--tn-transition-normal), border-color var(--tn-transition-normal), box-shadow var(--tn-transition-normal), color var(--tn-transition-normal), opacity var(--tn-transition-normal), transform var(--tn-transition-normal);
}

.tasknotes-plugin .tn-transition-slow {
    transition: background-color var(--tn-transition-slow), border-color var(--tn-transition-slow), box-shadow var(--tn-transition-slow), color var(--tn-transition-slow), opacity var(--tn-transition-slow), transform var(--tn-transition-slow);
}

.tasknotes-plugin .tn-transition-colors {
    transition: color var(--tn-transition-normal), background-color var(--tn-transition-normal), border-color var(--tn-transition-normal);
}

.tasknotes-plugin .tn-transition-opacity {
    transition: opacity var(--tn-transition-normal);
}

.tasknotes-plugin .tn-transition-transform {
    transition: transform var(--tn-transition-normal);
}

/* ================================================
   TRANSFORM UTILITIES
   ================================================ */

.tasknotes-plugin .tn-transform {
    transform: var(--tw-transform);
}

.tasknotes-plugin .tn-transform-none {
    transform: none;
}

/* Scale */
.tasknotes-plugin .tn-scale-0 {
    --tw-scale-x: 0;
    --tw-scale-y: 0;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-50 {
    --tw-scale-x: 0.5;
    --tw-scale-y: 0.5;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-75 {
    --tw-scale-x: 0.75;
    --tw-scale-y: 0.75;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-90 {
    --tw-scale-x: 0.9;
    --tw-scale-y: 0.9;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-95 {
    --tw-scale-x: 0.95;
    --tw-scale-y: 0.95;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.tasknotes-plugin .tn-scale-125 {
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

/* ================================================
   OPACITY UTILITIES
   ================================================ */

.tasknotes-plugin .tn-opacity-0 {
    opacity: 0;
}

.tasknotes-plugin .tn-opacity-25 {
    opacity: 0.25;
}

.tasknotes-plugin .tn-opacity-50 {
    opacity: 0.5;
}

.tasknotes-plugin .tn-opacity-75 {
    opacity: 0.75;
}

.tasknotes-plugin .tn-opacity-100 {
    opacity: 1;
}

/* ================================================
   STATE UTILITIES
   ================================================ */

/* Loading State */
.tasknotes-plugin .tn-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.tasknotes-plugin .tn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tn-spin 0.8s linear infinite;
}

/* Disabled State */
.tasknotes-plugin .tn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Interactive States */
.tasknotes-plugin .tn-hover-opacity:hover {
    opacity: 0.8;
}

.tasknotes-plugin .tn-hover-scale:hover {
    transform: scale(1.05);
}

.tasknotes-plugin .tn-hover-shadow:hover {
    box-shadow: var(--tn-shadow-hover);
}

/* Focus States */
.tasknotes-plugin .tn-focus-ring:focus {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
}

.tasknotes-plugin .tn-focus-ring:focus-visible {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
}

/* ================================================
   ANIMATION UTILITIES
   ================================================ */

.tasknotes-plugin .tn-animate-spin {
    animation: tn-spin 1s linear infinite;
}

.tasknotes-plugin .tn-animate-pulse {
    animation: tn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.tasknotes-plugin .tn-animate-bounce {
    animation: tn-bounce 1s infinite;
}

.tasknotes-plugin .tn-animate-fade-in {
    animation: tn-fade-in 0.3s ease-out;
}

.tasknotes-plugin .tn-animate-slide-up {
    animation: tn-slide-up 0.3s ease-out;
}

/* Keyframes */
@keyframes tn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes tn-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes tn-bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes tn-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes tn-slide-up {
    0% { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ================================================
   ACCESSIBILITY UTILITIES
   ================================================ */

/* Screen Reader Only */
.tasknotes-plugin .tn-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;
}

.tasknotes-plugin .tn-not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ================================================
   RESPONSIVE UTILITIES (MOBILE-FIRST)
   ================================================ */

/* Small screens (tablets, 768px and up) */
@media (min-width: 768px) {
    .tasknotes-plugin .tn-sm-block {
        display: block;
    }
    
    .tasknotes-plugin .tn-sm-hidden {
        display: none;
    }
    
    .tasknotes-plugin .tn-sm-flex {
        display: flex;
    }
    
    .tasknotes-plugin .tn-sm-grid {
        display: grid;
    }
    
    .tasknotes-plugin .tn-sm-flex-row {
        flex-direction: row;
    }
    
    .tasknotes-plugin .tn-sm-flex-col {
        flex-direction: column;
    }
    
    .tasknotes-plugin .tn-sm-text-left {
        text-align: left;
    }
    
    .tasknotes-plugin .tn-sm-text-center {
        text-align: center;
    }
    
    .tasknotes-plugin .tn-sm-text-right {
        text-align: right;
    }
}

/* Medium screens (desktops, 992px and up) */
@media (min-width: 992px) {
    .tasknotes-plugin .tn-md-block {
        display: block;
    }
    
    .tasknotes-plugin .tn-md-hidden {
        display: none;
    }
    
    .tasknotes-plugin .tn-md-flex {
        display: flex;
    }
    
    .tasknotes-plugin .tn-md-grid {
        display: grid;
    }
    
    .tasknotes-plugin .tn-md-flex-row {
        flex-direction: row;
    }
    
    .tasknotes-plugin .tn-md-flex-col {
        flex-direction: column;
    }
    
    .tasknotes-plugin .tn-md-text-left {
        text-align: left;
    }
    
    .tasknotes-plugin .tn-md-text-center {
        text-align: center;
    }
    
    .tasknotes-plugin .tn-md-text-right {
        text-align: right;
    }
}

/* Large screens (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .tasknotes-plugin .tn-lg-block {
        display: block;
    }
    
    .tasknotes-plugin .tn-lg-hidden {
        display: none;
    }
    
    .tasknotes-plugin .tn-lg-flex {
        display: flex;
    }
    
    .tasknotes-plugin .tn-lg-grid {
        display: grid;
    }
    
    .tasknotes-plugin .tn-lg-flex-row {
        flex-direction: row;
    }
    
    .tasknotes-plugin .tn-lg-flex-col {
        flex-direction: column;
    }
    
    .tasknotes-plugin .tn-lg-text-left {
        text-align: left;
    }
    
    .tasknotes-plugin .tn-lg-text-center {
        text-align: center;
    }
    
    .tasknotes-plugin .tn-lg-text-right {
        text-align: right;
    }
}

/* ================================================
   DARK MODE SUPPORT
   ================================================ */

/* Dark mode specific utilities */
.theme-dark .tasknotes-plugin .tn-dark-bg-primary {
    background-color: var(--tn-bg-primary);
}

.theme-dark .tasknotes-plugin .tn-dark-bg-secondary {
    background-color: var(--tn-bg-secondary);
}

.theme-dark .tasknotes-plugin .tn-dark-text-normal {
    color: var(--tn-text-normal);
}

.theme-dark .tasknotes-plugin .tn-dark-text-muted {
    color: var(--tn-text-muted);
}

.theme-dark .tasknotes-plugin .tn-dark-border-normal {
    border-color: var(--tn-border-color);
}

/* ================================================
   REDUCED MOTION SUPPORT
   ================================================ */

@media (prefers-reduced-motion: reduce) {
    .tasknotes-plugin .tn-transition-fast,
    .tasknotes-plugin .tn-transition,
    .tasknotes-plugin .tn-transition-slow,
    .tasknotes-plugin .tn-transition-colors,
    .tasknotes-plugin .tn-transition-opacity,
    .tasknotes-plugin .tn-transition-transform {
        transition: none;
    }
    
    .tasknotes-plugin .tn-animate-spin,
    .tasknotes-plugin .tn-animate-pulse,
    .tasknotes-plugin .tn-animate-bounce,
    .tasknotes-plugin .tn-animate-fade-in,
    .tasknotes-plugin .tn-animate-slide-up {
        animation: none;
    }
    
    .tasknotes-plugin .tn-hover-scale:hover {
        transform: none;
    }
}

/* ================================================
   HIGH CONTRAST SUPPORT
   ================================================ */

@media (prefers-contrast: high) {
    .tasknotes-plugin .tn-border {
        border-width: 2px;
    }
    
    .tasknotes-plugin .tn-focus-ring:focus,
    .tasknotes-plugin .tn-focus-ring:focus-visible {
        outline-width: 3px;
    }
}

/* ================================================
   BUTTON UTILITIES - SCOPED FOR SETTINGS ONLY
   ================================================ */

/* Base Button - Scoped to settings modal */
.mod-settings .tasknotes-plugin .tn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tn-spacing-sm);
    padding: var(--tn-spacing-sm) var(--tn-spacing-md);
    border: none;
    border-radius: var(--tn-radius-md);
    background: transparent;
    color: var(--tn-text-normal);
    font-family: inherit;
    font-size: var(--tn-font-size-md);
    font-weight: var(--tn-font-weight-medium);
    line-height: 1;
    cursor: var(--cursor-link, pointer);
    user-select: none;
    text-decoration: none;
    outline: none;
    box-shadow: none;
    transition: background-color var(--tn-transition-fast), border-color var(--tn-transition-fast), box-shadow var(--tn-transition-fast), color var(--tn-transition-fast), transform var(--tn-transition-fast);
    min-height: var(--tn-button-height-md);
}

.mod-settings .tasknotes-plugin .tn-btn:hover {
    background: var(--tn-interactive-hover);
    border: none;
    box-shadow: none;
}

.mod-settings .tasknotes-plugin .tn-btn:active {
    opacity: 0.8;
    border: none;
    box-shadow: none;
}

.mod-settings .tasknotes-plugin .tn-btn:focus-visible {
    outline: 2px solid var(--tn-interactive-accent);
    outline-offset: 2px;
    border: none;
    box-shadow: none;
}

.mod-settings .tasknotes-plugin .tn-btn:disabled {
    opacity: var(--cs-state-disabled);
    cursor: not-allowed;
    pointer-events: none;
    border: none;
    box-shadow: none;
}

/* Button Sizes */
.mod-settings .tasknotes-plugin .tn-btn--sm {
    padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
    font-size: var(--tn-font-size-sm);
    min-height: var(--tn-button-height-sm);
    border-radius: var(--tn-radius-sm);
}

.mod-settings .tasknotes-plugin .tn-btn--lg {
    padding: var(--tn-spacing-md) var(--tn-spacing-lg);
    font-size: var(--tn-font-size-lg);
    font-weight: var(--tn-font-weight-semibold);
    min-height: var(--tn-button-height-lg);
    border-radius: var(--tn-radius-lg);
}

/* Button Variants */
.mod-settings .tasknotes-plugin .tn-btn--primary {
    background: var(--tn-interactive-accent);
    color: var(--text-on-accent);
}

.mod-settings .tasknotes-plugin .tn-btn--primary:hover {
    background: var(--tn-interactive-accent-hover);
}

.mod-settings .tasknotes-plugin .tn-btn--secondary {
    background: var(--tn-interactive-normal);
    color: var(--tn-text-normal);
}

.mod-settings .tasknotes-plugin .tn-btn--secondary:hover {
    background: var(--tn-interactive-hover);
}

.mod-settings .tasknotes-plugin .tn-btn--ghost {
    background: transparent;
    color: var(--tn-text-muted);
}

.mod-settings .tasknotes-plugin .tn-btn--ghost:hover {
    background: var(--tn-interactive-hover);
    color: var(--tn-text-normal);
}

.mod-settings .tasknotes-plugin .tn-btn--danger {
    background: transparent;
    color: var(--tn-color-error);
}

.mod-settings .tasknotes-plugin .tn-btn--danger:hover {
    background: var(--tn-color-error);
    color: var(--tn-bg-primary);
}

.mod-settings .tasknotes-plugin .tn-btn--success {
    background: transparent;
    color: var(--tn-color-success);
}

.mod-settings .tasknotes-plugin .tn-btn--success:hover {
    background: var(--tn-color-success);
    color: var(--tn-bg-primary);
}

/* Icon-only buttons */
.mod-settings .tasknotes-plugin .tn-btn--icon {
    width: var(--tn-button-height-md);
    height: var(--tn-button-height-md);
    padding: 0;
    border-radius: var(--tn-radius-md);
}

.mod-settings .tasknotes-plugin .tn-btn--icon.tn-btn--sm {
    width: var(--tn-button-height-sm);
    height: var(--tn-button-height-sm);
    border-radius: var(--tn-radius-sm);
}

.mod-settings .tasknotes-plugin .tn-btn--icon.tn-btn--lg {
    width: var(--tn-button-height-lg);
    height: var(--tn-button-height-lg);
    border-radius: var(--tn-radius-lg);
}

/* Pill buttons */
.mod-settings .tasknotes-plugin .tn-btn--pill {
    border-radius: var(--tn-radius-full);
}

/* Full width buttons */
.mod-settings .tasknotes-plugin .tn-btn--full {
    width: 100%;
}

/* Button Groups */
.mod-settings .tasknotes-plugin .tn-btn-group {
    display: flex;
    gap: var(--tn-spacing-xs);
}

.mod-settings .tasknotes-plugin .tn-btn-group .tn-btn {
    flex: 1;
}

.mod-settings .tasknotes-plugin .tn-btn-group--attached {
    gap: 0;
}

.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn {
    border-radius: 0;
}

.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:first-child {
    border-radius: var(--tn-radius-md) 0 0 var(--tn-radius-md);
}

.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:last-child {
    border-radius: 0 var(--tn-radius-md) var(--tn-radius-md) 0;
}

.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:only-child {
    border-radius: var(--tn-radius-md);
}

/* Loading state */
.mod-settings .tasknotes-plugin .tn-btn--loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.mod-settings .tasknotes-plugin .tn-btn--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tn-spin 0.8s linear infinite;
}


/* ================================================
   CODEMIRROR WIDGET UTILITIES
   ================================================ */

/**
 * Widget Cursor Fix
 *
 * Minimal fix for CodeMirror widget artifacts.
 * Only prevents editing inside widgets and hides visual artifacts.
 * Does NOT hide the editor cursor to preserve normal editing experience.
 *
 * Fixes:
 * - Prevents text selection inside widgets
 * - Prevents contenteditable behavior
 * - Hides widget buffer image artifacts
 *
 * Trade-offs:
 * - Cursor may appear next to widgets (acceptable for normal editing UX)
 * - Widget buffer artifacts are hidden
 *
 * Usage: Add .cm-widget-cursor-fix to your widget container element
 */
.cm-widget-cursor-fix {
    /* Prevent text selection and editing inside widget */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* Prevent contenteditable behavior */
    -webkit-user-modify: read-only;
    -moz-user-modify: read-only;

    /* Ensure no text cursor appears inside widget elements */
    caret-color: transparent;
}

/* Hide CodeMirror widgetBuffer image artifacts only */
.cm-content .cm-widgetBuffer {
    display: none;
}