/* External Workers Module Styles */

/* Status Counters */
.ew-status-counters {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 13px;
}

.ew-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #666;
}

.ew-counter i {
    font-size: 12px;
}

.ew-counter-value {
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 12px;
    min-width: 20px;
    text-align: center;
}

.ew-counter-draft .ew-counter-value {
    background: #e0e0e0;
    color: #424242;
}

.ew-counter-denied .ew-counter-value {
    background: #f8d7da;
    color: #721c24;
}

.ew-counter-review .ew-counter-value {
    background: #e8eaf6;
    color: #283593;
}

.ew-counter-pending .ew-counter-value {
    background: #fff3cd;
    color: #856404;
}

.ew-field-group {
    margin-bottom: 12px;
}

.ew-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ew-select-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ew-select-box:hover {
    border-color: #89bd24;
}

.ew-select-box:focus-within {
    border-color: #89bd24;
    box-shadow: 0 0 0 2px rgba(137, 189, 36, 0.15);
}

.ew-select-box select {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #333;
    outline: none;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.ew-select-box .ew-select-icon {
    color: #999;
    margin-left: -20px;
    pointer-events: none;
    position: relative;
    z-index: 0;
}

.ew-select-box .ew-select-value {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.ew-select-box .ew-select-value.placeholder {
    color: #999;
}

.ew-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Hide number input spinners */
.ew-input[type="number"]::-webkit-outer-spin-button,
.ew-input[type="number"]::-webkit-inner-spin-button,
.ew-hour-input::-webkit-outer-spin-button,
.ew-hour-input::-webkit-inner-spin-button,
.ew-km-input[type="number"]::-webkit-outer-spin-button,
.ew-km-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ew-input[type="number"],
.ew-hour-input,
.ew-km-input[type="number"] {
    -moz-appearance: textfield;
}

.ew-input:focus {
    border-color: #89bd24;
    box-shadow: 0 0 0 2px rgba(137, 189, 36, 0.15);
    outline: none;
}

.ew-radio-group {
    display: flex;
    gap: 20px;
    margin-top: 6px;
}

.ew-radio-group label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    color: #333;
}

.ew-radio-group input[type="radio"] {
    margin-right: 6px;
}

.ew-section-divider {
    border-top: 1px solid #e0e0e0;
    margin: 20px 0;
    padding-top: 20px;
}

.ew-header-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.ew-header-row .ew-field-group {
    flex: 1;
    min-width: 180px;
}

/* Week / Year Field */
.ew-field-week-year {
    flex: 0 0 160px;
    min-width: 160px;
}

/* Header Locked State */
.ew-header-locked {
    opacity: 0.7;
}

.ew-header-locked .ew-select-box,
.ew-header-locked .ew-input,
.ew-header-locked .ew-radio-group label {
    cursor: not-allowed;
    background-color: #f5f5f5;
}

.ew-header-locked .ew-select-box:hover {
    border-color: #ddd;
}

.ew-select-box.ew-disabled,
.ew-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Navigation Buttons */
.ew-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.ew-nav-buttons .btn {
    white-space: nowrap;
}

.ew-week-year-row {
    display: flex;
    gap: 6px;
}

.ew-week-input {
    width: 65px;
    flex: 0 0 65px;
}

.ew-year-select {
    width: 80px;
    flex: 0 0 80px;
    padding: 8px 6px;
}

/* Load Section */
.ew-load-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

.ew-load-btn {
    white-space: nowrap;
}

.ew-load-btn i {
    margin-right: 4px;
}

/* Worker Panel - Collapsible */
.ew-worker-panel {
    margin-bottom: 15px;
    border: 2px solid #89bd24;
    border-radius: 6px;
    overflow: hidden;
}

.ew-worker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #89bd24;
    color: white;
    cursor: pointer;
    user-select: none;
}

.ew-worker-header:hover {
    background: #7aad1f;
}

.ew-worker-header .ew-worker-name {
    font-size: 15px;
    font-weight: 600;
}

.ew-worker-header .ew-worker-name i {
    margin-right: 8px;
}

.ew-worker-header .ew-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ew-worker-content {
    padding: 15px;
    background: #fafff5;
}

/* Project Panel - Collapsible */
.ew-project-panel {
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: white;
}

.ew-project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #34495e;
    color: white;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
}

.ew-project-header:hover {
    background: #2c3e50;
}

.ew-project-header .ew-project-name {
    font-weight: 600;
}

.ew-project-header .ew-project-name i {
    margin-right: 6px;
    opacity: 0.8;
}

.ew-project-header .ew-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ew-project-content {
    padding: 10px;
}

/* Total Badge */
.ew-total-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.ew-project-header .ew-total-badge {
    font-size: 12px;
    padding: 2px 8px;
}

.ew-delete-icon {
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 15px;
    transition: color 0.2s;
}

.ew-delete-icon:hover {
    color: #f8d7da;
}

.ew-worker-header .ew-delete-icon {
    color: #fff;
}

.ew-worker-header .ew-delete-icon:hover {
    color: #ffcdd2;
}

/* Chevron Icon */
.ew-chevron {
    transition: transform 0.2s;
    font-size: 12px;
}

.ew-chevron.collapsed {
    transform: rotate(-90deg);
}

/* Task Table */
.ew-task-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.ew-task-table th {
    padding: 6px 4px;
    text-align: center;
    font-weight: 600;
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
}

.ew-task-table th:first-child {
    text-align: left;
    padding-left: 8px;
    min-width: 140px;
}

.ew-task-table th.ew-day-col {
    min-width: 50px;
}

.ew-task-table th.ew-total-col {
    min-width: 50px;
    background: #e8e8e8;
}

.ew-task-table td {
    padding: 4px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.ew-task-table td:first-child {
    text-align: left;
    padding-left: 8px;
    font-weight: 500;
    color: #333;
}

.ew-task-table td.ew-total-col {
    background: #f9f9f9;
    font-weight: 600;
}

.ew-task-table .ew-hour-input {
    width: 100%;
    max-width: 50px;
    padding: 4px 2px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
}

.ew-task-table .ew-hour-input:focus {
    border-color: #89bd24;
    outline: none;
    box-shadow: 0 0 0 2px rgba(137, 189, 36, 0.15);
}

.ew-task-table .ew-hour-input.ew-zero-value {
    background: #f0f0f0;
    color: #999;
}

.ew-task-table .ew-hour-input.ew-limit-exceeded {
    background: #f8d7da;
    border-color: #f5c6cb;;
}

.ew-task-table .ew-hour-input.ew-night-shift-auto {
    background: #e3f2fd;
    border-color: #90caf9;
    color: #1565c0;
    cursor: not-allowed;
}

.ew-night-shift-toggle,
.ew-order-number-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #f5f5f5;
    border-radius: 4px;
    transition: background 0.2s;
    height: 30px;
    box-sizing: border-box;
}

.ew-night-shift-toggle:hover,
.ew-order-number-toggle:hover {
    background: #e8e8e8;
}

.ew-night-shift-toggle {
    cursor: pointer;
}

.ew-night-shift-toggle input[type="checkbox"] {
    margin: 0;
}

.ew-night-shift-toggle i {
    color: #5c6bc0;
}

/* Limit Warning Banner */
.ew-limit-warning-banner {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 15px;
}

.ew-limit-warning-banner.ew-warning-inline {
    margin-bottom: 0;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

.ew-limit-warning-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #856404;
}

.ew-limit-warning-content i {
    font-size: 18px;
}

/* Add Links - Compact Style */
.ew-add-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #89bd24;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: none;
    transition: color 0.2s;
}

.ew-add-link:hover {
    color: #6a9618;
    text-decoration: none;
}

.ew-add-link i {
    font-size: 11px;
}

.ew-add-link.ew-add-worker {
    margin-top: 10px;
    font-size: 14px;
}

.ew-add-link.ew-add-project {
    margin-top: 8px;
}

.ew-add-link.ew-copy-worker {
    margin-left: 20px;
}

/* Hour Display (non-editable, same size as inputs) */
.ew-hour-display {
    display: inline-block;
    min-width: 50px;
}

/* Divider */
.ew-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 15px 0;
}

/* Worker Totals */
.ew-worker-totals {
    margin-top: 0;
    background: #e8f5e0;
    border-radius: 4px;
    border: 1px solid #c5e1a5;
    overflow: hidden;
    padding: 10px;
}

.ew-worker-totals-title {
    font-size: 12px;
    font-weight: 600;
    color: #558b2f;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Grand Total - Light blue theme */
.ew-grand-total {
    margin-top: 20px;
    background: #e3f2fd;
    border: 2px solid #2196f3;
    border-radius: 6px;
    overflow: hidden;
    padding: 10px;
}

.ew-grand-total-title {
    font-size: 14px;
    font-weight: 600;
    color: #1565c0;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Worker Totals Table (green theme) */
.ew-totals-table thead th {
    background: #c5e1a5;
    color: #33691e;
}

.ew-totals-table thead th.ew-total-col {
    background: #a5d6a7;
}

/* Grand Totals Table (blue theme) */
.ew-grand-totals-table thead th {
    background: #64b5f6;
    color: white;
}

.ew-grand-totals-table thead th.ew-total-col {
    background: #42a5f5;
}

/* Cache Restore Prompt */
.ew-cache-prompt {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.ew-cache-prompt-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ew-cache-prompt-content > i {
    font-size: 24px;
    color: #856404;
}

.ew-cache-prompt-text {
    flex: 1;
}

.ew-cache-prompt-text strong {
    display: block;
    color: #856404;
}

.ew-cache-prompt-text p {
    margin: 5px 0 0;
    color: #666;
    font-size: 13px;
}

.ew-cache-prompt-buttons {
    display: flex;
    gap: 8px;
}

/* Action Buttons */
.ew-action-buttons {
    margin-top: 20px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.ew-save-btn {
    position: relative;
}

.ew-unsaved-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #e74c3c;
    border-radius: 50%;
}

/* Fixed Banners - Shared base for error/success (accounts for sidebar) */
.ew-error-banner,
.ew-success-banner {
    position: fixed;
    top: 60px;
    left: 300px;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    pointer-events: none;
    animation: ew-slide-down 0.3s ease-out;
}

@media (max-width: 1199px) {
    .ew-error-banner,
    .ew-success-banner {
        left: 0;
    }
}

@keyframes ew-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ew-error-content,
.ew-success-content {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 6px;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 600px;
    min-width: 300px;
    font-weight: 500;
}

.ew-error-content {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.ew-success-content {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.ew-error-content > i,
.ew-success-content > i {
    font-size: 20px;
}

.ew-error-message,
.ew-success-content > span {
    flex: 1;
}

.ew-error-dismiss,
.ew-success-dismiss {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.ew-error-dismiss {
    color: #721c24;
}

.ew-success-dismiss {
    color: #155724;
}

.ew-error-dismiss:hover,
.ew-success-dismiss:hover {
    opacity: 1;
}

/* Error Highlighting */
.ew-worker-panel.ew-has-error {
    border-color: #e74c3c;
}

.ew-worker-panel.ew-has-error .ew-worker-header {
    background: #e74c3c;
}

.ew-worker-panel.ew-has-error .ew-worker-header:hover {
    background: #c0392b;
}

.ew-project-panel.ew-has-error {
    border-color: #e74c3c;
}

.ew-project-panel.ew-has-error .ew-project-header {
    background: #e74c3c;
}

.ew-project-panel.ew-has-error .ew-project-header:hover {
    background: #c0392b;
}

.ew-error-icon {
    color: #fff;
    margin-left: 8px;
    animation: pulse 1.5s ease-in-out infinite;
}

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

.ew-hour-input.ew-input-error {
    border-color: #e74c3c;
    background: #fff5f5;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.25);
}

.ew-hour-input.ew-input-error:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.35);
}

/* Mobile horizontal scroll for tables */
@media (max-width: 768px) {
    .ew-project-content,
    .ew-worker-totals,
    .ew-grand-total {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ew-task-table {
        min-width: 550px;
    }
}

/* Approval Status Banner */
.ew-approval-banner {
    margin: 10px 0;
}

.ew-status-denied {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.ew-status-denied i {
    margin-right: 8px;
}

.ew-status-pending-review {
    background-color: #e8eaf6;
    border: 1px solid #c5cae9;
    color: #283593;
    padding: 12px 15px;
    border-radius: 4px;
}

.ew-status-pending-review i {
    margin-right: 8px;
}

.ew-status-pending {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 12px 15px;
    border-radius: 4px;
}

.ew-status-pending i {
    margin-right: 8px;
}

.ew-status-accepted {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 12px 15px;
    border-radius: 4px;
}

.ew-status-accepted i {
    margin-right: 8px;
}

/* Partial Approval Status (some projects denied) */
.ew-status-partial {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.ew-status-partial i {
    margin-right: 8px;
}

/* Denial and missing approvers lists */
.ew-denial-list,
.ew-missing-approvers-list {
    margin: 8px 0 0 0;
    padding-left: 20px;
    list-style: none;
}

.ew-denial-list li,
.ew-missing-approvers-list li {
    margin-bottom: 4px;
}

/* Project denial reason inline */
.ew-project-denial-reason {
    margin: 8px 0;
    padding: 8px 12px;
    background: #f8d7da;
    border-radius: 4px;
    font-size: 13px;
    color: #721c24;
}

.ew-project-denial-reason i {
    margin-right: 6px;
}

/* Approval Button */
.ew-approval-btn {
    margin-left: 10px;
}

/* Approval Modal */
.ew-approval-modal {
    background: white;
    border-radius: 8px;
    max-width: 400px;
    margin: 100px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ew-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ew-modal-header h4 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.ew-modal-header .close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    padding: 0;
}

.ew-modal-header .close:hover {
    color: #333;
}

.ew-modal-body {
    padding: 20px;
}

.ew-modal-body .form-group {
    margin-bottom: 15px;
}

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

.ew-modal-body label {
    display: block;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
    font-size: 13px;
}

.ew-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

.ew-modal-footer .btn {
    margin-left: 10px;
}

/* Error modal header */
.ew-modal-header-error {
    background: #f8d7da;
    color: #721c24;
}

.ew-modal-header-error h4 {
    color: #721c24;
}

/* Approver summary in send modal */
.ew-approver-summary {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
}

/* Wide approval modal */
.ew-approval-modal-wide {
    max-width: 550px;
}

/* Approver groups in modal */
.ew-approver-group {
    padding: 10px 12px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 8px;
}

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

.ew-approver-will-send {
    background: #f8fff8;
    border-color: #c3e6cb;
}

.ew-approver-no-send {
    background: #f9f9f9;
    border-color: #ddd;
    opacity: 0.7;
}

.ew-approver-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ew-approver-email {
    font-weight: 500;
    color: #333;
}

.ew-approver-email i {
    margin-right: 6px;
    color: #89bd24;
}

.ew-approver-no-send .ew-approver-email i {
    color: #999;
}

.ew-send-status {
    font-size: 11px;
    color: #28a745;
    font-weight: 500;
}

.ew-send-status.ew-no-send {
    color: #999;
}

.ew-approver-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ew-case-tag {
    font-size: 11px;
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 10px;
    color: #666;
}

.ew-case-tag i {
    margin-left: 4px;
    font-size: 10px;
}

.ew-case-modified {
    background: #fff3cd;
    color: #856404;
}

.ew-case-approved {
    background: #d4edda;
    color: #155724;
}

.ew-approver-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 10px 12px;
    border-radius: 4px;
    margin-top: 12px;
    font-size: 12px;
}

.ew-approver-warning i {
    margin-right: 6px;
}

/* Browse Groups Button */
.ew-browse-btn {
    margin-left: 10px;
}

.ew-browse-btn i {
    margin-right: 4px;
}

/* Group Browser Modal */
.ew-group-browser-modal {
    background: white;
    border-radius: 8px;
    max-width: 900px;
    width: 90%;
    margin: 40px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.ew-group-browser-modal .ew-modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 20px;
}

/* Group Filters */
.ew-group-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.ew-group-filter-item {
    position: relative;
}

.ew-group-filter-search {
    flex: 1;
    min-width: 180px;
}

.ew-group-filter-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    z-index: 1;
}

.ew-group-filter-search input {
    padding-left: 36px !important;
}

.ew-group-filter-status {
    width: 160px;
}

.ew-group-filter-week,
.ew-group-filter-year {
    width: 100px;
}

.ew-group-filter-item select,
.ew-group-filter-item input[type="number"] {
    cursor: pointer;
}

/* Groups List */
.ew-groups-list {
    max-height: 60vh;
    overflow-y: auto;
}

/* No Groups */
.ew-no-groups {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.ew-no-groups i {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
    color: #ccc;
}

.ew-no-groups p {
    margin: 0;
    font-size: 14px;
}

/* Group Card */
.ew-group-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.ew-group-card:hover {
    border-color: #89bd24;
    background-color: #f9fff5;
    box-shadow: 0 2px 8px rgba(137, 189, 36, 0.15);
}

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

.ew-group-main {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ew-group-customer {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.ew-group-customer i {
    color: #89bd24;
    margin-right: 6px;
}

.ew-group-supplier {
    color: #666;
    font-size: 13px;
}

.ew-group-supplier i {
    color: #999;
    margin-right: 4px;
}

.ew-group-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ew-group-week {
    font-size: 13px;
    color: #555;
}

.ew-group-week i {
    color: #999;
    margin-right: 4px;
}

.ew-group-location {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #e3f2fd;
    color: #1565c0;
    font-weight: 500;
}

.ew-group-location.ew-location-workshop {
    background: #fff3e0;
    color: #e65100;
}

/* Status Badge in Group Card */
.ew-group-status-badge {
    font-size: 11px;
    padding: 2px 8px;
    font-weight: 500;
    margin-bottom: 0px;
}

.ew-group-status-badge.ew-status-draft {
    background: #f5f5f5;
    color: #666;
}

.ew-group-status-badge.ew-status-pending-review {
    background: #e8eaf6;
    color: #283593;
}

.ew-group-status-badge.ew-status-pending {
    background: #fff3cd;
    color: #856404;
}

.ew-group-status-badge.ew-status-accepted {
    background: #d4edda;
    color: #155724;
}

.ew-group-status-badge.ew-status-denied {
    background: #f8d7da;
    color: #721c24;
}

.ew-group-stats {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #888;
}

.ew-group-stats i {
    margin-right: 4px;
}

.ew-group-stats .ew-email-indicators {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.ew-group-workers {
    color: #666;
}


/* Group Denial Notice */
.ew-group-denial {
    margin-top: 8px;
    padding: 6px 10px;
    background: #f8d7da;
    border-radius: 4px;
    font-size: 12px;
    color: #721c24;
}

.ew-group-denial i {
    margin-right: 6px;
}

/* Load More Button */
.ew-load-more {
    margin-top: 15px;
    padding-top: 10px;
}

.ew-load-more .btn {
    color: #666;
}

/* Project Options Row */
.ew-project-options {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ew-order-number-toggle i {
    color: #89bd24;
}

.ew-order-number-toggle input {
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    outline: none;
    width: 160px;
    padding: 0;
    margin: 0;
    line-height: 1;
    height: auto;
}

.ew-order-number-toggle input::placeholder {
    color: #999;
    font-weight: 400;
}

.ew-order-number-toggle input:disabled {
    cursor: not-allowed;
}

/* Hour Cell with Comment */
.ew-hour-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 50px;
}

.ew-comment-icon {
    position: absolute;
    right: -2px;
    top: -2px;
    font-size: 10px;
    color: #ccc;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.ew-hour-cell:hover .ew-comment-icon {
    opacity: 1;
}

.ew-comment-icon:hover {
    color: #89bd24;
}

.ew-comment-icon.ew-comment-filled {
    opacity: 1;
    color: #89bd24;
}

.ew-has-comment .ew-hour-input {
    border-color: #89bd24;
}

/* Comment Popup */
.ew-comment-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9999;
}

.ew-comment-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    width: 320px;
    max-width: 90vw;
}

.ew-comment-popup-header {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #333;
}

.ew-comment-popup-header i {
    color: #89bd24;
    margin-right: 8px;
}

.ew-comment-popup-header .close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    padding: 0;
}

.ew-comment-popup-header .close:hover {
    color: #333;
}

.ew-comment-popup-body {
    padding: 15px;
}

.ew-comment-popup-body textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    font-size: 13px;
    resize: none;
    font-family: inherit;
}

.ew-comment-popup-body textarea:focus {
    border-color: #89bd24;
    outline: none;
    box-shadow: 0 0 0 2px rgba(137, 189, 36, 0.15);
}

.ew-comment-char-count {
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}

.ew-comment-popup-footer {
    padding: 10px 15px;
    border-top: 1px solid #eee;
    text-align: right;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ew-report-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ew-last-sent {
    font-size: 11px;
    color: #28a745;
    margin-left: 20px;
}

.ew-last-sent i {
    margin-right: 4px;
}

.ew-never-sent {
    font-size: 11px;
    color: #999;
    margin-left: 20px;
}

.ew-never-sent i {
    margin-right: 4px;
}

.ew-bulk-reminder-btn {
    position: relative;
}

.ew-bulk-reminder-status {
    display: block;
    font-size: 10px;
    color: #28a745;
    margin-top: 2px;
}

.ew-bulk-reminder-status i {
    margin-right: 3px;
}

.ew-km-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 50px;
    padding: 4px 2px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    box-sizing: border-box;
}

.ew-km-cell:hover {
    background: #e8f5e0;
    border-color: #89bd24;
}

.ew-has-comment .ew-km-cell {
    border-color: #89bd24;
}

.ew-km-value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #666;
}

.ew-km-value i {
    font-size: 11px;
    color: #999;
}

.ew-km-value.ew-has-value {
    color: #558b2f;
    font-weight: 600;
}

.ew-km-value.ew-has-value i {
    color: #89bd24;
}

.ew-km-placeholder {
    color: #ccc;
}

.ew-km-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
}

.ew-km-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    width: 500px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.ew-km-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #333;
    font-size: 16px;
    flex-shrink: 0;
}

.ew-km-modal-header i {
    color: #89bd24;
    margin-right: 8px;
}

.ew-km-modal-header .close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    padding: 0;
}

.ew-km-modal-header .close:hover {
    color: #333;
}

.ew-km-modal-body {
    padding: 15px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.ew-km-drive {
    padding: 15px;
    margin-bottom: 12px;
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.ew-km-drive:last-child {
    margin-bottom: 0;
}

.ew-km-drive-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

.ew-km-drive-row:last-child {
    margin-bottom: 0;
}

.ew-km-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ew-km-field label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.ew-km-field-small {
    flex: 0 0 80px;
}

.ew-km-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.2s;
}

.ew-km-input:focus {
    border-color: #89bd24;
    outline: none;
    box-shadow: 0 0 0 2px rgba(137, 189, 36, 0.15);
}

.ew-km-input:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
}

.ew-km-arrow {
    color: #999;
    font-size: 16px;
    padding-bottom: 8px;
}

.ew-km-remove-btn {
    flex-shrink: 0;
    margin-bottom: 0;
    height: 34px;
}

.ew-no-drives {
    text-align: center;
    padding: 30px 20px;
    color: #999;
}

.ew-no-drives i {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
    color: #ddd;
}

.ew-no-drives p {
    margin: 0;
    font-size: 14px;
}

.ew-km-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: #fafafa;
    border-radius: 0 0 8px 8px;
}

.ew-km-footer-left {
    display: flex;
    align-items: center;
}

.ew-km-footer-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ew-km-total {
    font-size: 14px;
    color: #333;
}

.ew-km-total strong {
    color: #558b2f;
}

@media (max-width: 540px) {
    .ew-km-modal {
        width: 95vw;
    }

    .ew-km-drive-row {
        flex-wrap: wrap;
    }

    .ew-km-field {
        min-width: calc(50% - 5px);
    }

    .ew-km-field-small {
        flex: 1 1 calc(50% - 5px);
    }

    .ew-km-arrow {
        display: none;
    }
}

/* Transfer to BC Modal */
.ew-transfer-checkbox {
    margin: 15px 0 10px 0;
}

.ew-transfer-checkbox label {
    font-weight: normal;
    cursor: pointer;
    font-size: 14px;
}

.ew-transfer-info {
    font-size: 13px;
    padding: 8px 12px;
    margin-top: 10px;
}

.ew-transfer-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ew-transfer-step {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.ew-transfer-step:last-child {
    border-bottom: none;
}

.ew-step-icon {
    display: inline-block;
    width: 24px;
    text-align: center;
    margin-right: 8px;
    font-size: 16px;
}

.ew-step-name {
    font-size: 14px;
    font-weight: 500;
}

.ew-step-error {
    margin-left: 32px;
    margin-top: 4px;
    font-size: 12px;
    color: #d32f2f;
}

.ew-step-note {
    margin-left: 32px;
    margin-top: 4px;
    font-size: 12px;
    color: #999;
    font-style: italic;
}