* { box-sizing: border-box; }
body { font-family: "Segoe UI", system-ui, sans-serif; margin: 0; background: #f4f6f8; color: #222; }
button, input, select { font: inherit; } button, input[type=submit], .btn { cursor: pointer; }
button, input[type=submit], .btn { background: #fff; border: 1px solid #ccd3d9; border-radius: 6px; padding: 8px 14px; color: #222; text-decoration: none; }
a { color: #1a6fbf; text-decoration: none; } a:hover { text-decoration: underline; }
.btn { display: inline-block; } .btn:hover { background: #f0f3f6; text-decoration: none; }
.tab:hover, .primary:hover, .danger:hover { text-decoration: none; }
.primary { background: #4a90d9; color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; }
.hint { color: #777; font-size: .85em; } .grow { flex: 1; } .badge { display: inline-block; background: #e3ecf5; border-radius: 10px; padding: 1px 8px; font-size: .75em; margin-left: 4px; } .badge-soft { background: #eee; color: #666; }
.app-header { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 20px; background:#fff; box-shadow:0 1px 3px #0002; } .app-header h1 { font-size:1.2em; margin:0; } .tabs { display:flex; gap:4px; } .tab { border:0; background:transparent; padding:8px 14px; border-radius:6px; color:#222; } .tab.active { background:#4a90d9; color:#fff; } .header-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
main { width:100%; max-width:1400px; margin:auto; padding:20px; min-width:0; } .page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; } .page-heading-text { min-width:0; } .page-heading h2 { margin:0 0 4px; } .panel { background:#fff; border-radius:10px; padding:16px; box-shadow:0 1px 3px #0001; min-width:0; } .narrow-panel { max-width:720px; } .manage-columns { display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; } .card-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; } .card { display:flex; align-items:flex-start; gap:8px; border:1px solid #e2e6ea; border-radius:8px; padding:8px 10px; } .inline-form, .form-row, .board-header, .week-nav, .board-tools, .assign-cells { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .chore-form { display:flex; flex-direction:column; gap:8px; } input[type=text], select { padding:8px 10px; border:1px solid #ccd3d9; border-radius:6px; } .details-field { width:420px; max-width:100%; } .person-dot { display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:6px; } .filter-row { margin:10px 0; }
.board-header { justify-content:space-between; margin-bottom:12px; } .empty-state { background:#fff; border-radius:10px; padding:40px 20px; margin-top:20px; text-align:center; box-shadow:0 1px 3px #0001; } .empty-state h2 { margin-top:0; } .board-section { background:#fff; margin:12px 0; padding:12px; border-radius:8px; overflow-x:auto; } .board-section h3 { margin-top:0; } .board-row { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid #e2e6ea; align-items:center; min-width:620px; } .board-chore { flex:1; min-width:180px; } .assign-cell { display:inline-flex; } .assign-cell input[type=submit] { padding:6px 9px; border-radius:6px; } .assign-cell.dim input { color:#999; } .person-counts { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; } .person-pill { background:#eef1f4; border-radius:12px; padding:4px 9px; font-size:.85em; }
.sheet { background:#fff; color:#000; max-width:800px; margin:0 auto 24px; } .sheet-header { border-bottom:4px solid #4a90d9; padding-bottom:8px; margin-bottom:12px; display:flex; align-items:baseline; gap:16px; } .sheet-header h1 { margin:0; } .sheet h2 { margin:14px 0 4px; border-bottom:2px solid #ccc; } .experience-meter { display:inline-flex; align-items:center; gap:0; margin-left:3px; vertical-align:middle; } .meter-star { color:#ccc; font-size:.85em; letter-spacing:-2px; } .meter-star.lit { color:#333; } .meter-new { display:inline-block; border:1px solid #555; border-radius:3px; padding:1px 3px; font-size:.65em; font-weight:700; letter-spacing:.03em; } .daily-table { width:100%; border-collapse:collapse; table-layout:fixed; } .daily-table th,.daily-table td { border:1px solid #bfc5ca; padding:5px 4px; text-align:center; } .daily-table th:first-child { width:34%; text-align:left; } .daily-table small { display:block; color:#555; font-weight:normal; } .daily-group-row th { background:#f4f6f8; color:#555; font-size:.75em; text-transform:uppercase; text-align:left; } .daily-check-box,.print-box { display:inline-block; width:20px; height:20px; border:2px solid #333; border-radius:3px; } .print-chore { display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px dotted #ccc; } .print-name { font-weight:700; } .print-details { flex:1; color:#555; } .write-line { height:26px; border-bottom:1px dotted #999; margin:10px 2px; }
.notice,.alert { padding:10px; background:#e3f0fc; } .alert { background:#ffe3c2; }
.sign-out-form { display:inline; }
.sign-out-button { padding:.25rem .6rem; border:1px solid #cbd5e1; border-radius:6px; background:#fff; font:inherit; cursor:pointer; }
.sign-out-button:hover { background:#f1f5f9; }
.danger { background:#c0392b; color:#fff; border:0; border-radius:6px; padding:8px 14px; } .danger-zone { margin-top:20px; padding-top:14px; border-top:1px solid #e2e6ea; } .danger-zone p { margin:4px 0 10px; }
.settings-grid { display:grid; grid-template-columns:minmax(280px, 1fr) minmax(280px, 1fr); gap:20px; align-items:start; } .settings-grid h3 { margin-top:0; } .settings-actions { display:flex; flex-direction:column; align-items:flex-start; gap:12px; } .settings-actions .import-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
@media (max-width:900px) { .app-header { padding:10px 12px; } .header-actions { margin-left:0; width:100%; } main { padding:14px; } .manage-columns,.settings-grid { grid-template-columns:1fr; } .board-header { align-items:flex-start; flex-direction:column; } .board-row { align-items:center; flex-direction:row; } .board-tools { align-items:flex-start; } } @media (max-width:600px) { .tabs { width:100%; overflow-x:auto; } .tab { white-space:nowrap; } .header-actions { flex-wrap:wrap; } .import-form { max-width:100%; } input[type=text], select { max-width:100%; } }
@media print { @page { margin:12mm; } .no-print,.no-print * { display:none !important; } body { background:#fff; } .sheet { max-width:none; page-break-after:always; } .sheet:last-child { page-break-after:auto; } }

/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */