/* Time Slot Calendar Component Styles */

/* CSS Custom Properties for theming (light/dark mode support) */
:root {
    --tsc-bg-primary: #ffffff;
    --tsc-bg-secondary: #f9fafb;
    --tsc-bg-tertiary: #f3f4f6;
    --tsc-bg-info: #eff6ff;
    --tsc-bg-warning: #fefce8;
    --tsc-bg-warning-alt: #fef3c7;
    --tsc-bg-success: #f0f9ff;
    --tsc-bg-hover: #fafafa;

    --tsc-border-light: #f3f4f6;
    --tsc-border-medium: #e5e7eb;
    --tsc-border-dark: #d1d5db;
    --tsc-border-info: #3b82f6;
    --tsc-border-warning: #fde047;
    --tsc-border-warning-alt: #f59e0b;
    --tsc-border-success: #0ea5e9;

    --tsc-text-primary: #111827;
    --tsc-text-secondary: #374151;
    --tsc-text-tertiary: #6b7280;
    --tsc-text-info: #1e40af;
    --tsc-text-warning: #a16207;
    --tsc-text-warning-dark: #92400e;
    --tsc-text-success: #0369a1;

    --tsc-cube-available: #10b981;
    --tsc-cube-available-border: #059669;
    --tsc-cube-weekend: #8b5cf6;
    --tsc-cube-weekend-border: #7c3aed;
    --tsc-cube-current: #3b82f6;
    --tsc-cube-current-border: #2563eb;
    --tsc-cube-occupied: #ef4444;
    --tsc-cube-occupied-border: #dc2626;
    --tsc-cube-selected: #fbbf24;
    --tsc-cube-selected-border: #f59e0b;

    --tsc-btn-primary: #2563eb;
    --tsc-btn-primary-hover: #1d4ed8;
    --tsc-btn-warning: #d97706;
    --tsc-btn-warning-hover: #b45309;
    --tsc-btn-secondary: #6b7280;
    --tsc-btn-secondary-hover: #4b5563;
    --tsc-btn-danger: #dc2626;
    --tsc-btn-danger-hover: #b91c1c;
    --tsc-btn-danger-alt: #ef4444;
    --tsc-btn-danger-alt-hover: #dc2626;
    --tsc-btn-info: #1e40af;
    --tsc-btn-info-bg: #dbeafe;
    --tsc-btn-info-bg-hover: #bfdbfe;

    --tsc-legend-bg: #e5e7eb;
}

.dark {
    /* Softer, less toxic dark backgrounds */
    --tsc-bg-primary: #1e293b;
    --tsc-bg-secondary: #0f172a;
    --tsc-bg-tertiary: #334155;
    --tsc-bg-info: #1e3a5f;
    --tsc-bg-warning: #451a03;
    --tsc-bg-warning-alt: #422006;
    --tsc-bg-success: #134e4a;
    --tsc-bg-hover: #2d3748;

    /* Muted borders - less harsh contrast */
    --tsc-border-light: #334155;
    --tsc-border-medium: #475569;
    --tsc-border-dark: #64748b;
    --tsc-border-info: #3b82f6;
    --tsc-border-warning: #78716c;
    --tsc-border-warning-alt: #78716c;
    --tsc-border-success: #14b8a6;

    /* Softer text colors - less eye strain */
    --tsc-text-primary: #f1f5f9;
    --tsc-text-secondary: #cbd5e1;
    --tsc-text-tertiary: #94a3b8;
    --tsc-text-info: #7dd3fc;
    --tsc-text-warning: #fbbf24;
    --tsc-text-warning-dark: #fcd34d;
    --tsc-text-success: #5eead4;

    /* More muted cube colors - less vibrant/toxic */
    --tsc-cube-available: #10b981;
    --tsc-cube-available-border: #059669;
    --tsc-cube-weekend: #a78bfa;
    --tsc-cube-weekend-border: #8b5cf6;
    --tsc-cube-current: #60a5fa;
    --tsc-cube-current-border: #3b82f6;
    --tsc-cube-occupied: #f87171;
    --tsc-cube-occupied-border: #ef4444;
    --tsc-cube-selected: #fbbf24;
    --tsc-cube-selected-border: #f59e0b;

    /* Softer button colors */
    --tsc-btn-primary: #60a5fa;
    --tsc-btn-primary-hover: #3b82f6;
    --tsc-btn-warning: #fbbf24;
    --tsc-btn-warning-hover: #f59e0b;
    --tsc-btn-secondary: #64748b;
    --tsc-btn-secondary-hover: #94a3b8;
    --tsc-btn-danger: #f87171;
    --tsc-btn-danger-hover: #ef4444;
    --tsc-btn-danger-alt: #fca5a5;
    --tsc-btn-danger-alt-hover: #f87171;
    --tsc-btn-info: #7dd3fc;
    --tsc-btn-info-bg: #1e3a8a;
    --tsc-btn-info-bg-hover: #1e40af;

    /* Softer legend background */
    --tsc-legend-bg: #475569;
}

/* Wrapper */
.time-slot-calendar-wrapper {
    /* Scoping wrapper, no specific styles needed */
}

/* Main Container */
.time-slot-calendar {
    font-family: var(--font-sans);
    user-select: none;
}

/* Header */
.tsc-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background-color: var(--tsc-bg-secondary);
    border-radius: 8px;
    margin-bottom: 12px;
}

.tsc-header-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tsc-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--tsc-text-secondary);
}

.tsc-select {
    font-size: 14px;
    border: 1px solid var(--tsc-border-dark);
    border-radius: 6px;
    padding: 4px 8px;
    background: var(--tsc-bg-primary);
    color: var(--tsc-text-primary);
}

/* Edit Mode Badge */
.tsc-edit-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--tsc-bg-warning-alt);
    border: 1px solid var(--tsc-border-warning-alt);
    border-radius: 6px;
}

.tsc-edit-badge-icon {
    width: 16px;
    height: 16px;
    color: var(--tsc-text-warning);
}

.tsc-edit-badge-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--tsc-text-warning-dark);
}

/* Timezone Display */
.tsc-timezone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--tsc-text-tertiary);
}

.tsc-timezone-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.tsc-timezone-primary {
    background-color: var(--tsc-btn-info-bg);
    color: var(--tsc-text-info);
}

.tsc-timezone-secondary {
    background-color: var(--tsc-bg-tertiary);
    color: var(--tsc-text-secondary);
}

/* Navigation Buttons */
.tsc-nav-btn {
    padding: 4px;
    color: var(--tsc-text-tertiary);
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 150ms;
}

.tsc-nav-btn:hover {
    color: var(--tsc-text-secondary);
    background-color: var(--tsc-bg-tertiary);
}

.tsc-nav-btn:focus {
    outline: 2px solid var(--tsc-border-info);
    outline-offset: 2px;
}

.tsc-nav-btn-icon {
    width: 16px;
    height: 16px;
}

.tsc-today-btn {
    font-size: 12px;
    padding: 4px 8px;
    color: var(--tsc-btn-primary);
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 150ms;
}

.tsc-today-btn:hover {
    background-color: var(--tsc-btn-info-bg);
    color: var(--tsc-btn-info);
}

.tsc-today-btn:focus {
    outline: 2px solid var(--tsc-border-info);
    outline-offset: 2px;
}

/* Edit Button */
.tsc-edit-btn {
    font-size: 12px;
    padding: 4px 8px;
    color: var(--tsc-btn-info);
    background: var(--tsc-btn-info-bg);
    border: 1px solid var(--tsc-border-info);
    border-radius: 4px;
    cursor: pointer;
    margin-left: 8px;
    transition: all 150ms;
}

.tsc-edit-btn:hover {
    background-color: var(--tsc-btn-info-bg-hover);
    transform: translateY(-1px);
}

.tsc-edit-btn:active {
    transform: translateY(0);
}

.tsc-edit-btn:focus {
    outline: 2px solid var(--tsc-border-info);
    outline-offset: 2px;
}

.tsc-edit-btn-icon {
    width: 12px;
    height: 12px;
    display: inline;
    margin-right: 4px;
}

/* Quick Actions Bar */
.tsc-quick-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--tsc-bg-warning);
    border: 1px solid var(--tsc-border-warning);
    border-radius: 8px;
    margin-bottom: 12px;
}

.tsc-quick-actions-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--tsc-text-warning);
}

.tsc-quick-actions-btn {
    font-size: 12px;
    padding: 4px 8px;
    color: var(--tsc-text-warning);
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 150ms;
}

.tsc-quick-actions-btn:hover {
    background-color: var(--tsc-border-warning);
    transform: translateY(-1px);
}

.tsc-quick-actions-btn:active {
    transform: translateY(0);
}

/* Legend */
.tsc-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--tsc-text-tertiary);
    margin-bottom: 12px;
}

.tsc-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tsc-legend-cube {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.tsc-legend-available { background-color: var(--tsc-cube-available); }
.tsc-legend-weekend { background-color: var(--tsc-cube-weekend); }
.tsc-legend-current { background-color: var(--tsc-cube-current); }
.tsc-legend-occupied { background-color: var(--tsc-cube-occupied); }
.tsc-legend-selected { background-color: var(--tsc-cube-selected); }

/* Calendar Grid */
.tsc-grid {
    border: 1px solid var(--tsc-border-medium);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--tsc-bg-primary);
    margin-bottom: 12px;
}

.tsc-grid-header {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    background-color: var(--tsc-bg-secondary);
    border-bottom: 1px solid var(--tsc-border-medium);
}

.tsc-grid-header-cell {
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tsc-text-tertiary);
}

.tsc-day-header {
    padding: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tsc-text-secondary);
    text-align: center;
    position: relative;
}

.tsc-day-header-day {
    font-weight: 600;
}

.tsc-day-header-date {
    color: var(--tsc-text-tertiary);
}

.tsc-quick-select-btn {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-color: var(--tsc-btn-info-bg);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 200ms;
}

.tsc-quick-select-btn:hover {
    opacity: 1;
    background-color: var(--tsc-btn-info-bg-hover);
}

.tsc-quick-select-btn:focus {
    opacity: 1;
    outline: 2px solid var(--tsc-border-info);
    outline-offset: 2px;
}

/* Time Slots */
.tsc-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    border-bottom: 1px solid var(--tsc-border-light);
    transition: background-color 150ms;
}

.tsc-row:hover {
    background-color: var(--tsc-bg-hover);
}

.tsc-time-cell {
    padding: 6px 8px;
    font-size: 11px;
    color: var(--tsc-text-secondary);
    background-color: var(--tsc-bg-secondary);
    border-right: 1px solid var(--tsc-border-light);
}

.tsc-time-primary {
    font-weight: 600;
    color: var(--tsc-text-info);
    margin-bottom: 1px;
}

.tsc-time-secondary {
    color: var(--tsc-text-tertiary);
    font-size: 10px;
}

.tsc-slot-cell {
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Time Slot Cubes */
.time-slot-cube {
    width: 24px;
    height: 24px;
    border-radius: 2px;
    border: 1px solid;
    margin: 0 auto;
    transition: all 150ms ease;
}

.time-slot-cube[data-clickable="true"] {
    cursor: pointer;
}

.time-slot-cube[data-clickable="true"]:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.time-slot-cube[data-clickable="true"]:active {
    transform: scale(1.05);
}

.time-slot-cube[data-clickable="true"]:focus {
    outline: 2px solid var(--tsc-border-info);
    outline-offset: 2px;
}

/* Cube States */
.tsc-cube-available {
    background-color: var(--tsc-cube-available);
    border-color: var(--tsc-cube-available-border);
}

.tsc-cube-weekend {
    background-color: var(--tsc-cube-weekend);
    border-color: var(--tsc-cube-weekend-border);
}

.tsc-cube-current {
    background-color: var(--tsc-cube-current);
    border-color: var(--tsc-cube-current-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tsc-cube-occupied {
    background-color: var(--tsc-cube-occupied);
    border-color: var(--tsc-cube-occupied-border);
    cursor: not-allowed;
}

.tsc-cube-selected {
    background-color: var(--tsc-cube-selected);
    border-color: var(--tsc-cube-selected-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

/* Action Panel */
.tsc-action-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid;
}

.tsc-action-panel-info {
    background-color: var(--tsc-bg-info);
    border-color: var(--tsc-border-info);
}

.tsc-action-panel-edit {
    background-color: var(--tsc-bg-warning-alt);
    border-color: var(--tsc-border-warning-alt);
}

.tsc-selection-summary {
    font-size: 14px;
    color: var(--tsc-text-info);
}

.tsc-selection-title {
    font-weight: 500;
    margin-bottom: 8px;
}

.tsc-selection-details {
    font-size: 12px;
    line-height: 1.4;
}

.tsc-selection-day {
    margin-bottom: 4px;
    padding: 4px 8px;
    background-color: var(--tsc-bg-primary);
    border-radius: 4px;
}

.tsc-selection-day-time {
    color: var(--tsc-text-info);
    font-weight: 500;
}

.tsc-selection-day-tz {
    color: var(--tsc-text-tertiary);
    font-size: 11px;
}

/* Action Buttons Container */
.tsc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
}

.tsc-actions-left {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Buttons */
.tsc-btn {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 200ms;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tsc-btn-icon {
    width: 12px;
    height: 12px;
}

.tsc-btn-primary {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    background-color: var(--tsc-btn-primary);
    color: white;
    transition: all 200ms;
}

.tsc-btn-primary:hover {
    background-color: var(--tsc-btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tsc-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tsc-btn-primary.is-edit-mode {
    background-color: var(--tsc-btn-warning);
}

.tsc-btn-primary.is-edit-mode:hover {
    background-color: var(--tsc-btn-warning-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tsc-btn-secondary {
    background-color: var(--tsc-btn-secondary);
    color: white;
    transition: all 200ms;
}

.tsc-btn-secondary:hover {
    background-color: var(--tsc-btn-secondary-hover);
    transform: translateY(-1px);
}

.tsc-btn-secondary:active {
    transform: translateY(0);
}

.tsc-btn-danger {
    background-color: var(--tsc-btn-danger);
    color: white;
    transition: all 200ms;
}

.tsc-btn-danger:hover {
    background-color: var(--tsc-btn-danger-hover);
    transform: translateY(-1px);
}

.tsc-btn-danger:active {
    transform: translateY(0);
}

.tsc-btn-danger-alt {
    background-color: var(--tsc-btn-danger-alt);
    color: white;
    transition: all 200ms;
}

.tsc-btn-danger-alt:hover {
    background-color: var(--tsc-btn-danger-alt-hover);
    transform: translateY(-1px);
}

.tsc-btn-danger-alt:active {
    transform: translateY(0);
}

/* Empty State Message */
.tsc-empty-message {
    font-size: 12px;
    color: var(--tsc-text-warning-dark);
    font-style: italic;
    padding: 4px 8px;
    background-color: var(--tsc-bg-primary);
    border-radius: 4px;
}

/* Change Summary */
.tsc-change-summary {
    font-size: 11px;
    color: var(--tsc-text-tertiary);
    padding-top: 8px;
    border-top: 1px solid var(--tsc-border-dark);
}

.tsc-change-added {
    color: var(--tsc-cube-available-border);
}

.tsc-change-removed {
    color: var(--tsc-btn-danger);
}

/* Info Panel */
.tsc-info-panel {
    padding: 12px;
    background-color: var(--tsc-bg-success);
    border: 1px solid var(--tsc-border-success);
    border-radius: 8px;
    margin-bottom: 12px;
}

.tsc-info-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}

.tsc-info-content {
    flex: 1;
}

.tsc-info-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--tsc-text-success);
    margin-bottom: 8px;
}

.tsc-info-title-icon {
    width: 16px;
    height: 16px;
    display: inline;
    margin-right: 6px;
}

.tsc-info-details {
    font-size: 12px;
    color: var(--tsc-text-success);
}

/* History Section */
.tsc-history {
    margin-top: 24px;
}

.tsc-history-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--tsc-text-secondary);
    margin-bottom: 12px;
}

.tsc-history-chevron {
    width: 16px;
    height: 16px;
    transition: transform 200ms;
}

.tsc-history-chevron.is-open {
    transform: rotate(90deg);
}

.tsc-history-badge {
    padding: 1px 6px;
    background-color: var(--tsc-legend-bg);
    color: var(--tsc-text-secondary);
    border-radius: 4px;
    font-size: 11px;
}

.tsc-history-content {
    padding: 16px;
    background-color: var(--tsc-bg-secondary);
    border: 1px solid var(--tsc-border-medium);
    border-radius: 8px;
}

.tsc-history-content[style*="display: none"] {
    display: none;
}

/* Wrapper Note (for unsaved ticket) */
.tsc-wrapper-note {
    padding: 16px;
    background-color: var(--tsc-bg-warning);
    border: 1px solid var(--tsc-border-warning);
    border-radius: 8px;
}

.tsc-wrapper-note-text {
    color: var(--tsc-text-warning-dark);
}

/* Accessibility improvements */
.time-slot-cube:focus-visible {
    outline: 2px solid var(--tsc-border-info);
    outline-offset: 2px;
}

button:focus-visible {
    outline: 2px solid var(--tsc-border-info);
    outline-offset: 2px;
}

/* ============================================
   SCHEDULED TIME SLOTS COMPONENT
   ============================================ */

.scheduled-time-slots {
    font-family: var(--font-sans);
}

.tsc-tz-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--tsc-text-tertiary);
}

.tsc-tz-badge-primary {
    padding: 2px 6px;
    background-color: var(--tsc-btn-info-bg);
    color: var(--tsc-btn-info);
    border-radius: 4px;
    font-weight: 500;
}

.tsc-tz-badge-secondary {
    padding: 2px 6px;
    background-color: var(--tsc-bg-tertiary);
    color: var(--tsc-text-secondary);
    border-radius: 4px;
    font-weight: 500;
}

.tsc-slots-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tsc-slot-card {
    padding: 12px;
    border: 1px solid;
    border-radius: 8px;
}

.tsc-slot-card.is-past {
    background-color: #fef2f2;
    border-color: #fecaca;
}

.dark .tsc-slot-card.is-past {
    background-color: #7f1d1d;
    border-color: #991b1b;
}

.tsc-slot-card.is-today {
    background-color: #eff6ff;
    border-color: var(--tsc-btn-info-bg);
}

.dark .tsc-slot-card.is-today {
    background-color: #1e3a8a;
    border-color: #1e40af;
}

.tsc-slot-card.is-future {
    background-color: var(--tsc-bg-secondary);
    border-color: var(--tsc-border-medium);
}

.tsc-slot-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.tsc-slot-date {
    flex: 1;
}

.tsc-slot-date-text {
    font-weight: 600;
    margin-bottom: 2px;
}

.tsc-slot-date-text.is-past {
    color: #dc2626;
}

.dark .tsc-slot-date-text.is-past {
    color: #f87171;
}

.tsc-slot-date-text.is-today {
    color: var(--tsc-btn-info);
}

.tsc-slot-date-text.is-future {
    color: var(--tsc-text-secondary);
}

.tsc-slot-badge {
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 500;
}

.tsc-slot-badge.is-today {
    background-color: var(--tsc-btn-info);
    color: white;
}

.tsc-slot-badge.is-past {
    background-color: #dc2626;
    color: white;
}

.dark .tsc-slot-badge.is-past {
    background-color: #ef4444;
}

.tsc-slot-times {
    text-align: right;
}

.tsc-slot-time-primary {
    font-weight: 600;
    color: var(--tsc-btn-info);
    font-size: 14px;
}

.tsc-slot-time-primary.is-past {
    color: var(--tsc-text-tertiary);
}

.tsc-slot-time-secondary {
    color: var(--tsc-text-tertiary);
    font-size: 12px;
    margin-top: 1px;
}

.tsc-slot-duration {
    font-size: 11px;
    color: var(--tsc-text-tertiary);
    margin-top: 4px;
}

.tsc-summary {
    margin-top: 12px;
    padding: 8px 12px;
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    font-size: 12px;
}

.dark .tsc-summary {
    background-color: #164e63;
    border-color: #0891b2;
}

.tsc-empty-state {
    padding: 16px;
    background-color: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    text-align: center;
}

.dark .tsc-empty-state {
    background-color: #713f12;
    border-color: #a16207;
}

.tsc-empty-title {
    color: #92400e;
    font-weight: 500;
    margin-bottom: 4px;
}

.dark .tsc-empty-title {
    color: #fbbf24;
}

.tsc-empty-text {
    color: #a16207;
    font-size: 14px;
}

.dark .tsc-empty-text {
    color: #fcd34d;
}

/* ============================================
   TIME SLOT DISPLAY COMPONENT
   ============================================ */

.time-slot-display-wrapper {
    font-family: var(--font-sans);
}

.tsc-display-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 8px;
    border: 1px solid var(--tsc-border-success);
}

.dark .tsc-display-header {
    background: linear-gradient(135deg, #164e63 0%, #155e75 100%);
}

.tsc-display-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tsc-display-icon {
    width: 20px;
    height: 20px;
    color: var(--tsc-border-success);
}

.tsc-display-title-text {
    font-weight: 600;
    color: #0c4a6e;
}

.dark .tsc-display-title-text {
    color: var(--tsc-text-success);
}

.tsc-display-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}

.tsc-display-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #0c4a6e;
}

.dark .tsc-display-stat {
    color: var(--tsc-text-success);
}

.tsc-display-stat-icon {
    width: 16px;
    height: 16px;
}

.tsc-display-grid {
    display: grid;
    gap: 12px;
}

.tsc-display-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid;
    transition: all 0.2s ease;
}

.tsc-display-item.is-past {
    border-color: var(--tsc-border-medium);
    background: var(--tsc-bg-secondary);
}

.tsc-display-item.is-today {
    border-color: #fbbf24;
    background: #fffbeb;
}

.dark .tsc-display-item.is-today {
    background: #713f12;
}

.tsc-display-item.is-future {
    border-color: var(--tsc-border-dark);
    background: var(--tsc-bg-primary);
}

.tsc-display-date-section {
    flex: 0 0 140px;
    padding-right: 16px;
}

.tsc-display-date-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tsc-display-day {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tsc-display-day.is-past {
    color: var(--tsc-text-tertiary);
}

.tsc-display-day.is-future {
    color: var(--tsc-text-tertiary);
}

.tsc-display-day-num {
    font-size: 18px;
    font-weight: 700;
    margin: 2px 0;
}

.tsc-display-day-num.is-past {
    color: var(--tsc-text-tertiary);
}

.tsc-display-day-num.is-today {
    color: #f59e0b;
}

.tsc-display-day-num.is-future {
    color: var(--tsc-text-primary);
}

.tsc-display-month {
    font-size: 12px;
}

.tsc-display-month.is-past {
    color: var(--tsc-text-tertiary);
}

.tsc-display-month.is-future {
    color: var(--tsc-text-tertiary);
}

.tsc-display-time-section {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tsc-display-time-range {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
}

.tsc-display-time-box {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
}

.tsc-display-time-box.is-past {
    background: var(--tsc-bg-tertiary);
    color: var(--tsc-text-tertiary);
}

.tsc-display-time-box.is-future {
    background: var(--tsc-btn-info-bg);
    color: var(--tsc-btn-info);
}

.tsc-display-arrow {
    width: 16px;
    height: 16px;
}

.tsc-display-arrow.is-past {
    color: var(--tsc-text-tertiary);
}

.tsc-display-arrow.is-future {
    color: var(--tsc-text-tertiary);
}

.tsc-display-duration {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.tsc-display-duration.is-past {
    background: var(--tsc-border-medium);
    color: var(--tsc-text-tertiary);
}

.tsc-display-duration.is-weekend {
    background: #f3e8ff;
    color: #7c3aed;
}

.dark .tsc-display-duration.is-weekend {
    background: #581c87;
}

.tsc-display-duration.is-weekday {
    background: #ecfdf5;
    color: #059669;
}

.dark .tsc-display-duration.is-weekday {
    background: #064e3b;
}

.tsc-display-status-section {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.tsc-display-status-badge {
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.tsc-display-status-past {
    background: var(--tsc-bg-tertiary);
    color: var(--tsc-text-tertiary);
}

.tsc-display-status-today {
    background: #fef3c7;
    color: #d97706;
}

.tsc-display-status-upcoming {
    background: var(--tsc-btn-info-bg);
    color: #2563eb;
}

.tsc-display-status-weekend {
    background: #f3e8ff;
    color: #7c3aed;
}

.dark .tsc-display-status-weekend {
    background: #581c87;
}

.tsc-display-empty {
    text-align: center;
    padding: 32px;
    background: var(--tsc-bg-secondary);
    border: 2px dashed var(--tsc-border-dark);
    border-radius: 8px;
}

.tsc-display-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--tsc-border-dark);
    margin: 0 auto 12px;
}

.tsc-display-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--tsc-text-secondary);
    margin-bottom: 4px;
}

.tsc-display-empty-text {
    font-size: 14px;
    color: var(--tsc-text-tertiary);
    margin-bottom: 16px;
}

.tsc-display-empty-instructions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 300px;
    margin: 0 auto;
}

.tsc-display-empty-instruction {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}

.dark .tsc-display-empty-instruction {
    color: var(--tsc-text-tertiary);
}

.tsc-display-empty-instruction-icon {
    width: 14px;
    height: 14px;
    color: var(--tsc-border-success);
}

/* ============================================
   TIME SLOT CHANGE HISTORY COMPONENT
   ============================================ */

.time-slot-change-history {
    font-family: var(--font-sans);
}

.tsc-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tsc-history-item {
    padding: 12px;
    border: 1px solid var(--tsc-border-medium);
    border-radius: 8px;
    background-color: var(--tsc-bg-primary);
}

.tsc-history-item.is-recent {
    background-color: #f0f9ff;
}

.dark .tsc-history-item.is-recent {
    background-color: #1e3a8a;
}

.tsc-history-layout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tsc-history-icon-wrapper {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tsc-history-icon-wrapper.action-created {
    background-color: rgba(16, 185, 129, 0.2);
}

.tsc-history-icon-wrapper.action-updated {
    background-color: rgba(245, 158, 11, 0.2);
}

.tsc-history-icon-wrapper.action-deleted {
    background-color: rgba(239, 68, 68, 0.2);
}

.tsc-history-icon {
    width: 16px;
    height: 16px;
}

.tsc-history-icon.action-created {
    color: #10b981;
}

.tsc-history-icon.action-updated {
    color: #f59e0b;
}

.tsc-history-icon.action-deleted {
    color: #ef4444;
}

.tsc-history-details {
    flex: 1;
    min-width: 0;
}

.tsc-history-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.tsc-history-user {
    font-weight: 600;
    color: var(--tsc-text-secondary);
    font-size: 14px;
}

.tsc-history-action {
    color: var(--tsc-text-tertiary);
    font-size: 12px;
}

.tsc-history-new-badge {
    padding: 1px 6px;
    background-color: #10b981;
    color: white;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.tsc-history-description {
    color: var(--tsc-text-tertiary);
    font-size: 13px;
    margin-bottom: 8px;
}

.tsc-history-time-details {
    background-color: var(--tsc-bg-secondary);
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
}

.tsc-history-time-comparison {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.tsc-history-time-before,
.tsc-history-time-after {
    display: flex;
    flex-direction: column;
}

.tsc-history-time-label {
    color: var(--tsc-text-tertiary);
    font-weight: 500;
    margin-bottom: 2px;
}

.tsc-history-time-value {
    font-weight: 600;
}

.tsc-history-time-value.is-old {
    color: #dc2626;
}

.tsc-history-time-value.is-new {
    color: #10b981;
}

.tsc-history-time-value.is-deleted {
    color: #dc2626;
    text-decoration: line-through;
}

.tsc-history-time-tz {
    color: var(--tsc-text-tertiary);
    font-size: 11px;
}

.tsc-history-time-tz.is-deleted {
    text-decoration: line-through;
}

.tsc-history-time-arrow {
    color: var(--tsc-text-tertiary);
    align-self: center;
}

.tsc-history-timestamp {
    margin-top: 6px;
    color: var(--tsc-text-tertiary);
    font-size: 11px;
}

.tsc-history-empty {
    padding: 24px;
    text-align: center;
    background-color: var(--tsc-bg-secondary);
    border: 1px solid var(--tsc-border-medium);
    border-radius: 8px;
}

.tsc-history-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--tsc-border-dark);
    margin: 0 auto 12px;
}

.tsc-history-empty-title {
    color: var(--tsc-text-tertiary);
    font-weight: 500;
    margin-bottom: 4px;
}

.tsc-history-empty-text {
    color: var(--tsc-text-tertiary);
    font-size: 14px;
}

/* Pulse animation for "today" badge */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.tsc-display-status-today {
    animation: pulse 2s infinite;
}

/* ============================================
   TICKET TIMELINE CALENDAR GRID
   ============================================ */

.tsc-calendar-wrapper {
    background: var(--tsc-bg-primary);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.tsc-calendar-header {
    display: grid;
    grid-template-columns: 120px 120px repeat(7, 1fr);
    background-color: var(--tsc-bg-secondary);
    border-bottom: 1px solid var(--tsc-border-medium);
}

.tsc-calendar-tz-cell {
    padding: 12px 8px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border-right: 1px solid var(--tsc-border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.tsc-calendar-tz-ukraine {
    color: #3b82f6;
}

.tsc-calendar-tz-newyork {
    color: #10b981;
}

.tsc-calendar-tz-label {
    font-size: 10px;
    opacity: 0.7;
}

.tsc-calendar-day-cell {
    padding: 12px 8px;
    text-align: center;
    border-right: 1px solid var(--tsc-border-medium);
}

.tsc-calendar-day-cell.is-today {
    background-color: var(--tsc-btn-info-bg);
    color: #1d4ed8;
}

.tsc-calendar-day-name {
    font-size: 13px;
    font-weight: 500;
}

.tsc-calendar-day-date {
    font-size: 12px;
    margin-top: 2px;
}

.tsc-calendar-quick-btn {
    font-size: 10px;
    padding: 2px 6px;
    margin-top: 4px;
    color: var(--tsc-text-tertiary);
    background: none;
    border: 1px solid var(--tsc-border-dark);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 150ms;
}

.tsc-calendar-quick-btn:hover {
    background-color: var(--tsc-bg-tertiary);
}

.tsc-calendar-body {
    display: grid;
    grid-template-columns: 120px 120px repeat(7, 1fr);
}

.tsc-calendar-time-cell {
    padding: 8px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border-right: 1px solid var(--tsc-border-medium);
    border-bottom: 1px solid var(--tsc-border-light);
}

.tsc-calendar-time-ukraine {
    color: #3b82f6;
    background-color: #fafafa;
}

.dark .tsc-calendar-time-ukraine {
    background-color: var(--tsc-bg-tertiary);
}

.tsc-calendar-time-newyork {
    color: #10b981;
    background-color: #f0fdf4;
}

.dark .tsc-calendar-time-newyork {
    background-color: var(--tsc-bg-tertiary);
}

.tsc-calendar-slot {
    min-height: 32px;
    padding: 2px 4px;
    border-right: 1px solid var(--tsc-border-medium);
    border-bottom: 1px solid var(--tsc-border-light);
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    overflow: hidden;
    transition: opacity 150ms;
}

.tsc-calendar-slot.is-clickable {
    cursor: pointer;
}

.tsc-calendar-slot.is-clickable:hover {
    opacity: 0.8;
}

.tsc-calendar-slot.is-selected {
    background-color: var(--tsc-btn-info-bg);
    border-left: 2px solid var(--tsc-border-info);
    color: var(--tsc-btn-info);
}

.tsc-calendar-slot.is-current {
    background-color: var(--tsc-cube-current);
    border-left: 2px solid var(--tsc-cube-current-border);
    color: white;
}

.tsc-calendar-slot.is-occupied {
    background-color: #fee2e2;
    border-left: 2px solid var(--tsc-cube-occupied-border);
    color: var(--tsc-cube-occupied-border);
    cursor: not-allowed;
}

.dark .tsc-calendar-slot.is-occupied {
    background-color: #7f1d1d;
}

.tsc-calendar-slot.is-empty {
    background-color: transparent;
    border-left: 2px solid var(--tsc-border-medium);
    color: var(--tsc-text-tertiary);
}

.tsc-calendar-slot-text {
    font-weight: 500;
    word-break: break-word;
    max-width: 100%;
}

.tsc-calendar-slot-dot {
    width: 6px;
    height: 6px;
    background-color: var(--tsc-cube-current);
    border-radius: 50%;
}

.tsc-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding: 12px 16px;
    margin-top: 16px;
    background-color: var(--tsc-bg-secondary);
    border-radius: 8px;
    font-size: 12px;
}

.tsc-calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tsc-calendar-legend-box {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border-left: 2px solid;
}

.tsc-calendar-legend-box.is-selected {
    background-color: var(--tsc-btn-info-bg);
    border-color: var(--tsc-border-info);
}

.tsc-calendar-legend-box.is-current {
    background-color: #dcfce7;
    border-color: #16a34a;
}

.dark .tsc-calendar-legend-box.is-current {
    background-color: #14532d;
}

.tsc-calendar-legend-box.is-occupied {
    background-color: #fee2e2;
    border-color: var(--tsc-cube-occupied-border);
}

.dark .tsc-calendar-legend-box.is-occupied {
    background-color: #7f1d1d;
}

.tsc-calendar-legend-text {
    color: var(--tsc-text-secondary);
}

.tsc-calendar-legend-description {
    color: var(--tsc-text-tertiary);
}

.tsc-calendar-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--tsc-text-tertiary);
}

.tsc-calendar-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    opacity: 0.5;
}

.tsc-calendar-empty-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--tsc-text-secondary);
}

.tsc-calendar-empty-text {
    font-size: 14px;
    max-width: 400px;
    margin: 0 auto;
}

/* Quick actions for calendar */
.tsc-calendar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background-color: var(--tsc-bg-warning);
    border: 1px solid var(--tsc-border-warning);
    border-radius: 8px;
    margin-bottom: 16px;
}

.tsc-calendar-actions-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tsc-calendar-actions-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--tsc-text-warning);
}

.tsc-calendar-actions-clear {
    font-size: 12px;
    padding: 4px 8px;
    color: var(--tsc-text-warning);
    background: none;
    border: 1px solid #fbbf24;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 150ms;
}

.tsc-calendar-actions-clear:hover {
    background-color: var(--tsc-border-warning);
}

.tsc-calendar-actions-right {
    display: flex;
    gap: 8px;
}

.tsc-calendar-actions-apply {
    font-size: 12px;
    padding: 6px 12px;
    color: white;
    background-color: #059669;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 150ms;
}

.tsc-calendar-actions-apply:hover {
    background-color: #047857;
}

.tsc-calendar-actions-delete {
    font-size: 12px;
    padding: 6px 12px;
    color: var(--tsc-btn-danger);
    background: none;
    border: 1px solid var(--tsc-btn-danger);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 150ms;
}

.tsc-calendar-actions-delete:hover {
    background-color: #fef2f2;
}

.dark .tsc-calendar-actions-delete:hover {
    background-color: #7f1d1d;
}

.tsc-calendar-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: var(--tsc-bg-tertiary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.tsc-calendar-info-text {
    font-size: 13px;
    color: var(--tsc-text-tertiary);
}

/* ============================================
   Action Buttons - Save Changes and Cancel
   ============================================ */

/* Base action button styles */
.tsc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 200ms ease;
    border: none;
    outline: none;
}

.tsc-action-btn:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.tsc-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Save Changes Button */
.tsc-action-btn-save {
    background-color: #059669;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tsc-action-btn-save:hover:not(:disabled) {
    background-color: #047857;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
    transform: translateY(-1px);
}

.tsc-action-btn-save:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tsc-action-btn-save:disabled {
    background-color: #059669;
}

/* Cancel Button */
.tsc-action-btn-cancel {
    background-color: #ffffff;
    color: #4b5563;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tsc-action-btn-cancel:hover:not(:disabled) {
    background-color: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tsc-action-btn-cancel:active:not(:disabled) {
    background-color: #f3f4f6;
}

.tsc-action-btn-cancel:disabled {
    background-color: #ffffff;
    color: #4b5563;
}

/* Dark Mode Styles */
.dark .tsc-action-btn-save {
    background-color: #10b981;
    color: #ffffff;
}

.dark .tsc-action-btn-save:hover:not(:disabled) {
    background-color: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.dark .tsc-action-btn-save:disabled {
    background-color: #10b981;
}

.dark .tsc-action-btn-cancel {
    background-color: #374151;
    color: #d1d5db;
    border-color: #4b5563;
}

.dark .tsc-action-btn-cancel:hover:not(:disabled) {
    background-color: #4b5563;
    border-color: #6b7280;
    color: #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark .tsc-action-btn-cancel:active:not(:disabled) {
    background-color: #374151;
}

.dark .tsc-action-btn-cancel:disabled {
    background-color: #374151;
    color: #d1d5db;
}

/* Button Icon */
.tsc-action-btn-icon {
    width: 16px;
    height: 16px;
}

/* Spinner Animation */
@keyframes tsc-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.tsc-action-btn-spinner {
    animation: tsc-spin 1s linear infinite;
}

/* ============================================
   Manage Selected Ticket Section
   ============================================ */

/* Ticket Management Container */
.tsc-ticket-management {
    background-color: var(--tsc-bg-primary);
    border: 1px solid var(--tsc-border-medium);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    overflow: hidden;
    margin-top: 15px;
}

/* Toggle Header Button */
.tsc-ticket-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.tsc-ticket-header:hover {
    background-color: var(--tsc-bg-hover);
}

.tsc-ticket-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tsc-ticket-header-icon {
    width: 20px;
    height: 20px;
    color: var(--tsc-text-tertiary);
}

.tsc-ticket-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--tsc-text-primary);
}

.tsc-ticket-header-chevron {
    width: 20px;
    height: 20px;
    color: var(--tsc-text-tertiary);
    transition: transform 200ms ease;
}

.tsc-ticket-header-chevron.is-open {
    transform: rotate(180deg);
}

/* Ticket Management Content */
.tsc-ticket-content {
    padding: 24px;
    border-top: 1px solid var(--tsc-border-medium);
}

/* Form Grid */
.tsc-ticket-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .tsc-ticket-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tsc-ticket-form-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Form Field */
.tsc-ticket-field {
    display: flex;
    flex-direction: column;
}

.tsc-ticket-field.full-width {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .tsc-ticket-field.span-2 {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .tsc-ticket-field.span-4 {
        grid-column: span 4;
    }
}

/* Form Label */
.tsc-ticket-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tsc-text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Form Input */
.tsc-ticket-input,
.tsc-ticket-select {
    width: 100%;
    font-size: 14px;
    padding: 8px 12px;
    border: 1px solid var(--tsc-border-dark);
    border-radius: 8px;
    background-color: var(--tsc-bg-primary);
    color: var(--tsc-text-primary);
    transition: all 200ms ease;
}

/* Specific styling for date inputs */
.tsc-ticket-input[type="date"] {
    color: #111827;
    background-color: #ffffff;
}

.dark .tsc-ticket-input[type="date"] {
    color: #f1f5f9;
    background-color: #1e293b;
    color-scheme: dark;
}

.tsc-ticket-input:focus,
.tsc-ticket-select:focus {
    outline: none;
    border-color: var(--tsc-border-info);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tsc-ticket-input:hover:not(:focus),
.tsc-ticket-select:hover:not(:focus) {
    border-color: var(--tsc-text-tertiary);
}

/* Assignees Container */
.tsc-ticket-assignees {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 128px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--tsc-border-dark);
    border-radius: 8px;
    background-color: var(--tsc-bg-secondary);
}

/* Assignee Checkbox Label */
.tsc-ticket-assignee-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    background-color: var(--tsc-bg-primary);
    transition: all 200ms ease;
}

.tsc-ticket-assignee-label:hover {
    border-color: var(--tsc-border-medium);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tsc-ticket-assignee-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid var(--tsc-border-dark);
    cursor: pointer;
    accent-color: var(--tsc-btn-primary);
}

.tsc-ticket-assignee-name {
    font-weight: 500;
    color: var(--tsc-text-secondary);
}

/* Action Footer */
.tsc-ticket-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--tsc-border-medium);
}

@media (min-width: 640px) {
    .tsc-ticket-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* Save Status Indicator */
.tsc-ticket-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--tsc-text-tertiary);
}

.tsc-ticket-hint-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Action Buttons Container */
.tsc-ticket-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

@media (min-width: 640px) {
    .tsc-ticket-actions {
        width: auto;
    }
}

.tsc-ticket-actions .tsc-action-btn {
    flex: 1;
}

@media (min-width: 640px) {
    .tsc-ticket-actions .tsc-action-btn {
        flex: 0 0 auto;
    }
}

/* Dark Mode Overrides */
.dark .tsc-ticket-management {
    background-color: var(--tsc-bg-secondary);
    border-color: var(--tsc-border-medium);
}

.dark .tsc-ticket-header:hover {
    background-color: var(--tsc-bg-tertiary);
}

.dark .tsc-ticket-assignees {
    background-color: var(--tsc-bg-tertiary);
}

.dark .tsc-ticket-assignee-label {
    background-color: var(--tsc-bg-secondary);
}

.dark .tsc-ticket-assignee-label:hover {
    border-color: var(--tsc-border-dark);
}