.document-system { font-family: 'Open Sans', Arial, sans-serif; max-width: 100%; margin: 20px 0; background: #fff; border: 1px solid #e6e6e6; border-radius: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .document-system h3, .document-search-form h3 { display: none !important; } .document-search-form { background: #f8f8f8; border-bottom: 1px solid #e6e6e6; padding: 20px; margin: 0; } .main-search-row { display: flex; align-items: center; margin-bottom: 15px; gap: 15px; } .main-search-row label { min-width: 150px; font-weight: 600; color: #333; font-size: 13px; text-transform: uppercase; flex-shrink: 0; } .main-search-row input[type="text"] { flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 0; font-size: 13px; font-family: 'Open Sans', Arial, sans-serif; background: #fff; transition: border-color 0.3s; } .main-search-row input[type="text"]:focus { outline: none; border-color: #dd3333; box-shadow: 0 0 5px rgba(221, 51, 51, 0.3); } .main-search-row button[type="submit"] { background: #dd3333; color: white; border: none; padding: 10px 25px; border-radius: 0; cursor: pointer; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; } .main-search-row button[type="submit"]:hover { background: #c12e2a; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .main-search-row .advanced-toggle-btn { background: #666 !important; color: white !important; border: none !important; padding: 10px 20px !important; border-radius: 0 !important; cursor: pointer !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 600 !important; transition: all 0.3s !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; flex-shrink: 0; } .main-search-row .advanced-toggle-btn:hover { background: #555 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; } .advanced-search-row { display: none !important;  } .advanced-search-row[style*="block"], .advanced-search-row[style*="flex"] { display: flex !important; align-items: center; margin-bottom: 15px; gap: 10px; } .advanced-search-row:last-child { margin-bottom: 0; } .advanced-search-row label { min-width: 150px; font-weight: 600; color: #333; font-size: 13px; text-transform: uppercase; } .advanced-search-row select { flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 0; font-size: 13px; font-family: 'Open Sans', Arial, sans-serif; background: #fff; transition: border-color 0.3s; } .advanced-search-row select:focus { outline: none; border-color: #dd3333; box-shadow: 0 0 5px rgba(221, 51, 51, 0.3); } .document-count { margin: 0; padding: 15px 20px; font-weight: 600; color: #333; background: #f8f8f8; border-bottom: 1px solid #e6e6e6; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .document-table { width: 100%; border-collapse: collapse; margin: 0; background: white; font-size: 13px; } .document-table thead { background: #fff; color: black; } .document-table th { padding: 12px 15px; text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-right: 1px solid #555; } .document-table th:last-child { border-right: none; } .document-table th.sortable { cursor: pointer; transition: background 0.3s; } .document-table th.sortable:hover { background: #444; } .document-table th:nth-child(1) { width: 15%; } .document-table th:nth-child(2) { width: 12%; } .document-table th:nth-child(3) { width: 58%; } .document-table th:nth-child(4) { width: 15%; } .document-table td { padding: 15px; border-bottom: 1px solid #f0f0f0; vertical-align: top; font-size: 13px; line-height: 1.5; border-right: 1px solid #f8f8f8; } .document-table td:last-child { border-right: none; } .document-table tbody tr { transition: background 0.3s; } .document-table tbody tr:hover { background: #f8f8f8; } .document-table tbody tr:nth-child(even) { background: #fafafa; } .document-table tbody tr:nth-child(even):hover { background: #f0f0f0; } .document-system .document-table a, .document-system .document-table tbody a, .document-system .document-table tbody tr td a, .document-system .document-table tbody tr td:nth-child(3) a { color: #000000 !important; text-decoration: none !important; font-weight: 500 !important; transition: color 0.3s !important; background: transparent !important; padding: 0 !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; border: none !important; } .document-system .document-table a:hover, .document-system .document-table tbody a:hover, .document-system .document-table tbody tr td a:hover, .document-system .document-table tbody tr td:nth-child(3) a:hover { color: #333333 !important; text-decoration: underline !important; background: transparent !important; } .document-system .document-table td a[href*=".pdf"], .document-system .document-table td a[href*=".doc"], .document-system .document-table td a[href*=".docx"], .document-system .document-table td a[href*=".xls"], .document-system .document-table td a[href*=".xlsx"], .document-system .document-table td a[target="_blank"], .document-system .document-table tbody tr td a[target="_blank"] { background: #dd3333 !important; color: #ffffff !important; padding: 6px 12px !important; border-radius: 0 !important; font-size: 12px !important; text-decoration: none !important; margin-bottom: 0 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 600 !important; transition: background 0.3s !important; border: none !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; display: inline-block !important; } .document-system .document-table td a[href*=".pdf"]:hover, .document-system .document-table td a[href*=".doc"]:hover, .document-system .document-table td a[href*=".docx"]:hover, .document-system .document-table td a[href*=".xls"]:hover, .document-system .document-table td a[href*=".xlsx"]:hover, .document-system .document-table td a[target="_blank"]:hover, .document-system .document-table tbody tr td a[target="_blank"]:hover { background: #c12e2a !important; color: #ffffff !important; text-decoration: none !important; transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; } .document-table .view-count, .document-table td br, .document-table tbody tr td br { display: none !important; } .sort-indicator { margin-left: 5px; opacity: 0.6; } .document-table th.sort-asc .sort-indicator, .document-table th.sort-desc .sort-indicator { opacity: 1; color: #dd3333; } .page-numbers, .document-pagination .page-numbers { display: inline-block; padding: 8px 12px; margin: 0 2px; text-decoration: none; border: 1px solid #ddd; color: #333; border-radius: 0; font-size: 12px; font-weight: 600; transition: all 0.3s; background: white; } .page-numbers:hover, .document-pagination .page-numbers:hover { background: #dd3333; color: white; text-decoration: none; border-color: #dd3333; } .page-numbers.current, .document-pagination .page-numbers.current { background: #dd3333; color: white; border-color: #dd3333; cursor: default; } .document-pagination { text-align: center; padding: 20px; background: #f8f8f8; border-top: 1px solid #e6e6e6; } .document-results.loading { position: relative; opacity: 0.6; pointer-events: none; } .document-results.loading::after { content: "ĐANG TẢI..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(51, 51, 51, 0.9); color: white; padding: 12px 20px; border-radius: 0; z-index: 1000; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .document-message { padding: 15px 20px; margin: 15px 0; border-radius: 0; font-size: 13px; border-left: 4px solid; font-weight: 500; } .document-message.success { background: #d4edda; border-left-color: #28a745; color: #155724; } .document-message.error { background: #f8d7da; border-left-color: #dc3545; color: #721c24; } .document-message.info { background: #d1ecf1; border-left-color: #17a2b8; color: #0c5460; } .document-attachment-section { margin: 30px 0; border: 1px solid #e6e6e6; border-radius: 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .attachment-title { color: #333; margin: 0; padding: 15px 20px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: #f8f8f8; border-bottom: 3px solid #dd3333; } .pdf-viewer-wrapper, .document-viewer-wrapper, .text-viewer-wrapper, .image-viewer-wrapper, .download-link-wrapper { background: white; border: none; border-radius: 0; overflow: hidden; box-shadow: none; } .attachment-header { background: #333; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .attachment-header h4 { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .attachment-actions { display: flex; gap: 10px; flex-wrap: wrap; } .btn { display: inline-block; padding: 8px 15px; text-decoration: none; border-radius: 0; font-size: 12px; font-weight: 600; transition: all 0.3s; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn-primary { background: #dd3333; color: white; } .btn-primary:hover { background: #c12e2a; color: white; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn-success { background: #28a745; color: white; } .btn-success:hover { background: #218838; color: white; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn-secondary { background: #6c757d; color: white; } .btn-secondary:hover { background: #5a6268; color: white; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn-large { padding: 12px 25px; font-size: 14px; } .document-viewer-tabs { display: flex; background: #f8f8f8; border-bottom: 1px solid #e6e6e6; } .viewer-tab { flex: 1; padding: 12px 20px; background: none; border: none; cursor: pointer; font-size: 12px; color: #666; transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .viewer-tab.active { background: white; color: #333; border-bottom: 3px solid #dd3333; } .viewer-tab:hover:not(.active) { background: #eee; color: #333; } .text-content-container { max-height: 600px; overflow-y: auto; padding: 20px; background: white; border: 1px solid #f0f0f0; } .text-content-container pre { margin: 0; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; color: #333; } .image-container { padding: 20px; text-align: center; background: white; } .image-container img { cursor: pointer; transition: transform 0.3s; border: 1px solid #e6e6e6; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .image-container img:hover { transform: scale(1.02); } .download-container { display: flex; align-items: center; justify-content: space-between; padding: 25px; background: white; gap: 20px; flex-wrap: wrap; border: 1px solid #f0f0f0; } .file-info { display: flex; align-items: center; gap: 20px; flex: 1; } .file-icon-large { font-size: 48px; line-height: 1; } .file-details { flex: 1; } .file-name { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; } .file-extension { font-size: 12px; color: #dd3333; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 3px; } .file-size { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; } @media (max-width: 768px) { .document-system { margin: 10px 0; } .document-search-form { padding: 15px; } .main-search-row { flex-direction: column; align-items: stretch; gap: 10px; } .main-search-row label { min-width: auto; margin-bottom: 5px; font-size: 12px; } .main-search-row input[type="text"] { margin-bottom: 10px; } .main-search-row button[type="submit"], .main-search-row .advanced-toggle-btn { width: 100%; margin-bottom: 5px; } .advanced-search-row { flex-direction: column; align-items: stretch; } .advanced-search-row label { min-width: auto; margin-bottom: 5px; font-size: 12px; } .document-table { font-size: 11px; } .document-table th, .document-table td { padding: 8px 5px; } .document-table th:nth-child(1), .document-table th:nth-child(2) { display: none; } .document-table td:nth-child(1), .document-table td:nth-child(2) { display: none; } .document-table th:nth-child(3) { width: 70%; } .document-table th:nth-child(4) { width: 30%; } .attachment-header { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; } .attachment-actions { justify-content: center; } .download-container { flex-direction: column; text-align: center; } .file-info { flex-direction: column; text-align: center; } .pdf-embed-container iframe, .document-embed-container iframe { height: 400px; } .action-btn { display: block !important; width: 100% !important; margin: 5px 0 !important; text-align: center !important; } .document-table td a[href*="pdf"], .document-table td a[href*="doc"], .document-table td a[href*="docx"], .document-table td a[target="_blank"] { background: #dd3333 !important; color: white !important; display: block !important; text-align: center !important; margin: 5px 0 !important; } } @media print { .attachment-actions, .document-viewer-tabs, .viewer-tab, .action-btn { display: none !important; } .document-search-form { display: none !important; } .document-system, .document-attachment-section { border: 1px solid #999; break-inside: avoid; box-shadow: none; } .attachment-title { background: #f0f0f0 !important; color: #000 !important; } } .tie-container .document-system { margin: 20px 0; } .post-content .document-system { margin: 30px 0; } .widget .document-system { font-size: 12px; } .widget .document-table th, .widget .document-table td { padding: 8px 5px; font-size: 11px; } .document-system { font-family: 'Open Sans', Arial, sans-serif; max-width: 100%; margin: 20px 0; background: #fff; border: 1px solid #e6e6e6; border-radius: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .document-system h3 { display: none; } .document-search-form { background: #f8f8f8; border-bottom: 1px solid #e6e6e6; padding: 20px; margin: 0; } .main-search-row { display: flex; align-items: center; margin-bottom: 15px; gap: 15px; } .main-search-row label { min-width: 150px; font-weight: 600; color: #333; font-size: 13px; text-transform: uppercase; flex-shrink: 0; } .main-search-row input[type="text"] { flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 0; font-size: 13px; font-family: 'Open Sans', Arial, sans-serif; background: #fff; transition: border-color 0.3s; } .main-search-row input[type="text"]:focus { outline: none; border-color: #dd3333; box-shadow: 0 0 5px rgba(221, 51, 51, 0.3); } .main-search-row button[type="submit"] { background: #dd3333; color: white; border: none; padding: 10px 25px; border-radius: 0; cursor: pointer; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex-shrink: 0; } .main-search-row button[type="submit"]:hover { background: #c12e2a; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .main-search-row .advanced-toggle-btn { background: #666 !important; color: white !important; border: none !important; padding: 10px 20px !important; border-radius: 0 !important; cursor: pointer !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 600 !important; transition: all 0.3s !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; flex-shrink: 0; } .main-search-row .advanced-toggle-btn:hover { background: #555 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; } .advanced-search-row { display: none;  align-items: center; margin-bottom: 15px; gap: 10px; } .advanced-search-row:last-child { margin-bottom: 0; } .advanced-search-row label { min-width: 150px; font-weight: 600; color: #333; font-size: 13px; text-transform: uppercase; } .advanced-search-row select { flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 0; font-size: 13px; font-family: 'Open Sans', Arial, sans-serif; background: #fff; transition: border-color 0.3s; } .advanced-search-row select:focus { outline: none; border-color: #dd3333; box-shadow: 0 0 5px rgba(221, 51, 51, 0.3); } .advanced-search-row.show { display: flex; } .search-row { display: flex; align-items: center; margin-bottom: 15px; gap: 10px; } .search-row:last-child { margin-bottom: 0; justify-content: center; } .search-row label { min-width: 150px; font-weight: 600; color: #333; font-size: 13px; text-transform: uppercase; } .search-row input[type="text"], .search-row select { flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: 0; font-size: 13px; font-family: 'Open Sans', Arial, sans-serif; background: #fff; transition: border-color 0.3s; } .search-row input[type="text"]:focus, .search-row select:focus { outline: none; border-color: #dd3333; box-shadow: 0 0 5px rgba(221, 51, 51, 0.3); } .search-row button { background: #dd3333; color: white; border: none; padding: 10px 25px; border-radius: 0; cursor: pointer; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .search-row button:hover { background: #c12e2a; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .advanced-search-toggle-wrapper { text-align: right; padding: 10px 20px; background: #f0f0f0; border-bottom: 1px solid #e6e6e6; } .advanced-toggle-btn { background: #666 !important; color: white !important; border: none !important; padding: 8px 15px !important; border-radius: 0 !important; cursor: pointer !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 600 !important; transition: all 0.3s !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; } .advanced-toggle-btn:hover { background: #555 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; } .document-system h3 { position: static; padding-right: 20px; } .action-btn { background: #17a2b8 !important; color: white !important; border: none !important; padding: 10px 20px !important; border-radius: 0 !important; cursor: pointer !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-left: 10px !important; transition: all 0.3s !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; } .export-btn { background: #17a2b8 !important; } .export-btn:hover { background: #138496 !important; transform: translateY(-1px) !important; } .print-btn { background: #6f42c1 !important; } .print-btn:hover { background: #5a32a3 !important; transform: translateY(-1px) !important; } .reset-btn { background: #6c757d !important; } .reset-btn:hover { background: #5a6268 !important; transform: translateY(-1px) !important; } .document-count { margin: 0; padding: 15px 20px; font-weight: 600; color: #333; background: #f8f8f8; border-bottom: 1px solid #e6e6e6; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .document-table { width: 100%; border-collapse: collapse; margin: 0; background: white; font-size: 13px; } .document-table thead { background: #333; color: black; } .document-table th { padding: 12px 15px; text-align: center; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; border-right: 1px solid #555; } .document-table th:last-child { border-right: none; } .document-table th.sortable { cursor: pointer; transition: background 0.3s; } .document-table th.sortable:hover { background: #444; } .document-table th:nth-child(1) { width: 15%; } .document-table th:nth-child(2) { width: 12%; } .document-table th:nth-child(3) { width: 58%; } .document-table th:nth-child(4) { width: 15%; } .document-table td { padding: 15px; border-bottom: 1px solid #f0f0f0; vertical-align: top; font-size: 13px; line-height: 1.5; border-right: 1px solid #f8f8f8; } .document-table td:last-child { border-right: none; } .document-table tbody tr { transition: background 0.3s; } .document-table tbody tr:hover { background: #f8f8f8; } .document-table tbody tr:nth-child(even) { background: #fafafa; } .document-table tbody tr:nth-child(even):hover { background: #f0f0f0; } .document-table a { color: #dd3333; text-decoration: none; font-weight: 500; transition: color 0.3s; } .document-table a:hover { color: #c12e2a; text-decoration: underline; } .document-table td a[href*="pdf"], .document-table td a[href*="doc"], .document-table td a[href*="docx"], .document-table td a[target="_blank"] { display: inline-block; background: #28a745; color: white; padding: 4px 8px; border-radius: 0; font-size: 11px; text-decoration: none; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; transition: background 0.3s; } .document-table td a[href*="pdf"]:hover, .document-table td a[href*="doc"]:hover, .document-table td a[href*="docx"]:hover, .document-table td a[target="_blank"]:hover { background: #218838; text-decoration: none; color: white; } .document-table .view-count { font-size: 11px; color: #999; font-style: italic; text-transform: uppercase; letter-spacing: 0.5px; } .page-numbers, .document-pagination .page-numbers { display: inline-block; padding: 8px 12px; margin: 0 2px; text-decoration: none; border: 1px solid #ddd; color: #333; border-radius: 0; font-size: 12px; font-weight: 600; transition: all 0.3s; background: white; } .page-numbers:hover, .document-pagination .page-numbers:hover { background: #dd3333; color: white; text-decoration: none; border-color: #dd3333; } .page-numbers.current, .document-pagination .page-numbers.current { background: #dd3333; color: white; border-color: #dd3333; cursor: default; } .document-pagination { text-align: center; padding: 20px; background: #f8f8f8; border-top: 1px solid #e6e6e6; } .document-results.loading { position: relative; opacity: 0.6; pointer-events: none; } .document-results.loading::after { content: "ĐANG TẢI..."; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(51, 51, 51, 0.9); color: white; padding: 12px 20px; border-radius: 0; z-index: 1000; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .document-message { padding: 15px 20px; margin: 15px 0; border-radius: 0; font-size: 13px; border-left: 4px solid; font-weight: 500; } .document-message.success { background: #d4edda; border-left-color: #28a745; color: #155724; } .document-message.error { background: #f8d7da; border-left-color: #dc3545; color: #721c24; } .document-message.info { background: #d1ecf1; border-left-color: #17a2b8; color: #0c5460; } #export-documents, #print-documents, button[type="reset"] { background: #17a2b8 !important; color: white !important; border: none !important; padding: 10px 20px !important; border-radius: 0 !important; cursor: pointer !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-left: 10px !important; transition: all 0.3s !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; } #export-documents:hover, #print-documents:hover { background: #138496 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; } button[type="reset"] { background: #6c757d !important; } button[type="reset"]:hover { background: #5a6268 !important; } #print-documents { background: #6f42c1 !important; } #print-documents:hover { background: #5a32a3 !important; } .document-attachment-section { margin: 30px 0; border: 1px solid #e6e6e6; border-radius: 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .attachment-title { color: #333; margin: 0; padding: 15px 20px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: #fff; border-bottom: 3px solid #dd3333; } .pdf-viewer-wrapper, .document-viewer-wrapper, .text-viewer-wrapper, .image-viewer-wrapper, .download-link-wrapper { background: white; border: none; border-radius: 0; overflow: hidden; box-shadow: none; } .attachment-header { background: #333; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .attachment-header h4 { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .attachment-actions { display: flex; gap: 10px; flex-wrap: wrap; } .btn { display: inline-block; padding: 8px 15px; text-decoration: none; border-radius: 0; font-size: 12px; font-weight: 600; transition: all 0.3s; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn-primary { background: #dd3333; color: white; } .btn-primary:hover { background: #c12e2a; color: white; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn-success { background: #28a745; color: white; } .btn-success:hover { background: #218838; color: white; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn-secondary { background: #6c757d; color: white; } .btn-secondary:hover { background: #5a6268; color: white; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn-large { padding: 12px 25px; font-size: 14px; } .document-viewer-tabs { display: flex; background: #f8f8f8; border-bottom: 1px solid #e6e6e6; } .viewer-tab { flex: 1; padding: 12px 20px; background: none; border: none; cursor: pointer; font-size: 12px; color: #666; transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .viewer-tab.active { background: white; color: #333; border-bottom: 3px solid #dd3333; } .viewer-tab:hover:not(.active) { background: #eee; color: #333; } .text-content-container { max-height: 600px; overflow-y: auto; padding: 20px; background: white; border: 1px solid #f0f0f0; } .text-content-container pre { margin: 0; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; color: #333; } .image-container { padding: 20px; text-align: center; background: white; } .image-container img { cursor: pointer; transition: transform 0.3s; border: 1px solid #e6e6e6; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .image-container img:hover { transform: scale(1.02); } .download-container { display: flex; align-items: center; justify-content: space-between; padding: 25px; background: white; gap: 20px; flex-wrap: wrap; border: 1px solid #f0f0f0; } .file-info { display: flex; align-items: center; gap: 20px; flex: 1; } .file-icon-large { font-size: 48px; line-height: 1; } .file-details { flex: 1; } .file-name { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; } .file-extension { font-size: 12px; color: #dd3333; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 3px; } .file-size { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; } .sort-indicator { margin-left: 5px; opacity: 0.6; } .document-table th.sort-asc .sort-indicator, .document-table th.sort-desc .sort-indicator { opacity: 1; color: #dd3333; } @media (max-width: 768px) { .document-system { margin: 10px 0; } .document-search-form { padding: 15px; } .search-row { flex-direction: column; align-items: stretch; } .search-row label { min-width: auto; margin-bottom: 5px; font-size: 12px; } .document-table { font-size: 11px; } .document-table th, .document-table td { padding: 8px 5px; } .document-table th:nth-child(1), .document-table th:nth-child(2) { display: none; } .document-table td:nth-child(1), .document-table td:nth-child(2) { display: none; } .document-table th:nth-child(3) { width: 70%; } .document-table th:nth-child(4) { width: 30%; } .attachment-header { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; } .attachment-actions { justify-content: center; } .download-container { flex-direction: column; text-align: center; } .file-info { flex-direction: column; text-align: center; } .pdf-embed-container iframe, .document-embed-container iframe { height: 400px; } .main-search-row { flex-direction: column; align-items: stretch; gap: 10px; } .main-search-row label { min-width: auto; margin-bottom: 5px; font-size: 12px; } .main-search-row input[type="text"] { margin-bottom: 10px; } .main-search-row button[type="submit"], .main-search-row .advanced-toggle-btn { width: 100%; margin-bottom: 5px; } .advanced-search-row { flex-direction: column; align-items: stretch; } .advanced-search-row label { min-width: auto; margin-bottom: 5px; font-size: 12px; } .document-table td a[href*="pdf"], .document-table td a[href*="doc"], .document-table td a[href*="docx"], .document-table td a[target="_blank"] { background: #dd3333 !important; color: white !important; display: block !important; text-align: center !important; margin: 5px 0 !important; } .action-btn { display: block !important; width: 100% !important; margin: 5px 0 !important; text-align: center !important; } } @media print { .attachment-actions, .document-viewer-tabs, .viewer-tab, #toggle-advanced-search, #export-documents, #print-documents, button[type="reset"] { display: none !important; } .document-search-form { display: none !important; } .document-system, .document-attachment-section { border: 1px solid #999; break-inside: avoid; box-shadow: none; } .attachment-title, .document-system h3 { background: #f0f0f0 !important; color: #000 !important; } } .tie-container .document-system { margin: 20px 0; } .post-content .document-system { margin: 30px 0; } .document-system + .breadcrumb { margin-top: 20px; } .widget .document-system { font-size: 12px; } .widget .document-table th, .widget .document-table td { padding: 8px 5px; font-size: 11px; }