/* styles.css */
:root{--primary:#003087;--primary-dark:#002060;--primary-light:#4d8eff;--secondary:#6b7280;--success:#198754;--warning:#ffc107;--danger:#dc3545;--background:#f4f7fc;--surface:#ffffff;--text-primary:#212529;--text-secondary:#6c757d;--border:#dee2e6;--shadow:0 0.5rem 1rem rgba(0,0,0,0.1);--shadow-sm:0 0.125rem 0.25rem rgba(0,0,0,0.075);--shadow-lg:0 1rem 3rem rgba(0,0,0,0.175);--radius:0.5rem;--gradient-bg:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);}
* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--gradient-bg);color:var(--text-primary);line-height:1.6;overflow-x:hidden;}
.app {min-height:100vh;display:flex;flex-direction:column;}
.no-select {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.header {background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);color:white;padding:2rem;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;}
.header::before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,0.1) 0%,transparent 100%);pointer-events:none;}
.header-content {max-width:1400px;margin:0 auto;text-align:center;position:relative;z-index:1;}
.header h1 {font-size:clamp(1.5rem,3vw,2.5rem);font-weight:800;margin-bottom:0.5rem;letter-spacing:-0.5px;text-shadow:2px 2px 4px rgba(0,0,0,0.3);}
.header p {font-size:clamp(0.875rem,2vw,1rem);opacity:0.9;font-style:italic;}
.nav {background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:40;}
.nav-content {max-width:1400px;margin:0 auto;display:flex;justify-content:center;flex-wrap:wrap;padding:0 1rem;}
.nav-item {display:flex;align-items:center;gap:0.75rem;padding:1.25rem 2rem;background:none;border:none;color:var(--text-secondary);cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border-bottom:3px solid transparent;white-space:nowrap;font-weight:600;font-size:0.875rem;text-transform:uppercase;letter-spacing:0.5px;position:relative;overflow:hidden;}
.nav-item::before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--primary-light),var(--primary));opacity:0;transition:opacity 0.3s ease;z-index:-1;}
.nav-item:hover {color:var(--primary);background-color:rgba(77,142,255,0.1);transform:translateY(-2px);}
.nav-item.active {color:var(--primary);border-bottom-color:var(--primary);background-color:rgba(77,142,255,0.1);}
.nav-item.active::before {opacity:0.1;}
.icon {font-size:1.1rem;transition:transform 0.3s ease;}
.nav-item:hover .icon {transform:scale(1.1);}
.main {flex:1;padding:2rem;max-width:1400px;margin:0 auto;width:100%;}
.page-title {font-size:2rem;font-weight:700;color:var(--primary-dark);margin-bottom:1.5rem;padding-bottom:0.5rem;border-bottom:2px solid var(--primary-light);}
.card {background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:1.5rem;overflow:hidden;transition:all 0.3s ease;}
.card-header {padding:1.5rem;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);}
.card-header h3 {font-size:1.25rem;font-weight:700;color:var(--primary-dark);}
.card-body {padding:1.5rem;}
.report-card {display:flex;flex-direction:column;}
.report-card .card-body {flex:1;display:flex;flex-direction:column;justify-content:space-between;}
.report-description {color:var(--text-secondary);margin-bottom:1rem;flex:1;line-height:1.4;}
.metrics-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem;padding:0.5rem;}
.metric-card {background:var(--surface);padding:1.5rem 1rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);text-align:center;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;}
.metric-card::before {content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--primary-light));}
.metric-card:hover {transform:translateY(-8px);box-shadow:var(--shadow-lg);z-index:10;}
.metric-value {font-size:2rem;font-weight:800;margin-bottom:0.5rem;transition:transform 0.3s ease;}
.metric-card:hover .metric-value {transform:scale(1.1);}
.metric-value.primary {color:var(--primary);}
.metric-value.success {color:var(--success);}
.metric-value.warning {color:var(--warning);}
.metric-value.danger {color:var(--danger);}
.metric-label {font-size:0.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;}
.filters-section {background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border);padding:1.5rem;margin-bottom:2rem;}
.form-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;grid-auto-rows:1fr;}
.form-section {background:#f8f9fa;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem;transition:all 0.3s ease;}
.form-section h4 {font-size:1rem;font-weight:700;color:var(--primary-dark);margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--primary-light);text-transform:uppercase;letter-spacing:0.5px;}
.form-group {margin-bottom:1rem;}
.form-group label {display:block;font-size:0.875rem;font-weight:600;color:var(--text-primary);margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.25px;}
.form-input {width:100%;padding:0.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.875rem;transition:all 0.3s ease;background:var(--surface);box-shadow:var(--shadow-sm);}
.form-input:hover:not(:focus) {border-color:var(--primary-light);box-shadow:0 0 0 0.2rem rgba(77,142,255,0.1);}
.form-input:focus {outline:none;border-color:var(--primary);box-shadow:0 0 0 0.2rem rgba(77,142,255,0.25);transform:translateY(-1px);}
select.form-input {-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M7 9L0 0h14z' fill='%236c757d'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:0.75rem;padding-right:2.5rem;}
.file-upload-group {position:relative;display:inline-flex;align-items:center;gap:1rem;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:all 0.3s ease;box-shadow:var(--shadow-sm);max-width:max-content;}
.file-upload-input {opacity:0;position:absolute;top:0;left:0;width:auto;height:100%;cursor:pointer;}
.file-upload-label {padding:0.75rem 1rem;cursor:pointer;max-width:max-content;}
.file-upload-group:hover {border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(77,142,255,0.15);transform:translateY(-1px);}
.file-upload-label:active {transform:translateY(1px);box-shadow:var(--shadow-sm);}
.file-upload-button {flex-shrink:0;}
.file-upload-text {color:var(--text-secondary);padding-left:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.attachment-item {display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;}
.attachment-item label {cursor:pointer;margin-bottom:0;text-transform:none;}
.btn {display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;font-size:0.875rem;font-weight:600;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-decoration:none;text-transform:uppercase;letter-spacing:0.5px;box-shadow:var(--shadow-sm);}
.btn:disabled {opacity:0.5;cursor:not-allowed;transform:none !important;}
.btn:not(:disabled):hover {transform:translateY(-2px);box-shadow:var(--shadow);}
.btn:not(:disabled):active {transform:translateY(0);}
.btn-primary {background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;}
.btn-primary:hover:not(:disabled) {background:linear-gradient(135deg,var(--primary-dark),var(--primary));}
.btn-secondary {background:linear-gradient(135deg,var(--secondary),#9ca3af);color:white;}
.btn-outline {background:var(--surface);border-color:var(--border);color:var(--text-primary);}
.btn-outline:hover:not(:disabled) {background:var(--primary);color:white;border-color:var(--primary);}
.btn-link {background:none;border:none;padding:0.5rem;color:var(--primary);font-weight:600;font-size:0.8rem;text-transform:none;letter-spacing:normal;box-shadow:none;cursor:pointer;user-select:none;}
.btn-link:hover {color:var(--primary-dark);text-decoration:underline;transform:none;box-shadow:none;}
.btn-link.danger {color:var(--danger);}
.btn-link.success {color:var(--success);}
.btn-link.danger:hover {color:#b02a37;}
.btn-link.success:hover {color:#146c51;}
.table-container {background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden;opacity:0;animation:fadeIn 0.4s ease-out forwards;}
.table {width:100%;border-collapse:collapse;}
.table th {background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:1rem;text-align:left;font-weight:700;color:var(--primary-dark);border-bottom:2px solid var(--border);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.5px;}
.table td {padding:1rem;border-bottom:1px solid var(--border);font-size:0.875rem;transition:background-color 0.3s ease;}
.table tbody tr {transition:all 0.3s ease;}
.table tbody tr:last-child td {border-bottom:none;}
.badge {display:inline-flex;align-items:center;padding:0.375rem 0.75rem;font-size:0.75rem;font-weight:600;border-radius:2rem;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.3s ease;user-select:none;}
.badge.success {background:linear-gradient(135deg,#d1e7dd,#a3d9a5);color:#0f5132;border:1px solid #badbcc;}
.badge.warning {background:linear-gradient(135deg,#fff3cd,#ffe69c);color:#664d03;border:1px solid #ffecb5;}
.badge.danger {background:linear-gradient(135deg,#f8d7da,#f1a0a5);color:#842029;border:1px solid #f5c2c7;}
.badge.secondary {background:linear-gradient(135deg,#f3f4f6,#d1d5db);color:#374151;border:1px solid #e5e7eb;}
.modal-overlay {position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50;animation:fadeIn 0.3s ease;}
.modal {background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:4xl;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:modalSlideIn 0.4s cubic-bezier(0.4,0,0.2,1);}
.modal-header {padding:1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);}
.modal-title {font-size:1.25rem;font-weight:700;color:var(--primary-dark);}
.modal-close {background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);padding:0.5rem;border-radius:var(--radius);transition:all 0.3s ease;}
.modal-close:hover {color:var(--danger);background:rgba(220,53,69,0.1);transform:scale(1.1);}
.modal-body {padding:2rem;overflow-y:auto;flex:1;}
.detail-view {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;}
@media (min-width:1920px){.detail-view{grid-template-columns:repeat(3,1fr);}}
.detail-section {background:#f8f9fa;border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:all 0.3s ease;}
.detail-section h4 {font-size:1rem;font-weight:700;color:var(--primary-dark);margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--primary-light);text-transform:uppercase;letter-spacing:0.5px;}
.detail-table {width:100%;border-collapse:collapse;}
.detail-table tr {border-bottom:1px solid var(--border);}
.detail-table tr:last-child {border-bottom:none;}
.detail-table td {padding:0.5rem 0;font-size:0.875rem;}
.detail-label {font-weight:600;color:var(--text-secondary);padding-right:1rem;width:40%;vertical-align:top;}
.detail-table td:nth-child(2) {width:60%;}
.notes p {margin:0;color:var(--text-primary);line-height:1.5;}
.attachments .attachments-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;}
.attachments .attachment-card {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:all 0.3s ease;}
.attachments .attachment-image {width:100%;height:120px;object-fit:cover;}
.attachments .attachment-placeholder {width:100%;height:120px;display:flex;align-items:center;justify-content:center;background:#f8f9fa;font-size:2rem;color:var(--text-secondary);}
.attachments .attachment-info {padding:0.5rem;text-align:center;}
.attachments .attachment-download {display:block;color:var(--primary);text-decoration:none;font-size:0.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 0.5rem;}
.attachments .attachment-download:hover {color:var(--primary-dark);text-decoration:underline;}
.qr-section {text-align:center;}
.qr-canvas {margin:0 auto 1rem;display:inline-block;border:1px solid var(--border);padding:10px;background:white;border-radius:var(--radius);}
.qr-section p {margin-bottom:1rem;color:var(--text-secondary);}
.search-container {position:relative;}
.search-input {padding-left:2.5rem;}
.search-icon {position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none;font-size:1rem;opacity:1;transition:opacity 0.3s ease;}
.search-input:focus + .search-icon,.search-input:not(:placeholder-shown) + .search-icon {opacity:0.5;}
.alert {padding:1rem 1.5rem;border-radius:var(--radius);margin-bottom:1.5rem;border:1px solid;}
.alert.success {background:linear-gradient(135deg,#d1e7dd,#a3d9a5);border-color:#badbcc;color:#0f5132;}
.alert.error {background:linear-gradient(135deg,#f8d7da,#f1a0a5);border-color:#f5c2c7;color:#842029;}
.loading {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:var(--text-secondary);text-align:center;min-height:100vh;}
.spinner {width:40px;height:40px;border:3px solid var(--border);border-top:3px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem;}
.loading-text {font-size:1.125rem;font-weight:600;color:var(--primary);}
@keyframes spin {to {transform:rotate(360deg);}}
@keyframes fadeIn {from {opacity:0;} to {opacity:1;}}
@keyframes modalSlideIn {from {opacity:0;transform:scale(0.95) translateY(-20px);} to {opacity:1;transform:scale(1) translateY(0);}}
.hidden {display:none;}
.text-center {text-align:center;}
.text-right {text-align:right;}
.mb-4 {margin-bottom:1rem;}
.mt-4 {margin-top:1rem;}
.flex {display:flex;}
.gap-4 {gap:1rem;}
.justify-between {justify-content:space-between;}
.items-center {align-items:center;}
@media (max-width:1200px) {.nav-content {justify-content:flex-start;overflow-x:auto;padding:0;}.nav-item {padding:1rem 1.5rem;}}
@media (max-width:768px) {.header {padding:1.5rem 1rem;}.main {padding:1rem;}.metrics-grid {grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;padding:0.25rem;}.form-grid {grid-template-columns:1fr;}.modal {margin:0.5rem;max-width:none;}.modal-body {padding:1rem;}.detail-view {grid-template-columns:1fr;}.detail-table td {display:block;width:100%;}.detail-label {width:100%;padding-right:0;margin-bottom:0.25rem;}.page-title {font-size:1.5rem;margin-bottom:1.5rem;}.nav-item {padding:0.75rem 1rem;font-size:0.8rem;flex:1 0 auto;}.card-body {padding:1rem;}.table th,.table td {padding:0.75rem 0.5rem;font-size:0.8rem;}select.form-input {background-size:1rem auto;padding-right:3rem;}}
.metric-card::after {content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);transform:rotate(45deg);transition:all 0.6s;opacity:0;}
.metric-card:hover::after {animation:shimmer 0.6s ease-in-out;opacity:1;}
@keyframes shimmer {0% {transform:translateX(-100%) translateY(-100%) rotate(45deg);} 100% {transform:translateX(100%) translateY(100%) rotate(45deg);}}
.hamburger {display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-primary);padding:1rem;}
@media (max-width:768px) {.hamburger {display:block;}.nav-content {display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:var(--surface);box-shadow:var(--shadow);}.nav-content.show {display:flex;}.nav-item {padding:1rem;border-bottom:1px solid var(--border);}}
.toast {position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:1rem 2rem;border-radius:var(--radius);color:white;display:none;z-index:100;}
.toast-success {background:var(--success);}
.toast-error {background:var(--danger);}
.pagination {display:flex;justify-content:center;align-items:center;gap:1rem;padding:1rem;background:#f8f9fa;border-top:1px solid var(--border);}
.pagination button {padding:0.5rem 1rem;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);cursor:pointer;border-radius:var(--radius);transition:all 0.3s ease;}
.pagination button:hover {background:var(--primary);color:white;}
.pagination button:disabled {opacity:0.5;cursor:not-allowed;}
.pagination span {font-weight:600;}
#attachment-previews {margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;}
.preview-card {opacity:0.8;}
.card-header {display:flex;justify-content:space-between;align-items:center;}
.table-container {overflow-y:auto;max-height:50vh;}
.sub-nav .nav-content {justify-content:left;overflow-x:auto;}
@media (max-width:768px) {.sub-nav .nav-content {flex-direction:row;}}
@media (min-width: 1200px) {
  .metrics-grid {grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
  .main {padding:1.5rem;}
}