/** * Punch List styles — all rules scoped under .punch-app to avoid * collision with the parent DTF shell. * * Intentionally omitted (parent shell owns): * - :root / [data-theme="dark"] CSS variable declarations * - Global *, html, body rules * - h1/h2/h3 global resets * - .app-header, .app-footer, .container, .panel (shared components) * - .btn, .btn-primary, .btn-secondary, .btn-icon (shared components) * * Body-level state classes (can't be scoped under .punch-app): * body.punch-export-panel-open * body.punch-projects-panel-open * body.punch-settings-panel-open * body.punch-lightbox-open * * .punch-photo-lightbox is appended to so it can't be scoped either. */ /* -------------------------------------------------------------------------- Punch app wrapper -------------------------------------------------------------------------- */ .punch-app { font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif); color: var(--text, #24303a); } /* -------------------------------------------------------------------------- Punch toolbar (save status — Projects/Settings/Export use the shell menu) -------------------------------------------------------------------------- */ .punch-app .punch-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.5rem; padding: 0.55rem 1rem; background: var(--surface-alt, #f4f7f9); border-bottom: 1px solid var(--border, #c5d0da); border-radius: 6px 6px 0 0; min-height: 1.75rem; } .punch-app .punch-toolbar:has(.punch-save-status:empty) { display: none; } .punch-app .punch-save-status { font-size: 0.75rem; color: var(--text-muted, #5b6b79); opacity: 0.9; min-height: 1.1em; margin: 0; } .punch-app .punch-save-status:empty { display: none; } /* -------------------------------------------------------------------------- Punch content wrapper and section panels -------------------------------------------------------------------------- */ .punch-app .punch-content { padding: 1rem 1rem 2rem; } .punch-app .punch-panel { background: var(--surface, #ffffff); border: 1px solid var(--border, #c5d0da); border-radius: 6px; box-shadow: var(--shadow, 0 1px 2px rgba(36, 48, 58, 0.06)); padding: 1.25rem; margin-bottom: 1.25rem; } .punch-app .punch-panel h2 { font-family: var(--font-serif, "IBM Plex Serif", Georgia, serif); font-size: 1.15rem; font-weight: 600; color: var(--accent, #3f5263); margin: 0 0 1rem; letter-spacing: -0.01em; } .punch-app .punch-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } /* -------------------------------------------------------------------------- Collapsible Project Information / Summary -------------------------------------------------------------------------- */ .punch-app .punch-collapsible-panel { padding: 0; overflow: hidden; } .punch-app .punch-panel-details { margin: 0; } .punch-app .punch-panel-summary { display: flex; align-items: center; gap: 0.65rem; list-style: none; cursor: pointer; padding: 1.1rem 1.25rem; user-select: none; } .punch-app .punch-panel-summary::-webkit-details-marker { display: none; } .punch-app .punch-panel-summary h2 { margin: 0; flex: 0 1 auto; } .punch-app .punch-panel-summary-chevron { width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--icon, #5b6b79); border-bottom: 2px solid var(--icon, #5b6b79); transform: rotate(45deg); transition: transform 0.15s ease; flex-shrink: 0; } .punch-app .punch-panel-details:not([open]) .punch-panel-summary-chevron { transform: rotate(-45deg); } .punch-app .punch-panel-summary-meta { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; font-weight: 500; color: var(--text-muted, #5b6b79); text-align: right; } .punch-app .punch-panel-details-body { padding: 0 1.25rem 1.25rem; } .punch-app .punch-panel-details[open] .punch-panel-summary { margin-bottom: 0.15rem; } @media print { .punch-app .punch-collapsible-panel .punch-panel-details-body { display: block !important; } .punch-app .punch-panel-summary-chevron, .punch-app .punch-panel-summary-meta { display: none !important; } } /* -------------------------------------------------------------------------- Project form -------------------------------------------------------------------------- */ .punch-app .form-grid { display: grid; gap: 0.85rem; } .punch-app .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .punch-app .project-grid label { min-width: 0; } .punch-app .project-grid-full { grid-column: 1 / -1; } .punch-app label span { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #5b6b79); margin-bottom: 0.3rem; } .punch-app input[type="text"], .punch-app input[type="search"], .punch-app input[type="date"], .punch-app select, .punch-app textarea { width: 100%; font-family: inherit; font-size: 16px; padding: 0.55rem 0.65rem; border: 1px solid var(--border, #c5d0da); border-radius: 4px; background: var(--surface-alt, #f4f7f9); color: var(--text, #24303a); transition: border-color 0.15s, box-shadow 0.15s; min-width: 0; max-width: 100%; display: block; box-sizing: border-box; } .punch-app input:focus, .punch-app select:focus, .punch-app textarea:focus { outline: none; border-color: var(--accent, #3f5263); box-shadow: 0 0 0 2px var(--accent-soft, #e3ebf1); } .punch-app input:disabled, .punch-app select:disabled { opacity: 0.5; cursor: not-allowed; background: var(--input-disabled-bg, #e8ecef); } .punch-app .field-box { position: relative; width: 100%; } .punch-app .field-box-select select { appearance: none; -webkit-appearance: none; background-color: var(--surface-alt, #f4f7f9); border: 1px solid var(--border-strong, #7f8f9d); border-radius: 4px; padding-right: 1.75rem; } .punch-app .field-box input[type="search"] { appearance: none; -webkit-appearance: none; background-color: var(--surface-alt, #f4f7f9); border: 1px solid var(--border-strong, #7f8f9d); border-radius: 4px; } .punch-app .field-box input[type="search"]::-webkit-search-decoration, .punch-app .field-box input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .punch-app .field-box-select::after { content: ''; position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--icon, #5f7181); pointer-events: none; } .punch-app .field-box-date input[type="date"] { appearance: none; -webkit-appearance: none; min-height: 2.65rem; padding: 0.55rem 0.65rem; border: 1px solid var(--border-strong, #7f8f9d); border-radius: 4px; background-color: var(--surface-alt, #f4f7f9); color: var(--text, #24303a); line-height: 1.25; } .punch-app .field-box-date input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.65; cursor: pointer; padding: 0.15rem; margin-left: 0.25rem; } .punch-app .custom-input { margin-top: 0.35rem; } /* -------------------------------------------------------------------------- Summary panel -------------------------------------------------------------------------- */ .punch-app .summary-card { background: var(--surface-alt, #f4f7f9); border: 1px solid var(--border, #c5d0da); border-radius: 6px; padding: 1rem; } .punch-app .summary-combined { padding: 1.25rem; } .punch-app .summary-overview { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border-strong, #7f8f9d); } .punch-app .summary-stat { display: flex; flex-direction: column; gap: 0.2rem; } .punch-app .summary-stat span { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #5b6b79); } .punch-app .summary-stat strong { font-family: var(--font-serif, "IBM Plex Serif", Georgia, serif); font-size: 2rem; font-weight: 600; color: var(--accent, #3f5263); line-height: 1; } .punch-app .summary-breakdown-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border, #c5d0da); } .punch-app .summary-breakdown h3 { font-family: var(--font-sans, system-ui, sans-serif); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #5b6b79); margin: 0 0 0.5rem; } .punch-app .summary-list { list-style: none; margin: 0; padding: 0; } .punch-app .summary-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px dotted var(--border, #c5d0da); font-size: 0.85rem; } .punch-app .summary-list li:last-child { border-bottom: none; } .punch-app .summary-empty { color: var(--text-muted, #5b6b79); font-size: 0.85rem; font-style: italic; } /* -------------------------------------------------------------------------- Buttons (scoped to punch-app for self-containment) -------------------------------------------------------------------------- */ .punch-app .btn { font-family: inherit; font-size: 0.85rem; font-weight: 500; padding: 0.55rem 1rem; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; touch-action: manipulation; } .punch-app .btn-primary { background: var(--btn-primary-bg, #3f5263); color: var(--btn-primary-text, #fff); border-color: var(--btn-primary-border, #3f5263); } .punch-app .btn-primary:hover { background: var(--btn-primary-hover, #324251); border-color: var(--btn-primary-hover, #324251); } .punch-app .btn-secondary { background: var(--btn-secondary-bg, #f4f7f9); color: var(--btn-secondary-text, #24303a); border-color: var(--btn-secondary-border, #7f8f9d); } .punch-app .btn-secondary:hover { background: var(--btn-secondary-hover-bg, #e3ebf1); border-color: var(--btn-secondary-hover-border, #3f5263); color: var(--btn-secondary-hover-text, #3f5263); } .punch-app .btn-icon { padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; background: var(--btn-icon-bg, #f4f7f9); color: var(--btn-icon-text, #5f7181); border: 1px solid var(--btn-icon-border, #c5d0da); } .punch-app .btn-icon:hover { background: var(--btn-icon-hover-bg, #e3ebf1); color: var(--btn-icon-hover-text, #3f5263); } .punch-app .btn-icon.btn-remove, .punch-app .btn-remove { background: var(--danger-soft, #f7ecec); color: var(--danger, #a13d3d); border-color: var(--danger-border, #e3bdbd); } .punch-app .btn-icon.btn-remove:hover, .punch-app .btn-remove:hover { background: var(--danger-hover, #efd6d6); color: var(--danger, #a13d3d); } /* -------------------------------------------------------------------------- Filter bar & view tabs -------------------------------------------------------------------------- */ .punch-app .filter-bar { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border, #c5d0da); } .punch-app .view-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.85rem; } .punch-app .view-tab { appearance: none; border: 1px solid var(--border, #c5d0da); border-radius: 6px; background: var(--surface-alt, #f4f7f9); color: var(--text-muted, #5b6b79); font-family: inherit; font-size: 0.82rem; font-weight: 500; padding: 0.45rem 0.75rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .punch-app .view-tab:hover { border-color: var(--border-strong, #7f8f9d); color: var(--text, #24303a); } .punch-app .view-tab.is-active { background: var(--accent-soft, #e3ebf1); border-color: var(--accent, #3f5263); color: var(--accent, #3f5263); } .punch-app .filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } .punch-app .filter-result-hint { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--text-muted, #5b6b79); min-height: 1.1rem; } .punch-app .filter-result-hint:empty { display: none; } /* -------------------------------------------------------------------------- Defect (punch) cards -------------------------------------------------------------------------- */ .punch-app .defect-cards { display: flex; flex-direction: column; gap: 0.75rem; } .punch-app .defect-card { background: var(--surface-alt, #f4f7f9); border: 1px solid var(--border, #c5d0da); border-radius: 6px; box-shadow: 0 1px 2px rgba(36, 48, 58, 0.05); overflow: hidden; scroll-margin-top: 1rem; } .punch-app .defect-card-header { display: flex; align-items: stretch; gap: 0.35rem; padding: 0.35rem 0.45rem 0.35rem 0.35rem; background: var(--surface, #fff); border-bottom: 1px solid var(--border, #c5d0da); } .punch-app .defect-card.is-collapsed .defect-card-header { border-bottom: none; } .punch-app .defect-card-toggle { flex: 1; display: flex; align-items: center; gap: 0.55rem; min-width: 0; padding: 0.55rem 0.65rem; border: none; border-radius: 4px; background: transparent; color: var(--text, #24303a); font-family: inherit; text-align: left; cursor: pointer; } .punch-app .defect-card-toggle:hover { background: var(--accent-soft, #e3ebf1); } .punch-app .defect-card-chevron { width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--icon, #5f7181); border-bottom: 2px solid var(--icon, #5f7181); transform: rotate(45deg); transition: transform 0.15s ease; flex-shrink: 0; } .punch-app .defect-card.is-collapsed .defect-card-chevron { transform: rotate(-45deg); } .punch-app .defect-num { flex-shrink: 0; min-width: 1.75rem; font-size: 0.9rem; font-weight: 600; color: var(--accent, #3f5263); text-align: center; } .punch-app .defect-card-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; flex-shrink: 0; } .punch-app .defect-card-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; color: var(--text-muted, #5b6b79); } .punch-app .defect-card-header .btn-remove { align-self: center; width: 2.25rem; height: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; } .punch-app .defect-card-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.85rem; padding: 1rem; } .punch-app .defect-card.is-collapsed .defect-card-body { display: none; } .punch-app .defect-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .punch-app .defect-field > span { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #5b6b79); } .punch-app .defect-field-wide { grid-column: 1 / -1; } .punch-app .defect-field-notes textarea { min-height: 4rem; } /* -------------------------------------------------------------------------- Status & priority badges -------------------------------------------------------------------------- */ .punch-app .status-badge, .punch-app .priority-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.4rem; border-radius: 3px; line-height: 1.2; } .punch-app .status-open { background: var(--danger-soft, #f7ecec); color: var(--danger, #a13d3d); } .punch-app .status-in-progress { background: #fff3e0; color: #8a5a00; } .punch-app .status-ready-for-review { background: var(--accent-soft, #e3ebf1); color: var(--accent, #3f5263); } .punch-app .status-complete { background: #e8f5e9; color: #2e6b3e; } .punch-app .status-deferred { background: var(--surface-alt, #f4f7f9); color: var(--text-muted, #5b6b79); border: 1px solid var(--border, #c5d0da); } .punch-app .status-n-a { background: var(--surface-alt, #f4f7f9); color: var(--text-muted, #5b6b79); border: 1px solid var(--border, #c5d0da); } [data-theme="dark"] .punch-app .status-in-progress { background: #3a2e18; color: #f0c060; } [data-theme="dark"] .punch-app .status-complete { background: #1e3324; color: #7ecf98; } .punch-app .priority-low { background: var(--surface-alt, #f4f7f9); color: var(--text-muted, #5b6b79); border: 1px solid var(--border, #c5d0da); } .punch-app .priority-medium { background: var(--accent-soft, #e3ebf1); color: var(--accent, #3f5263); } .punch-app .priority-high { background: #fff3e0; color: #8a5a00; } .punch-app .priority-critical { background: var(--danger-soft, #f7ecec); color: var(--danger, #a13d3d); } [data-theme="dark"] .punch-app .priority-high { background: #3a2e18; color: #f0c060; } /* -------------------------------------------------------------------------- Photo gallery & lightbox -------------------------------------------------------------------------- */ .punch-app .photo-gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 2.5rem; } .punch-app .photo-empty { margin: 0; font-size: 0.82rem; color: var(--text-muted, #5b6b79); font-style: italic; } .punch-app .photo-thumb { position: relative; width: 5.5rem; height: 5.5rem; border-radius: 4px; overflow: hidden; border: 1px solid var(--border, #c5d0da); background: var(--surface, #fff); } .punch-app .photo-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; } .punch-app .photo-thumb .photo-remove { position: absolute; top: 0.15rem; right: 0.15rem; width: 1.5rem; height: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; font-size: 0.9rem; opacity: 0.92; } .punch-app .photo-missing { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 0.72rem; color: var(--text-muted, #5b6b79); } .punch-app .photo-actions { margin-top: 0.5rem; } .punch-app .photo-add-btn { cursor: pointer; display: inline-flex; align-items: center; } /* Lightbox is appended to so cannot be scoped under .punch-app */ .punch-photo-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(16, 22, 29, 0.88); display: flex; align-items: center; justify-content: center; padding: 1rem; } .punch-photo-lightbox img { max-width: min(96vw, 1200px); max-height: 90vh; object-fit: contain; border-radius: 6px; box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.3)); } .punch-photo-lightbox-close { position: absolute; top: calc(0.75rem + env(safe-area-inset-top, 0)); right: calc(0.75rem + env(safe-area-inset-right, 0)); width: 2.5rem; height: 2.5rem; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; font-size: 1.25rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } body.punch-lightbox-open { overflow: hidden; } /* -------------------------------------------------------------------------- Punch-specific slide-out panels -------------------------------------------------------------------------- */ /* Shared backdrop style */ .punch-app .punch-backdrop { position: fixed; inset: 0; background: rgba(46, 56, 64, 0.45); z-index: 9200; opacity: 0; transition: opacity 0.2s ease; } .punch-app .punch-backdrop.is-visible { opacity: 1; } /* Shared slide-out panel */ .punch-app .punch-slide-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(22rem, 92vw); max-width: 100%; background: var(--surface, #fff); box-shadow: -4px 0 24px rgba(42, 50, 56, 0.15); z-index: 9201; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); transform: translateX(100%); transition: transform 0.25s ease; } .punch-app .punch-slide-panel.is-open { transform: translateX(0); } .punch-app .punch-panel-hdr { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.1rem 1rem 0.75rem 1.25rem; border-bottom: 1px solid var(--border, #c5d0da); } .punch-app .punch-panel-hdr h2 { font-size: 1.1rem; color: var(--accent, #3f5263); margin: 0; } .punch-app .punch-panel-close-btn { flex-shrink: 0; width: 2.25rem; height: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; } /* Export panel */ .punch-app .export-panel-body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 auto; min-height: 0; padding: 0.85rem 1rem 1.25rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .punch-app .export-option { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; width: 100%; padding: 0.75rem 0.85rem; border: 1px solid var(--border, #c5d0da); border-radius: 6px; background: var(--surface-alt, #f4f7f9); color: var(--text, #24303a); font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .punch-app .export-option:hover { border-color: var(--accent, #3f5263); background: var(--accent-soft, #e3ebf1); } .punch-app .export-option-label { font-size: 0.95rem; font-weight: 600; } .punch-app .export-option-meta { font-size: 0.75rem; color: var(--text-muted, #5b6b79); } /* Projects panel */ .punch-app .projects-panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.85rem 1rem 0.35rem; } .punch-app .projects-panel-actions .btn { flex: 1 1 8rem; } .punch-app .punch-import-file { display: none !important; } .punch-app .punch-import-status { margin: 0.35rem 1rem 0.5rem; padding: 0.75rem 0.85rem; border: 1px solid var(--border, #c5d0da); border-radius: 8px; background: var(--surface-alt, #f4f7f9); color: var(--text, #24303a); font-size: 0.88rem; line-height: 1.35; } .punch-app .punch-import-status[hidden] { display: none !important; } .punch-app .punch-import-status.is-error { border-color: var(--danger-border, #e3bdbd); background: var(--danger-soft, #f7ecec); color: var(--danger, #a13d3d); } .punch-app .punch-import-status.is-ready { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft, #e3ebf1); } .punch-app .punch-import-status-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.65rem; } .punch-app .punch-import-status-actions .btn { flex: 1 1 7rem; } .punch-app .punch-import-status.is-busy { border-color: color-mix(in srgb, var(--accent, #3f5263) 28%, transparent); } .punch-app .punch-import-progress { display: grid; grid-template-columns: 1fr auto; gap: 0.45rem 0.65rem; align-items: center; margin-top: 0.65rem; } .punch-app .punch-import-progress-track { height: 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--border, #c5d0da) 70%, transparent); overflow: hidden; } .punch-app .punch-import-progress-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient( 90deg, color-mix(in srgb, var(--accent, #3f5263) 82%, #1a9b8a), var(--accent, #3f5263) ); transition: width 0.18s ease-out; } .punch-app .punch-import-progress.is-indeterminate .punch-import-progress-fill { width: 35% !important; animation: punch-import-indeterminate 1.1s ease-in-out infinite; } .punch-app .punch-import-progress-label { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--muted, #5a6b78); min-width: 2.4rem; text-align: right; } @keyframes punch-import-indeterminate { 0% { transform: translateX(-120%); } 100% { transform: translateX(280%); } } [data-theme="dark"] .punch-app .punch-import-progress-track { background: color-mix(in srgb, var(--border, #3a4652) 80%, transparent); } .punch-app .projects-new, .punch-app .projects-import { background: var(--accent, #3f5263); color: var(--on-accent-text, #fff); border-color: var(--accent, #3f5263); } .punch-app .projects-new:hover { background: var(--accent-hover, #324251); border-color: var(--accent-hover, #324251); } .punch-app .projects-import { background: var(--surface-alt, #f4f7f9); color: var(--text, #24303a); border-color: var(--border, #c5d0da); } .punch-app .projects-import:hover { background: var(--accent-soft, #e3ebf1); border-color: var(--accent, #3f5263); color: var(--accent-hover, #324251); } .punch-app .projects-panel-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin-top: 0.45rem; } .punch-app .projects-panel-actions-row .btn { flex: unset; width: 100%; min-height: 2.85rem; padding: 0.7rem 0.75rem; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; line-height: 1.2; } .punch-app .projects-share, .punch-app .projects-import-project { background: var(--surface-alt, #f4f7f9); color: var(--text, #24303a); border-color: var(--border, #c5d0da); } .punch-app .projects-share:hover, .punch-app .projects-import-project:hover { background: var(--accent-soft, #e3ebf1); border-color: var(--accent, #3f5263); color: var(--accent-hover, #324251); } .punch-app .projects-list { list-style: none; margin: 0; padding: 0.5rem 0.75rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; } .punch-app .projects-item { display: flex; align-items: stretch; gap: 0.35rem; margin-bottom: 0.5rem; } .punch-app .projects-item-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.75rem 0.85rem; border: 1px solid var(--border, #c5d0da); border-radius: 6px; background: var(--surface-alt, #f4f7f9); cursor: pointer; font-family: inherit; text-align: left; transition: border-color 0.15s, background 0.15s; } .punch-app .projects-item-open:hover { border-color: var(--border-strong, #7f8f9d); background: var(--surface, #fff); } .punch-app .projects-item.is-active .projects-item-open { border-color: var(--accent, #3f5263); background: var(--accent-soft, #e3ebf1); box-shadow: 0 0 0 1px var(--accent, #3f5263); } .punch-app .projects-item-name { font-weight: 600; font-size: 0.95rem; color: var(--text, #24303a); word-break: break-word; } .punch-app .projects-item-meta { font-size: 0.75rem; color: var(--text-muted, #5b6b79); } .punch-app .projects-item-delete { flex-shrink: 0; align-self: center; width: 2.25rem; height: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; } .punch-app .projects-empty { padding: 1.5rem 1rem; text-align: center; color: var(--text-muted, #5b6b79); font-size: 0.9rem; font-style: italic; } .punch-app .projects-hint { margin: 0; padding: 0.75rem 1.25rem 1.25rem; font-size: 0.72rem; color: var(--text-muted, #5b6b79); border-top: 1px solid var(--border, #c5d0da); } /* Settings panel (wider) */ .punch-app #punch-settings-panel { width: min(24rem, 94vw); } .punch-app .settings-back, .punch-app .settings-close { flex-shrink: 0; width: 2.25rem; height: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; } .punch-app .settings-back[hidden] { display: none !important; } .punch-app .settings-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.75rem 0; } .punch-app .settings-panel-footer { flex-shrink: 0; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.85rem 1.25rem 1.25rem; border-top: 1px solid var(--border, #c5d0da); } .punch-app .settings-reset { width: 100%; background: var(--surface-alt, #f4f7f9); color: var(--danger, #a13d3d); border-color: var(--danger-border, #e3bdbd); } .punch-app .settings-reset:hover { background: var(--danger-soft, #f7ecec); } .punch-app .punch-btn-clear-all { width: 100%; color: var(--danger, #a13d3d); border-color: var(--danger-border, #e3bdbd); } .punch-app .punch-btn-clear-all:hover { background: var(--danger-hover, #efd6d6); color: var(--danger, #a13d3d); } .punch-app .punch-clear-hint { margin: 0; font-size: 0.78rem; color: var(--text-muted, #5b6b79); line-height: 1.35; } .punch-app .settings-section { padding: 0 1.25rem 1rem; } .punch-app .settings-section h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; font-size: 0.72rem; font-family: var(--font-sans, system-ui, sans-serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #5b6b79); } .punch-app .settings-section h3 .menu-item-icon { color: var(--icon, #5f7181); } .punch-app .settings-list { display: flex; flex-direction: column; gap: 0.25rem; } .punch-app .settings-link { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--border, #c5d0da); border-radius: 6px; background: var(--surface-alt, #f4f7f9); color: var(--text, #24303a); font-family: inherit; font-size: 0.9rem; font-weight: 500; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .punch-app .settings-link .menu-item-icon { color: var(--icon, #5f7181); } .punch-app .settings-link:hover { border-color: var(--accent, #3f5263); background: var(--accent-soft, #e3ebf1); } .punch-app .settings-link span:nth-child(2) { flex: 1; } .punch-app .settings-chevron { color: var(--icon, #5f7181); font-size: 1.1rem; line-height: 1; } .punch-app .settings-editor { padding: 0 1.25rem 1rem; } .punch-app .settings-options { list-style: none; margin: 0 0 0.75rem; padding: 0; } .punch-app .settings-options li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px dotted var(--border, #c5d0da); font-size: 0.88rem; } .punch-app .settings-add-row { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .punch-app .settings-add-row input { flex: 1; font-size: max(16px, 0.85rem); } .punch-app .settings-reset-section { width: 100%; } .punch-app .settings-hint { margin: 0 0 0.75rem; font-size: 0.78rem; color: var(--text-muted, #5b6b79); } .punch-app .settings-placeholder-row { display: grid; grid-template-columns: 1.1rem 1fr 1.4fr; align-items: center; gap: 0.5rem 0.65rem; padding: 0.45rem 0; } .punch-app .settings-placeholder-row span:nth-child(2) { font-size: 0.82rem; font-weight: 500; } .punch-app .settings-placeholder-row input { font-size: max(16px, 0.85rem); padding: 0.45rem 0.55rem; } .punch-app .menu-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--icon, #5f7181); transition: color 0.15s; } .punch-app .menu-item-icon svg { width: 100%; height: 100%; } /* Punch actions row */ .punch-app .punch-actions { margin-top: 1rem; display: flex; justify-content: flex-end; } /* Body overflow locks for punch panels */ body.punch-export-panel-open, body.punch-projects-panel-open, body.punch-settings-panel-open { overflow: hidden; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .punch-app .btn { min-height: 44px; min-width: 44px; } .punch-app .btn-icon { min-width: 44px; min-height: 44px; } .punch-app input[type="text"], .punch-app input[type="search"], .punch-app input[type="date"], .punch-app select, .punch-app textarea { font-size: 16px; min-height: 44px; } .punch-app textarea { min-height: 4.5rem; } } @media (min-width: 1024px) { .punch-app .btn { min-height: auto; min-width: auto; padding: 0.45rem 0.9rem; } .punch-app .btn-icon { min-width: auto; min-height: auto; padding: 0.35rem 0.55rem; font-size: 1rem; } .punch-app input[type="text"], .punch-app input[type="search"], .punch-app input[type="date"], .punch-app select, .punch-app textarea { font-size: 0.9rem; min-height: auto; padding: 0.45rem 0.55rem; } .punch-app textarea { min-height: 2.2rem; } } @media (max-width: 899px) { .punch-app .summary-breakdown-grid { grid-template-columns: 1fr; } .punch-app .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .punch-app .filter-grid { grid-template-columns: 1fr; } .punch-app .defect-card-badges { display: none; } .punch-app .project-grid { grid-template-columns: 1fr; } } @media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) { .punch-app .defect-card-body { gap: 0.65rem; padding: 0.75rem; } } /* -------------------------------------------------------------------------- Print -------------------------------------------------------------------------- */ @media print { .punch-app .defect-card-chevron, .punch-app .defect-card-header .btn-remove, .punch-app .photo-actions, .punch-app .photo-remove, .punch-app .filter-bar, .punch-app .punch-toolbar, .punch-app .punch-actions { display: none !important; } .punch-app .defect-card.is-collapsed .defect-card-body { display: grid; } .punch-app .defect-card-header { border-bottom: 1px solid #ccc; } .punch-app .photo-gallery { break-inside: avoid; } .punch-app input, .punch-app select, .punch-app textarea { border: none; background: transparent; padding: 0; font-size: inherit; box-shadow: none !important; } .punch-app select { appearance: none; -webkit-appearance: none; } .punch-app .custom-input { display: inline !important; margin: 0 !important; } .punch-app .custom-input::before { content: " ("; } .punch-app .custom-input::after { content: ")"; } }