/* ================================================================ TERC Project Manager — Editorial Swiss Style Bold typography. Extreme whitespace. Flat. Precise. ================================================================ */ /* Questrial loaded via Google Fonts CDN (see base.html ) */ :root { /* Palette — from brand guide */ --creme: #F6F2EA; --sable: #E8E1D6; --gris: #B8B8B5; --noir: #000000; --blanc: #FFFFFF; --lime: #D8EB27; --rouge: #E54127; --vert: #005922; --orange: #FF8C00; --turquoise: #007B82; --menthe: #B2E1D2; --foret: #003C38; --bourgogne: #5E183B; --mangue: #FFC20E; --ciel: #78C5F8; --framboise: #B7274D; --chocolat: #945526; --gingembre: #CD9A62; --rose: #F892C5; --lilac: #BDBDF7; --melon: #F3C1AA; /* Semantic aliases */ --white: var(--blanc); --bg: var(--creme); --bg2: var(--sable); --surface: var(--blanc); --border: #D8D4CC; --border2: var(--gris); --text: #111111; --text2: #4A4A45; --text3: #9A9A94; --text4: #B8B8B5; --accent: #111111; --accent-inv: #FFFFFF; --highlight: var(--lime); /* Status colors — match db.py PROJECT_STATUSES */ --s-not-started: #B8B8B5; /* Gris */ --s-in-progress: #111111; /* Noir */ --s-qc: #FF8C00; /* Orange */ --s-delivery: #007B82; /* Turquoise */ --s-completed: #005922; /* Vert */ --s-archived: #B8B8B5; /* Gris */ /* Priority */ --p-high: #E54127; /* Rouge */ --p-medium: #FF8C00; /* Orange */ --p-low: #005922; /* Vert */ --p-med: #FF8C00; /* Orange */ /* Layout */ --sidebar-w: 232px; --topbar-h: 60px; --radius: 1px; --radius-md: 2px; /* Typography */ --font: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; } a { color: inherit; text-decoration: none; } button { font-family: var(--font); cursor: pointer; } input, select, textarea { font-family: var(--font); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; } /* ================================================================ Layout — Sidebar + Main ================================================================ */ .sidebar { width: var(--sidebar-w); background: var(--white); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow-y: auto; } .sidebar-logo { height: var(--topbar-h); display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--border); gap: 10px; } .logo-mark { font-size: 11px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; background: var(--text); color: var(--white); padding: 5px 9px; } .logo-text { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); } .sidebar-nav { flex: 1; padding: 16px 0; } .nav-section { margin-bottom: 28px; } .nav-section-label { font-size: 8px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text4); padding: 0 22px 8px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 22px; font-size: 12px; font-weight: 500; color: var(--text3); transition: color .12s, background .12s; border-left: 2px solid transparent; letter-spacing: .1px; } .nav-item:hover { color: var(--text); background: var(--bg); } .nav-item.active { color: var(--text); border-left-color: var(--text); font-weight: 700; background: var(--bg); } .nav-item svg, .nav-item i { opacity: .5; flex-shrink: 0; } .nav-item.active svg, .nav-item.active i { opacity: 1; } .nav-badge { margin-left: auto; background: var(--p-high); color: white; font-size: 9px; font-weight: 800; letter-spacing: .3px; padding: 1px 5px; border-radius: 0; } .nav-timer-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--p-high); animation: blink 1.4s infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } } .sidebar-user { border-top: 1px solid var(--border); padding: 14px 20px; display: flex; align-items: center; gap: 10px; } .avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; } .avatar-sm { width: 24px; height: 24px; font-size: 10px; } .avatar-md { width: 32px; height: 32px; font-size: 12px; } .avatar-lg { width: 40px; height: 40px; font-size: 14px; } .user-name { font-size: 12px; font-weight: 600; } .user-role { font-size: 11px; color: var(--text3); } /* ================================================================ Main content area ================================================================ */ .main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } .topbar { height: var(--topbar-h); background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 28px; gap: 16px; position: sticky; top: 0; z-index: 50; } .topbar-title { font-size: 16px; font-weight: 800; letter-spacing: -.4px; flex: 1; } .topbar-actions { display: flex; gap: 8px; align-items: center; } .page-content { padding: 40px 36px; flex: 1; } /* ================================================================ Buttons ================================================================ */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; border: 1px solid transparent; border-radius: 0; transition: background .1s, color .1s, border-color .1s; white-space: nowrap; cursor: pointer; } .btn-primary { background: var(--text); color: var(--white); border-color: var(--text); } .btn-primary:hover { background: #2a2a2a; } .btn-secondary { background: var(--white); color: var(--text); border-color: var(--border2); } .btn-secondary:hover { background: var(--bg); border-color: var(--text); } .btn-ghost { background: transparent; color: var(--text2); border-color: transparent; } .btn-ghost:hover { background: var(--bg2); color: var(--text); } .btn-danger { background: var(--p-high); color: white; border-color: var(--p-high); } .btn-danger:hover { background: #b83027; } .btn-success { background: var(--s-completed); color: white; border-color: var(--s-completed); } .btn-success:hover { opacity: .9; } .btn-sm { padding: 5px 10px; font-size: 10px; letter-spacing: .5px; } .btn-xs { padding: 2px 7px; font-size: 9px; letter-spacing: .4px; } .btn-icon { padding: 6px; min-width: 30px; justify-content: center; text-transform: none; letter-spacing: 0; } /* ================================================================ Cards / Surfaces ================================================================ */ .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); } .card-body { padding: 20px; } .card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text2); } /* ================================================================ Stats row ================================================================ */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; } .stat-box { background: var(--white); padding: 20px; } .stat-label { font-size: 9px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text4); margin-bottom: 8px; } .stat-value { font-size: 36px; font-weight: 900; color: var(--text); letter-spacing: -2px; line-height: 1; } .stat-sub { font-size: 11px; color: var(--text3); margin-top: 5px; } /* ================================================================ Project Status Kanban (overview) ================================================================ */ .status-kanban { display: grid; grid-template-columns: repeat(6, minmax(200px, 1fr)); gap: 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; overflow-y: visible; } .status-col { background: var(--white); display: flex; flex-direction: column; border-right: 1px solid var(--border); min-height: 320px; min-width: 200px; } .status-col:last-child { border-right: none; } .status-col-header { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: var(--topbar-h); background: var(--white); z-index: 10; } .status-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; } .status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .status-count { font-size: 11px; font-weight: 700; color: var(--text3); } .status-col-body { padding: 8px; flex: 1; display: flex; flex-direction: column; gap: 6px; } /* Project card in Kanban overview */ .proj-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 12px 12px 14px; cursor: pointer; transition: border-color .15s, background .1s; position: relative; overflow: hidden; } .proj-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--proj-color, var(--border)); } .proj-card:hover { border-color: var(--text); background: var(--white); } .proj-card-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.3; letter-spacing: -.2px; } .proj-card-client { font-size: 11px; color: var(--text3); margin-bottom: 8px; } .proj-card-bar { height: 2px; background: var(--bg2); border-radius: 1px; overflow: hidden; margin-bottom: 8px; } .proj-card-bar-fill { height: 100%; background: var(--text); border-radius: 1px; } .proj-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--text3); } .proj-card-avatars { display: flex; } .proj-card-avatars .avatar { margin-left: -6px; border: 1.5px solid var(--white); } .proj-card-avatars .avatar:first-child { margin-left: 0; } /* ================================================================ Task Kanban Board ================================================================ */ .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 20px; align-items: flex-start; } .k-col { min-width: 260px; max-width: 260px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 260px); } .k-col-header { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; background: var(--bg); border-radius: var(--radius) var(--radius) 0 0; flex-shrink: 0; } .k-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .k-col-name { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text2); flex: 1; } .k-col-count { font-size: 11px; font-weight: 700; color: var(--text3); } .k-col-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 60px; } .k-col-body.drag-over { background: rgba(26,26,26,.04); } .k-task { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; cursor: grab; transition: border-color .1s, box-shadow .1s; user-select: none; } .k-task:hover { border-color: var(--text2); box-shadow: 0 1px 4px rgba(0,0,0,.06); } .k-task.dragging { opacity: .35; cursor: grabbing; } .k-task.completed .k-task-title { text-decoration: line-through; color: var(--text3); } .k-task-title { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 6px; line-height: 1.4; } .k-task-footer { display: flex; align-items: center; gap: 6px; } .k-task-pri { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .k-task-due { font-size: 10px; color: var(--text3); } .k-task-due.overdue { color: var(--p-high); } .k-task-actions { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity .1s; } .k-task:hover .k-task-actions { opacity: 1; } .k-col-add { padding: 8px; border-top: 1px solid var(--border); flex-shrink: 0; } .k-col-add input { width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; font-size: 12px; color: var(--text); } .k-col-add input:focus { outline: none; border-color: var(--text2); } /* ================================================================ Forms ================================================================ */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 5px; } .form-group.full { grid-column: 1 / -1; } .form-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text2); } .form-control { background: var(--white); border: 1px solid var(--border2); border-radius: var(--radius); padding: 8px 10px; font-size: 13px; color: var(--text); width: 100%; transition: border-color .1s; } .form-control:focus { outline: none; border-color: var(--text); } .form-control::placeholder { color: var(--text4); } textarea.form-control { resize: vertical; min-height: 80px; line-height: 1.5; } select.form-control { cursor: pointer; } .form-hint { font-size: 11px; color: var(--text3); } .form-section { margin-bottom: 28px; } .form-section-title { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 16px; } /* Multi-select disciplines */ .discipline-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .disc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 11px; font-weight: 600; border: 1px solid var(--border2); border-radius: 0; cursor: pointer; color: var(--text2); background: var(--white); transition: all .1s; } .disc-chip input { display: none; } .disc-chip:has(input:checked) { background: var(--text); color: var(--white); border-color: var(--text); } /* Color swatches */ .color-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .color-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .1s; } .color-swatch:hover { transform: scale(1.15); } .color-swatch.selected { border-color: var(--text); transform: scale(1.15); } /* ================================================================ Modal ================================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.15); } .modal-lg { max-width: 780px; } .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 14px; font-weight: 700; } .modal-close { background: none; border: none; font-size: 20px; color: var(--text3); line-height: 1; padding: 2px 6px; } .modal-close:hover { color: var(--text); } .modal-body { padding: 20px; } .modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } /* ================================================================ Table ================================================================ */ .table-wrap { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .table-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } table { width: 100%; border-collapse: collapse; } th { padding: 9px 14px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); background: var(--bg); border-bottom: 1px solid var(--border); } td { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--bg); } /* ================================================================ Tabs ================================================================ */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; background: var(--white); } .tab-btn { padding: 11px 16px; background: none; border: none; font-size: 12px; font-weight: 600; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .1s; letter-spacing: .2px; } .tab-btn:hover { color: var(--text2); } .tab-btn.active { color: var(--text); border-bottom-color: var(--text); } .tab-pane { display: none; } .tab-pane.active { display: block; } /* ================================================================ Badges / Chips ================================================================ */ .badge { display: inline-flex; align-items: center; padding: 2px 6px; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; border-radius: 0; } .badge-high { background: rgba(214,59,47,.12); color: var(--p-high); } .badge-medium { background: rgba(200,120,0,.12); color: var(--p-medium); } .badge-low { background: rgba(0,136,74,.12); color: var(--p-low); } /* ================================================================ Status chips (project level) ================================================================ */ .status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; border: 1px solid; border-radius: 0; } .chip-not_started { color: var(--s-not-started); border-color: var(--s-not-started); } .chip-in_progress { color: var(--s-in-progress); border-color: var(--s-in-progress); background: rgba(26,26,26,.05); } .chip-qc { color: var(--s-qc); border-color: var(--s-qc); } .chip-delivery { color: var(--s-delivery); border-color: var(--s-delivery); } .chip-completed { color: var(--s-completed); border-color: var(--s-completed); } .chip-archived { color: var(--s-archived); border-color: var(--s-archived); } /* ================================================================ Chat ================================================================ */ .chat-layout { display: flex; height: calc(100vh - var(--topbar-h)); overflow: hidden; } .chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .chat-input-area { border-top: 1px solid var(--border); padding: 14px 20px; background: var(--white); } .chat-msg { display: flex; gap: 10px; align-items: flex-start; } .chat-msg.own { flex-direction: row-reverse; } .msg-bubble { max-width: 85%; min-width: 80px; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; border-bottom-left-radius: 4px; padding: 10px 16px; } .chat-msg.own .msg-bubble { background: var(--text); color: var(--white); border-color: var(--text); border-bottom-right-radius: 4px; border-bottom-left-radius: 18px; } .msg-author { font-size: 11px; font-weight: 700; margin-bottom: 5px; color: var(--text3); } .chat-msg.own .msg-author { display: none; } .msg-text { font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } .msg-time { font-size: 10px; color: var(--text3); margin-top: 6px; } .chat-msg.own .msg-time { color: rgba(255,255,255,.45); text-align: right; } .chat-input-row { display: flex; gap: 8px; align-items: flex-end; } .chat-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; font-size: 13px; resize: none; min-height: 38px; max-height: 120px; line-height: 1.4; } .chat-input:focus { outline: none; border-color: var(--text2); } .chat-file-btn { color: var(--text3); } .chat-file-btn:hover { color: var(--text); } /* Mention highlight */ .mention { font-weight: 700; color: var(--s-delivery); } /* Typing indicator */ .typing-indicator { font-size: 11px; color: var(--text3); padding: 4px 0; min-height: 18px; } /* ================================================================ File manager ================================================================ */ .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .file-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color .1s; } .file-card:hover { border-color: var(--text2); } .file-icon { font-size: 28px; text-align: center; } .file-name { font-size: 12px; font-weight: 500; word-break: break-all; line-height: 1.3; } .file-meta { font-size: 10px; color: var(--text3); } .file-version-badge { font-size: 9px; font-weight: 700; letter-spacing: .5px; background: var(--bg2); color: var(--text3); padding: 1px 5px; border-radius: 0; display: inline-block; } /* ================================================================ Timer bar ================================================================ */ .timer-bar { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .timer-display { font-size: 32px; font-weight: 800; letter-spacing: -2px; font-variant-numeric: tabular-nums; color: var(--text); min-width: 110px; font-family: var(--mono); } .timer-display.running { color: var(--p-high); } .timer-fields { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; } /* ================================================================ Progress bar ================================================================ */ .progress { height: 3px; background: var(--bg2); border-radius: 99px; overflow: hidden; } .progress-fill { height: 100%; background: var(--text); border-radius: 99px; transition: width .3s; } /* ================================================================ Bar chart (CSS only) ================================================================ */ .bar-chart { display: flex; align-items: flex-end; gap: 6px; } .bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; } .bar-fill { width: 100%; background: var(--text); border-radius: 1px 1px 0 0; min-height: 2px; } .bar-lbl { font-size: 9px; color: var(--text3); letter-spacing: .3px; } /* ================================================================ Empty state ================================================================ */ .empty-state { text-align: center; padding: 48px 20px; color: var(--text3); } .empty-icon { margin-bottom: 12px; display: flex; align-items: center; justify-content: center; } .empty-state h3 { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text2); margin-bottom: 4px; } .empty-state p { font-size: 12px; } /* ================================================================ Toast ================================================================ */ #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 6px; } .toast { background: var(--text); color: var(--white); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,.2); animation: toast-in .2s ease; } .toast.error { background: var(--p-high); } .toast.info { background: var(--s-delivery); } @keyframes toast-in { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: none; } } /* ================================================================ Budget breakdown ================================================================ */ .budget-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .budget-row input { flex: 1; } .budget-row .budget-amount { width: 100px; } /* ================================================================ Team member cards ================================================================ */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .member-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; align-items: flex-start; gap: 10px; } .member-info { flex: 1; min-width: 0; } .member-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .member-role { font-size: 11px; color: var(--text3); } .member-extern { font-size: 10px; color: var(--s-delivery); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; } /* ================================================================ File preview modal ================================================================ */ .preview-modal { max-width: 900px; width: 95vw; } .preview-content { min-height: 300px; display: flex; align-items: center; justify-content: center; background: var(--bg); } .preview-content img { max-width: 100%; max-height: 70vh; object-fit: contain; } .preview-content iframe { width: 100%; height: 70vh; border: none; } .preview-content .no-preview { text-align: center; padding: 40px; color: var(--text3); } /* ================================================================ Discipline list display ================================================================ */ .disc-tag { display: inline-block; padding: 2px 7px; font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; border: 1px solid var(--border2); border-radius: 0; color: var(--text3); margin: 2px; } /* ================================================================ Project Board (projects.html) — pb-* classes ================================================================ */ .pb-wrap { display: flex; align-items: stretch; gap: 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; min-height: 320px; } /* Active column */ .pb-col { flex: 1 1 200px; min-width: 200px; background: var(--white); display: flex; flex-direction: column; border-right: 1px solid var(--border); } .pb-col:last-child { border-right: none; } /* Collapsed (slim) column */ .pb-col-slim { flex: 0 0 52px; min-width: 52px; max-width: 52px; overflow: hidden; transition: flex-basis .22s ease, min-width .22s ease, max-width .22s ease; } .pb-col-slim.open { flex-basis: 240px; min-width: 240px; max-width: 240px; } /* Column header */ .pb-hd { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--white); flex-shrink: 0; } /* Toggle header for slim columns */ .pb-hd-toggle { padding: 0; border-bottom: none; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; min-height: 120px; cursor: pointer; transition: background .1s; } .pb-hd-toggle:hover { background: var(--bg); } /* Slim (vertical) state */ .pb-hd-slim { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0 12px; width: 52px; } .pb-slim-count { font-size: 13px; font-weight: 800; color: var(--text3); font-family: var(--mono); } .pb-slim-name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text4); white-space: nowrap; } /* Wide state (shown when open) */ .pb-hd-wide { display: none; width: 100%; padding: 10px 14px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: var(--white); flex-shrink: 0; } /* Swap slim/wide when open */ .pb-col-slim.open .pb-hd-toggle { height: auto; min-height: 0; flex-direction: row; } .pb-col-slim.open .pb-hd-slim { display: none; } .pb-col-slim.open .pb-hd-wide { display: flex; } .pb-chevron { color: var(--text3); flex-shrink: 0; transition: transform .2s; } .pb-col-slim.open .pb-chevron { transform: rotate(180deg); } /* Column body */ .pb-body { padding: 8px; flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 60px; } .pb-body.drag-over { background: rgba(26,26,26,.04); } .pb-body-slim { display: none; } .pb-col-slim.open .pb-body-slim { display: flex; } .pb-empty { padding: 20px 8px; text-align: center; font-size: 10px; color: var(--text4); letter-spacing: .5px; text-transform: uppercase; } /* ================================================================ Responsive ================================================================ */ /* ── Mobile hamburger button ── */ .mobile-menu-btn { display: none; align-items: center; justify-content: center; padding: 7px; background: none; border: none; cursor: pointer; color: var(--text2); border-radius: var(--radius); flex-shrink: 0; } .mobile-menu-btn:hover { background: var(--bg2); color: var(--text); } /* ── Sidebar overlay (mobile) ── */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99; cursor: pointer; } /* ── Desktop medium (900–1280px): sidebar stays, content adapts ── */ @media (max-width: 1280px) { .pb-col { flex: 1 1 180px; min-width: 180px; } } /* ── Tablet / small desktop (< 900px): hide sidebar, show hamburger ── */ @media (max-width: 900px) { :root { --sidebar-w: 0px; } .sidebar { width: 260px; /* fixed width — not 0 from --sidebar-w */ overflow: hidden; /* clip content when off-screen */ transform: translateX(-100%); transition: transform .22s cubic-bezier(.4,0,.2,1); z-index: 200; display: flex !important; } .sidebar.mobile-open { transform: translateX(0); overflow-y: auto; /* allow scrolling only when open */ box-shadow: 4px 0 24px rgba(0,0,0,.18); } .sidebar-overlay.visible { display: block; } .mobile-menu-btn { display: flex; } .topbar { padding: 0 16px; gap: 8px; } .topbar-title { font-size: 14px; } /* Stats boxes: 2 per row on medium screens */ .stats-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } } /* ── Mobile portrait (≤ 600px) ── */ @media (max-width: 600px) { .page-content { padding: 16px 14px; } /* Page title smaller */ .topbar-title { font-size: 13px; } /* Stats: 2 columns */ .stats-row { grid-template-columns: repeat(2, 1fr); } .stat-value { font-size: 26px; } /* Project board: stack vertically */ .pb-wrap { flex-direction: column; overflow-x: visible; border: none; background: transparent; gap: 8px; min-height: 0; } .pb-col, .pb-col-slim { flex: none !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; border-right: none !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; overflow: hidden; transition: none !important; } /* All headers horizontal on mobile */ .pb-hd-toggle { height: auto !important; min-height: 0 !important; flex-direction: row !important; padding: 0 !important; border-bottom: 1px solid var(--border) !important; } .pb-hd-slim { display: none !important; } .pb-hd-wide { display: flex !important; position: relative !important; padding: 10px 14px !important; border-bottom: 1px solid var(--border) !important; } /* Slim columns collapsed by default on mobile, toggle works */ .pb-body-slim { display: none !important; } .pb-col-slim.open .pb-body-slim { display: flex !important; } /* Dashboard grid: single column */ div[style*="grid-template-columns:1fr 320px"] { display: flex !important; flex-direction: column !important; } /* Task table: hide less important columns */ .table-wrap table th:nth-child(3), .table-wrap table td:nth-child(3) { display: none; } /* Modals full-screen on mobile */ .modal-overlay { padding: 0; align-items: flex-end; } .modal { max-width: 100% !important; width: 100% !important; max-height: 95vh; border-radius: var(--radius) var(--radius) 0 0 !important; } /* Topbar: hide search kbd hint */ .gs-trigger kbd { display: none; } .gs-trigger span { display: none; } /* Bug button: higher on mobile (no overlap with content) */ #bug-btn { bottom: 16px; right: 16px; } } /* Dark mode: drag-over */ html.dark .pb-body.drag-over { background: rgba(237,233,227,.04); } /* ================================================================ Utilities ================================================================ */ .flex { display: flex; } .flex-1 { flex: 1; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } .text-muted { color: var(--text2); } .text-dim { color: var(--text3); } .font-bold { font-weight: 700; } .font-mono { font-family: var(--mono); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Tab bar ── */ .tab-bar { display:flex; gap:0; border-bottom:1px solid var(--border); } .tab-btn { padding:10px 16px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; background:none; border:none; border-bottom:2px solid transparent; color:var(--text3); cursor:pointer; margin-bottom:-1px; } .tab-btn.active { color:var(--text); border-bottom-color:var(--text); } .tab-btn:hover:not(.active) { color:var(--text2); } /* ── Slash command autocomplete ── */ .slash-popup { position:absolute; z-index:200; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius-md); box-shadow:0 4px 16px rgba(0,0,0,.12); min-width:240px; max-width:360px; overflow:hidden; } .slash-item { display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:12px; cursor:pointer; } .slash-item:hover, .slash-item.active { background:var(--bg2); } .slash-icon { font-size:14px; flex-shrink:0; } .slash-sub { font-size:10px; color:var(--text3); margin-left:auto; } /* ── Mention rendering ── */ .mention { display:inline-block; padding:0 4px; border-radius:2px; font-weight:600; font-size:.95em; } .mention-user { background:#E8F0FF; color:#0055AA; } .mention-project { background:#F0FFF4; color:#00884A; } .mention-contact { background:#FFF3E0; color:#C87800; } .mention-task { background:#F3F0FF; color:#6600AA; } /* ── Calendar ── */ .cal-today { background: var(--text); color: var(--white); border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; } /* ================================================================ Dark Mode ================================================================ */ /* ── Dark mode token mixin ── */ .dark-vars { --bg: #141414; --bg2: #242424; --surface: #1C1C1C; --border: #2C2C2C; --border2: #3A3A3A; --text: #EDE9E3; --text2: #A8A4A0; --text3: #606060; --text4: #404040; --white: #1C1C1C; --accent: #EDE9E3; --accent-inv: #141414; --highlight: #D8EB27; /* Status colors — inverted/adjusted for dark bg */ --s-not-started: #888884; --s-in-progress: #EDE9E3; --s-qc: #FF9F1C; --s-delivery: #2EC4B6; --s-completed: #3CB371; --s-archived: #606060; } /* System preference */ @media (prefers-color-scheme: dark) { :root:not(.light) { --bg: #141414; --bg2: #242424; --surface: #1C1C1C; --border: #2C2C2C; --border2: #3A3A3A; --text: #EDE9E3; --text2: #A8A4A0; --text3: #606060; --text4: #404040; --white: #1C1C1C; --accent: #EDE9E3; --accent-inv: #141414; --highlight: #D8EB27; --s-not-started: #888884; --s-in-progress: #EDE9E3; --s-qc: #FF9F1C; --s-delivery: #2EC4B6; --s-completed: #3CB371; --s-archived: #606060; } } /* Manual dark mode */ html.dark { --bg: #141414; --bg2: #242424; --surface: #1C1C1C; --border: #2C2C2C; --border2: #3A3A3A; --text: #EDE9E3; --text2: #A8A4A0; --text3: #606060; --text4: #404040; --white: #1C1C1C; --accent: #EDE9E3; --accent-inv: #141414; --highlight: #D8EB27; --s-not-started: #888884; --s-in-progress: #EDE9E3; --s-qc: #FF9F1C; --s-delivery: #2EC4B6; --s-completed: #3CB371; --s-archived: #606060; } /* Force light mode */ html.light { --bg: #F6F2EA; --bg2: #E8E1D6; --surface: #FFFFFF; --border: #D8D4CC; --border2: #B8B8B5; --text: #111111; --text2: #4A4A45; --text3: #9A9A94; --text4: #B8B8B5; --white: #FFFFFF; --accent: #111111; --accent-inv: #FFFFFF; --s-not-started: #B8B8B5; --s-in-progress: #111111; --s-qc: #FF8C00; --s-delivery: #007B82; --s-completed: #005922; --s-archived: #B8B8B5; } /* ── Dark mode component overrides ── */ /* Buttons */ html.dark .btn-primary:hover { background: #C8C4BE; } html.dark .btn-secondary { background: var(--surface); } html.dark .btn-secondary:hover { background: var(--bg2); } /* In-progress chip: swap dark rgba tint → light */ html.dark .chip-in_progress { background: rgba(237,233,227,.08); } @media (prefers-color-scheme: dark) { :root:not(.light) .btn-primary:hover { background: #C8C4BE; } :root:not(.light) .chip-in_progress { background: rgba(237,233,227,.08); } } /* Editor.js — force dark background */ html.dark .codex-editor, html.dark .codex-editor__redactor, html.dark .ce-block__content { background: transparent !important; color: var(--text) !important; } html.dark .ce-toolbar__actions, html.dark .ce-toolbox, html.dark .ce-popover { background: var(--surface) !important; border-color: var(--border) !important; } html.dark .ce-popover-item:hover { background: var(--bg2) !important; } html.dark .cdx-input { background: var(--bg2) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark .ce-inline-toolbar { background: var(--surface) !important; border-color: var(--border) !important; } html.dark .ce-inline-tool:hover { background: var(--bg2) !important; } @media (prefers-color-scheme: dark) { :root:not(.light) .codex-editor, :root:not(.light) .codex-editor__redactor, :root:not(.light) .ce-block__content { background: transparent !important; color: var(--text) !important; } :root:not(.light) .ce-toolbar__actions, :root:not(.light) .ce-toolbox, :root:not(.light) .ce-popover { background: var(--surface) !important; border-color: var(--border) !important; } } /* Mention backgrounds */ html.dark .mention-user { background: rgba(0,65,181,.25); color: #89AAFF; } html.dark .mention-project { background: rgba(0,136,74,.2); color: #5FD68A; } html.dark .mention-contact { background: rgba(200,120,0,.2); color: #FFBA4A; } html.dark .mention-task { background: rgba(102,0,170,.2); color: #C89FFF; } /* Badge backgrounds that use rgba of dark color */ html.dark .badge-high { background: rgba(229,65,39,.2); } html.dark .badge-medium { background: rgba(255,159,28,.18); } html.dark .badge-low { background: rgba(59,179,113,.18); } /* Drag-over on kanban */ html.dark .k-col-body.drag-over { background: rgba(237,233,227,.04); } /* Dark mode toggle button in sidebar */ .dark-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 22px; font-size: 12px; font-weight: 500; color: var(--text3); cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: color .12s; letter-spacing: .1px; } .dark-toggle:hover { color: var(--text); } .dark-toggle svg { opacity: .5; flex-shrink: 0; } /* ── EditorJS Code-Block ─────────────────────────────────────────── */ .ce-code__textarea { font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace); font-size: 12px; line-height: 1.55; background: #1E293B; color: #E2E8F0; border: 1px solid var(--border2); border-radius: 6px; padding: 12px 14px; min-height: 90px; resize: vertical; tab-size: 2; } .ce-code__textarea::placeholder { color: #64748B; } /* ── EditorJS Timestamp-Block ────────────────────────────────────── */ .cdx-timestamp { font-size: 12px; font-weight: 600; color: var(--text3); padding: 6px 10px; background: var(--bg); border-left: 3px solid var(--border2); border-radius: 4px; margin: 4px 0; }