:root{
  --color-white:#fff;
  --color-cream-50:#fcfcf9;
  --color-cream-100:#fffffd;
  --color-slate-500:#626c71;
  --color-slate-900:#13343b;
  --color-border:rgba(94,82,64,.2);
  --color-primary:#21808d;
  --color-primary-weak:#e8f1f2;
  --color-green:#10B981;
  --color-amber:#F59E0B;
  --color-purple:#7c3aed;

  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --radius-10:10px; --radius-12:12px; --radius-16:16px; --radius-18:18px; --radius-20:20px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --shadow-md:0 6px 18px rgba(0,0,0,.08);

  --belt-speed: 60s;
}

html,body{margin:0;padding:0;font-family:var(--font);color:var(--color-slate-900);background:var(--color-cream-50);}
.screen{display:none;width:100%;height:100vh;overflow:auto}
.screen.active{display:flex}

/* Setup */
#setupScreen{overflow:auto;background:var(--color-cream-50);justify-content:center;align-items:stretch}
.setup-container{width:100%;height:100vh;background:var(--color-cream-100);display:flex;flex-direction:column}
.setup-header{background:linear-gradient(135deg,#4F46E5,#8B5CF6);color:#fff;padding:24px 32px;text-align:center;position:relative}
.setup-topbar{position:absolute;right:16px;top:16px;display:flex;gap:8px}
.setup-title{font-size:24px;margin:8px 0}
.progress-bar{height:4px;background:rgba(255,255,255,.25);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:#fff;width:0;transition:width .25s}
.setup-content{flex:1;max-width:800px;margin:0 auto;padding:24px 32px;display:flex;flex-direction:column;overflow:visible;min-height:0}
.step{display:none}.step.active{display:flex;flex-direction:column;animation:fade .2s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step-title{text-align:center;margin-bottom:16px;font-weight:700}
.auth-hint{margin-top:8px;text-align:center;font-size:12px;opacity:.9}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.option-card{background:var(--color-cream-100);border:2px solid var(--color-border);border-radius:var(--radius-16);padding:20px;text-align:center;cursor:pointer;transition:.2s}
.option-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:#4F46E5}
.option-card.selected{background:rgba(79,70,229,.06);border-color:#4F46E5}
.form-group{margin-bottom:12px}
.form-label{display:block;margin-bottom:6px;font-weight:600}
.tag-input-container{display:flex;flex-wrap:wrap;gap:8px;padding:8px;border:2px solid var(--color-border);border-radius:var(--radius-12)}
.tag{background:#4F46E5;color:#fff;padding:2px 8px;border-radius:10px;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.tag-remove{border:none;background:rgba(255,255,255,.3);color:#fff;width:16px;height:16px;border-radius:999px;cursor:pointer}
.tag-input{border:none;outline:none;min-width:120px;flex:1;padding:8px}
.button-group{position:sticky;bottom:0;background:var(--color-cream-100);padding-top:12px;margin-top:auto;border-top:1px solid var(--color-border);box-shadow:0 -6px 10px rgba(0,0,0,.04);display:flex;justify-content:space-between}
.btn{border:none;border-radius:10px;padding:8px 16px;cursor:pointer;font-weight:600}
.btn-primary{background:#4F46E5;color:#fff}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.btn-secondary{background:#e5e7eb;color:#111827}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn--primary{background:var(--color-primary);color:#fff}
.btn-auth{background:#fff;color:#111827}

/* Avatar */
#avatarScreen{background:linear-gradient(135deg,#4F46E5,#8B5CF6);justify-content:center;align-items:flex-start;color:#fff;overflow:auto;padding:20px 0}
.avatar-creation-container{width:100%;max-width:520px;padding:20px;overflow:visible;min-height:calc(100vh - 40px);display:flex;align-items:flex-start;justify-content:center;box-sizing:border-box}
.avatar-card{background:rgba(255,255,255,.96);color:var(--color-slate-900);border-radius:18px;padding:24px 24px 28px;box-shadow:0 20px 50px rgba(0,0,0,.12);position:relative;width:100%;max-height:none;overflow:visible}
.back-link{position:absolute;top:12px;left:12px;background:none;border:none;color:#6b7280;cursor:pointer}
.avatar-title{text-align:center;color:#5839e5;margin-bottom:8px}
.form-control{width:100%;padding:10px 12px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-cream-100)}
.form-control--sm{padding:6px 10px;font-size:12px}
.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0}
.avatar-option{width:60px;height:60px;border-radius:999px;border:3px solid transparent;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;background:#eef2ff;transition:.2s}
.avatar-option:hover{transform:scale(1.06);border-color:#4F46E5}
.avatar-option.selected{border-color:#4F46E5;background:rgba(79,70,229,.08)}
.avatar-actions{display:flex;gap:12px;margin-top:16px}
.quest-button{flex:1;position:relative;overflow:hidden}
.button-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .5s}
.quest-button:hover .button-shine{left:100%}
.avatar-auth-block{margin:8px 0 4px 0; padding:10px 12px; border:1px dashed #d7d9e2; border-radius:10px; background:#fafbff}

/* Office */
#platformScreen{background:#F8FAFC;flex-direction:column}
.platform-container{height:100vh;display:flex;flex-direction:column}
.top-nav{background:#fff;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
.user-info{display:flex;align-items:center;gap:12px}
.user-avatar-nav{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:2px solid #4F46E5}
.user-details{display:flex;flex-direction:column}
.user-role{font-size:12px;color:#6b7280}
.stat-item{text-align:center}.stat-value{font-weight:800;color:#4F46E5}
.office-layout{flex:1;position:relative;overflow:auto}
.office-map{width:100%;height:100%;position:relative;background:linear-gradient(45deg,#F8FAFC 25%,transparent 25%,transparent 75%,#F8FAFC 75%,#F8FAFC),linear-gradient(45deg,#F8FAFC 25%,transparent 25%,transparent 75%,#F8FAFC 75%,#F8FAFC);background-size:20px 20px;background-position:0 0,10px 10px}
.user-character{position:absolute;width:60px;height:80px;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:50}
.character-avatar{width:50px;height:50px;border-radius:999px;background:#fff;border:3px solid #4F46E5;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:var(--shadow-sm)}
.character-name{margin-top:4px;font-size:11px;background:#fff;padding:2px 6px;border-radius:6px;box-shadow:var(--shadow-sm)}
.team-room{position:absolute;width:200px;height:150px;border-radius:16px;border:3px solid;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s;box-shadow:0 8px 25px rgba(0,0,0,.06)}
.team-room:hover{transform:scale(1.02)}
.room-header{font-weight:800;margin-bottom:6px}
.room-members{display:flex;gap:4px;margin-bottom:6px}
.room-member{width:28px;height:28px;border-radius:999px;background:#fde68a;display:flex;align-items:center;justify-content:center;font-size:14px}
.room-enter{font-size:12px;color:#6b7280;background:rgba(255,255,255,.9);padding:4px 8px;border-radius:8px;opacity:0;transition:opacity .2s}
.side-panel{position:absolute;top:20px;right:20px;width:260px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.side-section{background:#fff;border:1px solid var(--color-border);border-radius:16px;padding:12px;box-shadow:var(--shadow-sm)}
.section-title{font-weight:800;font-size:14px;margin-bottom:8px}
.sidebar-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.team-item{padding:8px 10px;border-radius:10px;background:#f3f4f6;cursor:pointer}
.team-item:hover{background:#e5e7eb}
.employee-item{display:flex;gap:10px;align-items:center;padding:8px;border-radius:12px;border:1px solid transparent;cursor:pointer}
.employee-item:hover{background:#f9fafb;border-color:var(--color-border)}
.emp-avatar{width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#eef2ff;font-size:16px}
.emp-info{display:flex;flex-direction:column}
.emp-name{font-weight:700;font-size:13px}
.emp-meta{font-size:12px;color:#6b7280}
.lead-star{font-size:12px}

/* floating buttons in office */
#createNewAvatarBtn{position:absolute;bottom:20px;right:20px;z-index:101}
.btn-employee-login{position:absolute;bottom:20px;right:200px;z-index:101}

/* Team */
#teamScreen{background:#F8FAFC;flex-direction:column;overflow:auto}
.team-container{height:100vh;display:flex;flex-direction:column;min-height:100vh;overflow:visible}
.team-header{background:#fff;padding:16px 20px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:20px;box-shadow:var(--shadow-sm)}
.back-button{background:#e5e7eb;border:none;padding:8px 12px;border-radius:10px;cursor:pointer}
.team-title{font-size:28px;margin-bottom:6px}
.team-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.add-task-header-btn{background:#4F46E5;color:#fff;border:none;padding:8px 12px;border-radius:10px;cursor:pointer}
.manage-events-btn{background:#e5e7eb;color:#111827;border:none;padding:8px 12px;border-radius:10px;cursor:pointer}

/* Backlog belt */
.backlog-belt{padding:14px 20px 4px}
.belt-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.belt-left{display:flex;align-items:baseline;gap:10px}
.belt-title{font-weight:800;font-size:18px}
.belt-hint{font-size:12px;color:#6b7280}
.belt-right{display:flex;align-items:center;gap:8px}
.belt-count{background:#0f172a;color:#fff;border-radius:999px;min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.belt-viewport{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.92));border:1px solid #e8e8ec;border-radius:20px;overflow:hidden}
.belt-track{display:flex;gap:12px;align-items:stretch;padding:12px;animation: belt-scroll var(--belt-speed) linear infinite;white-space:nowrap}
.belt-viewport[data-paused="true"] .belt-track{animation:none;flex-wrap:wrap;overflow-y:auto;max-height:300px}
@keyframes belt-scroll{ from{ transform:translateX(100%) } to{ transform:translateX(-50%) } }
.belt-viewport.drag-over{outline:2px dashed #4F46E5; outline-offset:-6px; border-radius:16px;}

/* Board (other columns) */
.kanban-board{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:12px 20px 20px;overflow:auto;min-height:0}
.kanban-column{
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92));
  border:1px solid #e8e8ec;border-radius:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column
}
.column-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eef0f3;border-radius:20px 20px 0 0;background:linear-gradient(180deg, rgba(248,249,255,0.55), rgba(255,255,255,0.25))}
.column-left{display:flex;flex-direction:column}
.column-title{font-weight:800;letter-spacing:.2px}
.column-count{background:#0f172a;color:#fff;border-radius:999px;min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.column-right{display:flex;align-items:center;gap:8px}
.add-task-column-btn{background:#4F46E5;color:#fff;border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;font-weight:bold}
.add-task-column-btn:hover{background:#3730a3}
.column-content{flex:1;padding:14px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;max-height:calc(100vh - 300px)}
.column-content.drag-over{outline:2px dashed #4F46E5; outline-offset:-6px; border-radius:16px; background:rgba(79,70,229,.04)}

/* Task card */
.task-card{
  background: linear-gradient(180deg, #ffffff, #fbfbfe);
  border:1px solid #e7e9f1;border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset, var(--shadow-sm);
  padding:14px 14px 12px;cursor:grab;position:relative;min-width:200px
}
.task-mini{padding:10px 12px;min-width:220px}
.task-card.dragging{transform:rotate(2deg);box-shadow:0 10px 22px rgba(0,0,0,.15)}
.task-title-lg{font-weight:800;font-size:16px;margin-bottom:8px}
.task-status-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.task-status-text{font-size:12px;color:#6b7280}
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid transparent;background:#f1f5f9;color:#0f172a}
.pill::before{content:'';width:6px;height:6px;border-radius:999px;background:#64748b}
.pill--warning{background:#fff7ed;color:#92400e;border-color:#fde68a}
.pill--warning::before{background:#f59e0b}
.pill--success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.pill--success::before{background:#10b981}
.task-description{font-size:12px;color:#6b7280;margin-bottom:10px}
.task-footer{display:flex;justify-content:space-between;align-items:center}
.task-points{font-weight:800;font-size:12px;background:var(--color-primary-weak);color:#0b3d44;padding:4px 8px;border-radius:999px}
.task-assignee{width:26px;height:26px;border-radius:999px;background:#eef2ff;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;font-size:14px}

/* Approve button on waiting */
.approve-button{position:absolute;right:10px;bottom:10px;background:#10B981;color:#fff;border:none;border-radius:10px;padding:6px 10px;cursor:pointer;font-size:12px;box-shadow:var(--shadow-sm)}
.approve-button:hover{filter:brightness(.95)}

/* Team members (top header in team screen) */
.team-members{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.team-member{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid #edf0f5;padding:6px 10px;border-radius:12px;box-shadow:var(--shadow-sm)}
.member-avatar{width:28px;height:28px;border-radius:999px;background:#eef2ff;display:flex;align-items:center;justify-content:center}
.member-info{display:flex;flex-direction:column}
.member-name{font-weight:700;font-size:13px}
.member-role{font-size:12px;color:#6b7280}

/* ===== Modals ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:2000;animation:modalFade .12s;padding:20px;box-sizing:border-box}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
.modal-content{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.18);width:min(92vw,560px);max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden;margin:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eef0f3;background:linear-gradient(180deg, rgba(248,249,255,0.55), rgba(255,255,255,0.25));flex-shrink:0}
.modal-header h3{margin:0;font-size:18px}
.modal-close{border:none;background:#e5e7eb;border-radius:10px;padding:6px 10px;cursor:pointer}
.modal-content>div{padding:14px 16px;overflow-y:auto;flex:1;max-height:calc(100vh - 120px)}
.modal-form{overflow-y:auto;flex:1;max-height:calc(100vh - 140px)}
.modal-form .form-group{margin-bottom:12px}
.modal-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;flex-shrink:0}
.btn-danger{background:#EF4444;color:#fff;border:none;border-radius:10px;padding:8px 12px;cursor:pointer}
.assign-list{display:flex;flex-direction:column;gap:8px}
.assign-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #edf0f5;border-radius:10px}
.events-list{display:flex;flex-direction:column;gap:6px}
.small-hint{margin-top:6px;font-size:12px;color:#6b7280}

/* Celebration overlay */
.celebration-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;z-index:3000;animation:modalFade .12s}
.celebration-content{background:#fff;border-radius:18px;padding:18px 22px;box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center}
.celebration-emoji{font-size:40px}
.celebration-text{font-weight:800;margin-top:6px}
.celebration-points{margin-top:4px;font-weight:800;color:#10B981}

/* Utilities / states */
.empty{color:#9aa1a6;font-size:13px}
.logo{font-weight:900;letter-spacing:.3px}
.user-name{font-weight:700}
.stat-label{display:block;font-size:11px;color:#6b7280}

/* Scrollbars (subtle) */
.sidebar-list::-webkit-scrollbar,
.column-content::-webkit-scrollbar,
.modal-content>div::-webkit-scrollbar,
.belt-track::-webkit-scrollbar{width:8px;height:8px}
.sidebar-list::-webkit-scrollbar-thumb,
.column-content::-webkit-scrollbar-thumb,
.modal-content>div::-webkit-scrollbar-thumb,
.belt-track::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}

/* ====== Auth Blocks (new login/register UIs) ====== */
.auth-inline{display:flex;gap:8px;justify-content:center;margin-top:10px}
.auth-inline .btn{padding:6px 10px}

/* ====== Toasts ====== */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-md);z-index:5000;opacity:0;animation:toastIn .2s forwards}
@keyframes toastIn{to{opacity:1}}
.toast.success{background:#16a34a}
.toast.warn{background:#f59e0b}
.toast.error{background:#dc2626}

/* ====== Login Panels on Office ====== */
.login-panel{position:absolute;top:20px;left:20px;background:#fff;border:1px solid var(--color-border);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow-sm);z-index:150}
.login-panel h4{margin:0 0 8px 0}
.login-row{display:flex;gap:6px;align-items:center;margin-top:6px}
.login-row input{padding:6px 8px;border:1px solid #e5e7eb;border-radius:8px}

/* ====== Belt Pause Button ====== */
.belt-pause{background:#e5e7eb;border:none;border-radius:999px;padding:6px 10px;cursor:pointer}
.belt-pause.active{background:#0f172a;color:#fff}

/* ====== Drag Ghost ====== */
.drag-ghost{opacity:.85;transform:rotate(3deg);}

/* ====== Event Badges ====== */
.event-badge{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px;font-size:12px}

/* ====== Board Review Column (new) ====== */
.board-review .column-title::after{content:" (Lead approval)";font-weight:400;color:#6b7280;font-size:12px}

/* ====== Disabled state ====== */
.disabled{opacity:.6;pointer-events:none}

/* ====== Helper texts ====== */
.help{font-size:12px;color:#6b7280}

/* ====== Overflow fixes (mobile) ====== */
@media (max-width: 920px){
  .option-grid{grid-template-columns:1fr}
  .side-panel{position:static;width:auto;max-height:none;margin:12px}
  .kanban-board{grid-template-columns:1fr;gap:12px}
  .belt-viewport[data-paused="true"] .belt-track{max-height:none}
}

/* ====== Team Room States ====== */
.team-room[data-active="true"]{border-color:#4F46E5}
.team-room[data-active="true"] .room-enter{opacity:1}

/* ====== Points Pop ====== */
.points-pop{position:absolute;right:8px;top:-6px;background:#10B981;color:#fff;padding:2px 6px;border-radius:999px;font-size:11px;font-weight:800;box-shadow:var(--shadow-sm);animation:popFade 1.2s ease-out forwards}
@keyframes popFade{0%{opacity:0;transform:translateY(6px)}15%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}

/* ====== Room Grid (if more than 5 teams) ====== */
.rooms-grid{position:absolute;inset:0;padding:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;overflow:auto}
.rooms-grid .team-room{position:static}

/* ====== Event Modal Small Items ====== */
.event-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid #edf0f5;border-radius:10px}
.event-item .label{font-weight:600}
.event-item .when{font-size:12px;color:#6b7280}

/* ====== Search in side panel ====== */
.side-search{display:flex;gap:6px;margin-bottom:8px}
.side-search input{flex:1;padding:8px;border:1px solid #e5e7eb;border-radius:10px}

/* ====== Counters ====== */
.counter{display:inline-flex;align-items:center;gap:6px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px;font-size:12px}
.counter .dot{width:6px;height:6px;border-radius:999px;background:#16a34a}
.counter.warn .dot{background:#f59e0b}
.counter.danger .dot{background:#dc2626}

/* ====== Sticky headers for lists ====== */
.sidebar-list .subheader{position:sticky;top:0;background:#fff;border-bottom:1px solid #edf0f5;padding:6px 8px;font-weight:800}

/* ====== Tooltip (simple) ====== */
.tooltip{position:relative}
.tooltip .tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;font-size:12px;padding:6px 8px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;box-shadow:var(--shadow-sm)}
.tooltip:hover .tip{opacity:1}

/* ====== Mini badges on tasks ====== */
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.badge{font-size:10px;padding:2px 6px;border-radius:999px;background:#eef2ff;border:1px solid #e5e7eb}
.badge.urgent{background:#fff7ed;border-color:#fde68a;color:#92400e}
.badge.points{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}

/* ====== Auth Modal (employee login) ====== */
.auth-note{font-size:12px;color:#6b7280;margin-top:6px}

/* ====== Buttons palette ====== */
.btn-ghost{background:transparent;border:1px solid #e5e7eb}
.btn-ghost:hover{background:#f9fafb}
.btn-success{background:#16a34a;color:#fff}
.btn-success:hover{filter:brightness(.98)}
.btn-warning{background:#f59e0b;color:#111827}
.btn-warning:hover{filter:brightness(.98)}
.btn-danger{background:#dc2626;color:#fff}
.btn-danger:hover{filter:brightness(.98)}

/* ====== Inputs ====== */
.input{padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.input:focus{outline:none;border-color:#4F46E5;box-shadow:0 0 0 3px rgba(79,70,229,.15)}

/* ====== Labels ====== */
.label{font-weight:700;font-size:12px;color:#374151;margin-bottom:4px;display:block}

/* ====== Toggle ====== */
.toggle{position:relative;width:44px;height:24px;background:#e5e7eb;border-radius:999px;cursor:pointer}
.toggle::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:999px;background:#fff;transition:.15s}
.toggle[data-on="true"]{background:#4F46E5}
.toggle[data-on="true"]::after{left:23px}

/* ====== Footer buttons on team screen ====== */
.team-footer{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:10px 20px;border-top:1px solid #edf0f5;background:#fff}
.team-footer .hint{margin-right:auto;font-size:12px;color:#6b7280}

/* ====== Filter bar ====== */
.filter-bar{display:flex;gap:8px;align-items:center;padding:8px 20px;background:#fff;border-top:1px solid #edf0f5;border-bottom:1px solid #edf0f5}

/* ====== Mini modal (confirm) ====== */
.confirm{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);z-index:4000}
.confirm .box{background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 20px 60px rgba(0,0,0,.18);width:min(92vw,420px)}
.confirm .box .title{font-weight:800;margin-bottom:8px}
.confirm .box .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* ====== Search highlight ====== */
.highlight{background:#fef3c7}

/* ====== Mini tabs ====== */
.tabs{display:flex;gap:6px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:4px}
.tab{padding:6px 10px;border-radius:8px;cursor:pointer}
.tab.active{background:#fff;box-shadow:var(--shadow-sm);border:1px solid #e5e7eb}

/* ====== Header stat chips ====== */
.stat-chip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px;font-size:12px}

/* ====== Event calendar placeholder ====== */
.calendar{border:1px dashed #d1d5db;border-radius:12px;padding:12px;color:#6b7280;text-align:center}

/* ====== Print helpers ====== */
@media print{
  .top-nav,.side-panel,.team-footer,.filter-bar{display:none}
  .kanban-board{grid-template-columns:1fr 1fr}
  .task-card{break-inside:avoid}
}

/* ====== Focus visible ====== */
:focus-visible{outline:2px solid #4F46E5;outline-offset:2px}

/* ====== Small danger button (overrides) ====== */
.btn-danger {
  background: #dc2626;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.btn-danger:hover {
  background: #b91c1c;
}

/* ====== Enhanced Scrolling Support ====== */
/* Ensure long employee lists can scroll */
#sidebarEmployeeList {
  max-height: 400px;
  overflow-y: auto;
}

/* Task details modal specific scrolling */
.task-detail-section {
  margin-bottom: 16px;
}

/* Mobile responsive scrolling */
@media (max-height: 600px) {
  .modal-content {
    max-height: 95vh;
  }
  
  .modal-content > div {
    max-height: calc(95vh - 50px);
  }
  
  .avatar-creation-container {
    min-height: auto;
    padding: 16px;
  }
  
  .column-content {
    max-height: calc(100vh - 250px);
  }
}

/* Smooth scrolling for better UX */
html {
  scroll-behavior: smooth;
}

.modal-content > div,
.sidebar-list,
.column-content,
.belt-track {
  scroll-behavior: smooth;
}
/* ==== Password reset modals ==== */
.modal.hidden { display: none; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.5); z-index: 1000; }
.modal-card { width: min(520px, 92vw); background: #fff; color: #111; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); padding: 20px 22px; outline: none; }
.modal-desc { margin: 6px 0 14px; color: #555; }

.form-row { display: block; margin: 10px 0; }
.form-row input { width: 100%; }
.inline { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.btn-link { background: none; border: none; padding: 0; text-decoration: underline; cursor: pointer; font: inherit; }

.req-list { margin: 10px 0 0; padding-left: 18px; }
.req-list li { margin: 4px 0; }
.req-list li.ok { color: #1a7f37; font-weight: 600; }
.req-list li.bad { color: #b42318; }

.neutral-hint { margin-top: 8px; color: #666; font-size: 13px; }

/* Focus outlines for a11y (modal focus trapping per APG dialog guidance) */
button:focus, input:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
/* ===== Recovery dialogs should sit above any JS modal ===== */
#dialog-extra-verify,
#dialog-reset-pwd {
  position: fixed;    /* attach to viewport, not to any container */
  inset: 0;           /* top/right/bottom/left: 0 */
  z-index: 2000;      /* higher than your JS modals (which are ~1000–1500) */
}

#dialog-extra-verify .modal-card,
#dialog-reset-pwd .modal-card {
  position: relative;
  margin: 4rem auto;
  max-width: 720px;   /* keep your look & feel */
  z-index: 2001;      /* above their own overlay */
}

/* If you have a generic .modal overlay already, make sure it's lower */
.modal { z-index: 1000; } /* your JS-created buildModal() instances */
/* Make sure verification/reset dialogs are always above other modals */
#dialog-extra-verify,
#dialog-reset-pwd {
  position: fixed;
  inset: 0;
  z-index: 10000; /* higher than your sign-in modal */
}

/* tiny shake helper for a neutral error cue */
.modal-card.shake {
  animation: qb-shake 0.25s linear 1;
}
@keyframes qb-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* optional: subtle error text */
#ev-error { color: var(--color-text-secondary); }