/* ATB Electrical app — own styles on top of Bootstrap 5.3.8 (stored in the app).
   No inline style="" anywhere: the Content-Security-Policy only allows this file. */

/* Everything a bit smaller (Alfred, 12/11/2026): Bootstrap sizes are in rem, so this one
   value scales text, buttons, tables and spacing together (16px → 14.5px, about 10% less). */
html { font-size: 14.5px; }
/* …except text boxes on phones: iPhones zoom into any box under 16px when you tap it. */
@media (max-width: 767.98px) {
    .form-control, .form-select { font-size: 16px; }
}
body { background: #f4f6f8; }
.page-title { color: #198754; margin-bottom: .25rem; }
.page-title-rule { border-top: 1px solid #198754; opacity: 1; margin: .5rem 0 1rem; }
.logo { max-height: 70px; width: auto; }

.navbar .nav-link { white-space: nowrap; }

/* Report list */
.report-card { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: .75rem; margin-bottom: .75rem; }
.report-card .meta { color: #F8592D; }
.report-card .thumbs img, .photo-grid img { width: 160px; height: 120px; object-fit: cover; border: 1px solid #ccc; border-radius: .25rem; background: #eee; }
.report-card .thumbs a { display: inline-block; margin: 0 .25rem .25rem 0; }
.incomplete { color: #dc3545; font-weight: 700; }
.no-equipment { color: #dc3545; font-weight: 700; }
.type-badge-1 { background: #0d6efd; }
.type-badge-2 { background: #fd7e14; }
.type-badge-3 { background: #6f42c1; }
.type-badge-0 { background: #6c757d; }
.btn-row .btn, .btn-row form { margin: 0 .25rem .35rem 0; display: inline-block; }

/* Report form */
.form-section { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: 1rem; margin-bottom: 1rem; }
.form-section h2 { font-size: 1.1rem; color: #198754; border-bottom: 1px solid #198754; padding-bottom: .35rem; margin-bottom: .75rem; }
.yesno-group .form-check { margin-right: 1.25rem; }
.yesno-group .form-check-input { width: 1.4em; height: 1.4em; }
.field-hint { font-size: .85rem; color: #6c757d; }
.sticky-save { position: sticky; bottom: 0; background: #f4f6f8; padding: .75rem 0; border-top: 1px solid #dee2e6; z-index: 5; }

/* Report page */
.kv { margin: 0; }
.kv dt { color: #6c757d; font-weight: 600; font-size: .85rem; }
.kv dd { margin-bottom: .5rem; white-space: pre-wrap; }
.photo-grid { display: flex; flex-wrap: wrap; gap: .75rem; }
.photo-grid figure { margin: 0; width: 160px; }
.photo-grid figcaption { font-size: .8rem; word-break: break-word; }
.photo-grid .pdf-tile { display: flex; align-items: center; justify-content: center; width: 160px; height: 120px; border: 1px solid #ccc; border-radius: .25rem; background: #fff; font-weight: 700; }
.pictures-archived { color: #6c757d; font-style: italic; }
.pre { white-space: pre-wrap; }
/* ⟲ under the picture's left edge, ⟳ under its right edge (as wide as the picture). */
.rotate-buttons { display: flex; justify-content: space-between; width: 160px; margin: .2rem 0; }
.rotate-buttons form { margin: 0; }
.rotate-buttons .btn { padding: .2rem .4rem; line-height: 1; color: #212529; border: 1px solid #ced4da; background: #fff; }
.rotate-buttons .btn:hover { background: #e9ecef; }
.rotate-buttons svg { display: block; }
.report-card .thumbs .thumb { display: inline-flex; flex-direction: column; margin: 0 .25rem .25rem 0; vertical-align: top; }
.print-photos .rotate-buttons { width: 58mm; }
.golive-list li { margin-bottom: .2rem; }
.voice-memo { border-bottom: 1px solid #eee; padding: .5rem 0; }
.voice-memo audio { height: 2.25rem; max-width: 100%; }
.voice-text { margin: .35rem 0 0; padding: .4rem .75rem; border-left: 3px solid #198754; background: #f8f9fa; white-space: pre-wrap; }
.voice-recorder { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.voice-recorder.voice-recording [data-voice-timer] { color: #dc3545; font-weight: 700; }
.compare-table th:first-child { width: 9rem; }
.compare-table td, .compare-table th { vertical-align: top; }
#brixly details summary, .alert details summary { cursor: pointer; color: #0d6efd; }
.backup-table .file-name { font-size: .72rem; word-break: break-all; }
.job-log { max-height: 16rem; overflow: auto; white-space: pre-wrap; }

/* Settings (Alfred, 13/11/2026): darker page so the white cards stand out, one tab at a
   time, each card with a dark title bar, a green-edged explanation, a tinted box for the
   buttons, and framed lists. Only pages with <body class="settings-body">. */
body.settings-body { background: #cfd6de; }
.settings-nav { position: sticky; top: 0; z-index: 4; gap: .25rem; padding: .35rem; background: #fff; border: 1px solid #aab4bf; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.settings-nav .nav-link { color: #212529; font-weight: 600; padding: .4rem .8rem; }
.settings-nav .nav-link:hover { background: #e4e9ee; }
.settings-nav .nav-link.active { background: #198754; color: #fff; }
.settings-card { background: #fff; border: 1px solid #aab4bf; border-radius: .5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); margin-bottom: 1rem; overflow: hidden; }
.settings-card > h2 { background: #212529; color: #fff; font-size: 1.15rem; margin: 0; padding: .7rem 1rem; }
.settings-card-body { padding: 1rem; }
.settings-intro { background: #eef3f0; border-left: 4px solid #198754; border-radius: .25rem; padding: .7rem .9rem; margin-bottom: 1rem; line-height: 1.55; }
.settings-actions { background: #e9eef3; border: 1px solid #c3ccd5; border-radius: .4rem; padding: .75rem; margin: 0 0 1rem; }
.settings-actions.row { margin-left: 0; margin-right: 0; }
.settings-actions.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.settings-actions.btn-row .btn, .settings-actions.btn-row form { margin: 0; }
form.settings-actions:not(.row) { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.settings-actions .form-label { font-weight: 600; margin-bottom: .2rem; }
.settings-panel { border: 1px solid #c3ccd5; border-radius: .4rem; margin-bottom: 1rem; overflow: hidden; }
.settings-panel > h3 { background: #dde3e9; border-bottom: 1px solid #c3ccd5; font-size: 1rem; font-weight: 700; margin: 0; padding: .5rem .75rem; }
.settings-panel .table { margin-bottom: 0; }
.settings-panel .table > :not(caption) > * > * { padding-left: .75rem; padding-right: .75rem; }
.settings-panel .table thead th { background: #f1f4f7; color: #495057; font-size: .85rem; }
.settings-panel .table tbody tr:last-child > * { border-bottom: 0; }
.settings-panel .form-check-label { white-space: nowrap; }
.settings-panel .compare-table th:first-child { width: 11rem; }
.settings-panel-foot { background: #f1f4f7; border-top: 1px solid #c3ccd5; padding: .6rem .75rem; }
.settings-empty { margin: 0; padding: .6rem .75rem; }
.settings-notes { margin: 0; padding: .6rem .75rem .6rem 2rem; border-top: 1px solid #dee2e6; }
.settings-card details { margin-bottom: 0; }
.check-list { list-style: none; margin: 0; padding: 0; }
ul.check-list.mb-3 { border: 1px solid #c3ccd5; border-radius: .4rem; overflow: hidden; }
.check-list li { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-bottom: 1px solid #e3e7eb; }
.check-list li:last-child { border-bottom: 0; }
.check-icon { flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; line-height: 1.6rem; border-radius: 50%; text-align: center; font-weight: 700; color: #fff; }
.check-ok .check-icon { background: #198754; }
.check-warn { background: #fff7df; }
.check-warn .check-icon { background: #e0a800; color: #212529; }
.check-bad { background: #fdebed; }
.check-bad .check-icon { background: #dc3545; }
.stat-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.stat-tile { flex: 1 1 9rem; background: #e9eef3; border: 1px solid #c3ccd5; border-radius: .4rem; padding: .6rem .8rem; }
.stat-label { color: #495057; font-size: .85rem; font-weight: 600; }
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
progress { height: .75rem; }

/* Two-step delete dialog (from ITDB) */
dialog.confirm-delete { border: 1px solid #dee2e6; border-radius: .5rem; padding: 1.25rem; max-width: 26rem; }
dialog.confirm-delete::backdrop { background: rgba(0, 0, 0, .4); }
.confirm-delete-step { font-weight: 700; color: #dc3545; margin-bottom: .5rem; }
.confirm-delete-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* Login */
.login-box { max-width: 24rem; margin: 3rem auto; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: 1.5rem; }

/* Print: the customer report (report_print.php) */
.print-page { background: #fff; max-width: 190mm; margin: 0 auto; padding: 8mm; font-family: Helvetica, Arial, sans-serif; font-size: 10pt; color: #000; }
.print-page h1 { font-size: 14pt; margin: 0; }
.print-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 3mm; margin-bottom: 4mm; }
.print-head .logo { max-height: 22mm; }
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 3mm; }
.print-table th, .print-table td { border: 1px solid #8a8987; padding: 1.2mm 2mm; vertical-align: top; text-align: left; }
.print-table th { background: #d1d1d1; font-weight: 700; }
.print-table td.answer { width: 22mm; text-align: center; }
.print-table .pre { white-space: pre-wrap; }
.print-photos { display: flex; flex-wrap: wrap; gap: 3mm; }
.print-photos figure { width: 58mm; margin: 0; break-inside: avoid; }
.print-photos img { width: 58mm; height: auto; border: 1px solid #8a8987; }
.print-photos figcaption { font-size: 8.5pt; }
.print-toolbar { max-width: 190mm; margin: 0 auto 1rem; }

/* Phones (Alfred, 12/11/2026): two pictures side by side, print layout that fits the
   screen, Settings menu in one swipeable line, search results as cards. */
@media (max-width: 575.98px) {
    main.container-lg { padding-left: .6rem; padding-right: .6rem; }
    .report-card, .form-section { padding: .75rem .6rem; }
    .report-card .thumbs img, .photo-grid img, .photo-grid .pdf-tile { width: 140px; height: 105px; }
    .photo-grid figure { width: 140px; }
    .rotate-buttons { width: 140px; }
    .photo-grid { gap: .5rem; }
    .settings-nav { position: static; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
    .settings-card-body { padding: .75rem .6rem; }
    .btn-row .btn { margin-bottom: .4rem; }
    .print-page { padding: 3mm; font-size: 11px; }
    .print-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .print-head .text-end { text-align: left !important; }
    .print-table th, .print-table td { padding: 1mm 1.2mm; word-break: break-word; }
    .print-photos figure, .print-photos img, .print-photos .rotate-buttons { width: 100%; }
}
.search-card { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: .6rem .75rem; margin-bottom: .5rem; }

@media print {
    body { background: #fff; }
    .no-print, .no-print * { display: none !important; }
    main.container-lg { max-width: none; padding: 0 !important; }
    .print-page { padding: 0; max-width: none; }
    .pagebreak { break-before: page; }
    a[href]::after { content: none; }
}

/* Recycle Bin */
.recycle-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: .25rem; border: 1px solid #c3ccd5; }
.recycle-table audio { height: 32px; max-width: 220px; display: block; margin-top: .25rem; }
.recycle-table .btn-row { white-space: nowrap; }
.check-list .check-fix { margin-left: auto; padding-left: .75rem; }

/* Settings → Storage bars and Audit Log (from ITDB) */
.storage-disk { margin: 0 0 1rem; }
.storage-disk-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem; margin-bottom: .35rem; }
.storage-bar { background: #dde3e9; border-radius: 6px; height: 10px; overflow: hidden; }
.storage-bar-fill { background: #198754; height: 100%; }
.storage-bar-warn { background: #fd7e14; }
.storage-bar-danger { background: #dc3545; }
.storage-mini { width: 22%; min-width: 70px; }
.audit-details { max-width: 28rem; overflow-wrap: anywhere; font-size: .85rem; }
.w-pct-0 { width: 0%; }
.w-pct-1 { width: 1%; }
.w-pct-2 { width: 2%; }
.w-pct-3 { width: 3%; }
.w-pct-4 { width: 4%; }
.w-pct-5 { width: 5%; }
.w-pct-6 { width: 6%; }
.w-pct-7 { width: 7%; }
.w-pct-8 { width: 8%; }
.w-pct-9 { width: 9%; }
.w-pct-10 { width: 10%; }
.w-pct-11 { width: 11%; }
.w-pct-12 { width: 12%; }
.w-pct-13 { width: 13%; }
.w-pct-14 { width: 14%; }
.w-pct-15 { width: 15%; }
.w-pct-16 { width: 16%; }
.w-pct-17 { width: 17%; }
.w-pct-18 { width: 18%; }
.w-pct-19 { width: 19%; }
.w-pct-20 { width: 20%; }
.w-pct-21 { width: 21%; }
.w-pct-22 { width: 22%; }
.w-pct-23 { width: 23%; }
.w-pct-24 { width: 24%; }
.w-pct-25 { width: 25%; }
.w-pct-26 { width: 26%; }
.w-pct-27 { width: 27%; }
.w-pct-28 { width: 28%; }
.w-pct-29 { width: 29%; }
.w-pct-30 { width: 30%; }
.w-pct-31 { width: 31%; }
.w-pct-32 { width: 32%; }
.w-pct-33 { width: 33%; }
.w-pct-34 { width: 34%; }
.w-pct-35 { width: 35%; }
.w-pct-36 { width: 36%; }
.w-pct-37 { width: 37%; }
.w-pct-38 { width: 38%; }
.w-pct-39 { width: 39%; }
.w-pct-40 { width: 40%; }
.w-pct-41 { width: 41%; }
.w-pct-42 { width: 42%; }
.w-pct-43 { width: 43%; }
.w-pct-44 { width: 44%; }
.w-pct-45 { width: 45%; }
.w-pct-46 { width: 46%; }
.w-pct-47 { width: 47%; }
.w-pct-48 { width: 48%; }
.w-pct-49 { width: 49%; }
.w-pct-50 { width: 50%; }
.w-pct-51 { width: 51%; }
.w-pct-52 { width: 52%; }
.w-pct-53 { width: 53%; }
.w-pct-54 { width: 54%; }
.w-pct-55 { width: 55%; }
.w-pct-56 { width: 56%; }
.w-pct-57 { width: 57%; }
.w-pct-58 { width: 58%; }
.w-pct-59 { width: 59%; }
.w-pct-60 { width: 60%; }
.w-pct-61 { width: 61%; }
.w-pct-62 { width: 62%; }
.w-pct-63 { width: 63%; }
.w-pct-64 { width: 64%; }
.w-pct-65 { width: 65%; }
.w-pct-66 { width: 66%; }
.w-pct-67 { width: 67%; }
.w-pct-68 { width: 68%; }
.w-pct-69 { width: 69%; }
.w-pct-70 { width: 70%; }
.w-pct-71 { width: 71%; }
.w-pct-72 { width: 72%; }
.w-pct-73 { width: 73%; }
.w-pct-74 { width: 74%; }
.w-pct-75 { width: 75%; }
.w-pct-76 { width: 76%; }
.w-pct-77 { width: 77%; }
.w-pct-78 { width: 78%; }
.w-pct-79 { width: 79%; }
.w-pct-80 { width: 80%; }
.w-pct-81 { width: 81%; }
.w-pct-82 { width: 82%; }
.w-pct-83 { width: 83%; }
.w-pct-84 { width: 84%; }
.w-pct-85 { width: 85%; }
.w-pct-86 { width: 86%; }
.w-pct-87 { width: 87%; }
.w-pct-88 { width: 88%; }
.w-pct-89 { width: 89%; }
.w-pct-90 { width: 90%; }
.w-pct-91 { width: 91%; }
.w-pct-92 { width: 92%; }
.w-pct-93 { width: 93%; }
.w-pct-94 { width: 94%; }
.w-pct-95 { width: 95%; }
.w-pct-96 { width: 96%; }
.w-pct-97 { width: 97%; }
.w-pct-98 { width: 98%; }
.w-pct-99 { width: 99%; }
.w-pct-100 { width: 100%; }

/* "Improve my English" (assets/js/writing-assist.js, from ITDB) */
.writing-assist { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.writing-assist-btn { border: 1px solid #c3ccd5; background: #fff; color: #0d6efd; border-radius: 999px; padding: .2rem .8rem; font-size: .85rem; cursor: pointer; }
.writing-assist-btn:hover { border-color: #0d6efd; }
.writing-assist-btn:disabled { opacity: .6; cursor: wait; }
.writing-assist-status { font-size: .85rem; color: #6c757d; }
.writing-assist-box { margin-top: .5rem; padding: .6rem .75rem; border: 1px solid #bfdbfe; background: #eff6ff; border-radius: .4rem; }
.writing-assist-box[hidden] { display: none; }
.writing-assist-label { font-size: .8rem; font-weight: 600; color: #6c757d; margin-bottom: .25rem; }
.writing-assist-text { white-space: pre-wrap; margin-bottom: .5rem; }
.writing-assist-actions { display: flex; gap: .5rem; }
/* "Saved for invoicing" tick box (reports list and report page). */
.invoice-box { margin: .35rem 0; padding: .3rem .55rem; border: 1px solid #ced4da; border-radius: .375rem; background: #fff8e1; display: inline-block; }
.invoice-box.is-saved { background: #d1e7dd; border-color: #a3cfbb; }
.invoice-box label { font-weight: 600; cursor: pointer; }
.invoice-box input:disabled, .invoice-box input:disabled + * { cursor: default; }
.invoice-box .form-check-input:disabled { opacity: 1; }
.invoice-who { font-size: .85em; color: #495057; }
.invoice-who:empty { display: none; }
.invoice-changed { font-size: .85em; color: #b02a37; font-weight: 600; }
.report-card:target { outline: 3px solid #0d6efd; }
@media print { .invoice-box { display: none; } }