/* ═══ Reset & Base ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f0f2f5;color:#1a1a2e;display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ═══ Header ═══ */
.app-header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:48px;background:#1a1a2e;color:#fff;flex-shrink:0;gap:10px}
.header-brand h1{font-size:1.05rem;font-weight:600;letter-spacing:-.3px;white-space:nowrap}
.header-nav{display:flex;align-items:center;gap:4px}
.nav-btn{background:rgba(255,255,255,.1);border:none;color:#fff;padding:5px 10px;border-radius:6px;cursor:pointer;font-size:.85rem;transition:background .15s}
.nav-btn:hover{background:rgba(255,255,255,.2)}
.nav-btn.month-label{font-weight:600;min-width:140px;text-align:center;cursor:default;background:0 0}
.nav-btn.accent{background:#007bff}
.nav-btn.accent:hover{background:#0069d9}
.help-btn{font-weight:700;font-size:.95rem;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%}
.header-actions{display:flex;align-items:center;gap:8px}
.btn-group{display:flex;border-radius:6px;overflow:hidden}
.btn-group .btn{background:rgba(255,255,255,.1);border:none;color:#ccc;padding:5px 10px;cursor:pointer;font-size:.75rem;transition:all .15s}
.btn-group .btn:hover{background:rgba(255,255,255,.15);color:#fff}
.btn-group .btn.active{background:#007bff;color:#fff}
.search-input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;padding:5px 8px;border-radius:6px;font-size:.8rem;width:160px;outline:0;transition:border .15s}
.search-input::placeholder{color:rgba(255,255,255,.4)}
.search-input:focus{border-color:#007bff}

/* ═══ Legend ═══ */
.legend-bar{display:flex;align-items:center;gap:12px;padding:4px 16px;background:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:4px;font-size:.7rem;color:#555;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}

/* ═══ Main Gantt ═══ */
.main-content{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;background:#fff}
.loading{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:1rem}

.gantt-row{display:flex;border-bottom:1px solid #eaeaea;min-height:32px}
.gantt-row:last-child{border-bottom:none}

.gantt-label{width:140px;min-width:140px;padding:3px 8px;display:flex;align-items:center;font-size:.78rem;background:#fff;position:sticky;left:0;z-index:5;border-right:2px solid #d0d0d0;cursor:pointer;transition:background .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-label:hover{background:#f0f4ff}
.gantt-label.selected{background:#e0ecff;font-weight:600}
.gantt-label .area-tag{font-size:.6rem;padding:1px 4px;border-radius:3px;margin-left:4px;color:#fff;flex-shrink:0}
.area-tag.mackay{background:#28a745}
.area-tag.brisbane{background:#6f42c1}

/* Group header */
.gantt-row.group-header{background:#f4f5f7;min-height:26px;position:sticky;top:36px;z-index:6}
.gantt-row.group-header .gantt-label{font-weight:700;font-size:.75rem;color:#444;text-transform:uppercase;letter-spacing:.5px;background:#f4f5f7;cursor:default}
.gantt-row.group-header .gantt-label:hover{background:#f4f5f7}

/* Date header */
.gantt-row.date-header{background:#fafbfc;min-height:36px;position:sticky;top:0;z-index:8;border-bottom:2px solid #d0d0d0}
.gantt-row.date-header .gantt-label{background:#fafbfc;font-weight:700;font-size:.7rem;color:#666;z-index:9;cursor:default}
.gantt-row.date-header .gantt-label:hover{background:#fafbfc}

/* Row content - RESPONSIVE: fills remaining width */
.row-content{position:relative;flex:1;min-height:32px}

/* Day header - RESPONSIVE */
.day-header-content{display:flex;flex:1}
.day-header-cell{flex:1;min-width:0;text-align:center;font-size:.65rem;line-height:1.15;padding:2px 0;border-right:1px solid #e0e0e0;color:#555;display:flex;flex-direction:column;justify-content:center}
.day-header-cell .day-name{font-weight:600;color:#888}
.day-header-cell .day-num{font-weight:700;font-size:.8rem;color:#333}
.day-header-cell.weekend{background:#f5f0e8}
.day-header-cell.weekend .day-num{color:#b08030}
.day-header-cell.today{background:#e0ecff}
.day-header-cell.today .day-num{color:#007bff;font-weight:800}

/* Grid lines, weekends, today - percentage positioned */
.day-line{position:absolute;top:0;bottom:0;width:1px;background:#eaeaea;pointer-events:none}
.weekend-stripe{position:absolute;top:0;bottom:0;background:rgba(200,180,140,.07);pointer-events:none}
.today-stripe{position:absolute;top:0;bottom:0;background:rgba(0,123,255,.07);pointer-events:none;border-left:2px solid rgba(0,123,255,.35)}

/* Bars */
.bar{position:absolute;border-radius:3px;font-size:.63rem;color:#fff;padding:0 4px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;transition:filter .1s,box-shadow .1s;box-shadow:0 1px 2px rgba(0,0,0,.15);z-index:2}
.bar:hover{filter:brightness(1.15);box-shadow:0 2px 6px rgba(0,0,0,.25);z-index:3}
.bar.clipped-left{border-top-left-radius:0;border-bottom-left-radius:0}
.bar.clipped-right{border-top-right-radius:0;border-bottom-right-radius:0}
.bar-text{overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(0,0,0,.3);font-weight:500}

/* ═══ Leave Panel ═══ */
.leave-panel{flex-shrink:0;background:#fff;border-top:2px solid #d0d0d0;max-height:50vh;display:flex;flex-direction:column}
.leave-header{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;cursor:pointer;user-select:none;background:#f4f5f7}
.leave-header h3{font-size:.85rem;font-weight:600;color:#333}
.toggle-arrow{font-size:.7rem;color:#999;transition:transform .2s}
.leave-panel.collapsed .toggle-arrow{transform:rotate(180deg)}
.leave-panel.collapsed .leave-body{display:none}
.leave-body{padding:10px 16px;overflow-y:auto;flex:1}
.leave-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.form-group{display:flex;flex-direction:column;gap:2px}
.form-group label{font-size:.7rem;font-weight:600;color:#666}
.form-group select,.form-group input[type="date"]{padding:5px 7px;border:1px solid #ccc;border-radius:5px;font-size:.8rem;outline:0}
.form-group select{min-width:180px}
.form-group select:focus,.form-group input:focus{border-color:#007bff}
.leave-area-toggles{display:flex;gap:10px}
.area-toggle{display:flex;align-items:center;gap:4px;font-size:.78rem;cursor:pointer;padding:4px 8px;border:1px solid #ddd;border-radius:5px;transition:all .15s;user-select:none}
.area-toggle:hover{border-color:#007bff}
.area-toggle input{margin:0}
.area-toggle input:checked ~ .area-tag{opacity:1}
.area-toggle .area-tag{opacity:.4;transition:opacity .15s}

.btn.primary{background:#007bff;color:#fff;border:none;padding:7px 16px;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s;white-space:nowrap}
.btn.primary:hover{background:#0069d9}

/* ═══ Leave Results ═══ */
#leave-results{margin-top:12px}

.lv-header{margin-bottom:10px;padding:10px 14px;background:#f8f9fb;border-radius:8px;border:1px solid #e0e0e0}
.lv-title{font-size:.95rem;color:#1a1a2e;margin-bottom:2px}
.lv-period{font-size:.78rem;color:#666;margin-bottom:4px}
.lv-warning{font-size:.78rem;color:#b45309;font-weight:600;padding:3px 8px;background:#fef3c7;border-radius:4px;display:inline-block;margin-top:3px}
.lv-ok{font-size:.78rem;color:#15803d;font-weight:600;padding:3px 8px;background:#dcfce7;border-radius:4px;display:inline-block;margin-top:3px}

/* AI Recommendation */
.ai-rec{margin-bottom:10px;padding:10px 14px;background:linear-gradient(135deg,#ede7f6,#e8eaf6);border-radius:8px;border:1px solid #b39ddb}
.ai-rec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ai-rec-title{font-size:.8rem;font-weight:700;color:#4527a0}
.ai-rec-apply{background:#5e35b1;color:#fff;border:none;padding:4px 12px;border-radius:5px;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s}
.ai-rec-apply:hover{background:#4527a0}
.ai-rec-body{font-size:.78rem;color:#333;line-height:1.6}
.ai-rec-body .ai-line{padding:1px 0}
.ai-rec-body .ai-suggestion{padding:2px 0;margin-left:8px}
.ai-rec-body .ai-warn{color:#e65100;font-weight:600}
.ai-rec-body .ai-good{color:#2e7d32;font-weight:600}

/* Scrollable comparison table */
.lv-scroll{overflow-x:auto;border:1px solid #d0d0d0;border-radius:8px;margin-bottom:8px}

.lv-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:.72rem}

.lv-name-col{position:sticky;left:0;z-index:4;background:#fff;width:130px;min-width:130px;max-width:130px;padding:4px 6px;font-size:.73rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:2px solid #d0d0d0;text-align:left}

.lv-date-row th{padding:4px 1px;text-align:center;border-bottom:2px solid #d0d0d0;background:#fafbfc;position:sticky;top:0;z-index:5;vertical-align:middle}
.lv-date-row .lv-name-col{z-index:6;background:#fafbfc;font-weight:700}
.lv-day-header{border-right:1px solid #e0e0e0;line-height:1.1;padding:3px 0 !important}
.lv-day-header .lv-dn{display:block;font-weight:600;color:#888;font-size:.58rem}
.lv-day-header .lv-dd{display:block;font-weight:800;color:#333;font-size:.78rem}
.lv-day-header .lv-dm{display:block;font-weight:400;color:#aaa;font-size:.55rem}
.lv-day-header.lv-weekend{background:#f5f0e8}
.lv-day-header.lv-weekend .lv-dd{color:#b08030}

/* Section rows */
.lv-section-row td{padding:4px 10px;font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:#fff;border-bottom:1px solid rgba(0,0,0,.1)}
.lv-sec-requesting td{background:#e83e8c}
.lv-sec-available td{background:#28a745}
.lv-sec-partial td{background:#fd7e14}
.lv-sec-busy td{background:#dc3545}
.lv-sec-coverage td{background:#1a1a2e}

/* Tech rows */
.lv-row-requesting,.lv-row-candidate{border-bottom:1px solid #eee}
.lv-row-requesting .lv-name-col{font-weight:700;background:#fff0f6}
.lv-row-candidate .lv-name-col{font-weight:500}
.lv-row-candidate:hover .lv-name-col{background:#f0f4ff}
.lv-row-busy{opacity:.5}
.lv-row-busy:hover{opacity:.8}

/* Day cells */
.lv-cell{padding:2px;text-align:center;vertical-align:middle;border-right:1px solid #eee;height:30px;position:relative}
.lv-cell.lv-weekend{background:rgba(200,180,140,.05)}

/* Free cells - clickable */
.lv-free{background:#e8f5e9;cursor:pointer;transition:background .12s}
.lv-free:hover{background:#a5d6a7}
.lv-free.lv-weekend{background:#dcedc8}
.lv-free.lv-weekend:hover{background:#aed581}
.lv-free.lv-other-assigned{background:#f1f8e9;opacity:.55}
.lv-free.lv-assigned{background:#bbdefb;box-shadow:inset 0 0 0 2px #1976d2}
.lv-free.lv-assigned:hover{background:#90caf9}

/* Busy cells - also clickable for candidates */
.lv-clickable{cursor:pointer}
.lv-clickable:hover .lv-bar{filter:brightness(1.15)}
.lv-busy.lv-override{box-shadow:inset 0 0 0 2px #1976d2}
.lv-busy.lv-override .lv-bar{opacity:.4}

.lv-badge,.lv-override-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#1976d2;color:#fff;font-weight:700;font-size:.6rem;letter-spacing:-.3px}
.lv-override-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* No assignment day */
.lv-no-work{background:#f5f5f5}
.lv-dash{color:#ccc;font-size:.85rem}

/* Busy cells */
.lv-busy{padding:2px 1px}
.lv-bar{border-radius:3px;padding:1px 2px;color:#fff;height:22px;display:flex;align-items:center;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.lv-bar-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.58rem;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.lv-multi{position:absolute;top:0;right:1px;font-size:.55rem;color:#999;font-weight:600}

/* Summary rows */
.lv-summary-row td{border-bottom:1px solid #e0e0e0}
.lv-sum-label{font-weight:700 !important;font-size:.7rem !important;color:#555;background:#f8f9fa !important}
.lv-avail{font-weight:700;font-size:.78rem}
.lv-avail-high{background:#e8f5e9;color:#2e7d32}
.lv-avail-med{background:#fff8e1;color:#f57f17}
.lv-avail-low{background:#fce4ec;color:#c62828}
.lv-avail-zero{background:#ffcdd2;color:#b71c1c;font-weight:800}
.lv-needs{color:#aaa;font-size:.7rem}
.lv-needs-yes{background:#fff3e0;color:#e65100;font-weight:700}
.lv-assign-row td{border-top:2px solid #1a1a2e}
.lv-plan-filled{background:#e3f2fd;color:#1565c0;font-weight:800;font-size:.72rem;cursor:pointer}
.lv-plan-filled:hover{background:#bbdefb}
.lv-plan-empty{color:#ccc;font-size:.72rem}
.lv-uncovered{background:#ffebee;color:#c62828;font-weight:700;animation:pulse-unc 2s ease-in-out infinite}
@keyframes pulse-unc{0%,100%{background:#ffebee}50%{background:#ffcdd2}}

/* Coverage status bar */
.lv-status-bar{display:flex;align-items:center;gap:10px;padding:8px 0}
.lv-status-track{flex:0 0 180px;height:7px;background:#e0e0e0;border-radius:4px;overflow:hidden}
.lv-status-fill{height:100%;background:linear-gradient(90deg,#43a047,#66bb6a);border-radius:4px;transition:width .3s ease}
.lv-status-text{font-size:.78rem;font-weight:600}
.lv-status-text.complete{color:#2e7d32}
.lv-status-text.pending{color:#e65100}

/* ═══ Final Plan Summary ═══ */
.final-plan{margin-top:10px;border:2px solid #1a1a2e;border-radius:8px;overflow:hidden}
.final-plan-header{background:#1a1a2e;color:#fff;padding:8px 14px;font-size:.82rem;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.final-plan-header .fp-status{font-size:.72rem;padding:2px 10px;border-radius:10px;font-weight:600}
.fp-status.complete{background:#28a745}
.fp-status.partial{background:#fd7e14}
.final-plan-body{padding:0}
.fp-table{width:100%;border-collapse:collapse;font-size:.78rem}
.fp-table th{background:#f4f5f7;padding:6px 10px;text-align:left;font-weight:600;font-size:.7rem;color:#666;text-transform:uppercase;border-bottom:1px solid #ddd}
.fp-table td{padding:5px 10px;border-bottom:1px solid #eee;vertical-align:middle}
.fp-table tr:last-child td{border-bottom:none}
.fp-table tr:hover{background:#f8f9fb}
.fp-day{font-weight:600;white-space:nowrap}
.fp-tech{font-weight:600;color:#1565c0}
.fp-tech.none{color:#999;font-weight:400;font-style:italic}
.fp-status-cell{font-size:.72rem;font-weight:600}
.fp-status-cell.available{color:#2e7d32}
.fp-status-cell.override{color:#e65100}
.fp-status-cell.uncovered{color:#c62828}
.fp-status-cell.nowork{color:#999}
.fp-replacing{font-size:.72rem;color:#666;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ Help Modal ═══ */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.visible{display:flex}
.modal{background:#fff;border-radius:12px;max-width:620px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e0e0e0}
.modal-header h2{font-size:1.05rem;color:#1a1a2e}
.modal-close{background:0 0;border:none;font-size:1.5rem;cursor:pointer;color:#999;line-height:1;padding:0 4px}
.modal-close:hover{color:#333}
.modal-body{padding:20px}

.help-grid{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.help-step{display:flex;gap:12px;align-items:flex-start}
.help-num{width:28px;height:28px;background:#1a1a2e;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}
.help-step h4{font-size:.9rem;color:#1a1a2e;margin-bottom:2px}
.help-step p{font-size:.8rem;color:#666;line-height:1.5}

.help-legend{border-top:1px solid #eee;padding-top:14px}
.help-legend h4{font-size:.85rem;color:#333;margin-bottom:8px}
.help-colors{display:flex;flex-wrap:wrap;gap:8px 16px}
.help-colors span{display:flex;align-items:center;gap:5px;font-size:.78rem;color:#555}
.help-colors i{width:12px;height:12px;border-radius:3px;display:inline-block}

.settings-status{font-size:.8rem;font-weight:600}
.settings-status.success{color:#2e7d32}
.settings-status.error{color:#c62828}

/* ═══ Tooltip ═══ */
.tooltip{position:fixed;z-index:100;background:#1a1a2e;color:#fff;padding:8px 12px;border-radius:8px;font-size:.75rem;line-height:1.5;max-width:300px;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.tooltip.visible{opacity:1}
.tooltip .tt-title{font-weight:700;margin-bottom:3px}
.tooltip .tt-row{color:#bbb}
.tooltip .tt-row strong{color:#fff}

/* ═══ Scrollbar ═══ */
.main-content::-webkit-scrollbar{width:8px;height:8px}
.main-content::-webkit-scrollbar-track{background:#f0f0f0}
.main-content::-webkit-scrollbar-thumb{background:#c0c0c0;border-radius:4px}
.main-content::-webkit-scrollbar-thumb:hover{background:#a0a0a0}
.leave-body::-webkit-scrollbar{width:6px}
.leave-body::-webkit-scrollbar-track{background:#f0f0f0}
.leave-body::-webkit-scrollbar-thumb{background:#c0c0c0;border-radius:3px}

/* ═══ View Toggle ═══ */
.view-toggle{margin-left:4px}

/* ═══ Focus Mode ═══ */
.focus-bar{display:none;align-items:center;justify-content:space-between;padding:5px 16px;background:#e8eaf6;border-bottom:1px solid #b39ddb;flex-shrink:0;gap:10px}
.focus-bar.visible{display:flex}
.focus-info{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:#4527a0}
.focus-count{background:#5e35b1;color:#fff;padding:1px 8px;border-radius:10px;font-size:.72rem}
.focus-actions{display:flex;gap:6px}
.focus-btn{background:#5e35b1;color:#fff;border:none;padding:4px 12px;border-radius:5px;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s}
.focus-btn:hover{background:#4527a0}
.focus-btn.outline{background:transparent;color:#5e35b1;border:1px solid #5e35b1}
.focus-btn.outline:hover{background:#ede7f6}
.focus-btn.active-focus{background:#2e7d32}
.focus-btn.active-focus:hover{background:#1b5e20}
.tech-check{width:14px;height:14px;margin:0 4px 0 0;cursor:pointer;flex-shrink:0;accent-color:#5e35b1}
.gantt-label .tech-check{position:relative;z-index:6}

/* ═══ Custom Groups ═══ */
.groups-btn{font-size:.75rem;gap:4px}
.groups-btn.active{background:#1976d2 !important;color:#fff}

.group-filter-bar{display:none;align-items:center;justify-content:space-between;padding:5px 16px;background:#e3f2fd;border-bottom:1px solid #90caf9;flex-shrink:0;gap:8px}
.group-filter-bar.visible{display:flex}
.group-filter-info{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:#1565c0}
.group-filter-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.group-filter-count{background:#1976d2;color:#fff;padding:1px 8px;border-radius:10px;font-size:.72rem}
.group-filter-clear{background:transparent;color:#1565c0;border:1px solid #1565c0;padding:4px 12px;border-radius:5px;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s}
.group-filter-clear:hover{background:#bbdefb}

.groups-empty{text-align:center;padding:20px;color:#999;font-size:.85rem}
.group-create-row{display:flex;gap:8px;margin-bottom:14px}
.group-create-input{flex:1;padding:7px 10px;border:1px solid #ccc;border-radius:6px;font-size:.82rem;outline:0}
.group-create-input:focus{border-color:#007bff}
.group-create-btn{background:#007bff;color:#fff;border:none;padding:7px 14px;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
.group-create-btn:hover{background:#0069d9}

.groups-list{display:flex;flex-direction:column;gap:8px}
.group-card{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid #e0e0e0;border-radius:8px;transition:border-color .15s}
.group-card:hover{border-color:#007bff}
.group-card-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.group-card-color{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.group-card-name{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-card-count{font-size:.72rem;color:#666;white-space:nowrap}
.group-card-actions{display:flex;gap:5px;flex-shrink:0}
.group-card-actions button{border:none;padding:4px 10px;border-radius:5px;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s}
.gcb-filter{background:#e3f2fd;color:#1565c0}
.gcb-filter:hover{background:#bbdefb}
.gcb-filter.active{background:#1565c0;color:#fff}
.gcb-edit{background:#f3e5f5;color:#7b1fa2}
.gcb-edit:hover{background:#e1bee7}
.gcb-delete{background:#ffebee;color:#c62828}
.gcb-delete:hover{background:#ffcdd2}

.group-editor-back{background:none;border:none;font-size:.85rem;cursor:pointer;color:#007bff;font-weight:600;margin-bottom:10px;padding:0}
.group-editor-back:hover{text-decoration:underline}
.group-editor-title{font-size:.95rem;font-weight:700;color:#1a1a2e;margin-bottom:12px}
.group-members{margin-bottom:16px}
.group-members h4{font-size:.8rem;color:#333;margin-bottom:6px}
.group-members-empty{font-size:.78rem;color:#999;font-style:italic}
.group-member-chips{display:flex;flex-wrap:wrap;gap:4px}
.group-member-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#e8eaf6;border-radius:20px;font-size:.75rem}
.group-member-chip .area-tag{font-size:.55rem;padding:0 3px}
.group-member-remove{background:none;border:none;font-size:.9rem;cursor:pointer;color:#999;padding:0 2px;line-height:1}
.group-member-remove:hover{color:#c62828}

.group-tech-search{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;font-size:.8rem;outline:0;margin-bottom:8px}
.group-tech-search:focus{border-color:#007bff}
.group-tech-list{max-height:250px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:8px}
.group-tech-row{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #eee;font-size:.78rem}
.group-tech-row:last-child{border-bottom:none}
.group-tech-row:hover{background:#f8f9fb}
.group-tech-row-name{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:hidden}
.group-tech-row .area-tag{font-size:.55rem;padding:1px 4px}
.group-tech-add{background:#e8f5e9;color:#2e7d32;border:none;padding:3px 10px;border-radius:4px;font-size:.7rem;font-weight:600;cursor:pointer;transition:background .15s;flex-shrink:0}
.group-tech-add:hover{background:#c8e6c9}
.group-tech-added{background:#e0e0e0;color:#999;cursor:default}
.group-tech-added:hover{background:#e0e0e0}

/* ═══ Mobile Responsive ═══ */
@media (max-width: 768px) {
  /* Header - compact two-row layout */
  .app-header{flex-wrap:wrap;height:auto;padding:4px 8px;gap:4px;justify-content:center}
  .header-brand{display:none}
  .header-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:center}
  .header-actions{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}
  .nav-btn{padding:8px 10px;font-size:.78rem;min-height:36px;display:flex;align-items:center;justify-content:center}
  .nav-btn.month-label{min-width:auto;font-size:.75rem;padding:8px 6px}
  .view-toggle{margin-left:2px}
  .view-toggle .btn{min-height:36px;padding:8px 12px;font-size:.72rem}
  .btn-group .btn{min-height:34px;padding:6px 10px;font-size:.7rem}
  .search-input{width:110px;min-height:34px;font-size:.75rem}
  .help-btn{width:34px;height:34px}
  /* Gantt */
  .gantt-label{width:100px;min-width:100px;padding:3px 4px;font-size:.7rem}
  .gantt-label .area-tag{font-size:.5rem;padding:1px 3px;margin-left:2px}
  .gantt-row.group-header .gantt-label{font-size:.65rem}
  .gantt-row.date-header .gantt-label{font-size:.62rem}
  .day-header-cell{font-size:.55rem}
  .day-header-cell .day-num{font-size:.68rem}
  .day-header-cell .day-name{font-size:.5rem}
  .bar{font-size:.55rem;padding:0 2px}
  /* Legend */
  .legend-bar{gap:8px;padding:3px 10px}
  .legend-item{font-size:.6rem;gap:3px}
  .dot{width:7px;height:7px}
  /* Leave panel */
  .leave-form{flex-direction:column;align-items:stretch}
  .form-group select{min-width:100%}
  .leave-body{padding:8px 10px}
  .lv-name-col{width:90px;min-width:90px;max-width:90px;font-size:.65rem;padding:3px 4px}
  .lv-table{font-size:.65rem}
  .lv-cell{height:26px}
  .lv-bar{height:18px}
  .lv-bar-text{font-size:.5rem}
  .lv-badge,.lv-override-badge{width:16px;height:16px;font-size:.5rem}
  .lv-day-header .lv-dm{display:none}
  .lv-day-header .lv-dd{font-size:.68rem}
  .ai-rec{padding:8px 10px}
  .ai-rec-body{font-size:.72rem}
  .modal{max-width:95vw;margin:10px}
  .modal-body{padding:14px}
  .modal-header{padding:12px 14px}
  .modal-header h2{font-size:.9rem}
  .fp-table td,.fp-table th{padding:4px 6px;font-size:.68rem}
  .fp-replacing{max-width:100px}
  .final-plan-header{padding:6px 10px;font-size:.75rem}
  /* Focus bar */
  .focus-bar{padding:4px 10px;flex-wrap:wrap;gap:4px}
  .focus-info{font-size:.72rem}
  .focus-btn{padding:6px 10px;font-size:.68rem;min-height:32px}
  .tech-check{width:16px;height:16px}
  /* Groups */
  .groups-btn{font-size:.68rem;padding:8px 8px;min-height:36px}
  .group-filter-bar{padding:4px 10px;flex-wrap:wrap;gap:4px}
  .group-card{padding:8px 10px}
  .group-card-actions button{padding:6px 8px}
  .group-tech-list{max-height:200px}
}

@media (max-width: 480px) {
  .app-header{padding:4px 6px;gap:3px}
  .nav-btn{padding:7px 6px;font-size:.7rem;min-height:34px}
  .nav-btn.month-label{font-size:.68rem;padding:7px 4px}
  .view-toggle .btn{padding:7px 8px;font-size:.65rem;min-height:34px}
  .btn-group .btn{padding:6px 7px;font-size:.62rem;min-height:32px}
  .search-input{width:80px;font-size:.68rem;min-height:32px}
  .help-btn{width:32px;height:32px;font-size:.82rem}
  .gantt-label{width:70px;min-width:70px;font-size:.62rem;padding:2px 3px}
  .gantt-label .area-tag{display:none}
  .gantt-row.group-header .gantt-label{font-size:.58rem}
  .gantt-row.date-header .gantt-label{font-size:.55rem}
  .day-header-cell .day-name{display:none}
  .day-header-cell .day-num{font-size:.6rem}
  .leave-header h3{font-size:.75rem}
  .lv-name-col{width:65px;min-width:65px;max-width:65px;font-size:.58rem;padding:2px 3px}
  .lv-cell{height:22px;padding:1px}
  .lv-bar{height:16px}
  .lv-badge,.lv-override-badge{width:14px;height:14px;font-size:.45rem}
  .lv-header{padding:8px 10px}
  .lv-title{font-size:.82rem}
  .lv-period{font-size:.7rem}
  .legend-bar{display:none}
  .tech-check{width:14px;height:14px;margin-right:2px}
}

/* ═══ Print ═══ */
@media print{
  .app-header,.legend-bar,.leave-panel,.tooltip,.modal-overlay,.focus-bar,.group-filter-bar{display:none !important}
  .main-content{overflow:visible;height:auto}
  .gantt-label{position:static}
  .gantt-row.date-header,.gantt-row.group-header{position:static}
}