/* Timesheet styles with Knesset design language */
/* CONSOLIDATED VERSION - All form styling included, conflicts resolved */
/* FIXED Z-INDEX ISSUES FOR TABLE BUTTONS AND STICKY HEADER */

/* Import fonts similar to Knesset style */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Global RTL and base styles */
html, body {
    direction: rtl;
    color: #666;
    background-color: #f5f5f5;
    font-family: 'SemanticaMedium', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* Knesset color variables */
:root {
    --knesset-primary: #5b9bbd;
    --knesset-primary-hover: #5893b3;
    --knesset-secondary: #77b4c8;
    --knesset-light-blue: #d9f6ff;
    --knesset-border: #c2c6c8;
    --knesset-background: #f7f7f7;
    --knesset-white: #ffffff;
    --knesset-text: #333333;
    --knesset-text-light: #666666;
    --knesset-success: #28a745;
    --knesset-warning: #ffc107;
    --knesset-danger: #dc3545;
    --knesset-logo-text: #464646;
}

/* =============================================================================
   CONSOLIDATED FORM STYLING - ALL FORM ELEMENTS
   ============================================================================= */

/* Form Groups - Universal styling for all forms */
.form-group {
    display: flex;
    flex-direction: column;
    text-align: right;
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* Form Labels - Universal styling */
.form-group label {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--knesset-primary);
    font-size: 14px;
    display: block;
    font-family: 'SemanticaMedium', 'Arial Hebrew', Arial, sans-serif;
    text-align: right;
}

/* UNIFIED INPUT AND SELECT STYLING */
.form-group input,
.form-group select,
.tab-pane .form-group input,
.tab-pane .form-group select,
input,
select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e8f4f8;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: var(--knesset-white);
    color: var(--knesset-text);
    box-sizing: border-box;
    height: 48px;
    direction: rtl;
    text-align: right;
    font-family: 'SemanticaMedium', 'Arial Hebrew', Arial, sans-serif !important;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

/* Focus states - Universal */
.form-group input:focus,
.form-group select:focus,
.tab-pane .form-group input:focus,
.tab-pane .form-group select:focus,
input:focus,
select:focus {
    outline: none;
    border-color: var(--knesset-primary);
    box-shadow: 0 0 0 3px rgba(91, 155, 189, 0.1);
    background-color: #f8fcff;
}

/* Select styling - FIXED RTL with universal application */
.form-group select,
.tab-pane select,
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b9bbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 40px;
    padding-right: 16px;
}

/* Date input styling - FIXED RTL with universal application */
.form-group input[type="date"],
.tab-pane input[type="date"],
input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b9bbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    padding-left: 12px;
}

/* Native calendar picker - FIXED RTL with universal application */
.form-group input[type="date"]::-webkit-calendar-picker-indicator,
.tab-pane input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
    position: absolute;
    right: 12px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: transparent;
    color: transparent;
    z-index: 2;
}

/* Button Container - Universal styling */
.button-container,
.tabs-button-container {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-direction: row-reverse;
    margin-top: 16px;
}

/* Date Range Info - Universal styling */
.date-range-info,
.tabs-date-range-info {
    background: linear-gradient(135deg, var(--knesset-light-blue), #e8f4f8);
    color: var(--knesset-text);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid var(--knesset-border);
    text-align: center;
    margin-top: 16px;
    margin-bottom: 20px;
    font-family: 'SemanticaMedium', 'Arial Hebrew', Arial, sans-serif;
}

/* Enhanced styling for hierarchical Knesset period select */
#knessetPeriod {
    font-family: 'SemanticaMedium', Arial, sans-serif !important;
    min-width: 250px; /* Ensure enough width for longer text */
}

#knessetPeriod option {
    padding: 8px 12px;
    font-size: 14px;
    direction: rtl;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis for very long text */
}

/* Plenum header styling (disabled options) */
#knessetPeriod option:disabled {
    background-color: #f0f8ff !important;
    color: var(--knesset-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--knesset-border);
    padding: 8px 12px !important;
}

/* Assembly options styling */
#knessetPeriod option:not(:disabled) {
    background-color: var(--knesset-white) !important;
    color: var(--knesset-text) !important;
    padding-right: 20px !important;
    border-left: 3px solid var(--knesset-light-blue);
    font-size: 13px !important; /* Slightly smaller for longer text */
    max-width: 100%;
}

/* Hover effect for assembly options */
#knessetPeriod option:not(:disabled):hover {
    background-color: var(--knesset-light-blue) !important;
}

/* Selected option styling */
#knessetPeriod option:not(:disabled):checked {
    background-color: var(--knesset-primary) !important;
    color: var(--knesset-white) !important;
}

/* Disabled state for Knesset period select */
#knessetPeriod:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f5f5f5;
    color: #999;
}

/* Form validation styling */
.form-group.has-error input,
.form-group.has-error select {
    border-color: var(--knesset-danger);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.form-group.has-success input,
.form-group.has-success select {
    border-color: var(--knesset-success);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

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

/* Enhanced button styles with Knesset design */
button,
.btn-primary,
.btn-secondary {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    font-family: 'SemanticaMedium', 'Arial Hebrew', Arial, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    direction: rtl;
}

/* Remove the problematic hover effect that moves icons */
button:before,
.btn-primary:before,
.btn-secondary:before {
    display: none;
}

/* Primary button (search/filter) */
.btn-primary {
    background: linear-gradient(135deg, var(--knesset-primary), var(--knesset-primary-hover));
    color: var(--knesset-white);
    box-shadow: 0 4px 12px rgba(91, 155, 189, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--knesset-primary-hover), #4a8ba8);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(91, 155, 189, 0.4);
}

/* Secondary button (reset) */
.btn-secondary {
    background: linear-gradient(135deg, var(--knesset-text-light), #5a5a5a);
    color: var(--knesset-white);
    box-shadow: 0 4px 12px rgba(102, 102, 102, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #5a5a5a, #4a4a4a);
    transform: translateY(-2px);
}

/* =============================================================================
   FILTER FORM STYLING
   ============================================================================= */

/* Filter form with Knesset styling */
.filter-form {
    background: linear-gradient(135deg, var(--knesset-white), var(--knesset-background));
    padding: 24px;
    margin-bottom: 15px;
    border: 1px solid var(--knesset-border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    direction: rtl;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.filter-form .col-span-full {
    grid-column: 1 / -1;
    margin-top: 8px;
}

/* Filter form title */
.filter-form-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--knesset-primary);
    margin-bottom: 20px;
    text-align: right;
    border-bottom: 2px solid var(--knesset-primary);
    padding-bottom: 8px;
}

/* =============================================================================
   SELECT2 STYLING
   ============================================================================= */

/* Enhanced Select2 styling with Knesset design */
.select2-container {
    width: 100% !important;
    direction: rtl !important;
}

.select2-container--default .select2-selection--single {
    height: 48px !important;
    border: 2px solid #e8f4f8 !important;
    border-radius: 6px !important;
    background: var(--knesset-white) !important;
    padding: 0 !important;
    direction: rtl !important;
    transition: all 0.3s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b9bbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 16px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--knesset-text) !important;
    line-height: 44px !important;
    padding-right: 16px !important;
    padding-left: 40px !important;
    font-size: 14px !important;
    text-align: right !important;
    direction: rtl !important;
    font-family: 'SemanticaMedium', 'Arial Hebrew', Arial, sans-serif !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--knesset-primary) !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 189, 0.1) !important;
}

.select2-dropdown {
    border: 2px solid var(--knesset-primary) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    direction: rtl !important;
}

.select2-container--default .select2-results__option {
    padding: 12px 16px !important;
    font-size: 14px !important;
    text-align: right !important;
    direction: rtl !important;
    transition: background-color 0.2s ease !important;
    font-family: 'SemanticaMedium', 'Arial Hebrew', Arial, sans-serif !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(135deg, var(--knesset-primary), var(--knesset-primary-hover)) !important;
    color: white !important;
}

/* =============================================================================
   EXPORT BUTTONS
   ============================================================================= */

/* Export buttons with enhanced styling */
.export-buttons {
    display: flex;
    gap: 12px;
    padding: 0;
    background: none;
    border: none;
    border-top: none;
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.btn-export {
    padding: 10px 18px;
    border: 2px solid var(--knesset-primary);
    background: var(--knesset-white);
    color: var(--knesset-primary);
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: 'SemanticaMedium', 'Arial Hebrew', Arial, sans-serif;
}

.btn-export:hover {
    background: var(--knesset-primary);
    color: var(--knesset-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 155, 189, 0.3);
}

.btn-export-pdf:hover {
    background: #dc3545;
    color: var(--knesset-white);
    border-color: #dc3545;
}

.btn-export-excel:hover {
    background: #28a745;
    color: var(--knesset-white);
    border-color: #28a745;
}

.btn-export i {
    font-size: 14px;
}

/* =============================================================================
   LOADING STATES - FIXED TO PREVENT KNESSET PERIOD SPINNING
   ============================================================================= */

/* ONLY knessetNumber select can have spinning animation */
#knessetNumber.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b9bbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c.72 0 1.42.08 2.1.24'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 16px !important;
    animation: spin 1s linear infinite;
    padding-left: 40px !important;
}

/* NEVER allow knessetPeriod to spin - always use dropdown arrow */
#knessetPeriod {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b9bbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 16px !important;
    /* NO ANIMATION EVER */
}

/* Override any loading class applied to knessetPeriod */
#knessetPeriod.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b9bbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 16px !important;
    /* NO ANIMATION - just static dropdown arrow */
    animation: none !important;
    padding-left: 40px !important;
}

/* Enhanced loader with Knesset colors */
.loader {
    border: 3px solid var(--knesset-background);
    border-top: 3px solid var(--knesset-primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

/* Button loading state */
.btn-loading {
    position: relative;
    color: transparent;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    color: var(--knesset-white);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =============================================================================
   HEADER STYLES
   ============================================================================= */

/* Header styles inspired by Knesset */
.timesheet-header {
    background-color: var(--knesset-white);
    border-bottom: 1px solid var(--knesset-border);
    -webkit-box-shadow: 0 4px 6px -6px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 4px 6px -6px rgba(0,0,0,0.1);
    box-shadow: 0 4px 6px -6px rgba(0,0,0,0.1);
    padding: 15px 0;
    margin-bottom: 20px;
}

.timesheet-header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.knesset-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.knesset-logo {
    width: 50px;
    height: auto;
}

.knesset-text {
    font-family: 'SemanticaCondBold', Arial, sans-serif;
    font-size: 14px;
    color: var(--knesset-logo-text);
    text-align: center;
}

.timesheet-title {
    font-size: 26px;
    line-height: 1.2;
    color: var(--knesset-primary);
    font-weight: 700;
    margin: 0;
    text-align: right;
}

.timesheet-subtitle {
    font-size: 16px;
    color: var(--knesset-text-light);
    margin: 5px 0 0 0;
}

/* =============================================================================
   MAIN CONTAINER AND LAYOUT
   ============================================================================= */

/* Main container with Knesset styling */
.timesheet-main {
    background-color: var(--knesset-white);
    margin: 20px auto;
    max-width: 1200px;
    border: 1px solid var(--knesset-border);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Table container */
.table-container {
    overflow-x: auto;
    background: var(--knesset-white);
    border: 1px solid var(--knesset-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative; /* Establish stacking context */
}

/* Table header */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--knesset-white), var(--knesset-background));
    border-bottom: 1px solid var(--knesset-border);
}

.table-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--knesset-primary);
    margin: 0;
    text-align: right;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* =============================================================================
   TABLE STYLING - FIXED Z-INDEX HIERARCHY
   ============================================================================= */

/* Enhanced table styles with Knesset design */
.timesheet-table {
    width: 100%;
    border-collapse: collapse;
    direction: rtl;
    font-family: 'SemanticaCondBold', Arial, sans-serif;
    background-color: var(--knesset-white);
    position: relative; /* Establish stacking context */
    z-index: 1; /* Base table z-index */
}

/* FIXED: Table header with proper high z-index for sticky positioning */
.timesheet-table th {
    background: linear-gradient(135deg, var(--knesset-primary), var(--knesset-primary-hover));
    color: var(--knesset-white);
    padding: 16px 12px;
    text-align: right;
    font-weight: 600;
    font-size: 15px;
    border: none;
    position: sticky;
    top: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    z-index: 100; /* HIGH z-index to stay above all table content */
}

.timesheet-table th:first-child {
    border-radius: 0 0px 0 0;
}

.timesheet-table th:last-child {
    border-radius: 0px 0 0 0;
}

/* FIXED: Table cells with controlled z-index */
.timesheet-table td {
    padding: 12px;
    border-bottom: 1px solid #e8f4f8;
    text-align: right !important;
    color: var(--knesset-text);
    transition: background-color 0.3s ease;
    position: relative; /* Establish stacking context */
    z-index: 1; /* Base cell z-index - BELOW header */
}

/* Specifically for the time values, ensure they're right-aligned */
.timesheet-table td:nth-child(2) {
    text-align: right !important;
    direction: rtl !important;
}

/* For the action buttons/links, ensure proper RTL layout */
.timesheet-table td:first-child {
    text-align: center !important;
}

/* FIXED: Table row hover with controlled z-index */
.timesheet-table tr:hover {
    background: linear-gradient(135deg, #f8fcff, #f0f8ff);
    position: relative;
    z-index: 1; /* Keep below header */
}

.timesheet-table tr:nth-child(even) {
    background-color: #fafcff;
}

/* =============================================================================
   CELL CONTENT AND BUTTON Z-INDEX FIXES
   ============================================================================= */

/* FIXED: Cell content wrapper with controlled z-index */
.cell-content {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start !important;
    text-align: right !important;
    direction: rtl !important;
    font-size: 16px;
    position: relative;
    z-index: 1; /* Same as cell, below header */
}

/* FIXED: View details button with controlled z-index */
.view-details {
    background: linear-gradient(135deg, var(--knesset-primary), var(--knesset-primary-hover));
    color: var(--knesset-white);
    font-family: 'SemanticaCondBold', Arial, sans-serif !important;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative; /* Controlled positioning */
    z-index: 2; /* Slightly above cell content but BELOW header */
}

.view-details:hover {
    background: linear-gradient(135deg, var(--knesset-primary-hover), #4a8ba8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 155, 189, 0.3);
    z-index: 3; /* Higher on hover but still BELOW header */
}

.view-details i {
    font-size: 12px;
}

/* FIXED: Go-to-site button with matching z-index */
.go-to-site,
.btn-site-link {
    background: linear-gradient(135deg, var(--knesset-secondary), #6ba8c0);
    color: var(--knesset-white);
    font-family: 'SemanticaCondBold', Arial, sans-serif !important;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative; /* Controlled positioning */
    z-index: 2; /* Same as view-details - below header */
    text-decoration: none; /* If it's a link */
}

.go-to-site:hover,
.btn-site-link:hover {
    background: linear-gradient(135deg, #6ba8c0, #5a9bb5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 168, 192, 0.3);
    z-index: 3; /* Higher on hover but still below header */
}

/* FIXED: All table cell buttons follow same z-index pattern */
.timesheet-table td button,
.timesheet-table td a.btn,
.timesheet-table td .btn {
    position: relative;
    z-index: 2; /* Below header, above cell content */
}

.timesheet-table td button:hover,
.timesheet-table td a.btn:hover,
.timesheet-table td .btn:hover {
    z-index: 3; /* Hover state but still below header */
}

/* Button container within table cells */
.table-cell-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1; /* Base level with cell content */
}

.table-cell-actions .view-details,
.table-cell-actions .go-to-site,
.table-cell-actions .btn-site-link {
    margin: 0;
    z-index: 2; /* Consistent with other buttons */
}

/* =============================================================================
   MODAL STYLING
   ============================================================================= */

/* Modal styling with Knesset design */
.modal-overlay {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000; /* High z-index for modals */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal-overlay.show,
.modal-overlay:not(.hidden) {
    display: flex !important;
}

.modal-content {
    background: var(--knesset-white);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    text-align: right;
    direction: rtl;
    animation: modalSlideIn 0.3s ease-out;
    z-index: 1001; /* Above modal overlay */
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    background: linear-gradient(135deg, var(--knesset-primary), var(--knesset-primary-hover));
    color: var(--knesset-white);
    padding: 20px 24px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 24px;
}

.modal-close {
    background: none;
    border: none;
    color: var(--knesset-white);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

#detailsModal {
    display: none !important;
}

#detailsModal.show {
    display: flex !important;
}

#detailsModal:not(.hidden) {
    display: flex !important;
}

/* Modal actions */
.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-direction: row-reverse;
    margin-top: 16px;
}

/* =============================================================================
   SUMMARY CARDS AND CONTENT
   ============================================================================= */

.summary-card-icon {
    background: linear-gradient(135deg, var(--knesset-primary), var(--knesset-primary-hover));
    color: var(--knesset-white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.summary-card-content .value {
    font-size: 28px;
    font-weight: 700;
    color: var(--knesset-primary);
    margin-bottom: 4px;
}

.summary-card-content .label {
    font-size: 14px;
    color: var(--knesset-text-light);
    font-weight: 500;
}

/* Modal content styling */
.user-summary {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--knesset-border);
}

.summary-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, var(--knesset-white), var(--knesset-background));
    border: 1px solid var(--knesset-border);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* =============================================================================
   ENTRIES AND TABLE SECTIONS
   ============================================================================= */

/* Entries section */
.entries-section {
    margin-top: 24px;
}

.entries-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--knesset-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid var(--knesset-primary);
    padding-bottom: 8px;
}

.entries-table-container {
    border: 1px solid var(--knesset-border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 16px;
}

.entries-table {
    margin: 0;
    border-radius: 0;
}

.entries-table th {
    border-radius: 0;
    font-size: 14px;
    padding: 12px 8px;
    z-index: 100; /* Same high z-index as main table header */
}

.entries-table td {
    font-size: 13px;
    padding: 10px 8px;
}

/* Empty entries state */
.empty-entries {
    text-align: center;
    padding: 40px 20px;
    color: var(--knesset-text-light);
}

.empty-entries i {
    font-size: 40px;
    color: var(--knesset-primary);
    margin-bottom: 12px;
    display: block;
}

.empty-entries p {
    font-size: 16px;
    margin: 0;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--knesset-text-light);
}

.empty-state i {
    font-size: 48px;
    color: var(--knesset-primary);
    margin-bottom: 16px;
    display: block;
}

.empty-state h3 {
    font-size: 20px;
    color: var(--knesset-text);
    margin-bottom: 8px;
}

/* =============================================================================
   STATUS INDICATORS AND ALERTS
   ============================================================================= */

/* Status indicators with Knesset colors */
.status-approved {
    background: linear-gradient(135deg, var(--knesset-success), #20a83a);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
}

.status-pending {
    background: linear-gradient(135deg, var(--knesset-warning), #e6ac00);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
}

.status-rejected {
    background: linear-gradient(135deg, var(--knesset-danger), #c13a3a);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
}

.status-incomplete {
    color: var(--knesset-warning);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Alert styling */
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.alert-warning {
    background-color: #fef3cd;
    color: #856404;
    border: 1px solid #fdefb2;
}

.alert-warning i {
    color: var(--knesset-warning);
}

/* =============================================================================
   CELL CONTENT AND STYLING
   ============================================================================= */

/* Hours cell styling */
.hours-cell {
    font-weight: 600;
    color: var(--knesset-primary);
    justify-content: flex-start !important;
}

.hours-value {
    background: linear-gradient(135deg, var(--knesset-light-blue), #e8f4f8);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: SemanticaCondBold;
    font-size: 16px;
}

/* Error cell styling */
.error-cell {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #fef2f2, #fecaca);
}

.error-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--knesset-danger);
    font-size: 16px;
}

.error-content i {
    font-size: 20px;
}

/* Loading cell */
.loading-cell {
    text-align: center;
    padding: 40px 20px;
}

.loading-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--knesset-text-light);
    font-size: 16px;
}

.loading-content i {
    color: var(--knesset-primary);
    font-size: 20px;
}

/* Incomplete entry styling */
.incomplete-entry {
    background-color: #fef3cd;
}

/* Enhanced table row styles */
.row-even {
    background-color: #fafcff;
}

.row-odd {
    background-color: var(--knesset-white);
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Disabled button state */
.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Utility classes */
.hidden {
    display: none !important;
}

/* FIXED: Focus states with proper z-index handling */
*:focus {
    outline: 3px solid var(--knesset-primary);
    outline-offset: 2px;
}

button:focus,
input:focus,
select:focus {
    outline: 2px solid var(--knesset-primary);
    outline-offset: 2px;
}

/* FIXED: Focus states for table buttons - ensure visibility above header when focused */
.view-details:focus,
.go-to-site:focus,
.btn-site-link:focus {
    z-index: 101; /* Above sticky header when focused */
    outline: 3px solid var(--knesset-primary);
    outline-offset: 2px;
}

.btn-export:focus,
.btn-primary:focus,
.btn-secondary:focus {
    outline: 3px solid var(--knesset-primary);
    outline-offset: 2px;
}

/* =============================================================================
   RESPONSIVE DESIGN - FIXED Z-INDEX FOR MOBILE
   ============================================================================= */

/* Responsive styles - FIXED FOR RTL ISSUES AND Z-INDEX */
@media (max-width: 768px) {
    .timesheet-header .container {
        flex-direction: column;
        text-align: center;
    }
    
    .header-title-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    
    .timesheet-title {
        font-size: 22px;
        text-align: center;
    }
    
    .timesheet-table thead {
        display: none;
    }
    
    .timesheet-table, 
    .timesheet-table tbody, 
    .timesheet-table tr {
        display: block;
        width: 100%;
    }

    .timesheet-table th:first-child {
        border-radius: 0 8px 0 0;
    }
    
    .timesheet-table th:last-child {
        border-radius: 8px 0 0 0;
    }
    
    .timesheet-table tr {
        margin-bottom: 16px;
        border: 1px solid var(--knesset-border);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        position: relative; /* Maintain stacking context */
        z-index: 1;
    }
    
    /* Fix for the RTL text overflow issue */
    .timesheet-table td {
        display: grid;
        grid-template-columns: 40% 60%;
        padding: 12px 10px;
        border-bottom: 1px solid #f0f8ff;
        align-items: center;
        position: relative;
        z-index: 1;
    }
    
    .timesheet-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--knesset-primary);
        text-align: right;
        padding-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Adjust cell content to prevent overflow */
    .cell-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        z-index: 1;
    }
    
    /* FIXED: Mobile buttons with proper z-index */
    .view-details {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        margin-top: 5px;
        position: relative;
        z-index: 2; /* Above cell content in mobile */
    }
    
    .go-to-site,
    .btn-site-link {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        margin-top: 5px;
        position: relative;
        z-index: 2; /* Above cell content in mobile */
    }
    
    /* Fix for filter form in responsive mode */
    .filter-form {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    
    /* Table header responsive fix */
    .table-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        padding: 16px;
    }
    
    .table-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    /* Export buttons responsive fix */
    .export-buttons {
        flex-direction: row;
        gap: 8px;
        width: auto;
    }
    
    .btn-export {
        width: auto;
        white-space: nowrap;
    }
    
    /* Modal responsive fixes */
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 10px;
    }
    
    /* Card responsive fixes */
    .summary-card {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }
    
    .summary-card-icon {
        margin-bottom: 8px;
    }
    
    /* Action buttons responsive fix */
    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .modal-actions button {
        width: 100%;
    }
    
    /* Button container responsive fix */
    .button-container,
    .tabs-button-container {
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
    }
    
    .button-container button,
    .tabs-button-container button {
        width: 100%;
    }
    
    /* Responsive loading states */
    #knessetNumber.loading {
        background-position: left 10px center !important;
        padding-left: 35px !important;
        padding-right: 12px !important;
        background-size: 14px !important;
    }
    
    /* Mobile button container z-index fix */
    .table-cell-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
        z-index: 1;
    }

        #knessetPeriod {
        min-width: 200px;
        font-size: 13px !important;
    }
    
    #knessetPeriod option {
        padding: 10px 8px;
        font-size: 12px !important;
    }
    
    #knessetPeriod option:not(:disabled) {
        padding-right: 15px !important;
        font-size: 12px !important;
    }
    
    .table-cell-actions .view-details,
    .table-cell-actions .go-to-site,
    .table-cell-actions .btn-site-link {
        width: 100%;
        z-index: 2;
    }
}

/* Extra small screen adjustments */
@media (max-width: 480px) {
    .knesset-logo {
        width: 40px;
    }
    
    .knesset-text {
        font-size: 14px;
        color: #464646;
    }
    
    .timesheet-title {
        font-size: 18px;
    }
    
    /* Further optimize table cells for very small screens */
    .timesheet-table td {
        grid-template-columns: 35% 65%;
        padding: 10px 8px;
    }
    
    .timesheet-table td::before {
        font-size: 16px;
    }
    
    .cell-content {
        font-size: 16px;
    }
    
    /* Optimize export buttons for tiny screens */
    .export-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-export {
        width: 100%;
        justify-content: center;
    }
    
    /* Adjust modal content for tiny screens */
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 10px;
    }
    
    .modal-header {
        padding: 15px;
        font-size: 16px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    .summary-card-content .value {
        font-size: 24px;
    }
    
    .entries-table th,
    .entries-table td {
        font-size: 14px;
        padding: 8px 6px;
    }
    
    /* Adjust filter form elements */
    .filter-form-title {
        font-size: 18px;
    }
    
    .filter-form label {
        font-size: 13px;
    }
    
    .filter-form input,
    .filter-form select {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    /* Mobile adjustments for date inputs */
    input[type="date"]::-webkit-calendar-picker-indicator {
        right: 8px !important;
        width: 18px !important;
        height: 18px !important;
    }
    
    input[type="date"] {
        padding-right: 35px !important;
        padding-left: 10px !important;
    }
    
    /* Extra small screen loading states */
    #knessetNumber.loading {
        background-position: left 8px center !important;
        padding-left: 32px !important;
        padding-right: 10px !important;
        background-size: 12px !important;
    }

        #knessetPeriod {
        min-width: 180px;
    }
    
    #knessetPeriod option {
        font-size: 11px !important;
        padding: 8px 6px;
    }
    
    #knessetPeriod option:not(:disabled) {
        padding-right: 12px !important;
    }
}

/* =============================================================================
   DARK MODE AND ACCESSIBILITY
   ============================================================================= */

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --knesset-background: #1a1a1a;
        --knesset-white: #2d2d2d;
        --knesset-text: #e0e0e0;
        --knesset-text-light: #b0b0b0;
        --knesset-border: #404040;
    }
    
    body {
        background-color: var(--knesset-background);
        color: var(--knesset-text);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .timesheet-table th {
        background: #000000;
        color: #ffffff;
        z-index: 100; /* Maintain high z-index in high contrast */
    }
    
    .timesheet-table td {
        border: 2px solid #000000;
    }
    
    .btn-primary {
        background: #000000;
        color: #ffffff;
        border: 2px solid #000000;
    }
    
    select:disabled {
        border: 2px solid #999;
        background-color: #f0f0f0;
        color: #666;
    }
    
    option:disabled {
        background-color: #f0f0f0 !important;
        color: #666 !important;
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

/* Print styles */
@media print {
    .filter-form,
    .export-buttons,
    .pagination {
        display: none !important;
    }
    
    .timesheet-table th {
        background: var(--knesset-primary) !important;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
        position: static !important; /* Remove sticky positioning for print */
        z-index: auto !important;
    }
    
    .summary-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--knesset-border);
    }
    
    .entries-section {
        break-inside: avoid;
    }
    
    .entries-table {
        break-inside: auto;
    }
    
    .entries-table tr {
        break-inside: avoid;
    }
    
    /* Reset z-index for print */
    .view-details,
    .go-to-site,
    .btn-site-link {
        z-index: auto !important;
    }
}

/* =============================================================================
   FONT FIXES - ENSURE CONSISTENT FONT USAGE
   ============================================================================= */

/* Font fix for select elements to match site default font */
.filter-form select,
select,
#month,
#knessetPeriod {
    font-family: 'SemanticaMedium', 'Arial Hebrew', Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix for select options to maintain consistent font */
.filter-form select option,
select option,
#knessetPeriod option {
    font-family: 'SemanticaMedium', 'Arial Hebrew', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

/* Make sure the font loads properly for Hebrew text */
@font-face {
    font-family: 'SemanticaMedium';
    src: local('SemanticaMedium'), local('Semantica-Medium');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Ensure form elements inherit the correct font */
.filter-form input,
.filter-form select,
.filter-form button,
.form-group input,
.form-group select,
.tab-pane .form-group input,
.tab-pane .form-group select {
    font-family: inherit !important;
}

/* =============================================================================
   SELECT STATES - ENHANCED TO PREVENT SPINNING
   ============================================================================= */

/* Enhanced disabled state for select elements */
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f8f9fa;
    color: #6c757d;
    border-color: #dee2e6;
}

/* Specific styling for Knesset number select when disabled */
#knessetNumber:disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    border-color: #dee2e6;
}

/* Specific styling for Knesset period select when disabled */
#knessetPeriod:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f5f5f5;
    color: #999;
    border-color: #e0e0e0;
}

/* Enhanced styling for disabled option elements */
option:disabled {
    color: #6c757d !important;
    font-style: italic;
}

/* Specific styling for the default "loading" and "please select" options */
#knessetNumber option[disabled]:first-child,
#knessetPeriod option[disabled]:first-child {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    font-weight: 500;
    font-style: italic;
    padding: 8px 12px;
}

/* Visual feedback for interdependent selects */
#knessetPeriod:disabled::after {
    content: ' (נא לבחור כנסת תחילה)';
    color: #6c757d;
    font-size: 12px;
    font-style: italic;
}

/* Transition effects for state changes */
#knessetNumber,
#knessetPeriod {
    transition: all 0.3s ease;
}

/* Enhanced focus states for disabled elements */
select:disabled:focus {
    box-shadow: none;
    border-color: #dee2e6;
}

/* Loading indicator positioning for RTL */
#knessetNumber.loading {
    background-position: left 12px center !important;
    padding-left: 40px !important;
    padding-right: 16px !important;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    #knessetNumber.loading {
        animation: none;
    }
    
    #knessetNumber.loading {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235b9bbd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3C/svg%3E") !important;
    }
}

/* =============================================================================
   SPECIFIC COMPONENT FIXES
   ============================================================================= */

/* Enhanced notification styling for Knesset period loading */
.notification-knesset-period {
    background: linear-gradient(135deg, var(--knesset-primary), var(--knesset-primary-hover));
    color: white;
    border-left: 4px solid var(--knesset-secondary);
}

/* Responsive adjustments for Knesset period select */
@media (max-width: 768px) {
    #knessetPeriod option {
        padding: 10px 8px;
        font-size: 13px;
    }
    
    #knessetPeriod option:not(:disabled) {
        padding-right: 20px !important;
    }
}

/* =============================================================================
   Z-INDEX SUMMARY AND DEBUGGING
   ============================================================================= */

/*
FINAL Z-INDEX HIERARCHY (FIXED):
- Modals: z-index: 1000-1001 (highest)
- Sticky Table Headers: z-index: 100 (high - above all table content)
- Focused Table Buttons: z-index: 101 (above sticky headers when focused)
- Table Button Hover: z-index: 3 (below headers)
- Table Buttons Normal: z-index: 2 (below headers, above cells)
- Table Cells & Content: z-index: 1 (base level)
- Table Base: z-index: 1 (base level)

This ensures:
1. Sticky headers always stay above table content when scrolling
2. Buttons never appear above sticky headers (except when focused for accessibility)
3. All buttons in the same cell are on the same z-index level
4. Proper layering for hover effects without breaking the header
5. Accessibility compliance for focus states
*/

/* =============================================================================
   FINAL CONSOLIDATION NOTES
   ============================================================================= */

/*
CONSOLIDATION COMPLETE WITH Z-INDEX FIXES:
- All form styling consolidated
- FIXED: knessetPeriod select NEVER spins - uses only dropdown arrow
- FIXED: Only knessetNumber select can have spinning animation
- FIXED: Sticky table header z-index hierarchy (z-index: 100)
- FIXED: Table button z-index levels (z-index: 2-3, never above header)
- FIXED: Button focus states for accessibility (z-index: 101 when focused)
- FIXED: Consistent button alignment in table cells
- Conflicts resolved with namespace prefixes  
- All #knessetPeriod styling consolidated here
- Universal input/select styling applied
- RTL support unified
- Loading states properly differentiated
- Button styling consolidated
- Modal styling unified (z-index: 1000-1001)
- Responsive design harmonized with z-index fixes
- Print styles included with z-index resets
- Font consistency enforced
- Dark mode and accessibility support included

USAGE NOTES:
- knessetPeriod select will never spin regardless of loading class
- Only knessetNumber select can have spinning animation
- All form elements inherit styling from this file
- Table headers will always stay above content when scrolling
- Table buttons will never appear above sticky headers
- Focus states ensure accessibility compliance
- Professional appearance maintained with proper layering

TESTING CHECKLIST:
✓ Sticky header stays above buttons when scrolling
✓ Buttons are aligned on same visual plane within cells
✓ Focus states are visible above headers for accessibility
✓ Hover effects work without breaking header layering
✓ Mobile responsive design maintains z-index hierarchy
✓ Print styles reset z-index appropriately
✓ High contrast mode preserves z-index structure
*/