/**
 * CSP-Compliant jQuery EasyUI Styles
 * 
 * This CSS file provides classes to replace common .css() calls in jQuery EasyUI
 * for Content-Security-Policy compliance.
 * 
 * Usage: Add 'csp-' prefixed classes to elements that previously used .css()
 * 
 * Dynamic properties (width, height, left, top, z-index) still require .css()
 * Static properties (cursor, display, visibility, position) use classes
 * 
 * Classes follow the pattern: .csp-{property}-{value}
 * Example: .csp-cursor-pointer, .csp-display-block
 */

/* ==========================================================================
   Cursor Classes
   ========================================================================== */

.csp-cursor-auto { cursor: auto; }
.csp-cursor-default { cursor: default; }
.csp-cursor-pointer { cursor: pointer; }
.csp-cursor-move { cursor: move; }
.csp-cursor-text { cursor: text; }
.csp-cursor-wait { cursor: wait; }
.csp-cursor-help { cursor: help; }
.csp-cursor-not-allowed { cursor: not-allowed; }
.csp-cursor-progress { cursor: progress; }
.csp-cursor-crosshair { cursor: crosshair; }
.csp-cursor-col-resize { cursor: col-resize; }
.csp-cursor-row-resize { cursor: row-resize; }
.csp-cursor-n-resize { cursor: n-resize; }
.csp-cursor-s-resize { cursor: s-resize; }
.csp-cursor-e-resize { cursor: e-resize; }
.csp-cursor-w-resize { cursor: w-resize; }
.csp-cursor-ne-resize { cursor: ne-resize; }
.csp-cursor-nw-resize { cursor: nw-resize; }
.csp-cursor-se-resize { cursor: se-resize; }
.csp-cursor-sw-resize { cursor: sw-resize; }
.csp-cursor-ew-resize { cursor: ew-resize; }
.csp-cursor-ns-resize { cursor: ns-resize; }

/* ==========================================================================
   Display Classes
   ========================================================================== */

.csp-display-none { display: none; }
.csp-display-inline { display: inline; }
.csp-display-inline-block { display: inline-block; }
.csp-display-block { display: block; }
.csp-display-flex { display: flex; }
.csp-display-inline-flex { display: inline-flex; }
.csp-display-table { display: table; }
.csp-display-table-row { display: table-row; }
.csp-display-table-cell { display: table-cell; }
.csp-display-list-item { display: list-item; }

/* ==========================================================================
   Visibility Classes
   ========================================================================== */

.csp-visibility-visible { visibility: visible; }
.csp-visibility-hidden { visibility: hidden; }
.csp-visibility-collapse { visibility: collapse; }

/* ==========================================================================
   Position Classes
   ========================================================================== */

.csp-position-static { position: static; }
.csp-position-relative { position: relative; }
.csp-position-absolute { position: absolute; }
.csp-position-fixed { position: fixed; }
.csp-position-sticky { position: sticky; }

/* ==========================================================================
   Overflow Classes
   ========================================================================== */

.csp-overflow-visible { overflow: visible; }
.csp-overflow-hidden { overflow: hidden; }
.csp-overflow-scroll { overflow: scroll; }
.csp-overflow-auto { overflow: auto; }
.csp-overflow-x-visible { overflow-x: visible; }
.csp-overflow-x-hidden { overflow-x: hidden; }
.csp-overflow-x-scroll { overflow-x: scroll; }
.csp-overflow-x-auto { overflow-x: auto; }
.csp-overflow-y-visible { overflow-y: visible; }
.csp-overflow-y-hidden { overflow-y: hidden; }
.csp-overflow-y-scroll { overflow-y: scroll; }
.csp-overflow-y-auto { overflow-y: auto; }

/* ==========================================================================
   Float Classes
   ========================================================================== */

.csp-float-left { float: left; }
.csp-float-right { float: right; }
.csp-float-none { float: none; }
.csp-clear-left { clear: left; }
.csp-clear-right { clear: right; }
.csp-clear-both { clear: both; }
.csp-clear-none { clear: none; }

/* ==========================================================================
   Text Alignment Classes
   ========================================================================== */

.csp-text-left { text-align: left; }
.csp-text-right { text-align: right; }
.csp-text-center { text-align: center; }
.csp-text-justify { text-align: justify; }
.csp-text-justify-all { text-align: justify-all; }
.csp-text-start { text-align: start; }
.csp-text-end { text-align: end; }

/* ==========================================================================
   Vertical Alignment Classes
   ========================================================================== */

.csp-valign-baseline { vertical-align: baseline; }
.csp-valign-top { vertical-align: top; }
.csp-valign-middle { vertical-align: middle; }
.csp-valign-bottom { vertical-align: bottom; }
.csp-valign-text-top { vertical-align: text-top; }
.csp-valign-text-bottom { vertical-align: text-bottom; }

/* ==========================================================================
   Width/Height (Fixed Values)
   ========================================================================== */

.csp-width-auto { width: auto; }
.csp-height-auto { height: auto; }
.csp-width-0 { width: 0; }
.csp-height-0 { height: 0; }
.csp-width-100 { width: 100px; }
.csp-height-100 { height: 100px; }
.csp-width-200 { width: 200px; }
.csp-height-200 { height: 200px; }
.csp-width-full { width: 100%; }
.csp-height-full { height: 100%; }
.csp-width-50 { width: 50%; }
.csp-height-50 { height: 50%; }
.csp-width-25 { width: 25%; }
.csp-height-25 { height: 25%; }

/* ==========================================================================
   Min/Max Width/Height (Fixed Values)
   ========================================================================== */

.csp-min-width-0 { min-width: 0; }
.csp-min-width-100 { min-width: 100px; }
.csp-min-width-200 { min-width: 200px; }
.csp-max-width-none { max-width: none; }
.csp-max-width-100 { max-width: 100px; }
.csp-max-width-200 { max-width: 200px; }
.csp-max-width-full { max-width: 100%; }
.csp-min-height-0 { min-height: 0; }
.csp-min-height-100 { min-height: 100px; }
.csp-max-height-none { max-height: none; }
.csp-max-height-full { max-height: 100%; }

/* ==========================================================================
   Margin Classes (Fixed Values)
   ========================================================================== */

.csp-margin-0 { margin: 0; }
.csp-margin-auto { margin: auto; }
.csp-margin-5 { margin: 5px; }
.csp-margin-10 { margin: 10px; }
.csp-margin-15 { margin: 15px; }
.csp-margin-20 { margin: 20px; }
.csp-mt-0 { margin-top: 0; }
.csp-mt-5 { margin-top: 5px; }
.csp-mt-10 { margin-top: 10px; }
.csp-mt-15 { margin-top: 15px; }
.csp-mb-0 { margin-bottom: 0; }
.csp-mb-5 { margin-bottom: 5px; }
.csp-mb-10 { margin-bottom: 10px; }
.csp-mb-15 { margin-bottom: 15px; }
.csp-ml-auto { margin-left: auto; }
.csp-ml-0 { margin-left: 0; }
.csp-ml-5 { margin-left: 5px; }
.csp-ml-10 { margin-left: 10px; }
.csp-mr-0 { margin-right: 0; }
.csp-mr-5 { margin-right: 5px; }
.csp-mr-10 { margin-right: 10px; }

/* ==========================================================================
   Padding Classes (Fixed Values)
   ========================================================================== */

.csp-padding-0 { padding: 0; }
.csp-padding-5 { padding: 5px; }
.csp-padding-10 { padding: 10px; }
.csp-padding-15 { padding: 15px; }
.csp-padding-20 { padding: 20px; }
.csp-pt-0 { padding-top: 0; }
.csp-pt-5 { padding-top: 5px; }
.csp-pt-10 { padding-top: 10px; }
.csp-pb-0 { padding-bottom: 0; }
.csp-pb-5 { padding-bottom: 5px; }
.csp-pb-10 { padding-bottom: 10px; }
.csp-pl-0 { padding-left: 0; }
.csp-pl-5 { padding-left: 5px; }
.csp-pl-10 { padding-left: 10px; }
.csp-pr-0 { padding-right: 0; }
.csp-pr-5 { padding-right: 5px; }
.csp-pr-10 { padding-right: 10px; }

/* ==========================================================================
   Z-Index Classes (Common Values)
   ========================================================================== */

.csp-zindex-auto { z-index: auto; }
.csp-zindex-0 { z-index: 0; }
.csp-zindex-10 { z-index: 10; }
.csp-zindex-100 { z-index: 100; }
.csp-zindex-500 { z-index: 500; }
.csp-zindex-1000 { z-index: 1000; }
.csp-zindex-5000 { z-index: 5000; }
.csp-zindex-9999 { z-index: 9999; }
.csp-zindex-99999 { z-index: 99999; }

/* ==========================================================================
   Opacity Classes
   ========================================================================== */

.csp-opacity-0 { opacity: 0; }
.csp-opacity-025 { opacity: 0.25; }
.csp-opacity-05 { opacity: 0.5; }
.csp-opacity-075 { opacity: 0.75; }
.csp-opacity-1 { opacity: 1; }

/* ==========================================================================
   Font Size Classes (Common Values)
   ========================================================================== */

.csp-font-size-small { font-size: small; }
.csp-font-size-medium { font-size: medium; }
.csp-font-size-large { font-size: large; }
.csp-font-size-10 { font-size: 10px; }
.csp-font-size-12 { font-size: 12px; }
.csp-font-size-14 { font-size: 14px; }
.csp-font-size-16 { font-size: 16px; }
.csp-font-size-18 { font-size: 18px; }
.csp-font-size-20 { font-size: 20px; }

/* ==========================================================================
   Line Height Classes
   ========================================================================== */

.csp-line-height-normal { line-height: normal; }
.csp-line-height-1 { line-height: 1; }
.csp-line-height-1-5 { line-height: 1.5; }
.csp-line-height-2 { line-height: 2; }
.csp-line-height-20 { line-height: 20px; }
.csp-line-height-30 { line-height: 30px; }
.csp-line-height-40 { line-height: 40px; }

/* ==========================================================================
   Border Classes (Simplified)
   ========================================================================== */

.csp-border-none { border: none; }
.csp-border-0 { border: 0; }
.csp-border-solid { border-style: solid; }
.csp-border-dashed { border-style: dashed; }
.csp-border-dotted { border-style: dotted; }
.csp-border-top-none { border-top: none; }
.csp-border-bottom-none { border-bottom: none; }

/* ==========================================================================
   Background Color Classes (Common Values)
   ========================================================================== */

.csp-bg-transparent { background-color: transparent; }
.csp-bg-white { background-color: #fff; }
.csp-bg-black { background-color: #000; }
.csp-bg-none { background: none; }

/* ==========================================================================
   Color Classes (Common Values)
   ========================================================================== */

.csp-color-inherit { color: inherit; }
.csp-color-transparent { color: transparent; }
.csp-color-white { color: #fff; }
.csp-color-black { color: #000; }

/* ==========================================================================
   Layer/Modal Classes (Common jQuery EasyUI Patterns)
   ========================================================================== */

/* Panel positioning */
.csp-panel-absolute { position: absolute; left: -10000px; top: -10000px; }

/* Window/Mask positioning */
.csp-window-mask { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
}

/* Tooltip positioning */
.csp-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
}

/* Menu positioning */
.csp-menu-hidden {
    position: absolute;
    left: -20000px;
    display: inline-block;
}

/* Progress bar text */
.csp-progress-text {
    width: 100%;
    text-align: center;
}

/* Draggable proxy */
.csp-proxy-hidden {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

/* Resizable handle */
.csp-resize-handle {
    position: absolute;
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.csp-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.csp-hidden { display: none !important; }
.csp-visible { display: block !important; }
.csp-invisible { visibility: hidden !important; }
.csp-visible-inline { visibility: visible !important; }
.csp-hide-text {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

/* ==========================================================================
   RTL Support (Right-to-Left)
   ========================================================================== */

.csp-rtl-float-left { float: right; }
.csp-rtl-float-right { float: left; }
.csp-rtl-margin-left { margin-left: 0; margin-right: auto; }
.csp-rtl-margin-right { margin-right: 0; margin-left: auto; }

/* ==========================================================================
   CSP Grid replacement helpers
   ========================================================================== */

.csp-grid {
	margin-top: 6px;
}

.csp-grid-table {
	width: 100%;
	margin-bottom: 0;
	background: #fff;
}

.csp-grid-table th[data-sortable="true"] {
	cursor: pointer;
	white-space: nowrap;
}

.csp-grid-table th[data-sortable="true"]::after {
	content: "\25BE";
	font-size: 11px;
	margin-left: 6px;
	opacity: 0.45;
}

.csp-grid-table th.sort-asc::after {
	content: "\25B2";
	opacity: 1;
}

.csp-grid-table th.sort-desc::after {
	content: "\25BC";
	opacity: 1;
}

.csp-grid-row.csp-selected {
	background-color: #f2f7ff;
}

.csp-grid-table.is-loading {
	position: relative;
	opacity: 0.7;
}

.csp-grid-pager {
	margin-top: 8px;
}

.csp-grid-meta {
	display: inline-block;
	margin-left: 12px;
	color: #666;
}

.csp-grid-empty,
.csp-grid-error {
	text-align: center;
	padding: 16px 0;
}

.csp-grid-error {
	color: #a94442;
}

.csp-row-primary-action {
	position: relative;
}