/* Operatori Dashboard PRO - Extracted stylesheet (v9.9.20) */ /* Part 1: Force light mode + base layout (was od_force_light_mode()) */ html, body { background: #fafbfc !important; color: #1a1a1a !important; } body * { background-color: inherit; color: inherit; } .od-dashboard, .od-profile { background: #fafbfc !important; padding: 20px; max-width: 1500px; margin: 0 auto; } .od-login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #fafbfc !important; padding: 20px; } .od-login-box { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; max-width: 500px; width: 100%; } .od-login-box h2 { color: #1a1a1a; margin-bottom: 20px; } .od-login-box p { color: #666; font-size: 16px; margin-bottom: 30px; } .od-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; } .od-header h1 { font-size: 28px; color: #1a1a1a; margin: 0; } .od-header-right { align-self: flex-start; } body.page-operatori-dashboard .od-dashboard, body[class*="operatori-dashboard"] .od-dashboard { margin-top: -20px; } .od-btn-logout { background: #ef4444; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-weight: 500; white-space: nowrap; } .od-btn-logout:hover { background: #dc2626; color: white; } .od-breadcrumb { margin-bottom: 10px; } .od-breadcrumb a { color: #3b82f6; text-decoration: none; font-size: 14px; } .od-month-folders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; } .od-folder-clickable:hover { box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); transform: translateY(-2px); } .od-search-container { display: flex; gap: 10px; margin-bottom: 20px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); flex-wrap: wrap; } .od-search-input { flex: 1; min-width: 200px; padding: 12px 20px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .od-search-input:focus { outline: none; border-color: #3b82f6; } .od-sort-select { padding: 12px 16px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: white; cursor: pointer; min-width: 160px; } .od-sort-select:focus { outline: none; border-color: #3b82f6; } .od-toolbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .od-btn-search { background: #3b82f6; color: white; border: none; padding: 12px 30px; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; } .od-btn-search:hover { background: #2563eb; } .od-no-results-search { padding: 40px; text-align: center; color: #666; font-size: 14px; } .od-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .od-table { width: 100%; min-width: 700px; border-collapse: collapse; background: white; } .od-table th, .od-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #e5e7eb; } .od-table th { background: #f9fafb; font-weight: 600; color: #374151; font-size: 13px; white-space: nowrap; } .od-table td { font-size: 14px; color: #1f2937; } .od-client-name-link:hover { text-decoration: underline; } .od-table tbody tr:hover { background: #f9fafb; } .od-actions-cell { white-space: nowrap; } .od-actions-cell .od-btn { margin-right: 5px; margin-bottom: 5px; } .od-section { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; } .od-section h2 { font-size: 18px; color: #1a1a1a; margin: 0 0 15px 0; } .od-info-table { width: 100%; border-collapse: collapse; } .od-info-table th, .od-info-table td { padding: 10px 15px; text-align: left; border-bottom: 1px solid #e5e7eb; } .od-info-table th { width: 150px; font-weight: 600; color: #374151; background: #f9fafb; } .od-local-folders-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .od-local-folder-card { background: white; padding: 15px; border-radius: 8px; border: 1px solid #e0e0e0; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s; } .od-local-folder-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #3b82f6; } #od-dipendenti-list { overflow-x: auto; -webkit-overflow-scrolling: touch; } #od-dipendenti-list table { min-width: 600px; } @media screen and (max-width: 1024px) { .od-dashboard, .od-profile { padding: 15px; } .od-header h1 { font-size: 24px; } .od-local-folders-grid { grid-template-columns: repeat(2, 1fr); } .od-section { padding: 15px; } .od-modal-content { padding: 25px; max-width: 90%; } } @media screen and (max-width: 768px) { .od-dashboard, .od-profile { padding: 10px; } .od-header { flex-direction: column; align-items: flex-start; gap: 10px; } .od-header h1 { font-size: 22px; } .od-btn-logout { align-self: flex-end; padding: 8px 16px; font-size: 13px; } .od-search-container { flex-direction: column; padding: 15px; gap: 10px; } .od-search-input { width: 100%; min-width: unset; } .od-btn-search { width: 100%; padding: 12px 20px; } .od-toolbar { flex-direction: column; } .od-toolbar .od-btn { width: 100%; justify-content: center; } .od-table-wrapper { margin: 0 -10px; border-radius: 0; } .od-table th, .od-table td { padding: 10px 12px; font-size: 13px; } .od-actions-cell { display: flex; flex-direction: column; gap: 5px; } .od-actions-cell .od-btn { width: 100%; margin-right: 0; text-align: center; display: block; } .od-local-folders-grid { grid-template-columns: 1fr; } .od-month-folders-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .od-section { padding: 15px; margin-bottom: 15px; border-radius: 6px; } .od-section h2 { font-size: 16px; } .od-info-table th, .od-info-table td { display: block; width: 100%; padding: 8px 12px; } .od-info-table th { background: #f3f4f6; border-bottom: none; } .od-info-table td { border-bottom: 1px solid #e5e7eb; margin-bottom: 5px; } .od-upload-section { padding: 15px; } .od-upload-section > form > div { flex-direction: column !important; } .od-upload-section select, .od-upload-section input[type="file"], .od-upload-section button { width: 100% !important; } #od-local-folder-select { min-width: unset !important; width: 100% !important; } .od-modal { padding: 10px; } .od-modal-content { padding: 20px; max-width: 100%; max-height: 90vh; border-radius: 8px; } .od-modal-content h2 { font-size: 18px; padding-right: 35px; } .od-modal-close { top: 12px; right: 12px; width: 28px; height: 28px; font-size: 16px; } .od-section > div[style*="justify-content"] { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } #od-add-dipendente-btn { width: 100%; } #od-dipendente-dropzone { padding: 20px !important; } } @media screen and (max-width: 480px) { .od-header h1 { font-size: 20px; } .od-month-folders-grid { grid-template-columns: 1fr; } .od-btn { padding: 10px 15px; font-size: 13px; } .od-btn-small { padding: 8px 12px; font-size: 12px; } .od-table th, .od-table td { padding: 8px 10px; font-size: 12px; } .od-local-folder-card { padding: 12px; } .od-local-folder-card h3 { font-size: 13px; } .od-form-group label { font-size: 13px; } .od-form-group input, .od-form-group select, .od-form-group textarea { font-size: 13px; padding: 10px; } .od-login-box { padding: 25px; } } #od-local-folder-select { display: block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; min-width: 220px !important; max-width: 100% !important; height: auto !important; min-height: 40px !important; padding: 10px 35px 10px 12px !important; margin: 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #333 !important; background-color: #fff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' 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: right 10px center !important; background-size: 16px !important; border: 1px solid #ccc !important; border-radius: 6px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; cursor: pointer !important; position: relative !important; z-index: 999 !important; box-sizing: border-box !important; } #od-local-folder-select:hover { border-color: #3b82f6 !important; background-color: #fafafa !important; } #od-local-folder-select:focus { outline: none !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important; } #od-local-folder-select option { display: block !important; padding: 10px 12px !important; margin: 0 !important; font-size: 14px !important; font-weight: 400 !important; color: #333 !important; background-color: #fff !important; cursor: pointer !important; list-style: none !important; list-style-type: none !important; } #od-local-folder-select optgroup { display: block !important; padding: 0 !important; margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; font-style: normal !important; color: #666 !important; background-color: #f5f5f5 !important; list-style: none !important; list-style-type: none !important; } #od-local-folder-select optgroup option { padding-left: 16px !important; font-weight: 400 !important; color: #333 !important; background-color: #fff !important; } #od-local-folder-select, #od-local-folder-select option, #od-local-folder-select optgroup { list-style: none !important; list-style-type: none !important; list-style-image: none !important; } .od-upload-section * { list-style: none !important; list-style-type: none !important; } .od-upload-section .nice-select, .od-upload-section .select2, .od-upload-section .select2-container, .od-upload-section .select2-selection, .od-upload-section .selectric, .od-upload-section .selectric-wrapper, .od-upload-section .jcf-select, .od-upload-section .chosen-container, .od-upload-section .selectize-control, .od-upload-section .ss-main, .od-upload-section .custom-select, .od-upload-section ul, .od-upload-section ol, .od-upload-section li, .od-upload-section .dropdown, .od-upload-section .dropdown-menu, .od-upload-section span.current, .od-upload-section div.list, .od-upload-section > div > ul, .od-upload-section > div > ol, .od-upload-section form > div > ul, .od-upload-section form > div > ol, .od-upload-section form > div > div > ul, .od-upload-section form ul, .od-upload-section form ol, .od-upload-section form li, #od-local-folder-select + *:not(input):not(button), #od-local-folder-select ~ ul, #od-local-folder-select ~ ol, #od-local-folder-select ~ li, #od-local-folder-select ~ div:not(.od-keep), #od-local-folder-select ~ span:not(.od-keep) { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; overflow: hidden !important; position: absolute !important; left: -99999px !important; top: -99999px !important; pointer-events: none !important; } #od-local-file-input, #od-local-upload-btn { display: inline-block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; pointer-events: auto !important; } body > .nice-select, body > .select2-container, body > .selectric-wrapper, body > .selectric-items, body > .jcf-select-drop, body > .chosen-drop, body > ul.nice-select-dropdown, body > div.nice-select, body > div.list, footer .nice-select, footer .select2-container, footer .selectric-wrapper, #footer .nice-select, #footer .select2-container, .site-footer .nice-select, .site-footer .select2-container, .footer-widgets .nice-select, div[class*="footer"] .nice-select, div[class*="footer"] .select2-container, div[id*="footer"] .nice-select, div[id*="footer"] .select2-container { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; position: absolute !important; left: -99999px !important; } /* Part 2: Main inline styles (was od_inline_styles()) */ /* Operatori Dashboard PRO v2.0.12 - Inline CSS */ /* Request Section */ .od-requests-section { background: #ffffff; padding: 20px; border-radius: 8px; margin-bottom: 25px; } .od-requests-section h2 { margin: 0; font-size: 18px; font-weight: 600; } /* Request Badge */ .od-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: bold; line-height: 1; } #od-requests-badge { animation: pulse-orange 2s infinite; } @keyframes pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } } /* Request Cards */ .od-request-card { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer; transition: box-shadow 0.2s, transform 0.2s; } .od-request-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-2px); } .od-request-card.od-status-pending { border-left: 4px solid #FF9800; } .od-request-card.od-status-in-lavorazione { border-left: 4px solid #2196F3; } .od-request-card.od-status-completato { border-left: 4px solid #4CAF50; } .od-request-card.od-status-rifiutato { border-left: 4px solid #f44336; } /* Status Badges */ .od-request-status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; letter-spacing: 0.5px; } /* Request Modal */ #od-modal-view-request .od-modal-content, #od-modal-reject-request .od-modal-content { max-width: 700px; } .od-detail-item { margin-bottom: 10px; } .od-detail-item label { display: block; font-weight: bold; color: #666; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; } .od-detail-item p { margin: 0; font-size: 15px; color: #333; } /* Request Action Buttons */ #od-request-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding-top: 15px; border-top: 1px solid #eee; margin-top: 15px; } #od-btn-request-in-lavorazione { background: #FF9800; color: white; border: none; } #od-btn-request-in-lavorazione:hover { background: #F57C00; } #od-btn-request-approve { background: #4CAF50; color: white; border: none; } #od-btn-request-approve:hover { background: #388E3C; } #od-btn-request-reject { background: #f44336; color: white; border: none; } #od-btn-request-reject:hover { background: #d32f2f; } #od-btn-request-terminate { background: #9C27B0; color: white; border: none; } #od-btn-request-terminate:hover { background: #7B1FA2; } /* Status Display Box */ #od-request-status-display { padding: 12px 15px; border-radius: 6px; margin-bottom: 20px; text-align: center; } /* File chips */ #od-req-files span { display: inline-flex; align-items: center; gap: 5px; background: #e3f2fd; padding: 5px 12px; border-radius: 4px; font-size: 13px; color: #1565C0; } /* Reject Modal */ #od-modal-reject-request h2 { color: #f44336; } #od-reject-motivo { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical; min-height: 80px; } #od-reject-motivo:focus { border-color: #f44336; outline: none; box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1); } /* Modal Base - v4.2.0 MAXIMUM SPECIFICITY using ID selectors */ /* v7.0.0: Added linked company modal */ #od-modal-new-cliente, #od-modal-edit-cliente, #od-modal-delete-cliente, #od-modal-bulk-delete-cliente, #od-modal-assign-clients, #od-modal-password-success, #od-modal-add-dipendente, #od-modal-edit-dipendente, #od-modal-licenzia-dipendente, #od-modal-delete-dipendente, #od-modal-delete-cliente-profile, #od-modal-dipendente-files, #od-modal-ferie-files, #od-modal-malattia-files, #od-modal-stipendi-files, #od-modal-view-folder, #od-modal-business-trips-files, #od-modal-view-request, #od-modal-reject-request, #od-modal-edit-profile, #od-modal-termination-date, #od-modal-change-user-pin, #od-modal-change-password, #od-modal-linked-company, #od-modal-regenerate-password, #od-modal-delegate-cliente, #od-modal-log-time, #od-modal-link-companies, #od-modal-new-operator, #od-modal-new-legal-operator, #od-modal-edit-legal-operator, #od-modal-edit-operator, #od-modal-delete-operator, #od-modal-new-service, #od-modal-edit-service, #od-modal-delete-service, #od-modal-unlink-company { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, 0.5) !important; z-index: 999999 !important; justify-content: center !important; align-items: center !important; padding: 20px !important; box-sizing: border-box !important; } #od-modal-new-cliente:not(.od-hidden), #od-modal-edit-cliente:not(.od-hidden), #od-modal-delete-cliente:not(.od-hidden), #od-modal-bulk-delete-cliente:not(.od-hidden), #od-modal-assign-clients:not(.od-hidden), #od-modal-password-success:not(.od-hidden), #od-modal-add-dipendente:not(.od-hidden), #od-modal-edit-dipendente:not(.od-hidden), #od-modal-licenzia-dipendente:not(.od-hidden), #od-modal-delete-dipendente:not(.od-hidden), #od-modal-delete-cliente-profile:not(.od-hidden), #od-modal-dipendente-files:not(.od-hidden), #od-modal-ferie-files:not(.od-hidden), #od-modal-malattia-files:not(.od-hidden), #od-modal-business-trips-files:not(.od-hidden), #od-modal-stipendi-files:not(.od-hidden), #od-modal-view-folder:not(.od-hidden), #od-modal-view-request:not(.od-hidden), #od-modal-reject-request:not(.od-hidden), #od-modal-edit-profile:not(.od-hidden), #od-modal-termination-date:not(.od-hidden), #od-modal-log-time:not(.od-hidden), #od-modal-change-user-pin:not(.od-hidden), #od-modal-change-password:not(.od-hidden), #od-modal-linked-company:not(.od-hidden), #od-modal-regenerate-password:not(.od-hidden), #od-modal-delegate-cliente:not(.od-hidden), #od-modal-unlink-company:not(.od-hidden), #od-modal-link-companies:not(.od-hidden), #od-modal-new-operator:not(.od-hidden), #od-modal-new-legal-operator:not(.od-hidden), #od-modal-edit-legal-operator:not(.od-hidden), #od-modal-edit-operator:not(.od-hidden), #od-modal-delete-operator:not(.od-hidden), #od-modal-new-service:not(.od-hidden), #od-modal-edit-service:not(.od-hidden), #od-modal-delete-service:not(.od-hidden), #od-modal-edit-permissions:not(.od-hidden), #od-modal-operator-created:not(.od-hidden) { display: flex !important; } #od-modal-new-cliente .od-modal-content, #od-modal-edit-cliente .od-modal-content, #od-modal-delete-cliente .od-modal-content, #od-modal-bulk-delete-cliente .od-modal-content, #od-modal-assign-clients .od-modal-content, #od-modal-password-success .od-modal-content, #od-modal-add-dipendente .od-modal-content, #od-modal-edit-dipendente .od-modal-content, #od-modal-licenzia-dipendente .od-modal-content, #od-modal-delete-dipendente .od-modal-content, #od-modal-delete-cliente-profile .od-modal-content, #od-modal-dipendente-files .od-modal-content, #od-modal-ferie-files .od-modal-content, #od-modal-malattia-files .od-modal-content, #od-modal-stipendi-files .od-modal-content, #od-modal-view-folder .od-modal-content, #od-modal-view-request .od-modal-content, #od-modal-reject-request .od-modal-content, #od-modal-edit-profile .od-modal-content, #od-modal-termination-date .od-modal-content, #od-modal-log-time .od-modal-content, #od-modal-change-user-pin .od-modal-content, #od-modal-change-password .od-modal-content, #od-modal-linked-company .od-modal-content, #od-modal-regenerate-password .od-modal-content, #od-modal-delegate-cliente .od-modal-content, #od-modal-unlink-company .od-modal-content, #od-modal-link-companies .od-modal-content, #od-modal-new-operator .od-modal-content, #od-modal-new-legal-operator .od-modal-content, #od-modal-edit-legal-operator .od-modal-content, #od-modal-edit-operator .od-modal-content, #od-modal-delete-operator .od-modal-content, #od-modal-new-service .od-modal-content, #od-modal-edit-service .od-modal-content, #od-modal-delete-service .od-modal-content, #od-modal-edit-permissions .od-modal-content { background: #fff !important; border-radius: 12px !important; max-width: 600px !important; width: 100% !important; max-height: 85vh !important; overflow-y: auto !important; overflow-x: hidden !important; position: relative !important; padding: 25px 30px 30px 30px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; margin: 0 !important; } /* v9.0.9: Wider modal for folder view */ #od-modal-view-folder .od-modal-content { max-width: 900px !important; } #od-modal-new-cliente .od-modal-close, #od-modal-edit-cliente .od-modal-close, #od-modal-delete-cliente .od-modal-close, #od-modal-bulk-delete-cliente .od-modal-close, #od-modal-assign-clients .od-modal-close, #od-modal-password-success .od-modal-close, #od-modal-add-dipendente .od-modal-close, #od-modal-edit-dipendente .od-modal-close, #od-modal-licenzia-dipendente .od-modal-close, #od-modal-delete-dipendente .od-modal-close, #od-modal-delete-cliente-profile .od-modal-close, #od-modal-dipendente-files .od-modal-close, #od-modal-ferie-files .od-modal-close, #od-modal-malattia-files .od-modal-close, #od-modal-stipendi-files .od-modal-close, #od-modal-folder-files .od-modal-close, #od-modal-view-folder .od-modal-close, #od-modal-view-request .od-modal-close, #od-modal-reject-request .od-modal-close, #od-modal-edit-profile .od-modal-close, #od-modal-termination-date .od-modal-close, #od-modal-log-time .od-modal-close, #od-modal-change-user-pin .od-modal-close, #od-modal-linked-company .od-modal-close, #od-modal-regenerate-password .od-modal-close, #od-modal-delegate-cliente .od-modal-close, #od-modal-unlink-company .od-modal-close, #od-modal-link-companies .od-modal-close, #od-modal-new-operator .od-modal-close, #od-modal-new-legal-operator .od-modal-close, #od-modal-edit-legal-operator .od-modal-close, #od-modal-edit-operator .od-modal-close, #od-modal-delete-operator .od-modal-close, #od-modal-new-service .od-modal-close, #od-modal-edit-service .od-modal-close, #od-modal-delete-service .od-modal-close, #od-modal-edit-permissions .od-modal-close, #od-modal-collaborator .od-modal-close { /* v9.9.76: was a solid red circle - "non mi è mai piaciuta... qualcosa di più leggero e moderno" */ position: absolute !important; top: 15px !important; right: 15px !important; background: #f3f4f6 !important; color: #6b7280 !important; border: 1px solid #e5e7eb !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; cursor: pointer !important; font-size: 18px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; z-index: 10 !important; box-shadow: none !important; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; } div[id^="od-modal-"] .od-modal-close:hover { background: #fee2e2 !important; color: #dc2626 !important; border-color: #fecaca !important; } div[id^="od-modal-"] .od-modal-content h2 { padding-right: 40px !important; margin-top: 0 !important; } /* View Request Button */ .od-btn-view-request { background: #3b82f6; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: background 0.2s; } .od-btn-view-request:hover { background: #2563eb; } /* Termination date picker modal */ #od-modal-termination-date .od-modal-content { max-width: 400px; } #od-termination-date { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } /* General buttons */ .od-btn { padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; box-sizing: border-box; } .od-btn-primary { background: #3b82f6; color: white; border: none; } .od-btn-primary:hover { background: #2563eb; } .od-btn-outline-blue { background: transparent; color: #3b82f6; border: 1px solid #3b82f6; } .od-btn-outline-blue:hover { background: #3b82f6; color: white; } /* v8.1.0: Collaborator modal checkbox styling - no black outline */ #od-modal-collaborator input[type="checkbox"] { outline: none !important; border: 1px solid #d1d5db !important; border-radius: 4px !important; accent-color: #3b82f6; cursor: pointer; } #od-modal-collaborator input[type="checkbox"]:focus { outline: none !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important; border-color: #3b82f6 !important; } #od-modal-collaborator input[type="checkbox"]:checked { border-color: #3b82f6 !important; } /* v8.1.0: Force X icon in collaborator modal close button */ #od-modal-collaborator .od-modal-close { text-indent: -9999px !important; overflow: hidden !important; } #od-modal-collaborator .od-modal-close::after { content: "\00d7" !important; text-indent: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; font-size: 22px !important; font-weight: 300 !important; color: #6b7280 !important; transition: color 0.2s ease !important; } #od-modal-collaborator .od-modal-close:hover::after { color: #dc2626 !important; } .od-btn-secondary { background: white; color: #374151; border: 1px solid #d1d5db; } .od-btn-secondary:hover { background: #f9fafb; border-color: #9ca3af; } .od-btn-danger { background: #ef4444; color: white; border: none; } .od-btn-danger:hover { background: #dc2626; } .od-btn-success { background: #22c55e; color: white; border: none; } .od-btn-success:hover { background: #16a34a; } .od-btn-warning { background: #FF9800; color: white; border: none; } .od-btn-warning:hover { background: #F57C00; } /* v7.5.0: Remove focus outline from checkboxes */ .od-cliente-checkbox:focus, .od-cliente-checkbox:focus-visible, #od-select-all:focus, #od-select-all:focus-visible { outline: none !important; box-shadow: none !important; } /* v7.5.0: Outline button styles for toolbar */ .od-btn-outline-blue { background: white; color: #3b82f6; border: 2px solid #3b82f6; } .od-btn-outline-blue:hover { background: #eff6ff; } .od-btn-outline-green { background: white; color: #16a34a; border: 2px solid #16a34a; } .od-btn-outline-green:hover { background: #f0fdf4; } .od-btn-outline-red { background: white; color: #ef4444; border: 2px solid #ef4444; } .od-btn-outline-red:hover { background: #fef2f2; } .od-btn-outline-gray { background: white; color: #64748b; border: 2px solid #94a3b8; } .od-btn-outline-gray:hover { background: #f8fafc; } .od-btn-outline-orange { background: white; color: #f97316; border: 2px solid #f97316; } .od-btn-outline-orange:hover { background: #fff7ed; } .od-btn-outline-purple { background: white; color: #7c3aed; border: 2px solid #7c3aed; } .od-btn-outline-purple:hover { background: #f5f3ff; } /* Form Layout - Modal Forms */ .od-form { display: flex; flex-direction: column; gap: 15px; } .od-form-grid { display: flex; flex-direction: column; gap: 15px; } .od-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .od-form-row.od-form-row-3 { grid-template-columns: repeat(3, 1fr); } .od-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; } .od-form-group label { display: block; font-weight: 600; font-size: 14px; color: #333; margin-bottom: 4px; } .od-form-group input, .od-form-group select, .od-form-group textarea { width: 100% !important; padding: 10px 12px !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; font-size: 14px !important; background: #fff !important; box-sizing: border-box !important; transition: border-color 0.2s, box-shadow 0.2s; } .od-form-group input:focus, .od-form-group select:focus, .od-form-group textarea:focus { outline: none !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; } .od-form-group input[type="date"] { padding: 8px 12px !important; } .od-form-group textarea { min-height: 80px; resize: vertical; } .od-form-group input[type="radio"] { width: auto !important; margin-right: 5px; } .od-form-group input[type="checkbox"] { width: auto !important; } /* v7.1.3: Secure PIN input - masks text like password but prevents autofill */ .od-pin-secure { -webkit-text-security: disc; -moz-text-security: disc; text-security: disc; font-family: monospace; } .od-form-group .od-radio-group { display: flex; gap: 20px; align-items: center; padding: 5px 0; } .od-form-group .od-radio-group label { display: inline-flex; align-items: center; font-weight: normal; margin-bottom: 0; cursor: pointer; } .od-form-group.od-checkbox-group label { display: inline-flex !important; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; margin-bottom: 0; } .od-form-group.od-checkbox-group input[type="checkbox"] { width: 18px !important; height: 18px; cursor: pointer; flex-shrink: 0; } .od-form > button, .od-form-grid > button { margin-top: 10px; } .od-form-actions { display: flex; gap: 10px; justify-content: flex-start; margin-top: 20px; padding-top: 15px; border-top: 1px solid #e5e7eb; } .od-form-actions button { padding: 10px 20px; } /* Modal Form Specific */ .od-modal-content .od-form { margin-bottom: 0; } .od-modal-content .od-form-grid { margin-bottom: 0; } .od-modal-content h2, .od-modal-content h3 { margin-bottom: 20px; } /* Modal Files Table */ .od-files-table { width: 100%; border-collapse: collapse; } .od-files-table th, .od-files-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #e5e7eb; } .od-files-table th { background: #f3f4f6; font-weight: 600; color: #374151; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .od-files-table tr:hover { background: #f9fafb; } .od-files-table .od-file-icon { display: inline-flex; align-items: center; gap: 8px; } .od-files-table .od-file-icon svg { flex-shrink: 0; color: #6b7280; } /* v9.6.5: Green outline style for download buttons */ .od-btn-download { background: #dcfce7; color: #16a34a; border: 2px solid #22c55e; font-weight: 500; } .od-btn-download:hover { background: #bbf7d0; border-color: #16a34a; } /* Responsive */ @media (max-width: 768px) { #od-request-actions { flex-direction: column; } #od-request-actions button { width: 100%; } .od-request-card > div { flex-direction: column; } .od-request-card .od-request-status-badge { align-self: flex-start; } #od-modal-view-request .od-modal-content { padding: 15px; } .od-form-row { grid-template-columns: 1fr; } .od-form-row.od-form-row-3 { grid-template-columns: 1fr; } .od-form-actions { flex-direction: column; } .od-form-actions button { width: 100%; } } /* Animation for new requests */ .od-request-card.od-status-pending { animation: highlight-pending 3s ease-in-out; } @keyframes highlight-pending { 0%, 100% { background: white; } 50% { background: #fff8e1; } }