@import '_content/TechSuite.Mobile.Shared/TechSuite.Mobile.Shared.s5nkixogon.bundle.scp.css';

/* _content/TechSuite.Mobile.Web/Components/Pages/WebPhotos.razor.rz.scp.css */
.wp-page[b-fy15kgtqmj] { display: flex; flex-direction: column; height: 100vh; background: #f5f5f5; }

.wp-header[b-fy15kgtqmj] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: #1a1a2e; color: white;
    position: sticky; top: 0; z-index: 10;
}
.wp-back-btn[b-fy15kgtqmj] {
    background: none; border: none; color: white;
    font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.wp-back-btn:hover[b-fy15kgtqmj] { background: rgba(255,255,255,0.15); }
.wp-title[b-fy15kgtqmj] { font-weight: 600; font-size: 16px; }
.wp-loading[b-fy15kgtqmj] { padding: 32px; text-align: center; color: #666; }
.wp-body[b-fy15kgtqmj] { padding: 16px 16px 80px; overflow-y: auto; flex: 1; }
.wp-section-label[b-fy15kgtqmj] { font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.mt-3[b-fy15kgtqmj] { margin-top: 12px; }
.mt-4[b-fy15kgtqmj] { margin-top: 16px; }

.wp-chips[b-fy15kgtqmj] { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-chip[b-fy15kgtqmj] {
    padding: 6px 14px; border-radius: 20px; border: 1.5px solid #ccc;
    background: white; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; gap: 6px; transition: all .15s;
}
.wp-chip:hover[b-fy15kgtqmj] { border-color: #555; }
.wp-chip--selected[b-fy15kgtqmj] { background: var(--color-customer); color: white; border-color: var(--color-customer); font-weight: 600; }
.wp-chip-icon[b-fy15kgtqmj] { font-size: 13px; }
.wp-chip-required[b-fy15kgtqmj] { color: #dc3545; font-weight: 700; font-size: 11px; }
.wp-chip--selected .wp-chip-required[b-fy15kgtqmj] { color: #ffaaaa; }
.wp-chip-done[b-fy15kgtqmj] { color: #28a745; font-weight: 700; }
.wp-chip--selected .wp-chip-done[b-fy15kgtqmj] { color: #90ee90; }

.wp-field-error[b-fy15kgtqmj] { color: #dc3545; font-size: 13px; margin-top: 4px; }

.wp-dropzone[b-fy15kgtqmj] {
    border: 2px dashed #ccc; border-radius: 8px; background: white;
    position: relative; min-height: 80px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color .15s;
}
.wp-dropzone:hover[b-fy15kgtqmj], .wp-dropzone--has-files[b-fy15kgtqmj] { border-color: #1a1a2e; }
.wp-file-input[b-fy15kgtqmj] { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wp-dropzone-label[b-fy15kgtqmj] { cursor: pointer; color: #666; font-size: 14px; pointer-events: none; }

.wp-file-list[b-fy15kgtqmj] { list-style: none; padding: 0; margin: 8px 0 0; }
.wp-file-item[b-fy15kgtqmj] { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.wp-file-name[b-fy15kgtqmj] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-file-size[b-fy15kgtqmj] { color: #888; font-size: 12px; white-space: nowrap; }
.wp-upload-btn[b-fy15kgtqmj] { width: 100%; margin-top: 12px; }

.wp-uploaded-list[b-fy15kgtqmj] { list-style: none; padding: 0; margin: 8px 0 0; }
.wp-uploaded-item[b-fy15kgtqmj] { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.wp-uploaded-item--error[b-fy15kgtqmj] { opacity: .8; }
.wp-icon-ok[b-fy15kgtqmj] { color: #28a745; }
.wp-icon-err[b-fy15kgtqmj] { color: #dc3545; }
.wp-uploaded-type[b-fy15kgtqmj] { font-size: 12px; color: #888; background: #f0f0f0; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.wp-uploaded-err[b-fy15kgtqmj] { font-size: 12px; color: #dc3545; }

.wp-footer[b-fy15kgtqmj] {
    display: flex; gap: 10px; padding: 14px 16px;
    background: #fff; border-top: 1px solid #dee2e6;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
}
.wp-footer-secondary[b-fy15kgtqmj] {
    flex-shrink: 0; padding: 12px 20px; border-radius: 10px;
    border: 2px solid #dee2e6; background: #fff;
    font-size: 15px; font-weight: 600; cursor: pointer; color: #495057;
}
.wp-footer-secondary:disabled[b-fy15kgtqmj] { opacity: .65; cursor: default; }
.wp-footer-save-exit[b-fy15kgtqmj] {
    flex-shrink: 0; padding: 12px 20px; border-radius: 10px;
    border: 2px solid #2563eb; background: #fff;
    font-size: 15px; font-weight: 600; cursor: pointer; color: #2563eb;
}
.wp-footer-save-exit--full[b-fy15kgtqmj] { flex: 1; }
.wp-footer-save-exit:disabled[b-fy15kgtqmj] { opacity: .65; cursor: default; }
.wp-footer-primary[b-fy15kgtqmj] {
    flex: 1; padding: 12px; border-radius: 10px; border: none;
    background: #2563eb; color: #fff; font-size: 15px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.wp-footer-primary:disabled[b-fy15kgtqmj] { opacity: .55; cursor: default; }