/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-size: 14px; color: #e5e5ea; background: #1c1c1e; -webkit-font-smoothing: antialiased; }

/* ── Login ── */
.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; background: #1c1c1e; }
.login-card { background: #2c2c2e; border-radius: 18px; padding: 48px 40px; width: 380px; box-shadow: 0 4px 24px rgba(0,0,0,0.3); text-align: center; }
.login-logo { margin-bottom: 16px; }
.login-card h1 { font-size: 22px; font-weight: 600; margin-bottom: 28px; color: #e5e5ea; }
.form-group { margin-bottom: 14px; }
.form-group input { width: 100%; padding: 12px 16px; border: 1px solid #48484a; border-radius: 10px; font-size: 15px; background: #3a3a3c; color: #e5e5ea; outline: none; transition: border-color 0.2s; }
.form-group input:focus { border-color: #007AFF; background: #2c2c2e; }
.form-error { color: #ff453a; font-size: 13px; margin-bottom: 12px; }
.btn-primary { width: 100%; padding: 12px; border: none; border-radius: 10px; background: #007AFF; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn-primary:hover { background: #0066d6; }
.btn-primary:disabled { background: #48484a; cursor: not-allowed; }

/* ── App Layout ── */
.app-layout { display: flex; height: 100vh; overflow: hidden; }

/* ── Nav Rail ── */
.nav-rail { width: 68px; min-width: 68px; background: #2c2c2e; border-right: 1px solid #38383a; display: flex; flex-direction: column; align-items: center; padding: 12px 0; }
.nav-rail-top { margin-bottom: 8px; }
.nav-rail-tabs { flex: 1; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0 6px; }
.nav-rail-bottom { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0 6px; }
.nav-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: none; background: transparent; color: #8e8e93; cursor: pointer; border-radius: 10px; transition: all 0.15s; font-size: 10px; width: 100%; }
.nav-tab:hover { background: #3a3a3c; color: #e5e5ea; }
.nav-tab.active { background: #007AFF; color: #fff; }
.nav-tab.active svg { stroke: #fff; }

/* App Switcher */
.app-switcher-wrap { position: relative; }
.app-switcher-dropdown { display: none; position: absolute; top: 44px; left: 0; background: #2c2c2e; border: 1px solid #48484a; border-radius: 12px; padding: 8px; width: 180px; z-index: 100; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.app-switcher-wrap.open .app-switcher-dropdown { display: block; }
.app-switcher-title { font-size: 11px; color: #8e8e93; padding: 4px 8px 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.app-switcher-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #e5e5ea; font-size: 13px; }
.app-switcher-item:hover { background: #3a3a3c; }
.app-switcher-item.active { background: #007AFF; color: #fff; }
.app-switcher-icon { font-size: 16px; width: 24px; text-align: center; }

/* ── Main Content ── */
.main-content { flex: 1; overflow-y: auto; background: #1c1c1e; }

.view { display: none; height: 100%; overflow-y: auto; }
.view.active { display: flex; flex-direction: column; }

.view-header { padding: 20px 24px; border-bottom: 1px solid #38383a; display: flex; align-items: center; gap: 16px; background: #2c2c2e; flex-shrink: 0; }
.view-header h2 { font-size: 20px; font-weight: 700; color: #e5e5ea; }
.view-header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.select-input { padding: 8px 12px; border: 1px solid #48484a; border-radius: 8px; font-size: 13px; background: #3a3a3c; color: #e5e5ea; outline: none; }
.select-input:focus { border-color: #007AFF; }
.select-sm { padding: 6px 10px; font-size: 12px; }

.text-muted { color: #8e8e93; font-size: 13px; }
.empty-state { display: flex; align-items: center; justify-content: center; padding: 60px 20px; color: #8e8e93; font-size: 15px; }

/* ── Client List ── */
.client-list { flex: 1; overflow: hidden; padding: 0; }

/* ── Kanban Board ── */
.kanban-board { display: flex; gap: 8px; height: 100%; overflow-x: auto; padding: 12px; }
.kanban-col { min-width: 220px; max-width: 260px; flex-shrink: 0; display: flex; flex-direction: column; background: #2c2c2e; border-radius: 12px; border: 1px solid #38383a; overflow: hidden; }
.kanban-col-header { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #38383a; background: #2c2c2e; flex-shrink: 0; }
.kanban-col-title { font-size: 12px; font-weight: 700; color: #e5e5ea; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-col-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.kanban-card { background: #1c1c1e; border: 1px solid #38383a; border-radius: 8px; padding: 10px; cursor: pointer; transition: all 0.15s; }
.kanban-card:hover { border-color: #007AFF; background: #252528; }
.kanban-card-name { font-size: 13px; font-weight: 600; color: #e5e5ea; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-card-tss { font-size: 11px; color: #8e8e93; margin-bottom: 4px; }
.kanban-card-footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kanban-empty { color: #48484a; font-size: 12px; text-align: center; padding: 16px 0; }

/* Legacy client card styles (used in admin) */
.client-card { background: #2c2c2e; border: 1px solid #38383a; border-radius: 12px; padding: 16px; cursor: pointer; transition: all 0.15s; }
.client-card:hover { border-color: #007AFF; background: #333336; }
.client-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.client-card-name { font-size: 16px; font-weight: 600; color: #e5e5ea; }
.client-card-tss { font-size: 12px; color: #8e8e93; }
.client-card-progress { display: flex; align-items: center; gap: 12px; }
.client-card-stage { font-size: 13px; color: #aeaeb2; }
.progress-bar { flex: 1; height: 6px; background: #3a3a3c; border-radius: 3px; overflow: hidden; max-width: 200px; }
.progress-fill { height: 100%; background: #007AFF; border-radius: 3px; transition: width 0.3s; }
.client-card-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.badge-blue { background: rgba(0,122,255,0.2); color: #0a84ff; }
.badge-green { background: rgba(52,199,89,0.2); color: #30d158; }
.badge-orange { background: rgba(255,159,10,0.2); color: #ff9f0a; }
.badge-red { background: rgba(255,69,58,0.2); color: #ff453a; }
.badge-gray { background: rgba(142,142,147,0.2); color: #8e8e93; }

.timer-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.timer-running { background: rgba(52,199,89,0.15); color: #30d158; animation: pulse-glow 2s ease-in-out infinite; }
.timer-paused { background: rgba(255,159,10,0.15); color: #ff9f0a; }
.timer-over { background: rgba(255,69,58,0.15); color: #ff453a; }

@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── Client Detail ── */
.btn-icon { background: none; border: none; color: #007AFF; font-size: 20px; cursor: pointer; padding: 4px 8px; }
.btn-icon:hover { color: #0066d6; }

.detail-content { flex: 1; overflow-y: auto; padding: 20px 24px; }

/* Stage Stepper */
.stage-stepper { display: flex; flex-direction: column; gap: 0; }
.stage-step { display: flex; gap: 16px; position: relative; }
.stage-step:not(:last-child) { padding-bottom: 0; }
.stage-step:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: #38383a; }
.stage-step.completed:not(:last-child)::before { background: #30d158; }

.stage-dot-wrap { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
.stage-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.stage-dot.pending { background: #3a3a3c; color: #8e8e93; border: 2px solid #48484a; }
.stage-dot.in_progress { background: #007AFF; color: #fff; }
.stage-dot.completed { background: #30d158; color: #fff; }
.stage-dot.waiting { background: #ff9f0a; color: #fff; }

.stage-body { flex: 1; padding-bottom: 20px; min-width: 0; }
.stage-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; cursor: pointer; }
.stage-title { font-size: 15px; font-weight: 600; color: #e5e5ea; }
.stage-title.muted { color: #8e8e93; }
.stage-time-info { font-size: 12px; color: #8e8e93; margin-left: auto; display: flex; align-items: center; gap: 8px; }

.stage-expanded { background: #2c2c2e; border: 1px solid #38383a; border-radius: 12px; padding: 16px; margin-top: 8px; }

/* Timer Display */
.timer-display { display: flex; align-items: center; gap: 16px; padding: 16px; background: #1c1c1e; border-radius: 10px; margin-bottom: 16px; }
.timer-clock { font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.timer-clock.green { color: #30d158; }
.timer-clock.yellow { color: #ff9f0a; }
.timer-clock.red { color: #ff453a; }
.timer-target { font-size: 13px; color: #8e8e93; }
.timer-actions { margin-left: auto; display: flex; gap: 8px; }

.btn { padding: 8px 16px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.btn-green { background: #30d158; color: #fff; }
.btn-green:hover { background: #28b84c; }
.btn-orange { background: #ff9f0a; color: #fff; }
.btn-orange:hover { background: #e68f09; }
.btn-blue { background: #007AFF; color: #fff; }
.btn-blue:hover { background: #0066d6; }
.btn-red { background: #ff453a; color: #fff; }
.btn-red:hover { background: #e63e34; }
.btn-outline { background: transparent; border: 1px solid #48484a; color: #e5e5ea; }
.btn-outline:hover { background: #3a3a3c; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* Instructions */
.instructions-panel { background: #1c1c1e; border-radius: 10px; padding: 16px; margin-bottom: 16px; max-height: 400px; overflow-y: auto; }
.instructions-panel h4 { font-size: 13px; font-weight: 600; color: #8e8e93; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.instructions-content { font-size: 14px; line-height: 1.7; color: #e5e5ea; }
.instructions-content strong { color: #fff; }
.instructions-content code { background: #3a3a3c; padding: 2px 6px; border-radius: 4px; font-size: 13px; color: #ff9f0a; }
.instructions-content ol, .instructions-content ul { padding-left: 20px; }
.instructions-content li { margin-bottom: 6px; }

/* Notes */
.notes-section { margin-top: 16px; }
.notes-textarea { width: 100%; min-height: 80px; padding: 12px; border: 1px solid #48484a; border-radius: 8px; background: #1c1c1e; color: #e5e5ea; font-size: 14px; font-family: inherit; resize: vertical; outline: none; }
.notes-textarea:focus { border-color: #007AFF; }

/* Wait countdown */
.wait-banner { background: rgba(255,159,10,0.1); border: 1px solid rgba(255,159,10,0.3); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.wait-banner-icon { font-size: 20px; }
.wait-banner-text { font-size: 14px; color: #ff9f0a; }

/* ── Admin ── */
.admin-tabs { display: flex; gap: 4px; margin-left: auto; }
.admin-tab { padding: 6px 14px; border: 1px solid #48484a; border-radius: 8px; background: transparent; color: #8e8e93; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.admin-tab:hover { background: #3a3a3c; color: #e5e5ea; }
.admin-tab.active { background: #007AFF; color: #fff; border-color: #007AFF; }

.admin-content { flex: 1; overflow-y: auto; padding: 20px 24px; }
.admin-section { display: none; }
.admin-section.active { display: block; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600; color: #8e8e93; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #38383a; }
.data-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #2c2c2e; color: #e5e5ea; }
.data-table tr:hover td { background: #2c2c2e; }

/* Forms */
.form-row { display: flex; gap: 12px; align-items: end; margin-bottom: 16px; }
.form-row .form-group { flex: 1; margin-bottom: 0; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: #8e8e93; margin-bottom: 6px; }

/* Card panels */
.panel { background: #2c2c2e; border: 1px solid #38383a; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.panel-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: #e5e5ea; }

/* Variance colors */
.var-green { color: #30d158; }
.var-yellow { color: #ff9f0a; }
.var-red { color: #ff453a; }