*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f0f2f5;
  --surface: #ffffff;
  --card: #ffffff;
  --card-hover: #f9fafb;
  --header-bg: #1a7a3a;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border: rgba(0,0,0,0.08);
  --border-light: rgba(0,0,0,0.04);
  --accent-green: #16a34a;
  --accent-green-light: #f0fdf4;
  --accent-green-border: #bbf7d0;
  --accent-amber: #d97706;
  --accent-amber-light: #fffbeb;
  --accent-amber-border: #fde68a;
  --accent-red: #ef4444;
  --accent-red-light: #fef2f2;
  --accent-red-border: #fecaca;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.02);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 300ms;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text-primary);
  line-height: 1.5; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv01', 'cv02';
}

/* LOGIN */
.login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:48px 40px 40px; width:100%; max-width:380px; text-align:center; box-shadow:var(--shadow-lg); }
.login-logo { font-size:24px; font-weight:700; letter-spacing:6px; color:var(--header-bg); }
.login-subtitle { font-size:13px; color:var(--text-secondary); margin:6px 0 32px; letter-spacing:0.5px; font-weight:400; }
.login-input { width:100%; padding:11px 16px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-primary); font-size:14px; font-family:inherit; outline:none; margin-bottom:16px; transition:border-color var(--duration) var(--ease-in-out), box-shadow var(--duration) var(--ease-in-out); }
.login-input:focus { border-color:var(--header-bg); box-shadow:0 0 0 3px rgba(26,122,58,0.08); }
.login-input::placeholder { color:var(--text-muted); }
.login-btn { width:100%; padding:11px; background:var(--header-bg); color:#fff; border:none; border-radius:var(--radius); font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; transition:all var(--duration) var(--ease-out); box-shadow:0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); }
.login-btn:hover { background:#166d34; transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); }
.login-btn:active { transform:translateY(0) scale(0.98); transition-duration:80ms; }
.login-error { color:var(--accent-red); font-size:13px; margin-top:12px; }

/* APP SHELL */
.app { display:none; min-height:100vh; flex-direction:column; }
.app.visible { display:flex; }

/* HEADER */
.header { background:linear-gradient(135deg, #1a7a3a 0%, #166d34 100%); color:#fff; padding:0 24px; flex-shrink:0; }
.header-inner { max-width:1800px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:52px; gap:16px; }
.header-left { display:flex; align-items:center; gap:20px; }
.header-title { font-size:16px; font-weight:600; color:#fff; letter-spacing:0.3px; }
.header-title span { color:#a7f3d0; font-weight:500; }
.header-stats { display:flex; gap:8px; font-size:11px; }
.stat-pill { padding:4px 12px; border-radius:20px; font-weight:500; background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(8px); }
.stat-pill.stuck { background:rgba(239,68,68,0.25); color:#fecaca; border-color:rgba(239,68,68,0.2); }
.stat-pill.due { background:rgba(217,119,6,0.25); color:#fde68a; border-color:rgba(217,119,6,0.2); }
.header-right { display:flex; align-items:center; gap:16px; }
.user-name { font-size:13px; color:rgba(255,255,255,0.7); font-weight:400; }
.logout-btn { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.85); padding:5px 14px; border-radius:var(--radius-sm); font-size:11px; font-weight:500; cursor:pointer; text-decoration:none; transition:all var(--duration-fast) var(--ease-in-out); }
.logout-btn:hover { background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.15); color:#fff; }
.hamburger { display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }
.mobile-menu { display:none; background:var(--surface); border-bottom:1px solid var(--border); }
.mobile-menu.visible { display:block; }

/* TOOLBAR */
.toolbar { background:var(--surface); border-bottom:1px solid var(--border); padding:0 24px; flex-shrink:0; }
.toolbar-inner { max-width:1800px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:44px; gap:16px; }
.tabs { display:flex; gap:0; }
.tab { padding:12px 16px; font-size:13px; font-weight:500; color:var(--text-secondary); cursor:pointer; border:none; border-bottom:2px solid transparent; background:none; font-family:inherit; transition:color var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out); }
.tab:hover { color:var(--text-primary); }
.tab.active { color:var(--text-primary); border-bottom-color:var(--text-primary); font-weight:600; }
.tab .badge { display:inline-block; font-size:10px; font-weight:600; padding:2px 7px; border-radius:10px; margin-left:6px; background:rgba(22,163,74,0.08); color:var(--accent-green); }
.toolbar-controls { display:flex; gap:10px; align-items:center; }
.search-box { padding:7px 12px 7px 32px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-primary); font-size:13px; font-family:inherit; width:260px; outline:none; transition:border-color var(--duration) var(--ease-in-out), box-shadow var(--duration) var(--ease-in-out); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:10px center; }
.search-box:focus { border-color:var(--header-bg); box-shadow:0 0 0 3px rgba(26,122,58,0.06); }
.search-box::placeholder { color:var(--text-muted); }
.filter-select { padding:7px 28px 7px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-primary); font-size:13px; font-family:inherit; outline:none; cursor:pointer; appearance:none; transition:border-color var(--duration) var(--ease-in-out); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 8px) center; }
.filter-select:focus { border-color:var(--header-bg); box-shadow:0 0 0 3px rgba(26,122,58,0.06); }

/* KANBAN BOARD */
.board { flex:1; display:flex; gap:20px; padding:24px; overflow-x:auto; max-width:1800px; margin:0 auto; width:100%; align-items:flex-start; }
.page { display:none; }
.page.active { display:flex; flex:1; overflow:hidden; }
.page-list { display:none; flex-direction:column; flex:1; overflow-y:auto; }
.page-list.active { display:flex; }

/* COLUMN */
.column { min-width:280px; max-width:320px; flex:1 0 280px; background:rgba(0,0,0,0.02); border-radius:var(--radius-lg); display:flex; flex-direction:column; max-height:calc(100vh - 126px); border:1px solid var(--border); }
.column-header { padding:12px 16px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; color:#fff; font-weight:600; font-size:12px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; letter-spacing:0.5px; text-transform:uppercase; }
.column-header .count { background:rgba(255,255,255,0.2); padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; }
.col-supplier .column-header { background:#3b6fd4; }
.col-subbie .column-header { background:#6d4cc4; }
.col-team .column-header { background:#18845e; }
.col-client .column-header { background:#c27517; }
.col-prestart .column-header { background:#1a7f9b; }
.col-invoicing .column-header { background:#4a44b8; }
.column-body { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.column-body::-webkit-scrollbar { width:5px; }
.column-body::-webkit-scrollbar-track { background:transparent; }
.column-body::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.12); border-radius:3px; }
.column-body::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.22); }

/* JOB GROUP */
.job-group { margin-bottom:4px; }
.job-group-header { font-size:10.5px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; padding:10px 4px 6px; border-left:2px solid var(--border); padding-left:12px; margin-bottom:6px; cursor:pointer; user-select:none; transition:color var(--duration-fast) var(--ease-in-out); }
.job-group-header:hover { color:var(--text-primary); }
.job-group.collapsed .task-card { display:none; }

/* Job group header — column-colored borders */
.col-supplier .job-group-header { border-left-color: rgba(59,111,212,0.4); }
.col-subbie .job-group-header { border-left-color: rgba(109,76,196,0.4); }
.col-team .job-group-header { border-left-color: rgba(24,132,94,0.4); }
.col-client .job-group-header { border-left-color: rgba(194,117,23,0.4); }
.col-prestart .job-group-header { border-left-color: rgba(26,127,155,0.4); }
.col-invoicing .job-group-header { border-left-color: rgba(74,68,184,0.4); }

/* TASK CARD */
.task-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; box-shadow:var(--shadow-sm); transition:all var(--duration) var(--ease-out); position:relative; }
.task-card:hover { box-shadow:var(--shadow-md); border-color:rgba(0,0,0,0.12); }
.task-card.stuck { border-left:3px solid var(--accent-red); background:var(--accent-red-light); border-color:var(--accent-red-border); border-left:3px solid var(--accent-red); }
.task-card.stuck .action-btn.stuck-btn { background:var(--accent-red); color:#fff; border-color:var(--accent-red); }
.task-card.stuck .action-btn.stuck-btn:hover { background:#dc2626; }
.task-card.removing { opacity:0; transform:translateX(20px) scale(0.95); transition:all 0.3s ease; }
.task-card.done-flash { background:#dcfce7; border-color:#86efac; }
.task-card.stuck-flash { background:var(--accent-red-light); border-color:var(--accent-red-border); border-left:3px solid var(--accent-red); }
.task-card.snooze-flash { background:#fef3c7; border-color:#fde68a; }

.task-header { display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.task-source { font-size:14px; flex-shrink:0; margin-top:1px; }
.task-title { font-size:12.5px; font-weight:600; color:var(--text-primary); line-height:1.45; }
.task-due { font-size:11px; color:var(--text-secondary); margin-bottom:8px; }
.task-due.due-today { color:var(--accent-amber); font-weight:600; }
.task-due.due-overdue { color:var(--accent-red); font-weight:600; background:var(--accent-red-light); padding:2px 8px; border-radius:var(--radius-sm); display:inline-block; }

/* Next step */
.next-step { background:#f8faf9; border-left:2px solid rgba(22,163,74,0.35); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:8px 10px; margin-bottom:10px; font-size:11px; color:#166534; line-height:1.55; }
.next-step.warning { background:#fffdf5; border-left-color:rgba(217,119,6,0.45); color:#92400e; }
.next-step-label { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--accent-green); margin-bottom:3px; }
.next-step.warning .next-step-label { color:var(--accent-amber); }

/* Actions */
.task-actions { display:flex; gap:6px; flex-wrap:wrap; }
.action-btn { padding:5px 10px; border-radius:var(--radius-sm); font-size:10.5px; font-weight:500; font-family:inherit; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); transition:all var(--duration-fast) var(--ease-in-out); letter-spacing:0.2px; }
.action-btn:active { transform:scale(0.96); }
.action-btn.done-btn:hover { background:#dcfce7; color:var(--accent-green); border-color:var(--accent-green-border); }
.action-btn.snooze-btn:hover { background:#fef3c7; color:var(--accent-amber); border-color:var(--accent-amber-border); }
.action-btn.stuck-btn:hover { background:var(--accent-red-light); color:var(--accent-red); border-color:var(--accent-red-border); }
.action-btn.reply-btn { background:#e8f0fe; color:#2563eb; border-color:#93c5fd; font-weight:600; }
.action-btn.reply-btn:hover { background:#dbeafe; border-color:#60a5fa; }

/* MODAL OVERLAY */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1000; align-items:center; justify-content:center; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; transition:opacity var(--duration) var(--ease-in-out); }
.modal-overlay.visible { display:flex; opacity:1; }
.modal { background:var(--surface); border-radius:16px; width:100%; max-width:580px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 24px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08); margin:16px; border:1px solid var(--border); transform:translateY(8px); transition:transform var(--duration-slow) var(--ease-out); }
.modal-overlay.visible .modal { transform:translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border); }
.modal-title { font-size:15px; font-weight:600; color:var(--text-primary); }
.modal-close { background:none; border:none; font-size:22px; color:var(--text-muted); cursor:pointer; padding:0 4px; line-height:1; transition:color var(--duration-fast) var(--ease-in-out); }
.modal-close:hover { color:var(--text-primary); }
.modal-body { padding:24px; flex:1; overflow-y:auto; }
.modal-field { margin-bottom:16px; }
.modal-field label { display:block; font-size:11px; font-weight:500; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.modal-field input, .modal-field textarea { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; font-family:inherit; color:var(--text-primary); background:var(--bg); transition:border-color var(--duration) var(--ease-in-out), box-shadow var(--duration) var(--ease-in-out), background var(--duration) var(--ease-in-out); }
.modal-field input:focus, .modal-field textarea:focus { outline:none; border-color:var(--header-bg); background:var(--surface); box-shadow:0 0 0 3px rgba(26,122,58,0.06); }
.modal-field textarea { resize:vertical; line-height:1.6; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; padding:16px 24px; border-top:1px solid var(--border); }
.modal-cancel-btn { padding:10px 20px; background:var(--surface); color:var(--text-secondary); border:1px solid var(--border); border-radius:var(--radius); font-size:13px; font-weight:500; font-family:inherit; cursor:pointer; transition:all var(--duration-fast) var(--ease-in-out); }
.modal-cancel-btn:hover { background:var(--bg); color:var(--text-primary); }
.modal-send-btn { padding:10px 28px; background:var(--header-bg); color:#fff; border:none; border-radius:var(--radius); font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:all var(--duration) var(--ease-out); box-shadow:0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1); }
.modal-send-btn:hover { background:#166d34; transform:translateY(-1px); }
.modal-send-btn:active { transform:translateY(0) scale(0.98); transition-duration:80ms; }
.modal-send-btn.sending { opacity:0.5; pointer-events:none; }

/* Autocomplete */
.autocomplete-wrap { position:relative; }
.autocomplete-list { display:none; position:absolute; top:100%; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow-md); z-index:10; max-height:200px; overflow-y:auto; }
.autocomplete-list.visible { display:block; }
.autocomplete-item { padding:10px 14px; cursor:pointer; display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--border-light); transition:background var(--duration-fast) var(--ease-in-out); }
.autocomplete-item:last-child { border-bottom:none; }
.autocomplete-item:hover, .autocomplete-item.active { background:var(--accent-green-light); }
.ac-name { font-size:13px; font-weight:500; color:var(--text-primary); }
.ac-email { font-size:12px; color:var(--text-secondary); }
.ac-company { font-size:11px; color:var(--text-muted); }

@media (max-width:900px) {
  .modal { max-width:100%; margin:8px; max-height:95vh; border-radius:var(--radius-lg); }
  .modal-field input, .modal-field textarea { font-size:16px; }
}

.snooze-picker { display:none; position:fixed; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px; box-shadow:var(--shadow-lg); z-index:1000; gap:6px; flex-direction:column; min-width:160px; }
.snooze-picker.visible { display:flex; }
.snooze-picker button { padding:6px 12px; background:var(--bg); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px; font-weight:500; font-family:inherit; cursor:pointer; transition:all var(--duration-fast) var(--ease-in-out); }
.snooze-picker button:hover { background:var(--accent-amber-light); border-color:var(--accent-amber-border); }
.snooze-picker button.snooze-confirm { background:var(--accent-amber); color:#fff; border-color:var(--accent-amber); }
.snooze-picker input { font-size:13px; font-family:inherit; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); }

.empty-col { text-align:center; padding:24px; color:var(--text-muted); font-size:13px; }

/* DONE PAGE */
.done-section { margin-bottom:24px; padding:0 24px; max-width:900px; }
.done-section-title { font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.6px; padding:12px 0 8px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.done-card { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--surface); border:1px solid var(--border); border-radius:10px; margin-bottom:6px; transition:box-shadow var(--duration-fast) var(--ease-in-out); }
.done-card:hover { box-shadow:var(--shadow); }
.done-card-left { display:flex; align-items:center; gap:10px; }
.done-check { color:#22c55e; font-size:14px; font-weight:600; }
.done-title { font-size:13px; color:var(--text-secondary); }
.done-time { font-size:12px; color:var(--text-muted); white-space:nowrap; }

/* ACTIVITY LOG */
.activity-list { padding:0 24px; max-width:900px; }
.activity-item { display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border-light); transition:background var(--duration-fast) var(--ease-in-out); }
.activity-item:nth-child(even) { background:rgba(0,0,0,0.015); border-radius:var(--radius); }
.activity-icon { font-size:16px; flex-shrink:0; }
.activity-text { font-size:13px; color:var(--text-primary); line-height:1.5; }
.activity-time { font-size:11px; color:var(--text-muted); margin-top:2px; }

.footer { text-align:center; padding:12px; font-size:11px; color:rgba(0,0,0,0.2); flex-shrink:0; }

/* MOBILE COLUMN TABS */
.column-tabs { display:none; background:var(--surface); border-bottom:1px solid var(--border); padding:8px 16px; overflow-x:auto; gap:6px; flex-shrink:0; -webkit-overflow-scrolling:touch; position:relative; -webkit-mask-image:linear-gradient(to right,#000 85%,transparent); mask-image:linear-gradient(to right,#000 85%,transparent); }
.column-tabs::-webkit-scrollbar { display:none; }
.col-tab { padding:6px 12px; border-radius:20px; font-size:11px; font-weight:500; cursor:pointer; border:none; font-family:inherit; white-space:nowrap; background:var(--bg); color:var(--text-secondary); transition:all var(--duration-fast) var(--ease-in-out); }
.col-tab.active { color:#fff; }
.col-tab[data-col="supplier"].active { background:#3b6fd4; }
.col-tab[data-col="subbie"].active { background:#6d4cc4; }
.col-tab[data-col="team"].active { background:#18845e; }
.col-tab[data-col="client"].active { background:#c27517; }
.col-tab[data-col="prestart"].active { background:#1a7f9b; }
.col-tab[data-col="invoicing"].active { background:#4a44b8; }

/* MOBILE */
@media (max-width:900px) {
  .header-stats { display:none; }
  .user-name,.logout-btn { display:none; }
  .hamburger { display:block; }
  .toolbar-inner { flex-wrap:wrap; height:auto; padding:8px 16px; gap:8px; }
  .tabs { width:100%; }
  .tab { padding:10px 12px; font-size:12px; }
  .toolbar-controls { width:100%; display:flex; }
  .search-box { flex:1; width:auto; }
  .filter-select { flex:0 0 auto; }
  .column-tabs { display:flex !important; }
  .board { padding:0 12px 12px; gap:12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
  .column { min-width:calc(100vw - 24px); max-width:calc(100vw - 24px); flex:0 0 calc(100vw - 24px); scroll-snap-align:start; overflow:hidden; }
  .action-btn { padding:8px 14px; font-size:12px; }
  .task-actions { gap:8px; }
}