/* Shared styles — My Tasks v3 + Dashboard (gold/gray Somal palette). */
:root { --gold:#c9a54a; --ink:#222; --muted:#8a8a8a; --panel:#e9eaea; --line:#d7d7d7; --green:#9fd3a4; --orange:#e8853d; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; color:var(--ink); background:#fff; font-size:14px; }
button { font-family:inherit; }
.muted { color:var(--muted); }
.err { color:#b3352e; font-size:12px; min-height:16px; padding:2px 0; }

/* layout */
.wrap { display:flex; min-height:100vh; }
.left { width:290px; background:var(--panel); padding:22px 18px; flex-shrink:0; display:flex; flex-direction:column; }
.main { flex:1; padding:18px 22px; display:flex; flex-direction:column; min-width:0; }
.label { font-size:12px; letter-spacing:.06em; color:#555; margin:2px 0 6px; }
select.picker { width:100%; padding:9px 10px; border:1px solid #999; border-radius:8px; background:#fff; font-size:14px; }
.caselist { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.casebtn { text-align:left; padding:12px 14px; border:1px solid #999; border-radius:8px; background:#fff; cursor:pointer; font-size:14px; }
.casebtn.sel { background:var(--gold); border-color:var(--gold); color:#fff; font-weight:600; }
.addcase { border:1.5px dashed #999; border-radius:8px; padding:12px 14px; background:transparent; color:#666; cursor:pointer; text-align:left; }
.addcase:hover { border-color:var(--gold); color:var(--gold); }
.bottomstat { margin-top:auto; font-weight:700; font-size:13px; padding-top:16px; }

/* task cards */
.taskcard { border:1px solid #bbb; border-radius:10px; background:#fff; margin-bottom:16px; }
.tchead { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); }
.tcdl { font-size:11px; letter-spacing:.04em; color:#555; white-space:nowrap; }
.tcdl a { color:var(--gold); cursor:pointer; text-decoration:none; font-weight:600; }
.tctitle { flex:1; text-align:center; font-weight:600; font-size:15px; }
.tcdone { display:flex; align-items:center; gap:7px; font-size:12px; color:#777; cursor:pointer; white-space:nowrap; }
.tcdone.on span { color:var(--gold); font-weight:700; }
.tcdone input { width:17px; height:17px; accent-color:var(--gold); }
.tcsecs { padding:6px 14px; }
.tcsec { padding:8px 0; border-bottom:1px solid #eee; }
.tcsec:last-child { border-bottom:none; }
.tcdesc { cursor:text; white-space:pre-wrap; }
.tcmuted { color:#aaa; font-style:italic; }
.tccommentbox { background:#ececec; border-radius:8px; padding:10px 12px; }
.tccomment { padding:3px 0; }
.tcwho { color:#888; font-size:11px; margin-left:8px; }
.tclisttitle { font-weight:600; margin-bottom:4px; }
.tcgrid { display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; }
.tcitem { display:flex; align-items:center; gap:7px; cursor:pointer; }
.tcitem input { accent-color:var(--gold); }
.tcrow { display:flex; gap:6px; margin-top:8px; }
.tcin { flex:1; border:1px solid #bbb; border-radius:6px; padding:5px 8px; font-size:13px; }
.tcta { width:100%; min-height:70px; border:1px solid #bbb; border-radius:6px; padding:6px 8px; font:inherit; }
.tcbtn { border:1px solid var(--gold); background:#fff; border-radius:6px; padding:5px 11px; cursor:pointer; font-size:12px; }
.tcaddrow { position:relative; text-align:center; padding:6px 0 8px; border-top:1px solid var(--line); }
.tcplus { width:30px; height:30px; border-radius:50%; border:none; background:#e4e4e4; font-size:18px; cursor:pointer; line-height:1; }
.tcplus:hover { background:var(--gold); color:#fff; }
.tcplusmenu { position:absolute; left:50%; transform:translateX(-50%); top:38px; background:#fff; border:1px solid #ccc; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.13); z-index:30; display:flex; flex-direction:column; min-width:150px; }
.tcplusmenu a { padding:8px 13px; cursor:pointer; font-size:13px; }
.tcplusmenu a:hover { background:#f4f4f4; }
.tcteam { padding:9px 14px; border-top:1px solid var(--line); font-size:12.5px; color:#333; }
.tcdel { float:right; color:#b3352e; cursor:pointer; font-size:11px; }
.tcdd { display:inline-block; margin-left:8px; position:relative; }
.tcdd summary { cursor:pointer; color:var(--gold); font-weight:700; list-style:none; }
.tcdd summary::-webkit-details-marker { display:none; }
.tcopts { position:absolute; z-index:25; background:#fff; border:1px solid #ccc; border-radius:8px; padding:6px; margin-top:4px; box-shadow:0 4px 14px rgba(0,0,0,.12); min-width:220px; }
.tcopt { display:block; padding:4px 6px; border-radius:5px; cursor:pointer; white-space:nowrap; font-size:12px; }
.tcopt:hover { background:#f4f4f4; }
.tcopt input { margin-right:7px; accent-color:var(--gold); }
.tcclock { display:flex; align-items:center; gap:12px; padding:10px 14px; border-top:1px solid var(--line); }
.tcdot { width:16px; height:16px; border-radius:50%; background:#8a8a8a; }
.tcdot.run { background:var(--gold); box-shadow:0 0 0 4px rgba(201,165,74,.25); }
.tcclockbtn { border:1.5px solid #444; background:#fff; border-radius:8px; padding:8px 16px; font-weight:700; letter-spacing:.04em; cursor:pointer; }
.tchours { margin-left:auto; font-size:12.5px; font-weight:700; letter-spacing:.03em; }

/* case footer */
.casefoot { border-top:2px solid var(--line); margin-top:6px; }
.cfrow { display:flex; align-items:center; gap:14px; padding:9px 4px; border-bottom:1px solid #eee; font-size:13px; }
.addtask { display:flex; align-items:center; gap:8px; color:var(--gold); font-weight:800; letter-spacing:.05em; cursor:pointer; border:none; background:none; font-size:13.5px; margin-left:auto; }
.addtask .plus { width:26px; height:26px; border-radius:50%; background:var(--gold); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:17px; }
.doclink { color:var(--gold); font-weight:600; text-decoration:none; }
.mycasetotal { text-align:right; font-weight:800; letter-spacing:.03em; font-size:13px; padding:10px 4px; }
.signed { color:#999; font-size:11.5px; padding:6px 4px; }

/* modal */
.modalback { position:fixed; inset:0; background:rgba(60,60,60,.55); z-index:50; display:flex; align-items:flex-start; justify-content:center; padding-top:8vh; }
.modal { background:#fff; border-radius:10px; min-width:340px; max-width:760px; width:70%; max-height:80vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.3); }
.modalhead { display:flex; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); font-weight:600; }
.modalhead a { cursor:pointer; color:#666; text-decoration:none; font-size:18px; line-height:1; }
.modal .inner { padding:14px 16px; }
.modal label { display:block; font-size:12px; color:#555; margin:10px 0 4px; }
.modal input[type=text], .modal select { width:100%; padding:8px 10px; border:1px solid #bbb; border-radius:7px; font-size:14px; }
.modal .actions { display:flex; justify-content:flex-end; gap:10px; padding:12px 16px; border-top:1px solid var(--line); }
.btn { border:1px solid #999; background:#fff; border-radius:7px; padding:8px 16px; cursor:pointer; }
.btn.primary { background:var(--gold); border-color:var(--gold); color:#fff; font-weight:700; }