/* palummu views.css — Gantt timeline, dependency list, task drawer.
   Reuses base classes from styles.css/app.css: panel, panelhead, panelbody,
   btn, badge, hint, empty, datatable, linkbtn, field, select, checkrow, formrow, actions. */

/* ---------- Gantt ---------- */
.gantt-scroll{overflow:auto;max-height:640px;border-top:1px solid var(--line)}
.gantt-inner{position:relative;min-width:100%}
.gantt-row{display:flex;border-bottom:1px solid #eef1f5;min-height:52px}
.gantt-row.gantt-head{min-height:40px;background:#edf1f6}
.gantt-label{flex:0 0 230px;max-width:230px;position:sticky;left:0;z-index:2;background:#fff;
  padding:9px 12px;text-align:left;border:0;border-right:1px solid var(--line);
  cursor:pointer;font:inherit;color:inherit}
.gantt-row.gantt-head .gantt-label{cursor:default;font-weight:700;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
button.gantt-label:hover{background:#f6f8fc}
.gantt-label strong{display:block;font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-label small{display:block;font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-label .g-mine{color:var(--blue);font-weight:600}
.gantt-row.mine .gantt-label{box-shadow:inset 3px 0 0 var(--blue)}
.gantt-track{flex:1;position:relative;min-height:52px}
.gantt-row.gantt-head .gantt-track{min-height:40px}
.g-tick{position:absolute;top:11px;font-size:.72rem;color:var(--muted);transform:translateX(2px);white-space:nowrap}
.g-bar{position:absolute;top:12px;height:28px;border:1px solid;border-radius:6px;
  overflow:hidden;text-align:left;padding:3px 8px;cursor:pointer;font-size:.78rem;font-weight:600;white-space:nowrap}
.g-bar span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.g-bar.gray{background:#dfe4eb;border-color:#b9c2cf;color:#5d6d80}
.g-bar.amber{background:#fcf3df;border-color:#d9b96a;color:#976716}
.g-bar.blue{background:#edf2fc;border-color:#8aa5d8;color:#3e61a8}
.g-bar.green{background:#eaf5ef;border-color:#7fbf9d;color:#167454}
.g-bar.red{background:#fceeee;border-color:#d88f8f;color:#b14343}
.g-dia{position:absolute;top:15px;width:14px;height:14px;transform:rotate(45deg);border:2px solid;border-radius:3px;background:#fff;cursor:default}
.g-dia.gray{border-color:#8a94a3}.g-dia.amber{border-color:#976716}.g-dia.blue{border-color:#3e61a8}
.g-dia.green{border-color:#167454}.g-dia.red{border-color:#b14343}
.g-today{position:absolute;top:0;bottom:0;width:2px;background:var(--red);z-index:1;pointer-events:none}
.g-today span{position:sticky;top:6px;display:inline-block;background:var(--red);color:#fff;
  font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:4px;transform:translateX(-50%);white-space:nowrap}
.g-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:14px}

/* ---------- dependencies ---------- */
.g-pred{display:inline-block;margin:2px 6px 2px 0;padding:3px 8px;border:1px solid var(--line);
  border-radius:5px;background:#e9edf3;font-size:.78rem}
.g-pred.missing{color:var(--amber);border-color:#e8cb85;background:#fff6df}
.g-issue{display:block;color:var(--muted);font-size:.78rem;margin-top:4px}

/* ---------- task drawer ---------- */
body.drawer-open{overflow:hidden}
.drawer-overlay{position:fixed;inset:0;background:rgba(37,24,48,.55);z-index:1000;animation:pv-fade .18s ease-out}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(500px,100vw);background:#fff;z-index:1001;
  display:flex;flex-direction:column;box-shadow:-14px 0 44px rgba(27,45,65,.22);
  animation:pv-slide .22s ease-out}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:1.05rem;margin:0}
.drawer-body{overflow-y:auto;padding:20px;flex:1}
.drawer-summary h2{font-size:1.25rem;margin:6px 0 4px;overflow-wrap:anywhere}
.drawer-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:16px 0 6px;
  padding:14px;background:#e9edf3;border:1px solid var(--line);border-radius:8px}
.drawer-meta>div{min-width:0}
.drawer-meta dt{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.drawer-meta dd{margin:3px 0 0;font-size:.88rem;overflow-wrap:anywhere}
#pv-task-form{border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
#pv-extras{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
@keyframes pv-slide{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes pv-fade{from{opacity:0}to{opacity:1}}

/* ---------- Timeline controls: one row, compact link-style treatments ----------
   (Complements timeline-toolbar.css, which owns the base layout; the `section`
   qualifier wins ties without touching that file.) */
section.timeline-controls{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
section.timeline-controls>.timeline-view-controls{flex-wrap:nowrap;flex:0 0 auto;gap:10px}
section.timeline-controls>.timeline-actions{flex-wrap:nowrap;flex:0 0 auto;margin-left:auto}
section .timeline-scale{font-size:.82rem;white-space:nowrap}
section .timeline-scale select{min-height:36px;height:36px;font-size:.82rem;padding:6px 26px 6px 10px}
section .timeline-check{font-size:.82rem;white-space:nowrap}
section .timeline-info>summary{font-size:15px}
section .timeline-more>summary{border:0;background:none;color:var(--blue);font-weight:600;padding:8px 4px;min-height:36px;white-space:nowrap}
section .timeline-more>summary:hover{text-decoration:underline;background:none}
@media(max-width:800px){
  section.timeline-controls{flex-wrap:nowrap;padding:10px 12px}
  section.timeline-controls>.timeline-actions{width:auto;border-top:0;padding-top:0;justify-content:flex-end}
}

/* (The gantt label column stays 230px at all widths — the chart scrolls
   horizontally on small screens, and the JS "today" line math depends on it.) */
@media(max-width:640px){
  .drawer-meta{grid-template-columns:1fr}
}