/* Highlighting Styles - Consolidated from all pages */
/* This file contains all event, insert, and item highlighting styles */

/* =================================================================== */
/* TABLE CONTAINER STYLES - PREVENT CLIPPING ON HOVER */
/* =================================================================== */

/* Ensure table container has enough padding for hover effects */
.container {
    padding: 8px !important; /* Add padding to prevent clipping */
    overflow: visible !important; /* Allow content to extend beyond container */
}

/* Ensure the table itself doesn't clip content */
#event-table {
    overflow: visible !important;
}

/* =================================================================== */
/* EVENT HIGHLIGHTING STYLES - TAILWIND CARDS */
/* =================================================================== */

tr.event_highlighted {
    background: transparent !important; /* Remove row background - apply to cells instead */
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-left: 4px solid #0d9488 !important;
    margin-bottom: 8px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

/* Apply background to cells, NOT the last column - HIGH SPECIFICITY */
#event-table tr.event_highlighted td:not(:last-child),
tr.event_highlighted td:not(:last-child) {
    background-color: #f5f5f5 !important;
}

/* Ensure first column also has background for event rows */
#event-table tr.event_highlighted td:first-child {
    background-color: #f5f5f5 !important;
}

tr.event_highlighted:hover {
    transform: scale(1.02) !important;
    transform-origin: left center !important; /* Scale from left, not center, to exclude last column */
}

/* Exclude last column from hover transform and shadow */
#event-table tr.event_highlighted:hover td:last-child {
    isolation: isolate !important;
    transform: scale(1) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    filter: none !important;
    transition: none !important;
    background-color: transparent !important;
}

/* Event highlighting - border radius */
#event-table tr.event_highlighted td:not(:last-child) {
    border-radius: 0 !important;
}

#event-table tr.event_highlighted td:nth-child(4) {
    border-radius: 0px 8px 8px 0px !important;
}

/* Event highlighting - leftmost cell border and glow */
#event-table tr.event_highlighted td:nth-child(1) {
    border-left: 4px solid #0d9488 !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* =================================================================== */
/* INSERT HIGHLIGHTING STYLES - TAILWIND CARDS */
/* =================================================================== */

tr.insert_highlighted {
    background: transparent !important; /* Remove row background - apply to cells instead */
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-left: 4px solid #f59e0b !important;
    margin-bottom: 8px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

/* Apply background to cells, NOT the last column - HIGH SPECIFICITY */
#event-table tr.insert_highlighted td:not(:last-child),
tr.insert_highlighted td:not(:last-child) {
    background-color: #f5f5f5 !important;
}

/* Ensure first column also has background for insert rows */
#event-table tr.insert_highlighted td:first-child {
    background-color: #f5f5f5 !important;
}

tr.insert_highlighted:hover {
    transform: scale(1.02) !important;
    transform-origin: left center !important; /* Scale from left, not center, to exclude last column */
}

/* Exclude last column from hover transform and shadow */
#event-table tr.insert_highlighted:hover td:last-child {
    isolation: isolate !important;
    transform: scale(1) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    filter: none !important;
    transition: none !important;
    background-color: transparent !important;
}

/* Insert highlighting - border radius */
#event-table tr.insert_highlighted td:not(:last-child) {
    border: none !important;
    border-radius: 0 !important;
}

#event-table tr.insert_highlighted td:nth-child(4) {
    border-radius: 0px 8px 8px 0px !important;
}

/* Insert highlighting - leftmost cell border and glow */
#event-table tr.insert_highlighted td:nth-child(1) {
    border-left: 4px solid #f59e0b !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* =================================================================== */
/* ITEM HIGHLIGHTING STYLES - TAILWIND CARDS */
/* =================================================================== */

tr.item_highlighted {
    background: transparent !important; /* Remove row background - apply to cells instead */
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-left: 4px solid #991b1b !important;
    margin-bottom: 8px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

/* Apply background to cells, NOT the last column - HIGH SPECIFICITY */
#event-table tr.item_highlighted td:not(:last-child),
tr.item_highlighted td:not(:last-child) {
    background-color: #f5f5f5 !important;
}

/* Ensure first column also has background for item rows */
#event-table tr.item_highlighted td:first-child {
    background-color: #f5f5f5 !important;
}

tr.item_highlighted:hover {
    transform: scale(1.02) !important;
    transform-origin: left center !important; /* Scale from left, not center, to exclude last column */
}

/* Exclude last column from hover transform and shadow */
#event-table tr.item_highlighted:hover td:last-child {
    isolation: isolate !important;
    transform: scale(1) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    filter: none !important;
    transition: none !important;
    background-color: transparent !important;
}

/* Item highlighting - border radius */
#event-table tr.item_highlighted td:not(:last-child) {
    border: none !important;
    border-radius: 0 !important;
}

#event-table tr.item_highlighted td:nth-child(4) {
    border-radius: 0px 8px 8px 0px !important;
}

/* Item highlighting - leftmost cell border and glow */
#event-table tr.item_highlighted td:nth-child(1) {
    border-left: 4px solid #991b1b !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* =================================================================== */
/* DRAG BUTTON STYLING */
/* =================================================================== */

/* Event drag button styling */
tr.event_highlighted .row-button.drag {
    background-color: #0d9488 !important; /* Opaque teal background */
    color: white !important; /* White icon for contrast */
    border: 2px solid #0d9488 !important; /* Teal border */
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4) !important; /* Teal glow */
}

tr.event_highlighted .row-button.drag:hover {
    background-color: rgba(13, 148, 136, 0.8) !important; /* Lighter teal on hover */
    transform: scale(1.05) !important; /* Slight scale effect */
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.9) !important; /* Enhanced glow */
}

/* Insert drag button styling */
tr.insert_highlighted .row-button.drag {
    background-color: #f59e0b !important; /* Opaque yellow background */
    color: #333 !important; /* Dark icon for contrast */
    border: 2px solid #f59e0b !important; /* Yellow border */
    box-shadow: 0 2px 8px rgba(255, 162, 2, 0.4) !important; /* Yellow glow */
}

tr.insert_highlighted .row-button.drag:hover {
    background-color: rgba(245, 158, 11, 0.8) !important; /* Lighter yellow on hover */
    transform: scale(1.05) !important; /* Slight scale effect */
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.9) !important; /* Enhanced glow */
}

/* Item drag button styling */
tr.item_highlighted .row-button.drag {
    background-color: #991b1b !important; /* Opaque red background */
    color: white !important; /* White icon for contrast */
    border: 2px solid #991b1b !important; /* Red border */
    box-shadow: 0 2px 8px rgba(153, 27, 27, 0.4) !important; /* Red glow */
}

tr.item_highlighted .row-button.drag:hover {
    background-color: rgba(153, 27, 27, 0.9) !important; /* Lighter red on hover */
    transform: scale(1.05) !important; /* Slight scale effect */
    box-shadow: 0 4px 12px rgba(235, 30, 30, 0.9) !important; /* Enhanced glow */
}

/* Remove cell borders for all highlighted rows */
tr.event_highlighted td,
tr.insert_highlighted td,
tr.item_highlighted td {
    border: none !important; 
}

/* Last column - transparent */
#event-table tr.event_highlighted td:last-child,
#event-table tr.insert_highlighted td:last-child,
#event-table tr.item_highlighted td:last-child {
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    position: relative !important;
    overflow: visible !important;
}

/* Ensure row buttons in last column are visible */
#event-table td:last-child .row-button,
#event-table td:last-child .row-button.drag,
#event-table td:last-child .row-button.remove {
    position: relative !important;
    z-index: 10 !important;
}

/* =================================================================== */
/* FORM ELEMENT STYLING WITHIN HIGHLIGHTED ROWS */
/* =================================================================== */

/* Form elements - transparent backgrounds to show cell colors */
tr.event_highlighted td:not(:last-child) input,
tr.event_highlighted td:not(:last-child) select,
tr.event_highlighted td:not(:last-child) textarea,
tr.event_highlighted td:not(:last-child) .editable-cell,
tr.event_highlighted td:not(:last-child) .editable-text,
tr.event_highlighted td:not(:last-child) div[contenteditable],
tr.insert_highlighted td:not(:last-child) input,
tr.insert_highlighted td:not(:last-child) select,
tr.insert_highlighted td:not(:last-child) textarea,
tr.insert_highlighted td:not(:last-child) .editable-cell,
tr.insert_highlighted td:not(:last-child) .editable-text,
tr.insert_highlighted td:not(:last-child) div[contenteditable],
tr.item_highlighted td:not(:last-child) input,
tr.item_highlighted td:not(:last-child) .editable-text,
tr.item_highlighted td:not(:last-child) div[contenteditable] {
    background-color: transparent !important;
    border: none !important;
}

/* =================================================================== */
/* SPECIALIZED FORM ELEMENTS */
/* =================================================================== */

/* Shot type select styling for event highlighted rows */
tr.event_highlighted td:not(:last-child) .shot-type-select {
    background-color: transparent !important;
    border: none !important;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 500;
    color: inherit;
    box-shadow: none !important;
    outline: none !important;
}

/* Shot subject styling for event highlighted rows */
tr.event_highlighted td:not(:last-child) .shotSubject {
    background-color: transparent !important;
    border: none !important;
    color: inherit;
    font-weight: 500;
}

/* =================================================================== */
/* SCRIPT MODE SPECIFIC STYLES */
/* =================================================================== */

/* Pointer events for script column in highlighted rows */
tr.item_highlighted td:nth-child(3) *,
tr.insert_highlighted td:nth-child(3) * {
    pointer-events: auto !important;
}

/* Item content editable in script mode */
tr.item_highlighted td:nth-child(3) .item-content {
    pointer-events: auto !important;
    cursor: text !important;
}

/* Insert content inputs editable in script mode */
tr.insert_highlighted td:nth-child(3) input,
tr.insert_highlighted td:nth-child(3) textarea,
tr.insert_highlighted td:nth-child(3) select {
    pointer-events: auto !important;
    cursor: text !important;
}

/* =================================================================== */
/* BUTTON HOVER EFFECTS */
/* =================================================================== */

.button2.addEvent-button:hover {
    background-color: rgba(13, 148, 136, 0.1) !important;
    border-color: #0d9488 !important;
    color: #0d9488 !important;
    transform: scale(1.02) !important;
    transition: all 0.3s ease !important;
}

.button2.addInsert-button:hover {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: #f59e0b !important;
    color: #f59e0b !important;
    transform: scale(1.02) !important;
    transition: all 0.3s ease !important;
}

.button2.addItem-button:hover {
    background-color: rgba(153, 27, 27, 0.1) !important;
    border-color: #991b1b !important;
    color: #991b1b !important;
    transform: scale(1.02) !important;
    transition: all 0.3s ease !important;
}