/* ── Reset & Variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --bg: #f0f4fa;
    --bg-2: #f8faff;
    --card: #ffffff;
    --line: #dde5f2;
    --text: #111d33;
    --text-2: #3a4f6f;
    --muted: #6b82a6;
    --brand: #1a5fb4;
    --brand-2: #2a7de9;
    --brand-3: #3d93ff;
    --brand-soft: #e8f1ff;
    --accent: #f59e0b;
    --accent-soft: #fef3c7;
    --success-bg: #e5f7ee;
    --success-text: #0b6f44;
    --error-bg: #ffe8e8;
    --error-text: #8f1c1c;
    --radius: 16px;
    --radius-sm: 12px;
    --shadow-card: 0 4px 24px rgba(17,40,76,0.06), 0 1px 3px rgba(17,40,76,0.04);
    --shadow-lg: 0 12px 40px rgba(10,30,60,0.12);
    --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ── Typography & Base ── */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Hebrew", "Noto Sans Arabic", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h2 {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 4px;
    color: var(--text);
}
h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
p { color: var(--muted); line-height: 1.55; }

/* ── Login ── */
.login-body {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 20px;
    background: linear-gradient(160deg, #0d1b36 0%, #14325e 50%, #1a5fb4 100%);
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--card);
    border-radius: 22px;
    padding: 28px 22px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    animation: fadeUp .4s ease;
}
.login-card h2 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: var(--brand);
}

/* ── Topbar ── */
.topbar {
    background: linear-gradient(135deg, #0d1b36 0%, #142e56 60%, #1a5fb4 100%);
    color: #fff;
    padding: 16px 16px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 4px 20px rgba(6,24,50,0.18);
}
.topbar strong {
    font-size: 1.2rem;
    font-weight: 900;
    display: block;
    letter-spacing: -.2px;
}
.title-wrap { min-width: 0; flex: 1; }
.title-wrap .small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .7;
    font-size: 12px;
    margin-top: 2px;
}

/* ── Bottom Tabs ── */
.tabs {
    display: flex;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid rgba(0,0,0,0.06);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 25;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    text-decoration: none;
    color: var(--muted);
    background: transparent;
    border: none;
    border-radius: 12px;
    text-align: center;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: color var(--transition), background var(--transition);
    position: relative;
}
.tab-icon { font-size: 20px; line-height: 1; display: block; }
.tab.active {
    color: var(--brand);
    background: var(--brand-soft);
    font-weight: 800;
}
.tab:active { transform: scale(.95); }

/* ── Container ── */
.container {
    padding: 16px 14px calc(100px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
}

/* ── Cards ── */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 16px;
    box-shadow: var(--shadow-card);
    animation: fadeUp .35s ease both;
    overflow-x: auto;
}
.card:nth-child(2) { animation-delay: .06s; }
.card:nth-child(3) { animation-delay: .12s; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Small text ── */
.small { font-size: 12.5px; color: var(--muted); }

/* ── Forms ── */
label {
    display: block;
    margin-top: 14px;
    margin-bottom: 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: .1px;
}
label:first-child { margin-top: 0; }

input, select, textarea {
    width: 100%;
    margin-top: 4px;
    padding: 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    background: var(--bg-2);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    -webkit-appearance: none;
    appearance: none;
}
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b82a6' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 36px;
    cursor: pointer;
}
[dir="ltr"] select {
    background-position: right 14px center;
    padding-left: 14px;
    padding-right: 36px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-2);
    box-shadow: 0 0 0 3px rgba(42,125,233,0.12);
    background: #fff;
}
input[type="file"] {
    padding: 10px;
    font-size: 13px;
}

/* ── Buttons ── */
button {
    width: 100%;
    margin-top: 8px;
    padding: 12px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    min-height: 48px;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: #fff;
    box-shadow: 0 4px 14px rgba(26,95,180,0.22);
    transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
    position: relative;
    overflow: hidden;
}
button:active {
    transform: scale(.97);
    box-shadow: 0 2px 6px rgba(26,95,180,0.18);
}
button.secondary {
    background: var(--bg-2);
    color: var(--text-2);
    box-shadow: none;
    border: 1.5px solid var(--line);
}
button.secondary:active { background: #edf1f8; }

/* ── Inline grid ── */
.inline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

/* ── Dashboard Grid Links ── */
.grid-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}
.card-link {
    text-decoration: none;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 14px;
    color: var(--text);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    box-shadow: var(--shadow-card);
}
.card-link:active {
    transform: scale(.96);
}
.card-link-icon {
    font-size: 28px;
    line-height: 1;
    display: block;
}
.card-link-repair {
    background: linear-gradient(180deg, #fffaf0, #fff5e0);
    border-color: #f0d5ab;
    color: #7a4a00;
}

/* ── Badges ── */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .2px;
}
.badge-ok {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid #b7e8ca;
}
.badge-missing {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid #f2c0c0;
}

/* ── Danger button ── */
.btn-danger-outline {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    border: 2px solid #c0392b;
    background: #fff5f5;
    color: #c0392b;
    font-weight: 800;
    font-size: 15px;
    min-height: 48px;
    cursor: pointer;
}
.mt-form { margin-top: 18px; }
.muted { color: var(--muted); font-size: .9rem; margin-top: 4px; }

/* ── Alerts ── */
.alert {
    margin: 12px 14px 0;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: slideDown .3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.alert.success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: #b7e8ca;
}
.alert.success::before { content: "✓"; font-size: 18px; }
.alert.error {
    background: var(--error-bg);
    color: var(--error-text);
    border-color: #f2c0c0;
}
.alert.error::before { content: "✕"; font-size: 18px; }
.alert.fade-out {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .4s ease, transform .4s ease;
}

/* ── Tables ── */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 12px;
    font-size: 13.5px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
th, td {
    border-bottom: 1px solid #edf1f8;
    padding: 10px 12px;
    text-align: start;
    white-space: nowrap;
}
tr:last-child td { border-bottom: 0; }
th {
    color: var(--text-2);
    font-weight: 700;
    background: #f5f8fd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
tbody tr { transition: background var(--transition); }
tbody tr:active { background: #f5f9ff; }

/* ── Popups / Modals ── */
.popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 100;
    padding: 0;
    animation: overlayIn .25s ease;
}
@keyframes overlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.popup-box {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 22px 22px 0 0;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
    animation: sheetUp .3s cubic-bezier(.32,.72,0,1);
}
@keyframes sheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.popup-box h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}
.popup-box p {
    margin-bottom: 14px;
    font-size: 14px;
}

.hidden { display: none !important; }

/* ── Collapsible ── */
.collapsible {
    margin-top: 12px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, margin .25s ease;
}
.collapsible.open {
    max-height: 1200px;
    opacity: 1;
}

/* ── Button row ── */
.btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.btn-row button,
.btn-row .btn-link {
    width: auto;
    min-width: 0;
    flex: 1;
    min-height: 42px;
    font-size: 13px;
    padding: 10px 16px;
}

.btn-link {
    text-decoration: none;
    background: var(--bg-2);
    color: var(--text-2);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: inline-block;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
}

/* ── Logout ── */
.logout-form { width: auto; flex-shrink: 0; }
.logout-form button {
    min-height: 36px;
    padding: 7px 16px;
    margin-top: 0;
    font-size: 13px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    min-width: 80px;
    width: auto;
}
.logout-form button:active { background: rgba(255,255,255,0.22); }

/* ── Section title extras ── */
.section-subtitle {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}

/* ── Responsive tweaks ── */
@media (max-width: 390px) {
    .topbar { flex-wrap: wrap; gap: 8px; }
    .logout-form { width: 100%; }
    .logout-form button { width: 100%; }
    .topbar strong { font-size: 1.1rem; }
    .grid-links { grid-template-columns: 1fr; }
}
@media (min-width: 391px) and (max-width: 600px) {
    .grid-links { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 601px) {
    .grid-links { grid-template-columns: 1fr 1fr 1fr; }
    .inline { grid-template-columns: 1fr 1fr; }
}

/* ── Action buttons (table) ── */
.actions-cell {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}
.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    min-height: 32px;
    white-space: nowrap;
    transition: transform var(--transition), opacity var(--transition);
    text-decoration: none;
    width: auto;
    margin: 0;
    box-shadow: none;
}
.btn-sm:active { transform: scale(.95); }
.btn-edit {
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid rgba(26,95,180,0.2);
}
.btn-delete {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid #f2c0c0;
}
.inline-form {
    display: inline;
    margin: 0;
    padding: 0;
}
.inline-form button {
    margin: 0;
    width: auto;
}

/* ── Lightbox ── */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
    animation: overlayIn .2s ease;
    cursor: pointer;
}
.lightbox-overlay img {
    max-width: 95vw;
    max-height: 75vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 12px 60px rgba(0,0,0,0.5);
    cursor: default;
}
.lightbox-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.lightbox-actions a,
.lightbox-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    min-height: 42px;
    text-decoration: none;
    width: auto;
    margin: 0;
}
.lightbox-download {
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: #fff;
    box-shadow: 0 4px 14px rgba(26,95,180,0.3);
}
.lightbox-close {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25) !important;
    box-shadow: none !important;
}

/* ── Goods image thumbnail ── */
img.preview {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--line);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}
img.preview:hover,
img.preview:active {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* ── Reports ── */
.report-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 2px solid var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
    width: auto;
    min-height: 42px;
    transition: background var(--transition), color var(--transition);
}
.btn-secondary:hover {
    background: var(--brand);
    color: #fff;
}
#report-capture {
    padding: 20px;
    background: #fff;
    border-radius: 12px;
}
.report-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--line);
}
.report-header h2 {
    font-size: 22px;
    color: var(--brand);
    margin-bottom: 6px;
}
.report-period {
    font-size: 14px;
    color: var(--muted);
    direction: ltr;
}
.report-count {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 14px;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}
.report-table {
    width: 100%;
    border-collapse: collapse;
}
.report-table thead th {
    background: var(--brand);
    color: #fff;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.report-table thead th:first-child {
    border-radius: 8px 0 0 0;
}
.report-table thead th:last-child {
    border-radius: 0 8px 0 0;
}
[dir="rtl"] .report-table thead th:first-child {
    border-radius: 0 8px 0 0;
}
[dir="rtl"] .report-table thead th:last-child {
    border-radius: 8px 0 0 0;
}
.report-table tbody td {
    padding: 10px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--line);
}
.report-table tbody tr:nth-child(even) {
    background: var(--bg-2);
}
.report-table tbody tr:hover {
    background: var(--brand-soft);
}


.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.stats-grid.compact-top { margin-top:10px; }
.stat-chip { background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center; }
.stat-chip strong { display:block; font-size:1.35rem; color:var(--brand); }
.inline-form-grid, .double-grid, .triple-grid { display:grid; gap:10px; }
.double-grid, .triple-grid { grid-template-columns:1fr; }
@media (min-width:760px) { .double-grid { grid-template-columns:1fr 1fr; } .triple-grid { grid-template-columns:repeat(3,1fr); } }
.section-header-row, .group-header, .task-main { display:flex; gap:10px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.filter-pills { display:flex; flex-wrap:wrap; gap:8px; }
.filter-pill, .action-link { text-decoration:none; border:1px solid var(--line); background:var(--bg-2); border-radius:999px; padding:8px 12px; color:var(--text-2); font-size:13px; font-weight:700; }
.filter-pill.active { background:var(--brand-soft); color:var(--brand); border-color:rgba(26,95,180,0.2); }
.task-list, .update-request-list, .simple-list { display:grid; gap:12px; }
.task-card, .update-card, .simple-row { border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--bg-2); }
.task-details-grid { display:grid; gap:6px; margin:10px 0; }
.task-status-form { display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px; }
@media (min-width:620px) { .task-status-form { grid-template-columns:1fr 140px; align-items:end; } }
.badge-open { background:#e8f1ff; color:#165cb5; border:1px solid #cadcff; }
.badge-in_progress { background:#fff6db; color:#8d6100; border:1px solid #f4dda0; }
.badge-blocked { background:#ffe8e8; color:#9b1f1f; border:1px solid #f4bcbc; }
.badge-done { background:#e6f6ec; color:#0f6a43; border:1px solid #bfe7cd; }
.photo-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:620px) { .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.photo-group-card { align-items:flex-start; text-align:start; }
.photo-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); }
.photo-card img { width:100%; height:220px; object-fit:cover; display:block; }
.lightbox-trigger { padding:0; background:none; box-shadow:none; border-radius:0; min-height:0; }
.photo-card-body { padding:12px; }
.photo-check { position:absolute; top:10px; inset-inline-start:10px; background:rgba(255,255,255,0.92); border-radius:999px; padding:6px 10px; z-index:2; }
.file-note-list { display:grid; gap:10px; margin-top:10px; }
.file-note-item { border:1px dashed var(--line); border-radius:12px; padding:10px; background:var(--bg-2); }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; }
.btn-row > * { flex:1 1 180px; }
.danger-outline { background:#fff4f4; color:#9b1f1f; border:1px solid #f0c1c1; box-shadow:none; }
.lightbox { position:fixed; inset:0; background:rgba(3,10,20,0.88); display:grid; place-items:center; z-index:60; padding:20px; }
.lightbox img { max-width:min(96vw,980px); max-height:80vh; border-radius:18px; box-shadow:var(--shadow-lg); }
.lightbox-caption { color:#fff; margin-top:10px; text-align:center; }
.lightbox-close { position:absolute; top:18px; inset-inline-end:18px; width:48px; min-height:48px; border-radius:999px; background:rgba(255,255,255,0.14); box-shadow:none; font-size:26px; }
.spec-box { margin-top:12px; border:1px dashed var(--line); border-radius:12px; padding:10px; background:#fff; }
.spec-box pre { white-space:pre-wrap; word-break:break-word; font-size:12px; color:var(--text); margin-top:10px; }

.badge-draft { background:#eef2f8; color:#4a5d78; border:1px solid #d8e0ea; }
.badge-ready { background:#e8f1ff; color:#165cb5; border:1px solid #cadcff; }
.badge-applied { background:#e6f6ec; color:#0f6a43; border:1px solid #bfe7cd; }
.badge-archived { background:#f4f4f5; color:#52525b; border:1px solid #e4e4e7; }
.run-log { white-space:pre-wrap; word-break:break-word; margin-top:8px; font-size:12px; color:var(--text); }
.simple-row .action-link { align-self:flex-start; }

/* ── Worker language switch ── */
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.language-switch-form { display: flex; align-items: center; gap: 6px; width: auto; }
.language-switch-form label { color: rgba(255,255,255,.82); margin: 0; white-space: nowrap; }
.language-switch-form select { min-height: 36px; margin: 0; padding: 6px 28px 6px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.12); color: #fff; width: auto; }
.language-switch-form select option { color: #111d33; background: #fff; }
@media (max-width: 520px) {
    .topbar-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
    .language-switch-form, .logout-form { width: 100%; }
    .language-switch-form select, .logout-form button { width: 100%; }
}

/* ── Users management polish ── */
.users-page { max-width: 900px; }
.users-hero-card { overflow: visible; }
.users-hero { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; }
@media (min-width: 720px) { .users-hero { grid-template-columns: 1fr auto; } }
.current-user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); min-width: 220px; }
.current-user-chip strong { display: block; color: var(--text); line-height: 1.2; }
.current-user-chip small { color: var(--muted); direction: ltr; unicode-bidi: embed; }
.avatar-circle { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; font-weight: 900; font-size: 18px; box-shadow: 0 8px 20px rgba(26,95,180,0.18); }
.avatar-circle.large { width: 54px; height: 54px; font-size: 22px; }
.user-stats-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 16px 0 10px; }
@media (min-width: 720px) { .user-stats-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.user-stats-grid .stat-chip { text-align: start; }
.user-stats-grid .stat-chip span { display:block; min-height: 36px; color: var(--muted); font-size: 12px; font-weight: 800; }
.user-stats-grid .stat-chip.warning { background: #fff8e7; border-color: #f3d391; }
.user-card-list { display: grid; gap: 12px; }
.user-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 14px; box-shadow: var(--shadow-card); display: grid; gap: 12px; }
.user-card.is-unlinked { border-color: #ead4a5; }
.user-card-main { display: flex; gap: 12px; align-items: center; min-width: 0; }
.user-identity { min-width: 0; flex: 1; }
.user-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-title-row h3 { margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.user-meta-line { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; color: var(--muted); font-size: 12.5px; }
.user-meta-line span { background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; direction: ltr; unicode-bidi: embed; }
.user-link-summary { border-radius: 14px; background: var(--bg-2); border: 1px dashed var(--line); padding: 10px 12px; display: grid; gap: 4px; }
.user-link-summary strong { color: var(--text); }
.user-link-summary small { color: var(--muted); }
.mini-badge { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 900; border: 1px solid transparent; }
.mini-badge.success { background:#e6f6ec; color:#0f6a43; border-color:#bfe7cd; }
.mini-badge.warning { background:#fff6db; color:#8d6100; border-color:#f4dda0; }
.mini-badge.info { background:#e8f1ff; color:#165cb5; border-color:#cadcff; }
.user-card-actions { display: flex; justify-content: flex-end; }
.user-card-actions button { width: auto; min-width: 160px; }
.user-edit-panel { margin-top: 2px; border-top: 1px solid var(--line); }
.user-edit-panel.open { padding-top: 12px; }
.form-action-cell { display: flex; align-items: end; }
.form-action-cell button { margin-top: 22px; }
.users-section-title p { margin-top: 3px; }
@media (max-width: 560px) {
    .user-card-actions button { width: 100%; }
    .current-user-chip { width: 100%; }
}

/* ── Clear photo upload UX ── */
.photo-steps {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.photo-steps div {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-2);
}
.photo-steps strong {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    flex: 0 0 auto;
}
.photo-upload-card { overflow: visible; }
.photo-drop-zone {
    margin-top: 8px;
    min-height: 160px;
    border: 2px dashed var(--brand-2);
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 22px 16px;
    cursor: pointer;
    color: var(--text-2);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.photo-drop-zone strong { display:block; color:var(--brand); font-size:1.05rem; }
.photo-drop-zone span { display:block; }
.photo-drop-zone.is-dragging {
    transform: scale(.99);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.photo-drop-icon { font-size: 38px; line-height: 1; }
.visually-hidden-file {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.selected-file-summary {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 800;
}
.hidden { display:none !important; }
.photo-file-preview-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    align-items: start;
}
.photo-file-preview {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
}
.photo-file-meta textarea { min-height: 64px; }
@media (min-width: 720px) {
    .photo-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .photo-file-preview-row { grid-template-columns: 1fr; }
    .photo-file-preview { width: 100%; height: 180px; }
}


/* ── Photo catalog page ── */
.photos-catalog-page { max-width: 1120px; }
.catalog-hero-card, .catalog-filter-card { overflow: visible; }
.catalog-back-link { text-decoration: none; align-self: flex-start; }
.catalog-filter-form { grid-template-columns: 1fr; align-items: end; }
.catalog-filter-actions { display: grid; gap: 8px; align-items: end; }
.catalog-filter-actions .btn-secondary { justify-content: center; text-decoration: none; width: 100%; margin-top: 8px; }
.catalog-category-card { overflow: visible; }
.catalog-category-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.catalog-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.catalog-photo-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; min-width: 0; }
.catalog-lightbox-trigger { padding: 0; margin: 0; min-height: 0; width: 100%; background: none; box-shadow: none; border-radius: 0; display: block; }
.catalog-lightbox-trigger img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; background: var(--bg-2); transition: transform var(--transition); }
.catalog-lightbox-trigger:active img { transform: scale(.98); }
.catalog-photo-info { padding: 10px 11px 12px; display: grid; gap: 4px; min-width: 0; }
.catalog-photo-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.catalog-photo-info span { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-photo-info p { font-size: 12.5px; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; margin-top: 3px; max-height: 74px; overflow: auto; }
.catalog-card-actions { display: flex; margin-top: 5px; }
.catalog-card-actions .action-link { width: 100%; text-align: center; border-radius: 12px; }
.empty-catalog-card { text-align: center; display: grid; gap: 10px; justify-items: center; }
.empty-catalog-card .btn-secondary { text-decoration: none; justify-content: center; }
.empty-catalog-icon { font-size: 44px; line-height: 1; }
@media (min-width: 620px) {
    .catalog-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .catalog-filter-form { grid-template-columns: 1fr 1fr 1fr 1.4fr auto; }
    .catalog-filter-actions { min-width: 150px; }
    .catalog-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .catalog-photo-grid { grid-template-columns: 1fr; }
}

.notification-badge{display:inline-flex;align-items:center;gap:4px;padding:8px 10px;border-radius:999px;background:#fff3cd;color:#8a5b00;text-decoration:none;font-weight:800}


/* Unified dashboard v2 */
.dashboard-v2 { display: grid; gap: 18px; }
.dashboard-hero { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; background: linear-gradient(135deg, #ffffff, #eef6ff); border-color: #d8e8f8; }
.dashboard-hero-icon { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 34px; box-shadow: 0 10px 22px rgba(20, 57, 93, .08); }
.dashboard-hero h2 { margin: 0 0 6px; font-size: clamp(1.45rem, 4vw, 2.1rem); }
.dashboard-hero p { margin: 0; color: var(--muted); line-height: 1.65; }
.dashboard-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 12px; }
.dashboard-stat-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 15px 12px; text-align: center; box-shadow: var(--shadow-card); display: grid; gap: 5px; justify-items: center; min-height: 122px; }
.dashboard-stat-icon { width: 42px; height: 42px; border-radius: 16px; display: grid; place-items: center; background: var(--bg-2); font-size: 22px; }
.dashboard-stat-value { font-size: 1.75rem; font-weight: 900; color: var(--brand); direction: ltr; unicode-bidi: isolate; line-height: 1.1; }
.dashboard-stat-label { color: var(--muted); font-weight: 800; font-size: .9rem; line-height: 1.35; }
.dashboard-section-card { overflow: visible; }
.dashboard-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.dashboard-section-head h2 { margin: 0 0 6px; }
.dashboard-section-head p { margin: 0; color: var(--muted); line-height: 1.55; }
.dashboard-section-badge, .dashboard-head-action { flex: 0 0 auto; white-space: nowrap; }
.dashboard-section-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 900; direction: ltr; unicode-bidi: isolate; }
.dashboard-head-action { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.dashboard-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.dashboard-module-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 16px; min-height: 172px; text-decoration: none; color: var(--text); box-shadow: var(--shadow-card); display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.dashboard-module-card:hover { transform: translateY(-2px); border-color: rgba(25, 113, 194, .35); box-shadow: 0 18px 34px rgba(20,57,93,.12); }
.dashboard-module-card-disabled { opacity: .72; background: linear-gradient(180deg, #fff, #f8fbff); }
.dashboard-module-card-disabled:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-card); }
.dashboard-module-icon { width: 48px; height: 48px; border-radius: 17px; display: grid; place-items: center; background: var(--brand-soft); font-size: 25px; }
.dashboard-module-card strong { font-size: 1.08rem; line-height: 1.35; }
.dashboard-module-card small { color: var(--muted); line-height: 1.45; font-weight: 700; }
.dashboard-module-status { justify-self: start; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 7px 11px; font-size: .82rem; font-weight: 900; }
.dashboard-module-status.ready { background: #dcfce7; color: #166534; }
.dashboard-module-status.soon { background: #fef3c7; color: #92400e; }
.dashboard-core-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.dashboard-core-chip { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); color: var(--text); text-decoration: none; font-weight: 900; min-height: 52px; }
.dashboard-core-chip span { font-size: 21px; line-height: 1; }
@media (max-width: 640px) {
    .dashboard-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .dashboard-section-head { flex-direction: column; align-items: stretch; }
    .dashboard-section-badge, .dashboard-head-action { width: 100%; }
    .dashboard-module-grid { grid-template-columns: 1fr; }
    .dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
    .dashboard-stat-grid { grid-template-columns: 1fr; }
}

/* Forms Engine */
.forms-admin .dashboard-hero, .public-form-container .public-form-card { text-align: center; }
.form-admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; align-items:start; }
.form-admin-grid .full { grid-column:1 / -1; }
.form-admin-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.form-admin-actions .btn-secondary, .form-admin-actions button { width:auto; }
.checkbox-list { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.checkbox-list label { background:#f4f8fd; border:1px solid var(--line); border-radius:12px; padding:8px 10px; display:inline-flex; gap:6px; align-items:center; }
.form-question-list, .form-submission-list, .form-file-list { display:grid; gap:10px; }
.form-question-card, .form-submission-row, .submission-answer-card { background:#f7fbff; border:1px solid var(--line); border-radius:16px; padding:12px; }
.form-question-card { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.form-question-card small, .form-submission-row span { display:block; color:var(--muted); margin-top:4px; }
.forms-details { border:1px solid var(--line); border-radius:16px; padding:14px; margin-top:16px; background:#fff; }
.forms-details summary { cursor:pointer; font-weight:800; margin-bottom:12px; }
.public-form-body { background:#eef4fb; min-height:100vh; }
.public-form-container { max-width:860px; padding-top:28px; padding-bottom:28px; }
.public-form-card h1 { margin-top:0; color:var(--brand); font-size:clamp(28px,5vw,46px); }
.public-form-fields { text-align:initial; }
.public-question { margin:16px 0; background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px; }
.public-question label { font-weight:800; display:block; margin-bottom:6px; }
.signature-box canvas { width:100%; height:180px; background:#fff; border:1px dashed var(--line); border-radius:14px; touch-action:none; display:block; }
.success-check { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; background:#dcfce7; color:#166534; font-size:42px; font-weight:900; }
.submission-answer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.form-submission-row { display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:8px; text-decoration:none; color:inherit; align-items:center; }
@media (max-width: 760px) { .form-question-card, .form-submission-row { grid-template-columns:1fr; display:grid; } .form-admin-actions { display:grid; grid-template-columns:1fr; } .form-admin-actions .btn-secondary, .form-admin-actions button { width:100%; text-align:center; } }

/* Safety Operations */
.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.module-grid.compact{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.module-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line,#dce5ef);border-radius:18px;padding:16px;box-shadow:0 8px 20px rgba(20,57,93,.06)}.module-card.active,.module-card:hover{border-color:#1f6fb2;box-shadow:0 12px 26px rgba(31,111,178,.14)}.module-card h3{margin:4px 0 8px;color:#17233a}.module-icon{font-size:30px;margin-bottom:8px}.pill-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:6px;background:#eef6ff;color:#1f6fb2;border:1px solid #d7eaff;border-radius:999px;padding:6px 10px;font-size:.85rem;font-weight:800}.data-list{display:grid;gap:10px}.data-row{display:grid;gap:8px;background:#f8fbff;border:1px solid var(--line,#dce5ef);border-radius:16px;padding:14px}.data-row strong{font-size:1.05rem;color:#17233a}.highlight-card{border-color:#1f6fb2;background:linear-gradient(180deg,#fff,#f4f9ff)}.report-form-grid .full{grid-column:1/-1}@media(max-width:720px){.module-grid,.module-grid.compact{grid-template-columns:1fr}.data-row{padding:12px}.pill-row{align-items:stretch}.pill-row form,.pill-row select,.pill-row button{width:100%}}


/* Unified Operations Reports */
.operations-reports-page { display:grid; gap:18px; }
.reports-hero-card { display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#f8fbff,#ffffff); }
.reports-hero-icon { width:62px; height:62px; border-radius:22px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-size:30px; box-shadow:0 12px 24px rgba(27,102,184,.08); }
.operations-report-stats { margin-top:0; }
.operations-report-filter { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:end; }
.operations-report-actions { display:flex; gap:10px; flex-wrap:wrap; }
.operations-report-result .report-result-head { display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.operations-report-card-list { display:grid; gap:10px; }
.operations-report-row-card { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; padding:12px; border:1px solid var(--line); background:#f8fbff; border-radius:16px; }
.operations-report-field { display:grid; gap:4px; padding:8px; border-radius:12px; background:#fff; min-width:0; }
.operations-report-field span { color:var(--muted); font-size:.82rem; font-weight:700; }
.operations-report-field strong { color:var(--text); font-size:.95rem; overflow-wrap:anywhere; }
@media (max-width: 820px) { .operations-report-filter { grid-template-columns:1fr; } .operations-report-actions { display:grid; grid-template-columns:1fr; } .reports-hero-card { text-align:center; justify-content:center; flex-direction:column; } }

/* Forms UX improvements */
.keyword-help{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#f8fbff;border:1px dashed var(--line);border-radius:14px;padding:12px;line-height:1.6}.keyword-help code{background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 8px;color:var(--brand);direction:ltr}.keyword-help small{width:100%;color:var(--muted)}.bulk-actions{align-items:center;margin-bottom:12px}.bulk-actions select{max-width:220px}.bulk-check{display:flex;align-items:center;justify-content:center}.form-question-card{grid-template-columns:auto 1fr auto;align-items:center}.form-short-link{display:flex;gap:8px;width:100%;margin-top:8px}.form-short-link input{font-size:.82rem;direction:ltr}.forms-admin input[type=color]{height:44px;padding:3px}.dashboard-module-card .bulk-check{position:absolute;top:10px;inset-inline-start:10px}.dashboard-module-card{position:relative}.dashboard-module-card .dashboard-module-icon{margin-top:10px}@media (max-width: 700px){.form-question-card{grid-template-columns:1fr}.form-short-link{flex-direction:column}.bulk-actions{display:grid;grid-template-columns:1fr}.bulk-actions select,.bulk-actions button{max-width:none;width:100%}}

/* ─────────────────────────────────────────────────────────────
   Hotfix 2026-06-18: desktop layout + shared safety/report UI
   מטרות: תפריט צד בדסקטופ, תוכן רחב, וכרטיסי סטטיסטיקה גלובליים.
   ───────────────────────────────────────────────────────────── */
:root { --sidebar-w: 280px; --topbar-h: 68px; }

/* Shared report/safety/layout primitives used by safety pages */
.reports-grid { display: grid; gap: 18px; }
.reports-hero {
    background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px 22px;
    box-shadow: var(--shadow-card);
    text-align: center;
}
.reports-hero h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    font-weight: 900;
}
.reports-hero p { margin: 0; color: var(--muted); font-weight: 700; }
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.summary-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 15px 14px;
    box-shadow: var(--shadow-card);
    min-width: 0;
    text-align: center;
}
.summary-card .label,
.summary-card .small {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.35;
}
.summary-card .value {
    display: block;
    margin: 5px 0 3px;
    color: var(--brand);
    font-size: clamp(1.35rem, 3.2vw, 1.9rem);
    font-weight: 900;
    line-height: 1.1;
    direction: ltr;
    unicode-bidi: isolate;
}
.report-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    align-items: end;
}
.report-form-grid .full { grid-column: 1 / -1; }
.record-list { display: grid; gap: 12px; }
.record-card {
    display: grid;
    gap: 10px;
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(19, 54, 88, .045);
}
.record-card strong { color: var(--text); font-size: 1.05rem; }
.record-card .small, .record-card span { overflow-wrap: anywhere; }
.record-card.status-critical,
.record-card.status-high { border-color: #f0b7b7; background: #fff8f8; }
.record-card.status-medium { border-color: #f2d79d; background: #fffaf0; }
.record-card.status-low { border-color: #bfdcc8; background: #f7fff9; }
.empty-state {
    border: 1px dashed var(--line);
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    background: #f8fbff;
    color: var(--muted);
    font-weight: 700;
}
.safety-dashboard .card,
.loss-prevention-page .card { overflow: visible; }

/* Keep the bottom mobile nav, but turn it into a real sidebar on desktop. */
@media (min-width: 1024px) {
    body { padding-bottom: 0; }
    .topbar {
        min-height: var(--topbar-h);
        padding-inline: 24px;
        z-index: 40;
    }
    .tabs {
        position: fixed;
        inset-block-start: var(--topbar-h);
        inset-block-end: 0;
        inset-inline-start: 0;
        inset-inline-end: auto;
        width: var(--sidebar-w);
        height: calc(100dvh - var(--topbar-h));
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 14px 12px 18px;
        background: rgba(255,255,255,.96);
        border-top: 0;
        border-inline-end: 1px solid rgba(17,40,76,.10);
        box-shadow: 0 12px 32px rgba(17,40,76,.10);
    }
    .tab {
        width: 100%;
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
        text-align: start;
        border-radius: 14px;
        font-size: 13px;
        min-height: 46px;
    }
    .tab-icon { font-size: 18px; }
    .tab.active { box-shadow: inset 3px 0 0 var(--brand); }
    [dir="rtl"] .tab.active { box-shadow: inset -3px 0 0 var(--brand); }

    .container {
        max-width: none;
        width: auto;
        margin-inline-start: calc(var(--sidebar-w) + 24px);
        margin-inline-end: 24px;
        padding: 24px 0 42px;
        gap: 18px;
    }
    .container.reports-grid,
    .container.safety-dashboard,
    .container.forms-admin,
    .container.loss-prevention-page,
    .container.entity-hub-page,
    .container.operations-reports-page {
        max-width: 1280px;
    }
    .card { padding: 22px; }
    .grid-links { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
    .module-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .module-grid.compact { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
    .form-admin-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .dashboard-module-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .dashboard-stat-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .popup { align-items: center; padding: 24px; }
    .popup-box { border-radius: 22px; padding: 26px 24px; }
}

@media (min-width: 1440px) {
    .container {
        margin-inline-start: calc(var(--sidebar-w) + 32px);
        margin-inline-end: 32px;
    }
}

@media (max-width: 700px) {
    .summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-card { padding: 12px; }
    .report-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) { .summary-cards { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   Sprint 1 coding pass 2026-06-18: layout hardening + shared UI
   ───────────────────────────────────────────────────────────── */
.tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.danger,
.btn-danger,
.form-admin-actions button.danger {
    background: #fff4f4;
    color: #9b1f1f;
    border: 1px solid #f0c1c1;
    box-shadow: none;
}
button.danger:hover,
.btn-danger:hover { background: #ffe8e8; }

.muted-block { color: var(--muted); line-height: 1.7; }
.code-sample {
    display: block;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    overflow: auto;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    margin: 12px 0;
    border: 1px solid rgba(255,255,255,.08);
    font-size: .88rem;
}
.records-list,
.record-list { display: grid; gap: 12px; }
.record-main { min-width: 0; }
.record-main h3 { overflow-wrap: anywhere; }
.actions-stack { display: grid; gap: 8px; align-content: start; min-width: min(210px, 100%); }
.actions-stack form { margin: 0; }
.actions-stack button,
.actions-stack .btn-secondary { width: 100%; justify-content: center; text-align: center; }

.reports-grid .report-header,
.loss-prevention-page .report-header,
.safety-dashboard .report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    text-align: start;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
    margin-bottom: 16px;
}
.reports-grid .report-toolbar,
.loss-prevention-page .report-toolbar,
.safety-dashboard .report-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin: 0;
}
.reports-grid .report-toolbar form,
.loss-prevention-page .report-toolbar form { margin: 0; }
.reports-grid .report-toolbar button,
.loss-prevention-page .report-toolbar button { width: auto; margin: 0; }
.data-list { display: grid; gap: 12px; }
.data-row {
    display: grid;
    gap: 8px;
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    min-width: 0;
}
.data-row strong,
.data-row span,
.data-row p { overflow-wrap: anywhere; }
.data-row .pill-row { margin-top: 6px; }

@media (min-width: 760px) {
    .record-card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
}

@media (min-width: 1024px) {
    /* Public forms do not render appHeader/appHeader tabs, so they must stay centered. */
    .public-form-body .container,
    .public-form-container {
        max-width: 860px !important;
        margin-inline: auto !important;
        padding: 32px 18px 42px !important;
        width: 100%;
    }
    .login-body .container {
        margin-inline: auto !important;
        max-width: 420px !important;
    }
}

@media (max-width: 760px) {
    .reports-grid .report-header,
    .loss-prevention-page .report-header,
    .safety-dashboard .report-header {
        display: grid;
    }
    .reports-grid .report-toolbar,
    .loss-prevention-page .report-toolbar,
    .safety-dashboard .report-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }
    .reports-grid .report-toolbar button,
    .reports-grid .report-toolbar .btn-secondary,
    .loss-prevention-page .report-toolbar button,
    .loss-prevention-page .report-toolbar .btn-secondary {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────
   Sprint 3: user preferences, dark mode, searchable/reorderable sidebar
   ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    --bg: #0f172a;
    --bg-2: #111c31;
    --card: #162338;
    --line: #263957;
    --text: #edf4ff;
    --text-2: #c6d5ee;
    --muted: #91a4c3;
    --brand: #63a8ff;
    --brand-2: #2f7de1;
    --brand-3: #72b5ff;
    --brand-soft: rgba(82, 151, 255, .14);
    --success-bg: rgba(34,197,94,.14);
    --success-text: #86efac;
    --error-bg: rgba(239,68,68,.14);
    --error-text: #fecaca;
    --shadow-card: 0 8px 28px rgba(0,0,0,.22);
    --shadow-lg: 0 18px 54px rgba(0,0,0,.32);
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] .public-form-body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .summary-card,
:root[data-theme="dark"] .module-card,
:root[data-theme="dark"] .dashboard-module-card,
:root[data-theme="dark"] .dashboard-stat-card,
:root[data-theme="dark"] .catalog-photo-card,
:root[data-theme="dark"] .popup-box,
:root[data-theme="dark"] .template-item,
:root[data-theme="dark"] .workflow-item,
:root[data-theme="dark"] .status-card { background: var(--card); color: var(--text); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] table,
:root[data-theme="dark"] th,
:root[data-theme="dark"] .data-row,
:root[data-theme="dark"] .record-card,
:root[data-theme="dark"] .form-question-card,
:root[data-theme="dark"] .form-submission-row,
:root[data-theme="dark"] .submission-answer-card,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .hint-card,
:root[data-theme="dark"] .operations-report-field,
:root[data-theme="dark"] .dashboard-core-chip { background: var(--bg-2); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .tabs { background: rgba(15, 23, 42, .96); border-color: var(--line); }
:root[data-theme="dark"] .tab { color: var(--muted); }
:root[data-theme="dark"] .tab.active { color: var(--brand); background: var(--brand-soft); }
:root[data-theme="dark"] .reports-hero,
:root[data-theme="dark"] .dashboard-hero,
:root[data-theme="dark"] .reports-hero-card { background: linear-gradient(135deg, #162338, #111c31); border-color: var(--line); }
:root[data-theme="dark"] .btn-link,
:root[data-theme="dark"] button.secondary,
:root[data-theme="dark"] .btn-secondary { background: #101b2e; color: var(--text-2); border-color: var(--line); }

.theme-toggle-btn {
    width: auto;
    min-height: 36px;
    padding: 7px 12px;
    margin: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    box-shadow: none;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
    font-size: 13px;
}
.theme-toggle-btn span { display: inline-block; }
.tabs-tools { display: none; }
.tab.dragging { opacity: .45; }
.tab.drag-over { outline: 2px dashed var(--brand-2); outline-offset: 2px; }
.tab.nav-filtered-out { display: none !important; }
.preference-toast {
    position: fixed;
    inset-inline-start: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(16px);
    opacity: 0;
    z-index: 80;
    background: #0f172a;
    color: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
    transition: opacity .2s ease, transform .2s ease;
    font-weight: 800;
    font-size: 13px;
}
[dir="rtl"] .preference-toast { transform: translateX(50%) translateY(16px); }
.preference-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
[dir="rtl"] .preference-toast.visible { transform: translateX(50%) translateY(0); }

@media (min-width: 1024px) {
    .tabs-tools {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--line);
    }
    .tabs-search {
        min-height: 38px;
        padding: 8px 11px;
        margin: 0;
        font-size: 13px;
        border-radius: 12px;
    }
    .tabs-reset {
        width: 40px;
        min-width: 40px;
        min-height: 38px;
        margin: 0;
        padding: 0;
        border-radius: 12px;
        box-shadow: none;
        background: var(--brand-soft);
        color: var(--brand);
    }
    .tabs .tab { cursor: grab; }
    .tabs .tab:active { cursor: grabbing; }
    .preference-toast { bottom: 30px; }
}

@media (max-width: 520px) {
    .theme-toggle-btn span { display: none; }
    .theme-toggle-btn { min-width: 42px; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────
   Sprint 10: desktop top navigation bar with professional groups
   Goal: replace the desktop sidebar with a compact top navbar. Mobile keeps
   the bottom swipe navigation to avoid regressions in field use.
   ───────────────────────────────────────────────────────────── */
.desktop-top-nav { display: none; }
.mobile-bottom-tabs { display: flex; }

@media (max-width: 1023px) {
    .desktop-top-nav { display: none !important; }
    .mobile-bottom-tabs { display: flex !important; }
}

@media (min-width: 1024px) {
    :root { --desktop-nav-h: 58px; }
    body { padding-bottom: 0; }
    .topbar {
        min-height: var(--topbar-h);
        padding: 12px 24px;
        z-index: 60;
    }
    .mobile-bottom-tabs { display: none !important; }

    .desktop-top-nav {
        display: grid !important;
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        position: sticky;
        top: var(--topbar-h);
        z-index: 55;
        padding: 9px 24px;
        min-height: var(--desktop-nav-h);
        background: rgba(255,255,255,.965);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        border-bottom: 1px solid rgba(17,40,76,.10);
        box-shadow: 0 10px 28px rgba(17,40,76,.08);
    }

    .desktop-top-nav .tabs-tools,
    .desktop-top-nav .desktop-nav-tools {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        border: 0;
        min-width: 0;
    }
    .desktop-top-nav .tabs-search {
        min-height: 40px;
        margin: 0;
        border-radius: 999px;
        background: var(--bg-2);
        border: 1px solid var(--line);
        font-size: 13px;
        padding: 8px 14px;
    }
    .desktop-top-nav .tabs-reset {
        width: 42px;
        min-width: 42px;
        min-height: 40px;
        margin: 0;
        padding: 0;
        border-radius: 999px;
        background: var(--brand-soft);
        color: var(--brand);
        box-shadow: none;
        border: 1px solid rgba(26,95,180,.12);
    }

    .nav-groups {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-width: 0;
        overflow-x: auto;
        overflow-y: visible;
        padding: 2px 2px 4px;
        scrollbar-width: thin;
    }
    .nav-group {
        position: relative;
        flex: 0 0 auto;
        min-width: 0;
    }
    .nav-group[open] { z-index: 80; }
    .nav-group-summary {
        list-style: none;
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 40px;
        padding: 8px 12px;
        border-radius: 999px;
        color: var(--text-2);
        background: var(--bg-2);
        border: 1px solid transparent;
        font-weight: 900;
        line-height: 1;
        transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    }
    .nav-group-summary::-webkit-details-marker { display: none; }
    .nav-group-title { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
    .nav-group-icon { font-size: 16px; line-height: 1; }
    .nav-group-count {
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--line);
        color: var(--muted);
        font-size: 11px;
        direction: ltr;
    }
    .nav-group.active .nav-group-summary,
    .nav-group[open] .nav-group-summary,
    .nav-group-summary:hover,
    .nav-group-summary:focus-visible {
        background: var(--brand-soft);
        color: var(--brand);
        border-color: rgba(26,95,180,.18);
        box-shadow: 0 5px 16px rgba(26,95,180,.08);
        outline: none;
    }
    .nav-group.active .nav-group-count,
    .nav-group[open] .nav-group-count { color: var(--brand); border-color: rgba(26,95,180,.25); }

    .nav-group-items {
        display: none;
        position: absolute;
        inset-block-start: calc(100% + 10px);
        inset-inline-start: 0;
        min-width: 280px;
        max-width: min(420px, calc(100vw - 48px));
        max-height: min(70dvh, 560px);
        overflow: auto;
        padding: 10px;
        border-radius: 18px;
        border: 1px solid rgba(17,40,76,.12);
        background: rgba(255,255,255,.985);
        box-shadow: 0 22px 60px rgba(8,28,56,.20);
    }
    [dir="rtl"] .nav-group-items { inset-inline-start: auto; inset-inline-end: 0; }
    .nav-group[open] .nav-group-items { display: grid; gap: 6px; }

    .desktop-top-nav .tab {
        width: 100%;
        min-height: 42px;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 11px;
        border-radius: 12px;
        text-align: start;
        font-size: 13px;
        color: var(--text-2);
        background: transparent;
        cursor: grab;
    }
    .desktop-top-nav .tab:hover,
    .desktop-top-nav .tab:focus-visible {
        background: var(--bg-2);
        color: var(--brand);
        outline: none;
    }
    .desktop-top-nav .tab.active {
        color: var(--brand);
        background: var(--brand-soft);
        box-shadow: inset 3px 0 0 var(--brand);
    }
    [dir="rtl"] .desktop-top-nav .tab.active { box-shadow: inset -3px 0 0 var(--brand); }
    .desktop-top-nav .tab-icon { font-size: 18px; }
    .desktop-top-nav .tab:active { cursor: grabbing; transform: none; }

    .nav-group.nav-group-empty { display: none; }
    .desktop-top-nav .tab.nav-filtered-out { display: none !important; }

    .container {
        max-width: min(1440px, calc(100vw - 48px)) !important;
        width: 100% !important;
        margin-inline: auto !important;
        padding: 24px 0 42px !important;
        gap: 18px;
    }
    .container.reports-grid,
    .container.safety-dashboard,
    .container.forms-admin,
    .container.loss-prevention-page,
    .container.entity-hub-page,
    .container.operations-reports-page {
        max-width: min(1440px, calc(100vw - 48px)) !important;
    }
    .preference-toast { bottom: 26px; }
}

@media (min-width: 1440px) {
    .container { max-width: 1480px !important; }
    .desktop-top-nav { padding-inline: 32px; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
    .desktop-top-nav { grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); padding-inline: 16px; }
    .nav-group-summary { padding-inline: 10px; }
    .nav-group-title span:last-child { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

:root[data-theme="dark"] .desktop-top-nav,
:root[data-theme="dark"] .nav-group-items {
    background: rgba(15,23,42,.975);
    border-color: var(--line);
}
:root[data-theme="dark"] .nav-group-summary,
:root[data-theme="dark"] .desktop-top-nav .tabs-search {
    background: var(--bg-2);
    border-color: var(--line);
    color: var(--text-2);
}
:root[data-theme="dark"] .nav-group-count { background: var(--card); border-color: var(--line); }
@media (min-width: 1024px) {
    .topbar { flex-wrap: nowrap; }
    .topbar-actions { flex-wrap: nowrap; width: auto; }
    .language-switch-form { margin: 0; }
    .logout-form button { white-space: nowrap; }
}

/* Sprint 11: Update Center ZIP upload repair */
.update-upload-card input[type="file"] {
    width: 100%;
    padding: 14px;
    border: 1px dashed var(--border, #cbd8ea);
    border-radius: 14px;
    background: var(--surface-soft, #f6f9fe);
}
.compact-list {
    margin: 8px 0 0;
    padding-inline-start: 20px;
}
.bad-text {
    color: #b42318;
    font-weight: 700;
    background: #fff1f1;
    border: 1px solid #ffd0d0;
    border-radius: 12px;
    padding: 10px 12px;
}
.run-log {
    max-height: 360px;
    overflow: auto;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
}

/* Sprint 12 hotfix: make desktop top navigation sections actually usable.
   The previous dropdowns were clipped because the groups row used overflow-x:auto.
   Keep mobile bottom nav unchanged; desktop groups wrap and dropdowns are visible. */
@media (min-width: 1024px) {
    .desktop-top-nav {
        overflow: visible !important;
        z-index: 999 !important;
        align-items: start;
    }
    .desktop-top-nav .desktop-nav-tools,
    .desktop-top-nav .tabs-tools {
        align-self: start;
        position: sticky;
        top: 0;
        z-index: 1001;
    }
    .nav-groups {
        overflow: visible !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        row-gap: 8px !important;
        max-height: none !important;
        scrollbar-width: none;
    }
    .nav-groups::-webkit-scrollbar { display: none; }
    .nav-group { position: relative !important; }
    .nav-group[open] { z-index: 2500 !important; }
    .nav-group-summary {
        position: relative;
        z-index: 2;
        touch-action: manipulation;
    }
    .nav-group-summary::after {
        content: '⌄';
        font-size: 12px;
        opacity: .75;
        margin-inline-start: 2px;
        transition: transform .18s ease;
    }
    .nav-group[open] .nav-group-summary::after { transform: rotate(180deg); }
    .nav-group-items {
        z-index: 2600 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        pointer-events: auto;
    }
    .nav-group[open] .nav-group-items {
        display: grid !important;
        gap: 6px !important;
    }
    .desktop-top-nav .tab {
        text-decoration: none !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        user-select: none;
        -webkit-user-drag: none;
    }
    .desktop-top-nav .tab[draggable="true"] { cursor: pointer !important; }
    .desktop-top-nav .tab.dragging { opacity: .55; }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .desktop-top-nav {
        grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) !important;
        padding-inline: 12px !important;
    }
    .nav-group-title span:last-child {
        max-width: 150px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* Sprint 14: Forms control clickability fix
   The global input reset made checkbox/radio/range/date controls look like text fields
   and made users think they cannot be selected. Restore native controls and keep them
   above decorative layers in both /forms.php and public /form.php. */
input[type="checkbox"],
input[type="radio"] {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 6px !important;
    padding: 0 !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    accent-color: var(--brand, #1769c2);
    cursor: pointer !important;
    flex: 0 0 20px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    background: initial !important;
    border-radius: initial !important;
    box-shadow: none !important;
}

input[type="radio"] {
    border-radius: 50% !important;
}

input[type="range"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    cursor: pointer !important;
    padding: 0 !important;
    min-height: 28px;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="file"],
input[type="color"] {
    cursor: pointer;
    pointer-events: auto !important;
}

.checkbox-list {
    align-items: stretch !important;
}

.checkbox-list label,
.public-question .checkbox-list label,
.form-admin-grid .checkbox-list label,
.form-question-list .bulk-actions label,
.form-question-card .bulk-check,
.dashboard-module-card .bulk-check,
.bulk-actions label {
    cursor: pointer !important;
    user-select: none;
    pointer-events: auto !important;
    position: relative;
    z-index: 4;
    min-height: 42px;
    margin: 0 !important;
    line-height: 1.35;
}

.checkbox-list label,
.public-question .checkbox-list label,
.form-admin-grid .checkbox-list label {
    gap: 10px !important;
    justify-content: flex-start !important;
}

.checkbox-list label:focus-within,
.public-question .checkbox-list label:focus-within,
.form-admin-grid .checkbox-list label:focus-within {
    border-color: var(--brand, #1769c2) !important;
    box-shadow: 0 0 0 3px rgba(31,111,178,.14);
}

.form-admin-actions label input[type="checkbox"],
.form-question-card input[type="checkbox"],
.dashboard-module-card input[type="checkbox"] {
    margin-inline-end: 8px !important;
}

.form-admin-actions button,
.form-admin-actions a,
.dashboard-module-card a,
.dashboard-module-card button,
.public-form-card button,
.signature-box button {
    pointer-events: auto !important;
    position: relative;
    z-index: 3;
}

.public-question,
.forms-admin .card,
.public-form-card {
    position: relative;
    z-index: 1;
}

.public-question .checkbox-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px !important;
}

@media (max-width: 640px) {
    .public-question .checkbox-list,
    .checkbox-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   Sprint 15 — Public Forms Layout Hardening
   Goal: remove horizontal scrollbar and keep generated forms usable
   on desktop and mobile without touching DB/data.
   ───────────────────────────────────────────────────────────── */
.public-form-body {
    overflow-x: hidden !important;
    width: 100% !important;
}

.public-form-body .topbar,
.public-form-body .tabs,
.public-form-body .desktop-top-nav {
    display: none !important;
}

.public-form-body .container,
.public-form-container {
    width: min(100% - 24px, 860px) !important;
    max-width: 860px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding: 28px 0 42px !important;
    overflow: visible !important;
}

.public-form-card,
.public-form-container .public-form-card,
.public-form-card.card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: clamp(18px, 3vw, 28px) !important;
    text-align: center;
}

.public-form-card *,
.public-form-fields,
.public-form-fields *,
.public-question,
.public-question *,
.public-form-custom-html,
.public-form-footer {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.public-form-fields {
    display: grid !important;
    gap: 16px !important;
    width: 100% !important;
    text-align: initial !important;
}

.public-form-body .form-admin-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
}

.public-form-body .form-admin-grid label,
.public-form-body .public-question label {
    text-align: start !important;
}

.public-question {
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(14px, 2.2vw, 18px) !important;
    background: #fff !important;
}

.public-question input:not([type="checkbox"]):not([type="radio"]),
.public-question select,
.public-question textarea,
.public-form-body .form-admin-grid input,
.public-form-body .form-admin-grid select,
.public-form-body .form-admin-grid textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.public-question select,
.public-form-body .form-admin-grid select {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.public-form-card button[type="submit"],
.public-form-card .btn-primary,
.public-form-card .btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
}

.public-form-card .checkbox-list,
.public-question .checkbox-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

.public-form-card .checkbox-list label,
.public-question .checkbox-list label {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: start !important;
}

.public-form-card input[type="range"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    padding-inline: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.signature-box,
.signature-box canvas {
    width: 100% !important;
    max-width: 100% !important;
}

.public-form-custom-html img,
.public-form-footer img,
.public-question img {
    height: auto !important;
    max-width: 100% !important;
}

@media (max-width: 760px) {
    .public-form-body .container,
    .public-form-container {
        width: calc(100% - 16px) !important;
        padding: 16px 0 28px !important;
    }
    .public-form-card,
    .public-form-container .public-form-card,
    .public-form-card.card {
        border-radius: 18px !important;
        padding: 16px !important;
    }
    .public-form-body .form-admin-grid,
    .public-form-card .checkbox-list,
    .public-question .checkbox-list {
        grid-template-columns: 1fr !important;
    }
}

/* Sprint 16: editable questions in forms.php */
.form-question-card-editable {
    display: grid !important;
    grid-template-columns: auto minmax(180px, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
}
.form-question-summary {
    min-width: 0;
    overflow-wrap: anywhere;
}
.question-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.question-actions form {
    margin: 0;
}
.question-edit-panel {
    min-width: min(720px, calc(100vw - 80px));
    max-width: 100%;
}
.question-edit-panel > summary,
.question-edit-toggle {
    list-style: none;
    cursor: pointer;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.question-edit-panel > summary::-webkit-details-marker {
    display: none;
}
.question-edit-form {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--line, #d8e6f5);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(17, 68, 118, .08);
}
:root[data-theme="dark"] .question-edit-form {
    background: rgba(15, 23, 42, .98);
}
.question-edit-form input,
.question-edit-form select,
.question-edit-form textarea {
    max-width: 100%;
}
@media (max-width: 900px) {
    .form-question-card-editable {
        grid-template-columns: auto 1fr !important;
    }
    .question-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .question-actions > *,
    .question-actions button,
    .question-edit-panel {
        width: 100%;
    }
    .question-edit-toggle {
        width: 100%;
    }
}

/* Sprint 17: conditional question builder for Forms */
.conditional-builder{border:1px solid var(--line);background:#f8fbff;border-radius:16px;padding:14px;display:block}.conditional-builder>strong{display:block;margin-bottom:4px;color:var(--ink)}.conditional-builder>small{display:block;color:var(--muted);margin-bottom:12px}.conditional-builder-grid{margin:0!important}.conditional-builder [data-condition-value-select],.conditional-builder [data-condition-value-input]{width:100%}.compact-details{margin-top:10px}.compact-details summary{font-size:.92rem;color:var(--muted);cursor:pointer}.compact-details textarea{margin-top:8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.86rem}.public-question[style*="display: none"]{margin:0!important;padding:0!important;border:0!important;}

/* Sprint 18: conditional follow-up upload fields */
.public-question.public-question-conditional { transition: opacity .16s ease, transform .16s ease; }
.public-question.public-question-conditional[style*="display: none"] { opacity: 0; transform: translateY(-4px); }
.public-question input[type="file"]:disabled { opacity: .55; cursor: not-allowed; }

/* Sprint 20 - Forms Studio 2026 UX upgrade */
.forms-studio {
  --forms-accent: #1f6fb2;
  --forms-accent-2: #0f766e;
  --forms-soft: rgba(31, 111, 178, .08);
  --forms-border: rgba(31, 111, 178, .16);
  --forms-shadow: 0 18px 44px rgba(13, 42, 78, .08);
}
.forms-studio .card {
  overflow: visible;
}
.forms-studio-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--forms-border);
  background:
    radial-gradient(circle at top right, rgba(31,111,178,.14), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: var(--forms-shadow);
}
.forms-studio-hero-main h2 {
  margin-bottom: 6px;
  font-size: clamp(28px, 4vw, 44px);
  color: #165aa0;
}
.forms-studio .eyebrow {
  margin: 0 0 6px;
  color: #6f85a6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.forms-studio-meta,
.forms-question-chips,
.forms-studio-tabs,
.forms-question-filters,
.forms-admin-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.forms-studio-meta span,
.forms-question-chips span {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9e8fb;
  background: #f4f8ff;
  color: #506b91;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}
.forms-question-chips .danger-soft {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #b42318;
}
.forms-question-chips .success-soft {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #087f5b;
}
.forms-studio-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 10px;
  min-width: min(360px, 100%);
}
.forms-studio-kpis div {
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(18, 82, 146, .07);
}
.forms-studio-kpis b {
  display: block;
  color: #165aa0;
  font-size: 24px;
  line-height: 1;
}
.forms-studio-kpis span {
  color: #6f85a6;
  font-size: 12px;
  font-weight: 800;
}
.forms-studio-tabs {
  position: sticky;
  top: 68px;
  z-index: 30;
  margin: 12px 0 18px;
  padding: 10px;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(11, 42, 77, .08);
}
.forms-studio-tabs a,
.forms-studio-tabs button,
.forms-question-filters a,
.forms-question-filters button,
.forms-question-toolbar .btn-secondary {
  min-height: 40px;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}
.forms-studio-card {
  border: 1px solid var(--forms-border);
  box-shadow: var(--forms-shadow);
}
.forms-section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e4edf9;
}
.forms-section-head h2 {
  margin: 0 0 6px;
}
.forms-settings-grid {
  align-items: start;
}
.forms-question-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, 1fr));
  gap: 8px;
  min-width: min(440px, 100%);
}
.forms-question-metrics span {
  border: 1px solid #dbeafe;
  background: #f8fbff;
  border-radius: 16px;
  padding: 10px 12px;
  color: #607795;
  font-size: 12px;
  font-weight: 800;
}
.forms-question-metrics b {
  color: #165aa0;
  display: block;
  font-size: 20px;
}
.forms-question-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 18px;
  background: #f8fbff;
  border: 1px solid #dbeafe;
}
.forms-question-search {
  flex: 1 1 320px;
  margin: 0;
}
.forms-question-search span {
  display: block;
  margin-bottom: 6px;
  color: #526b8d;
  font-size: 12px;
  font-weight: 900;
}
.forms-question-search input {
  width: 100%;
}
.forms-question-filters .active {
  background: #1f6fb2;
  border-color: #1f6fb2;
  color: #fff;
}
.form-question-list {
  display: grid;
  gap: 12px;
}
.forms-question-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f9fcff);
  box-shadow: 0 10px 26px rgba(15, 72, 128, .06);
}
.forms-question-row:hover {
  border-color: #b8d6f9;
  box-shadow: 0 16px 34px rgba(15, 72, 128, .09);
}
.forms-question-summary-pro {
  min-width: 0;
}
.forms-question-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.forms-question-title-row strong {
  color: #172236;
  font-size: 16px;
}
.forms-question-key {
  direction: ltr;
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 10px;
  background: #eef6ff;
  color: #165aa0;
  font-weight: 900;
  font-size: 12px;
}
.question-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 190px;
}
.question-edit-panel {
  position: static;
}
.question-edit-panel[open] {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #cfe3fb;
  background: #fff;
}
.question-edit-panel > summary {
  list-style: none;
  cursor: pointer;
}
.question-edit-panel > summary::-webkit-details-marker,
.forms-add-question-panel > summary::-webkit-details-marker {
  display: none;
}
.question-edit-form,
.forms-add-question-panel .form-admin-grid {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef3fb;
}
.conditional-builder {
  border: 1px dashed #9bc4f2;
  background: #f5faff;
  border-radius: 18px;
  padding: 14px;
}
.conditional-builder strong {
  display: block;
  color: #165aa0;
  margin-bottom: 4px;
}
.conditional-builder > small {
  display: block;
  color: #6f85a6;
  margin-bottom: 12px;
}
.conditional-builder-grid {
  margin-top: 8px;
}
.forms-add-question-panel {
  margin-top: 18px;
  border: 1px solid #dbeafe;
  background: #fbfdff;
  border-radius: 20px;
  padding: 14px;
}
.forms-add-question-panel > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 18px;
  font-weight: 900;
  color: #165aa0;
}
.forms-library .dashboard-module-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.forms-library .dashboard-module-card {
  min-height: 220px;
  border-radius: 20px;
}
html[dir="rtl"] .forms-studio-tabs,
html[dir="rtl"] .forms-question-toolbar,
html[dir="rtl"] .forms-section-head {
  direction: rtl;
}
@media (max-width: 900px) {
  .forms-studio-hero,
  .forms-question-row {
    grid-template-columns: 1fr;
  }
  .forms-studio-kpis,
  .forms-question-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  .forms-section-head,
  .forms-question-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .forms-studio-tabs {
    top: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .question-actions {
    min-width: 0;
    justify-content: flex-start;
  }
}
@media (max-width: 540px) {
  .forms-studio-kpis,
  .forms-question-metrics {
    grid-template-columns: 1fr;
  }
  .forms-question-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .forms-question-filters a,
  .forms-question-filters button {
    width: 100%;
  }
}

/* Sprint 21 - Forms Studio multilingual direction safety */
.forms-studio,
.public-form-container {
  unicode-bidi: isolate;
}
html[dir="ltr"] .forms-studio,
html[dir="ltr"] .forms-studio .card,
html[dir="ltr"] .forms-studio label,
html[dir="ltr"] .forms-studio input,
html[dir="ltr"] .forms-studio select,
html[dir="ltr"] .forms-studio textarea,
html[dir="ltr"] .forms-studio .muted,
html[dir="ltr"] .forms-studio .forms-section-head,
html[dir="ltr"] .forms-studio .forms-question-toolbar,
html[dir="ltr"] .forms-studio .forms-question-title-row,
html[dir="ltr"] .forms-studio .conditional-builder {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .forms-studio,
html[dir="rtl"] .forms-studio .card,
html[dir="rtl"] .forms-studio label,
html[dir="rtl"] .forms-studio input,
html[dir="rtl"] .forms-studio select,
html[dir="rtl"] .forms-studio textarea,
html[dir="rtl"] .forms-studio .muted,
html[dir="rtl"] .forms-studio .forms-section-head,
html[dir="rtl"] .forms-studio .forms-question-toolbar,
html[dir="rtl"] .forms-studio .forms-question-title-row,
html[dir="rtl"] .forms-studio .conditional-builder {
  direction: rtl;
  text-align: right;
}
html[dir="ltr"] .forms-studio select {
  background-position: right 14px center;
  padding-right: 42px;
  padding-left: 14px;
}
html[dir="rtl"] .forms-studio select {
  background-position: left 14px center;
  padding-left: 42px;
  padding-right: 14px;
}
html[dir="ltr"] .forms-question-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
html[dir="rtl"] .forms-question-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
html[dir="ltr"] .question-actions {
  justify-content: flex-end;
}
html[dir="rtl"] .question-actions {
  justify-content: flex-start;
}
.forms-studio .forms-question-key,
.forms-studio code,
.forms-studio textarea[dir="ltr"] {
  direction: ltr !important;
  text-align: left !important;
}


/* V5 force fix: mobile header anti-overlap + stable bottom navigation */
@media (max-width: 700px) {
    body { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
    .topbar {
        position: relative !important;
        top: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 14px 18px 18px !important;
        min-height: auto !important;
        overflow: visible !important;
        text-align: center !important;
    }
    .title-wrap {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        display: block !important;
    }
    .title-wrap strong {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: clamp(1.2rem, 5vw, 1.55rem) !important;
        line-height: 1.15 !important;
    }
    .title-wrap .small {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: center !important;
    }
    .topbar-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    .theme-toggle-btn,
    .language-switch-form,
    .logout-form,
    .logout-form button {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .theme-toggle-btn { min-height: 48px !important; justify-content: center !important; }
    .theme-toggle-btn span { display: inline !important; }
    .language-switch-form {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 10px !important;
        text-align: start !important;
    }
    .language-switch-form label {
        white-space: nowrap !important;
        min-width: max-content !important;
        text-align: start !important;
    }
    .language-switch-form select {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        direction: rtl !important;
    }
    .mobile-bottom-tabs {
        height: calc(86px + env(safe-area-inset-bottom)) !important;
        align-items: center !important;
        padding-top: 8px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }
    .mobile-bottom-tabs .tab {
        min-width: 98px !important;
        max-width: 150px !important;
        padding: 7px 10px !important;
    }
    .mobile-bottom-tabs .tab-label {
        max-width: 118px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .container { width: 100% !important; max-width: 100% !important; padding-inline: 12px !important; }
}


/* Sprint M: no-break styling guard for Field Reports pages.
   This prevents unwrapped Field Reports screens from touching the viewport edges
   and keeps the old pages unchanged. */
.field-dash,
.field-shell,
.field-page,
.field-builder,
.templates-wrap,
.share-wrap,
.audit-wrap,
.qa-wrap,
.gl-wrap,
.nb-shell,
.offline-wrap,
.markup-wrap {
    width: min(1440px, calc(100vw - 28px));
    margin-inline: auto;
    padding: 18px 0 calc(110px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
    .field-dash,
    .field-shell,
    .field-page,
    .field-builder,
    .templates-wrap,
    .share-wrap,
    .audit-wrap,
    .qa-wrap,
    .gl-wrap,
    .nb-shell,
    .offline-wrap,
    .markup-wrap {
        width: min(1440px, calc(100vw - 48px));
        padding: 24px 0 42px;
    }
}
@media (max-width: 1023px) {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 1200;
    }
    .mobile-bottom-tabs {
        z-index: 1300 !important;
        box-shadow: 0 -10px 28px rgba(17,40,76,.12);
    }
}