/* User Submissions Page Specific Styles */
.h-12px{height:12px!important}
.w-140px{width:140px!important}
.wizard-step{display:none}
.wizard-step.active{display:block}
.drop-area{border:2px dashed #ccc;border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:background-color .3s ease}
.drop-area.dragover{background-color:#e9ecef}
.preview-container{position:relative;display:inline-block;margin:5px}
.preview-img{max-width:100px;border:1px solid #ddd;border-radius:5px}
.remove-preview{position:absolute;top:0;right:0;background:#d33;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer}
.result-card{border:1px solid #eee;border-radius:10px;padding:15px;margin-bottom:20px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05);position:relative}
.remove-btn{position:absolute;top:10px;right:10px}
.result-img{max-width:150px;margin-bottom:10px;cursor:pointer;border:1px solid #ddd;border-radius:5px;transition:transform .2s ease}
.result-img:hover{transform:scale(1.08)}
.no-wrap-table th,.no-wrap-table td{white-space:nowrap}
.hidden{display:none!important}
.modal#credentialsModal .modal-content, .modal#credentialsModal .modal-body, #credentialsModal input, #credentialsModal button { pointer-events:auto !important; }
#credentialsModal { z-index: 1080; }
#credentialsModal .modal-backdrop { z-index: 1079; }
#credentialsModal * { pointer-events:auto !important; }
/* Thumbnail classes replacing inline styles */
.submission-img-thumb{max-width:150px;border:1px solid #ddd;border-radius:6px;}
.invoice-img-thumb{max-width:80px;border:1px solid #ddd;border-radius:4px;}
/* Spinner animation for material icon */
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Glass Modal (Card Details) --- */
.glass-modal-dialog { position:relative; }
.glass-modal { 
	background:linear-gradient(135deg,rgba(255,255,255,0.78),rgba(255,255,255,0.48));
	-webkit-backdrop-filter:blur(22px) saturate(160%) contrast(108%);
	backdrop-filter:blur(22px) saturate(160%) contrast(108%);
	border:1px solid rgba(255,255,255,0.6);
	border-radius:22px;
	box-shadow:0 8px 38px -8px rgba(0,0,0,.25), 0 4px 18px -4px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,0.35);
	overflow:hidden;
}
.glass-modal .modal-header{ background:linear-gradient(120deg,rgba(255,255,255,0.55),rgba(255,255,255,0.32)); border-bottom:1px solid rgba(255,255,255,0.45); }
.glass-modal .modal-footer{ background:linear-gradient(135deg,rgba(255,255,255,0.42),rgba(255,255,255,0.28)); border-top:1px solid rgba(255,255,255,0.4); }
.glass-modal .modal-title{ font-weight:600; letter-spacing:.5px; }
.glass-modal .card-details-modal-content h5 { font-weight:600; }
.glass-modal .card-details-modal-content p strong { color:#111; }
.glass-modal .card-details-modal-content img.submission-img-thumb { background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:4px; border-radius:12px; box-shadow:0 2px 8px -2px rgba(0,0,0,.25); }

/* Dark mode variant */
body[data-theme='dark'] .glass-modal { 
	background:linear-gradient(155deg,rgba(32,38,44,0.78),rgba(28,32,38,0.62) 55%,rgba(24,28,34,0.58));
	border-color:rgba(255,255,255,0.08);
	box-shadow:0 10px 44px -10px rgba(0,0,0,.85), 0 4px 24px -6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,0.04);
}
body[data-theme='dark'] .glass-modal .modal-header,
body[data-theme='dark'] .glass-modal .modal-footer { background:linear-gradient(140deg,rgba(40,46,52,0.65),rgba(34,40,46,0.45)); border-color:rgba(255,255,255,0.06); }
body[data-theme='dark'] .glass-modal .modal-title { color:#f5f7f9; }
body[data-theme='dark'] .glass-modal .card-details-modal-content p strong { color:#fff; }
body[data-theme='dark'] .glass-modal .card-details-modal-content img.submission-img-thumb { background:rgba(40,46,52,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); box-shadow:0 4px 14px -4px rgba(0,0,0,.8); }

/* Elevated detail list styling */
.glass-modal .card-details-modal-content ul { list-style:disc; margin-left:1.25rem; }
.glass-modal .card-details-modal-content ul li { margin-bottom:2px; }

/* Responsive tweak */
@media (max-width: 768px){
	.glass-modal { border-radius:18px; }
}

/* Dark mode enhancements */
body[data-theme='dark'] .drop-area{border-color:#2d3943;background:#141a20;color:#d5dbe1;}
body[data-theme='dark'] .drop-area.dragover{background:#1c262e;}
body[data-theme='dark'] .result-card{background:#1e242a;border:1px solid #27323b;box-shadow:0 4px 14px -4px rgba(0,0,0,.6);}
body[data-theme='dark'] .result-img{border-color:#27323b;}
body[data-theme='dark'] .submission-img-thumb,body[data-theme='dark'] .invoice-img-thumb{border-color:#27323b;}
body[data-theme='dark'] table{background:#141a20;color:#d5dbe1;}
body[data-theme='dark'] th{background:#1d252b;color:#d5dbe1;}
body[data-theme='dark'] td{border-color:#27323b;}
body[data-theme='dark'] .wizard-step{background:transparent;}
body[data-theme='dark'] .spin{filter:brightness(1.1);} 

/* --- Card Details Glass Layout --- */
.glass-detail-grid { display:grid; grid-template-columns:1fr 340px; gap:1.5rem; align-items:start; }
@media (max-width: 992px){ .glass-detail-grid { grid-template-columns:1fr; } .glass-detail-grid .detail-images { justify-content:flex-start; } }
.glass-detail-grid .detail-primary { position:relative; }
.glass-detail-grid .detail-fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem .75rem; }
.glass-detail-grid .detail-fields .label { display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }
.glass-detail-grid .detail-fields .value { font-weight:600; font-size:.85rem; }
.grading-box { background:rgba(255,255,255,.35); -webkit-backdrop-filter:blur(6px) saturate(180%); backdrop-filter:blur(6px) saturate(180%); border:1px solid rgba(255,255,255,.5); border-radius:14px; padding:.75rem .9rem; }
body[data-theme='dark'] .grading-box { background:rgba(40,46,52,.42); border-color:rgba(255,255,255,.06); }
.grading-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.4rem .75rem; }
.grading-list li { display:flex; justify-content:space-between; font-size:.75rem; padding:.35rem .55rem; border-radius:8px; background:rgba(255,255,255,.4); }
body[data-theme='dark'] .grading-list li { background:rgba(52,58,64,.55); }
.grading-list li.overall { background:linear-gradient(135deg,#0d6efd,#3d8bfd); color:#fff; font-weight:600; }
body[data-theme='dark'] .grading-list li.overall { background:linear-gradient(135deg,#1e63d8,#5595ff); }
.detail-images { display:flex; gap:1rem; justify-content:center; }
.detail-images .img-col { text-align:center; }
.detail-images .img-wrap { position:relative; border-radius:16px; padding:6px; background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.28)); -webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%); box-shadow:0 4px 16px -6px rgba(0,0,0,.35); }
body[data-theme='dark'] .detail-images .img-wrap { background:linear-gradient(155deg,rgba(32,38,44,.65),rgba(32,38,44,.42)); box-shadow:0 6px 22px -8px rgba(0,0,0,.75); }
.detail-images img { max-height:170px; object-fit:contain; border-radius:12px; }
.img-caption { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; margin-top:.35rem; opacity:.75; }
body[data-theme='dark'] .img-caption { color:#d5dbe1; opacity:.65; }
/* Reorganized card details panels */
.detail-header .main-title { font-weight:600; letter-spacing:.4px; }
.grade-chips { display:flex; gap:.5rem; }
.metric-chip { min-width:56px; text-align:center; padding:.5rem .75rem; border-radius:14px; font-weight:600; font-size:1rem; background:linear-gradient(135deg,#0d6efd,#5195ff); color:#fff; box-shadow:0 4px 14px -4px rgba(13,110,253,.55); }
body[data-theme='dark'] .metric-chip { background:linear-gradient(135deg,#1e63d8,#5595ff); box-shadow:0 4px 16px -4px rgba(0,0,0,.65); }
.spec-panels { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
.spec-panel { background:rgba(255,255,255,.38); -webkit-backdrop-filter:blur(10px) saturate(180%); backdrop-filter:blur(10px) saturate(180%); border:1px solid rgba(255,255,255,.55); border-radius:16px; padding:.75rem .9rem; position:relative; overflow:hidden; }
body[data-theme='dark'] .spec-panel { background:rgba(40,46,52,.48); border-color:rgba(255,255,255,.08); }
.spec-panel .panel-title { font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; opacity:.75; margin-bottom:.4rem; }
.spec-list { margin:0; padding:0; }
.spec-list div { display:flex; justify-content:space-between; gap:.75rem; font-size:.7rem; padding:.25rem 0; border-bottom:1px dashed rgba(0,0,0,.08); }
.spec-list div:last-child { border-bottom:none; }
body[data-theme='dark'] .spec-list div { border-color:rgba(255,255,255,.06); }
.spec-list dt { font-weight:500; opacity:.75; }
.spec-list dd { margin:0; font-weight:600; font-size:.72rem; }
.grading-list.compact { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); }
.action-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.action-row .btn.copied { background:#198754; color:#fff; border-color:#198754; }
/* Transparent backdrop when viewing card details */
.modal-backdrop.backdrop-clear { background:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
/* Manual modal fallback enhancements (simplified) */
/* Removed pointer-events restrictions to ensure full interactivity */
.manual-fallback-backdrop { cursor:pointer; }
/* Helper: force allow clicks through backdrop when class present on body */
body.force-modal-pointer-fix .modal-backdrop { pointer-events:none!important; }
/* Force modal above backdrop & disable backdrop clicks (fix unclickable modal) */
.modal.show { z-index:2000 !important; }
.modal-backdrop { z-index:1900 !important; pointer-events:none !important; background:rgba(255,255,255,0.04)!important; }
/* Optional: even brighter (no dim). Add class 'no-dim' to body if needed */
body.no-dim .modal-backdrop { background:transparent!important; }
/* --- Revised stacked Card Details layout (prevents overlap) --- */
.card-details-stack { display:block; }
.card-details-stack .detail-header { border-bottom:1px solid rgba(0,0,0,.08); padding-bottom:.5rem; }
body[data-theme='dark'] .card-details-stack .detail-header { border-color:rgba(255,255,255,.08); }
.detail-gallery { display:flex; gap:1rem; flex-wrap:nowrap; overflow-x:auto; padding:.25rem .25rem .5rem; }
.detail-gallery .img-col { flex:0 0 auto; text-align:center; }
.detail-gallery .img-wrap { width:130px; max-width:130px; }
.detail-gallery img { max-height:160px; }
.attr-table th { width:110px; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; opacity:.7; font-weight:600; padding:.35rem .4rem; }
.attr-table td { font-size:.75rem; font-weight:600; padding:.35rem .4rem; }
body[data-theme='dark'] .attr-table th { color:#d5dbe1; }
.attr-table tr+tr td,.attr-table tr+tr th { border-top:1px dashed rgba(0,0,0,.08); }
body[data-theme='dark'] .attr-table tr+tr td,body[data-theme='dark'] .attr-table tr+tr th { border-color:rgba(255,255,255,.08); }
.grades-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:.5rem; }
.grade-item { background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(10px) saturate(170%); backdrop-filter:blur(10px) saturate(170%); padding:.55rem .6rem; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70px; }
body[data-theme='dark'] .grade-item { background:rgba(40,46,52,.6); }
.grade-item .label { font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }
.grade-item .value { font-weight:600; font-size:1rem; line-height:1; }
@media (max-width:600px){ .detail-gallery .img-wrap { width:110px; } .detail-gallery img { max-height:140px; } }
/* --- Card detail image enhancements --- */
.thumb-wrap { position:relative; display:inline-block; overflow:hidden; border-radius:14px; }
.thumb-wrap img.zoom-thumb { transition:transform .25s ease, box-shadow .25s ease; cursor:zoom-in; }
.thumb-wrap img.zoom-thumb:hover { transform:scale(1.08); box-shadow:0 6px 18px -6px rgba(0,0,0,.4); }
.image-zoom-overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:4000; opacity:0; transition:opacity .18s ease; }
.image-zoom-overlay.hidden { display:none; }
.image-zoom-overlay.visible { opacity:1; }
.image-zoom-overlay .izo-backdrop { position:absolute; inset:0; background:rgba(15,18,24,.78); -webkit-backdrop-filter:blur(6px) saturate(160%); backdrop-filter:blur(6px) saturate(160%); }
.image-zoom-overlay .izo-inner { position:relative; max-width:85vw; max-height:85vh; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.image-zoom-overlay .izo-img { max-width:85vw; max-height:70vh; border-radius:20px; box-shadow:0 8px 32px -8px rgba(0,0,0,.65), 0 2px 12px -2px rgba(0,0,0,.5); }
.image-zoom-overlay .izo-actions { position:relative; z-index:2; }
.image-zoom-overlay .izo-actions .btn { -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); background:rgba(255,255,255,.65); border-color:rgba(255,255,255,.4); }
/* PSA progress bar width via CSS variable (CSP-safe) */
.psa-progress .progress-bar { width:var(--psa-progress); transition:width .4s ease; }
/* Step-based width fallback (no inline styles, no custom properties) */
.psa-progress[class*='steps-'] .progress-bar{transition:width .4s ease;}
.psa-progress.steps-0 .progress-bar{width:0%;}
.psa-progress.steps-1 .progress-bar{width:12.5%;}
.psa-progress.steps-2 .progress-bar{width:25%;}
.psa-progress.steps-3 .progress-bar{width:37.5%;}
.psa-progress.steps-4 .progress-bar{width:50%;}
.psa-progress.steps-5 .progress-bar{width:62.5%;}
.psa-progress.steps-6 .progress-bar{width:75%;}
.psa-progress.steps-7 .progress-bar{width:87.5%;}
.psa-progress.steps-8 .progress-bar{width:100%;}

/* CSP-safe modal fallback styling (replaces inline styles) */
.modal-fallback-show{display:block !important; z-index:2055; pointer-events:auto;}
.manual-fallback-backdrop{z-index:2050; pointer-events:none;}
body[data-theme='dark'] .image-zoom-overlay .izo-actions .btn { background:rgba(32,38,44,.55); color:#e5ebf2; border-color:rgba(255,255,255,.08); }