/* ── Global ── */
body { background: #F0F6FA; }

/* ── Cards & Inputs ── */
.card { background: #fff; border-radius: 16px; border: 1px solid #F0F0F0; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.inp { width:100%; padding:9px 12px; border:1.5px solid #E5E7EB; border-radius:10px; font-size:14px; font-family:inherit; outline:none; transition:border-color .15s,box-shadow .15s; background:#fff; }
.inp:focus { border-color:#00AFEC; box-shadow:0 0 0 3px rgba(0,175,236,.12); }
.inp.ai-filled { border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.08); }

/* ── Buttons ── */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px; background:#00AFEC; color:#fff; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:background .15s; font-family:inherit; }
.btn-primary:hover:not(:disabled) { background:#008DC0; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; border:1.5px solid #E5E7EB; color:#4B5563; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; background:#fff; transition:border-color .15s; font-family:inherit; }
.btn-ghost:hover { border-color:#D1D5DB; }
.btn-danger { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; border:1.5px solid #FCA5A5; color:#DC2626; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; background:#FFF5F5; transition:all .15s; font-family:inherit; }
.btn-danger:hover { background:#FEE2E2; }
.form-label { display:block; font-size:12px; font-weight:600; color:#6B7280; margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }

/* ── Sidebar ── */
#sidebar { width:220px; background:linear-gradient(180deg,#005780 0%,#0099CC 100%); flex-shrink:0; display:flex; flex-direction:column; min-height:100vh; position:fixed; left:0; top:0; bottom:0; z-index:40; transition:width .2s ease; overflow:hidden; }
#sidebar.collapsed { width:56px; }
#main { margin-left:220px; min-height:100vh; transition:margin-left .2s ease; min-width:0; overflow-x:hidden; }
#main.sidebar-collapsed { margin-left:56px; }
.nav-link { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:14px; font-weight:500; color:rgba(255,255,255,.75); text-decoration:none; transition:background .15s,color .15s; cursor:pointer; border:none; background:transparent; width:100%; text-align:left; font-family:inherit; white-space:nowrap; }
.nav-link:hover { background:rgba(255,255,255,.15); color:#fff; }
.nav-link.active { background:rgba(255,255,255,.2); color:#fff; }
.nav-section { font-size:10px; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.4); text-transform:uppercase; padding:12px 12px 4px; white-space:nowrap; overflow:hidden; }
#sidebar.collapsed .nav-section { opacity:0; height:0; padding:0; margin:0; }
#sidebar.collapsed .nav-link span.nav-label { display:none; }
#sidebar.collapsed .nav-link { justify-content:center; padding:9px; }
#sidebar.collapsed .sidebar-header-text { display:none; }
#sidebar.collapsed .user-card-text { display:none; }
#sidebar.collapsed #user-card .bg-white\/10 { padding: 8px; display:flex; justify-content:center; }
.sidebar-toggle-btn { cursor:pointer; background:rgba(255,255,255,.15); border:none; color:rgba(255,255,255,.9); border-radius:8px; padding:6px 8px; transition:background .15s; font-size:16px; }
.sidebar-toggle-btn:hover { background:rgba(255,255,255,.25); }

/* ── Table ── */
.dt { width:100%; border-collapse:collapse; }
.dt th { background:#F9FAFB; font-weight:600; font-size:11px; color:#6B7280; text-transform:uppercase; letter-spacing:.06em; padding:10px 14px; border-bottom:1px solid #E5E7EB; text-align:left; white-space:nowrap; }
.dt td { padding:11px 14px; border-bottom:1px solid #F3F4F6; font-size:14px; vertical-align:middle; }
.dt tbody tr:hover td { background:#FAFAFA; }
.dt tbody tr { cursor:pointer; }

/* ── Chips ── */
.chip-btn { padding:5px 14px; border-radius:999px; font-size:12px; font-weight:500; border:1.5px solid #E5E7EB; background:#fff; color:#374151; cursor:pointer; transition:all .15s; white-space:nowrap; font-family:inherit; }
.chip-btn.active { border-color:#00AFEC; background:#00AFEC; color:#fff; }

/* ── Toast ── */
#toasts { position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { padding:10px 16px; border-radius:10px; font-size:13px; font-weight:500; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15); animation:slideup .2s ease; max-width:320px; }
@keyframes slideup { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── Modal ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-thumb { background:#D1D5DB; border-radius:3px; }

/* ── Step wizard ── */
.step-circle { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; border:2px solid; flex-shrink:0; }
.step-circle.done { background:#00AFEC; border-color:#00AFEC; color:#fff; }
.step-circle.current { background:#fff; border-color:#00AFEC; color:#00AFEC; }
.step-circle.future { background:#fff; border-color:#D1D5DB; color:#9CA3AF; }
.step-line { flex:1; height:2px; background:#E5E7EB; }
.step-line.done { background:#00AFEC; }

/* ── Type cards ── */
.type-card { border:2px solid #E5E7EB; border-radius:16px; padding:28px 20px; text-align:center; cursor:pointer; transition:all .18s; background:#fff; }
.type-card:hover { border-color:#00AFEC; }
.type-card.selected { border-color:#00AFEC; background:#E6F5FB; }

/* ── Drop zone ── */
.drop-zone { border:2px dashed #D1D5DB; border-radius:14px; padding:36px; text-align:center; cursor:pointer; transition:all .15s; }
.drop-zone.dragging { border-color:#00AFEC; background:#E6F5FB; }

/* ── Accordion ── */
.accordion-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer; user-select:none; }
.accordion-header:hover { background:#FAFAFA; }
.accordion-body { overflow:hidden; transition:max-height .22s ease; }

/* ── Inline edit ── */
.editable-cell { position:relative; }
.badge-edit-wrap { display:inline-block; }
.editable-cell .pencil-hint { display:none; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:11px; color:#9CA3AF; }
.editable-cell:hover .pencil-hint { display:block; }

/* ── Work track drag scroll ── */
#wt-scroll { overflow-x:auto; cursor:grab; user-select:none; }
#wt-scroll:active { cursor:grabbing; }
#wt-scroll::-webkit-scrollbar { height:5px; }

/* ── AI badge ── */
.ai-badge { display:inline-block; font-size:10px; font-weight:600; background:#DCFCE7; color:#16a34a; border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:middle; }

/* ── Spinner ── */
@keyframes spin { to { transform:rotate(360deg); } }
.spinner { width:18px; height:18px; border:2.5px solid #E5E7EB; border-top-color:#00AFEC; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }