/* BUTTONS */
.btn{padding:.55rem 1.1rem;border-radius:8px;font-weight:600;font-size:.82rem;cursor:pointer;transition:all .2s;border:none;font-family:inherit}
.btn-r{background:var(--r);color:var(--w)}.btn-r:hover{background:var(--rl)}
.btn-o{background:transparent;border:1px solid var(--b);color:var(--tl)}.btn-o:hover{border-color:var(--bb);background:rgba(255,255,255,.03)}
.btn-g{background:var(--green);color:var(--w)}.btn-g:hover{opacity:.9}
.btn-sm{padding:.4rem .8rem;font-size:.75rem}
.btn-danger{background:transparent;border:1px solid var(--rl);color:var(--rl)}.btn-danger:hover{background:var(--rl);color:var(--w)}

/* CARDS & STATS */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat{background:var(--bg2);border:1px solid var(--b);border-radius:10px;padding:1.2rem}
.stat .num{font-size:2rem;font-weight:800;color:var(--w);line-height:1}
.stat .label{font-size:.78rem;color:var(--t);margin-top:.3rem}
.stat.red .num{color:var(--r)}.stat.green .num{color:var(--green)}.stat.yellow .num{color:var(--yellow)}.stat.blue .num{color:var(--blue)}

/* TABLES */
.tbl-wrap{background:var(--bg2);border:1px solid var(--b);border-radius:10px;overflow:hidden}
table{width:100%;border-collapse:collapse}
th,td{padding:.7rem .9rem;text-align:left;font-size:.82rem;border-bottom:1px solid var(--b)}
th{color:var(--r);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;background:rgba(255,255,255,.02)}
td{color:var(--tl)}
tr:hover td{background:rgba(255,255,255,.015)}
.badge-status{display:inline-block;padding:.15rem .55rem;border-radius:50px;font-size:.7rem;font-weight:600}
.badge-active{background:rgba(39,174,96,.15);color:var(--green)}
.badge-pending{background:rgba(243,156,18,.15);color:var(--yellow)}
.badge-new{background:rgba(41,128,185,.15);color:var(--blue)}
.badge-graduated{background:rgba(192,57,43,.15);color:var(--r)}
.badge-dismissed{background:rgba(255,255,255,.05);color:#666}
.badge-securing{background:rgba(243,156,18,.15);color:var(--yellow)}
.badge-planned{background:rgba(255,255,255,.05);color:#888}

/* FORMS / MODALS */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal{background:var(--bg2);border:1px solid var(--b);border-radius:12px;padding:1.5rem;width:100%;max-width:550px;max-height:90vh;overflow-y:auto}
.modal h2{color:var(--w);font-size:1.15rem;margin-bottom:1rem}
.modal .fg{margin-bottom:.9rem}
.modal .fg label{display:block;color:var(--tl);font-weight:600;margin-bottom:.25rem;font-size:.8rem}
.modal .fg input,.modal .fg select,.modal .fg textarea{width:100%;padding:.6rem .8rem;background:var(--bg);border:1px solid var(--b);border-radius:8px;color:var(--w);font-family:inherit;font-size:.85rem}
.modal .fg input:focus,.modal .fg select:focus,.modal .fg textarea:focus{outline:none;border-color:var(--r)}
.modal .fg textarea{resize:vertical;min-height:80px}
.modal .fg select option{background:#111}
.modal .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.modal .actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}

/* DETAIL VIEW */
.detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}
.detail-header h1{color:var(--w);font-size:1.4rem}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.detail-card{background:var(--bg2);border:1px solid var(--b);border-radius:10px;padding:1.2rem}
.detail-card h3{color:var(--w);font-size:.95rem;margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid var(--b)}
.detail-card .field{margin-bottom:.6rem}
.detail-card .field .lbl{font-size:.72rem;color:var(--t);text-transform:uppercase;letter-spacing:.5px}
.detail-card .field .val{color:var(--w);font-size:.88rem}
.timeline{margin-top:1rem}
.timeline-item{display:flex;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--b)}
.timeline-item:last-child{border:none}
.timeline-item .dot{width:8px;height:8px;border-radius:50%;background:var(--r);margin-top:.4rem;flex-shrink:0}
.timeline-item .time{font-size:.7rem;color:var(--t)}
.timeline-item .text{font-size:.82rem;color:var(--tl)}
.note-input{display:flex;gap:.5rem;margin-top:.8rem}
.note-input input{flex:1;padding:.55rem .8rem;background:var(--bg);border:1px solid var(--b);border-radius:8px;color:var(--w);font-family:inherit;font-size:.85rem}
.note-input input:focus{outline:none;border-color:var(--r)}

/* PHASE BAR */
.phase-bar{display:flex;gap:2px;margin:.5rem 0}
.phase-bar .seg{height:6px;border-radius:3px;flex:1;background:rgba(255,255,255,.08)}
.phase-bar .seg.done{background:var(--green)}
.phase-bar .seg.current{background:var(--r)}

/* RESPONSIVE */
@media(max-width:768px){
.sidebar{width:60px}.sidebar .logo h2,.sidebar .logo p,.sidebar nav a span,.sidebar .user-info{display:none}
.sidebar nav a{justify-content:center;padding:.8rem}.main{margin-left:60px;padding:1rem}
.stats{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr}
}