/* ═══════════════════════════════════════════
   RESET & VARIABLES
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --s1-bg:#dbeafe;--s1-tx:#1d4ed8;
  --s2-bg:#d1fae5;--s2-tx:#065f46;
  --s3-bg:#fef3c7;--s3-tx:#92400e;
  --s4-bg:#fce7f3;--s4-tx:#9d174d;
  --s5-bg:#fee2e2;--s5-tx:#b91c1c;
  --s6-bg:#dcfce7;--s6-tx:#166534;
  --bdr:#b8b8b2;
  --bdr-dark:#9e9e98;
  --bg-head:#dededd;
  --bg-hover:#f1f5f9;
  --bg-drag:#eff6ff;
  --txt:#0f172a;
  --txt2:#64748b;
  --accent:#3b82f6;
  --accent-dk:#1d4ed8;
  --shadow-sm:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 20px rgba(0,0,0,.12);
  --r:6px;
  --font:'DM Sans',sans-serif;
  --mono:'DM Mono',monospace;
}
body{font-family:var(--font);background:#f0f0ef;color:var(--txt);font-size:13px;line-height:1.5;min-height:100vh;}

/* ── HEADER ── */
.main-header{background:#fff;border-bottom:1px solid var(--bdr);padding:10px 0;position:sticky;top:0;z-index:30;box-shadow:var(--shadow-sm);}
.header-content{width:96%;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.header-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
h1{font-size:16px;font-weight:700;color:var(--txt);letter-spacing:-.015em;}

.btn-main{display:flex;align-items:center;gap:6px;background:var(--accent);color:#fff;border:none;padding:8px 14px;border-radius:var(--r);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background .15s,transform .1s;}
.btn-main:hover{background:var(--accent-dk);}
.btn-main:active{transform:scale(.97);}

.btn-backup{display:flex;align-items:center;gap:5px;background:#f1f5f9;color:var(--txt2);border:1px solid var(--bdr);padding:7px 12px;border-radius:var(--r);font-size:12px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .15s;white-space:nowrap;}
.btn-backup:hover{background:#e2e8f0;color:var(--txt);border-color:var(--bdr-dark);}
.btn-load{background:#f0fdf4;color:#166534;border-color:#bbf7d0;}
.btn-load:hover{background:#dcfce7;border-color:#86efac;}

.slicer-divider{width:1px;height:26px;background:var(--bdr);margin:0 4px;}
.slicer-wrap{display:flex;align-items:center;gap:6px;}
.slicer-label{font-size:11px;font-weight:600;color:var(--txt2);white-space:nowrap;}
.slicer{display:flex;background:#f1f5f9;padding:3px;border-radius:8px;gap:2px;}
.slicer-opt{border:none;background:none;padding:5px 11px;font-size:11px;font-weight:600;border-radius:6px;color:var(--txt2);cursor:pointer;transition:all .15s;font-family:var(--font);white-space:nowrap;}
.slicer-opt.active{background:#fff;color:var(--accent);box-shadow:var(--shadow-sm);}

/* ── APP ── */
.app-container{width:96%;margin:14px auto;}
.grid-container{background:#fff;border:1px solid var(--bdr);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm);overflow-x:auto;}

/* ── TABLE ── */
table{width:100%;border-collapse:collapse;table-layout:fixed;}
th{background:var(--bg-head);border-bottom:2px solid var(--bdr-dark);border-right:1px solid var(--bdr);padding:0;font-size:10px;font-weight:700;color:var(--txt2);letter-spacing:.06em;text-transform:uppercase;text-align:left;position:relative;cursor:pointer;user-select:none;white-space:nowrap;}
th:last-child{border-right:none;}
.th-inner{display:flex;align-items:center;gap:4px;padding:9px 10px;}
th:hover .th-inner{color:var(--txt);}
.sort-arrow::after{content:' ↕';opacity:.3;font-size:9px;}
.sort-arrow.asc::after{content:' ↑';opacity:1;color:var(--accent);}
.sort-arrow.desc::after{content:' ↓';opacity:1;color:var(--accent);}

.col-name{width:280px;min-width:160px;}
.col-comment{min-width:160px;}
.col-details{width:38px;min-width:38px;cursor:default!important;}
.col-status{width:172px;min-width:140px;}
.col-date{width:130px;min-width:110px;}
.col-timeleft{width:108px;min-width:90px;cursor:default!important;}
.col-drag{width:30px;min-width:30px;cursor:default!important;}
.col-delete{width:36px;min-width:36px;cursor:default!important;}

.resizer{position:absolute;right:0;top:0;width:5px;height:100%;cursor:col-resize;z-index:2;}
.resizer:hover,.resizer.active{background:var(--accent);opacity:.5;}

td{border-bottom:1px solid var(--bdr);border-right:1px solid var(--bdr);vertical-align:middle;padding:0;}
td:last-child{border-right:none;}

/* Main tasks — white */
tr.row-task td{background:#ffffff;}
tr.row-task td:first-child{border-left:3px solid #3b82f6;}

/* Sub-task level 1 — very light violet */
tr.row-sub1 td{background:#f5f3ff;}
tr.row-sub1 td:first-child{border-left:3px solid #8b5cf6;}

/* Sub-task level 2 — very light purple */
tr.row-sub2 td{background:#faf5ff;}
tr.row-sub2 td:first-child{border-left:3px solid #c4b5fd;}

/* Hover keeps a slightly darker tint per level */
tr.row-task:hover td{background:#f1f5f9;}
tr.row-sub1:hover td{background:#ede9fe;}
tr.row-sub2:hover td{background:#f3e8ff;}

tr.row-done td{opacity:.62;}
tr.dragging{opacity:.35;background:#eff6ff;}
tr.drag-over td{border-top:2px solid var(--accent)!important;background:var(--bg-drag);}

/* ── NAME CELL ── */
.cell-name{display:flex;align-items:flex-start;gap:4px;padding:5px 6px;}
.check-box{width:17px;height:17px;flex-shrink:0;border:1.5px solid #94a3b8;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:2px;transition:all .15s;background:#fff;}
.check-box:hover{border-color:var(--accent);}
.check-box.checked{background:#22c55e;border-color:#22c55e;}
.check-box.checked::after{content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);display:block;}

.toggle-btn{flex-shrink:0;width:20px;height:20px;border:1.5px solid #cbd5e1;border-radius:4px;background:#f8fafc;color:var(--txt2);font-size:14px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;margin-top:2px;}
.toggle-btn:hover{border-color:var(--accent);color:var(--accent);background:#eff6ff;}
.toggle-btn.has-children{width:26px;height:26px;font-size:18px;font-weight:800;border:2px solid var(--accent);color:var(--accent);background:#eff6ff;box-shadow:0 1px 5px rgba(59,130,246,.25);border-radius:6px;}
.toggle-btn.has-children:hover{background:var(--accent);color:#fff;}
.toggle-placeholder{width:20px;height:20px;flex-shrink:0;}

.name-wrap{flex:1;min-width:0;}
textarea{width:100%;background:transparent;border:none;color:var(--txt);font-family:var(--font);font-size:13px;resize:none;outline:none;padding:2px 0;display:block;line-height:1.5;overflow:hidden;}
textarea::placeholder{color:#cbd5e1;}
textarea:focus{background:#f8fafc;border-radius:3px;}
.name-area{font-weight:500;}
.row-task .name-area{font-weight:700;font-size:14px;color:#0f172a;}
.row-sub1 .name-area{font-size:13px;}
.row-sub2 .name-area{font-size:12px;font-style:italic;color:var(--txt2);}

.btn-add-child{width:20px;height:20px;flex-shrink:0;border:1.5px dashed #94a3b8;border-radius:4px;background:none;color:var(--txt2);font-size:14px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;margin-top:2px;transition:all .15s;}
.btn-add-child:hover{border-color:var(--accent);color:var(--accent);background:#eff6ff;}

.btn-focus{flex-shrink:0;background:none;border:none;cursor:pointer;font-size:14px;line-height:1;opacity:.2;transition:opacity .15s,transform .15s;padding:0;margin-top:3px;width:18px;}
.btn-focus:hover{opacity:.6;transform:scale(1.2);}
.btn-focus.focused{opacity:1;}

/* ── COMMENT ── */
.comment-area{font-size:12px;color:var(--txt2);padding:7px 10px;font-weight:400;}
.comment-area::placeholder{color:transparent;}
.comment-area:focus::placeholder{color:#cbd5e1;}

/* ── DETAILS BTN ── */
.btn-details{display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;height:100%;background:none;border:none;cursor:pointer;color:#cbd5e1;transition:color .15s;}
.btn-details:hover{color:var(--accent);}
.btn-details.has-content{color:#f59e0b;}

/* ── STATUS ── */
.status-select{width:calc(100% - 8px);margin:4px;border:none;border-radius:5px;font-family:var(--font);font-size:11px;font-weight:700;padding:6px 8px;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;text-align:left;letter-spacing:.01em;}
.status-select:focus{outline:2px solid var(--accent);outline-offset:1px;}
.status-select.s1{background:var(--s1-bg);color:var(--s1-tx);}
.status-select.s2{background:var(--s2-bg);color:var(--s2-tx);}
.status-select.s3{background:var(--s3-bg);color:var(--s3-tx);}
.status-select.s4{background:var(--s4-bg);color:var(--s4-tx);}
.status-select.s5{background:var(--s5-bg);color:var(--s5-tx);}
.status-select.s6{background:var(--s6-bg);color:var(--s6-tx);}

/* ── DATE / TIME ── */
.date-input{width:100%;background:transparent;border:none;color:var(--txt2);font-family:var(--mono);font-size:12px;padding:8px 10px;cursor:pointer;outline:none;}
.date-input:focus{background:#f8fafc;color:var(--txt);}
.time-cell{padding:6px 10px;font-family:var(--mono);font-size:11px;color:var(--txt2);white-space:nowrap;}
.time-ok{color:#16a34a;font-weight:600;}
.time-warn{color:#d97706;font-weight:600;}
.time-late{color:#dc2626;font-weight:700;}
.time-today{color:#ea580c;font-weight:700;}

/* ── DRAG / DELETE ── */
.drag-handle{display:flex;align-items:center;justify-content:center;width:30px;height:100%;min-height:36px;cursor:grab;color:#cbd5e1;font-size:15px;user-select:none;transition:color .15s;}
.drag-handle:hover{color:var(--accent);}
.drag-handle:active{cursor:grabbing;}
.btn-delete{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:36px;background:none;border:none;cursor:pointer;color:#cbd5e1;font-size:14px;transition:color .15s;}
.btn-delete:hover{color:#ef4444;}

/* ═══════════════════════════════════════════
   DETAILS MODAL
═══════════════════════════════════════════ */
.details-overlay{display:none;position:fixed;inset:0;z-index:100;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);align-items:center;justify-content:center;padding:20px;}
.details-overlay.open{display:flex;}
.details-modal{background:#fff;border:1px solid var(--bdr);border-radius:14px;box-shadow:var(--shadow-md);width:min(900px,100%);max-height:90vh;display:flex;flex-direction:column;animation:modalIn .22s cubic-bezier(.4,0,.2,1);overflow:hidden;}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.dm-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bdr);background:var(--bg-head);flex-shrink:0;}
.dm-title{font-size:15px;font-weight:700;color:var(--txt);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px;}
.dm-close{width:28px;height:28px;border-radius:50%;border:none;background:#f1f5f9;color:var(--txt2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.dm-close:hover{background:#fee2e2;color:#ef4444;}
.dm-body{display:grid;grid-template-columns:1fr 1fr;flex:1;overflow:hidden;}
.dm-col{overflow-y:auto;border-right:1px solid var(--bdr);}
.dm-col:last-child{border-right:none;}
.dm-section{padding:18px 20px;border-bottom:1px solid var(--bdr);}
.dm-section:last-child{border-bottom:none;}
.dm-section-title{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--txt2);margin-bottom:12px;}
.comment-history{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.no-history{font-size:12px;color:#94a3b8;font-style:italic;}
.comment-entry{background:#f8fafc;border:1px solid var(--bdr);border-radius:8px;padding:10px 12px;}
.comment-entry-ts{font-size:10px;font-family:var(--mono);color:#94a3b8;margin-bottom:4px;}
.comment-entry-text{font-size:13px;color:var(--txt);line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.new-comment-row{display:flex;gap:8px;align-items:flex-start;}
.new-comment-input{flex:1;border:1px solid var(--bdr);border-radius:8px;padding:9px 12px;font-size:13px;font-family:var(--font);resize:none;color:var(--txt);background:#fff;outline:none;min-height:60px;transition:border-color .15s;}
.new-comment-input:focus{border-color:var(--accent);}
.new-comment-input::placeholder{color:#94a3b8;}
.btn-add-comment{display:flex;align-items:center;gap:5px;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 14px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:var(--font);transition:background .15s;flex-shrink:0;}
.btn-add-comment:hover{background:var(--accent-dk);}
.dm-notes{width:100%;border:1px solid var(--bdr);border-radius:8px;padding:10px 12px;font-size:13px;font-family:var(--font);color:var(--txt);resize:vertical;min-height:120px;outline:none;transition:border-color .15s;background:#fff;line-height:1.6;}
.dm-notes:focus{border-color:var(--accent);}
.dm-notes::placeholder{color:#94a3b8;}
.photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.photo-thumb{aspect-ratio:1;border-radius:8px;object-fit:cover;width:100%;border:1px solid var(--bdr);cursor:pointer;transition:opacity .15s,transform .15s;display:block;}
.photo-thumb:hover{opacity:.88;transform:scale(1.02);}
.file-chip{display:flex;align-items:center;gap:6px;background:#f1f5f9;border:1px solid var(--bdr);border-radius:8px;padding:8px 10px;font-size:12px;color:var(--txt);cursor:pointer;transition:background .15s;overflow:hidden;grid-column:span 1;}
.file-chip:hover{background:var(--bg-hover);}
.file-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.btn-upload{display:flex;align-items:center;justify-content:center;gap:6px;background:#f8fafc;border:1.5px dashed #94a3b8;border-radius:8px;padding:10px 16px;font-size:12px;font-weight:600;color:var(--txt2);cursor:pointer;transition:all .15s;width:100%;font-family:var(--font);}
.btn-upload:hover{border-color:var(--accent);color:var(--accent);background:#eff6ff;}
@media(max-width:680px){.dm-body{grid-template-columns:1fr;}.dm-col{border-right:none;border-bottom:1px solid var(--bdr);}.dm-col:last-child{border-bottom:none;}}

/* ═══════════════════════════════════════════
   TOAST & DAILY REMINDER
═══════════════════════════════════════════ */
#tm-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(70px);padding:10px 22px;border-radius:50px;font-size:13px;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.15);z-index:9999;transition:transform .3s ease,opacity .3s ease;opacity:0;font-family:var(--font);white-space:nowrap;pointer-events:none;}
#tm-toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

#daily-toast{position:fixed;bottom:28px;right:28px;background:#1e293b;color:#f1f5f9;border:1px solid #334155;border-radius:14px;padding:16px 20px;max-width:320px;font-size:13px;line-height:1.6;box-shadow:0 8px 32px rgba(0,0,0,.25);z-index:9998;transform:translateY(80px);opacity:0;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s;display:flex;flex-direction:column;gap:10px;}
#daily-toast.show{transform:translateY(0);opacity:1;}
.dt-title{font-weight:700;font-size:14px;color:#f8fafc;}
.dt-msg{color:#94a3b8;}
.dt-close{align-self:flex-end;background:#334155;border:none;color:#94a3b8;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;font-family:var(--font);transition:background .15s;}
.dt-close:hover{background:#475569;color:#f1f5f9;}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#94a3b8;}