/* ============================================================ EMS - Asana-Style Design System Full redesign to match Asana's visual language ============================================================ */ /* --- Asana Color Palette --- */ :root { --asana-primary: #0c6e67; --asana-primary-hover: #088f59; --asana-primary-light: #e6f6f0; --asana-primary-dark: #074d4a; --asana-accent: #2563eb; --asana-accent-hover: #1d4ed8; --asana-accent-light: #eff6ff; --asana-bg: #ffffff; --asana-bg-secondary: #f7f5f3; --asana-bg-tertiary: #ebe9e6; --asana-bg-hover: #ebe9e6; --asana-bg-active: #e8e6e3; --asana-text-primary: #232323; --asana-text-secondary: #61605e; --asana-text-tertiary: #9e9c9a; --asana-text-inverse: #ffffff; --asana-border: #e6e5e3; --asana-border-strong: #c4c2bf; --asana-inbox: #ff8c1f; --asana-today: #147ed4; --asana-upcoming: #84d15d; --asana-completed: #a0a0a0; --asana-flagged: #e36971; --asana-critical: #de3942; --asana-high: #ff8c1f; --asana-medium: #ffd47a; --asana-low: #7ac555; --asana-success: #0c6e67; --asana-success-bg: #e6f6f0; --asana-error: #de3942; --asana-error-bg: #fef2f3; --asana-warning: #ff8c1f; --asana-warning-bg: #fff8f1; --asana-info: #147ed4; --asana-info-bg: #eff6ff; --asana-success-border: #b8e8d4; --asana-error-border: #f5c2c7; --asana-warning-border: #fde8cc; --asana-info-border: #b8ddf0; --asana-shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --asana-shadow-md: 0 2px 8px rgba(0,0,0,0.08); --asana-shadow-lg: 0 4px 16px rgba(0,0,0,0.12); --asana-shadow-xl: 0 8px 32px rgba(0,0,0,0.16); --asana-space-xxs: 2px; --asana-space-xs: 4px; --asana-space-sm: 8px; --asana-space-md: 12px; --asana-space-lg: 16px; --asana-space-xl: 24px; --asana-space-xxl: 32px; --asana-space-xxxl: 48px; --asana-radius-sm: 3px; --asana-radius-md: 6px; --asana-radius-lg: 8px; --asana-radius-xl: 12px; --asana-radius-full: 9999px; --asana-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --asana-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --asana-sidebar-width: 264px; --asana-sidebar-collapsed-width: 48px; --asana-header-height: 56px; } /* --- FOUC / flicker prevention --- */ /* Suppress all transitions while the page loads. board.js removes this class after the first two animation frames, so transitions only fire on user interaction. */ html.no-transition *, html.no-transition { transition: none !important; animation: none !important; } /* Applied by inline script in when localStorage says sidebar was collapsed. Mirrors .asana-shell.sidebar-collapsed without needing the DOM element to exist first. */ html.sidebar-pre-collapsed .asana-shell { grid-template-columns: var(--asana-sidebar-collapsed-width) 1fr; } html.sidebar-pre-collapsed .asana-shell .asana-sidebar .asana-sidebar-workspace span:last-child, html.sidebar-pre-collapsed .asana-shell .asana-sidebar-nav, html.sidebar-pre-collapsed .asana-shell .asana-sidebar-footer { display: none; } html.sidebar-pre-collapsed .asana-shell .asana-sidebar { padding: 8px 0; } html.sidebar-pre-collapsed .asana-shell .asana-sidebar-workspace { justify-content: center; padding: 12px; } html.sidebar-pre-collapsed .asana-shell .asana-sidebar-workspace-icon { margin: 0; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--asana-font); color: var(--asana-text-primary); background: var(--asana-bg-secondary); line-height: 1.5; overflow: hidden; height: 100vh; } a { color: var(--asana-primary); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--asana-primary-hover); text-decoration: underline; } img { max-width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; } h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.125rem; } h4 { font-size: 1rem; } ul, ol { list-style: none; } input, select, textarea, button { font: inherit; } /* --- Full App Shell (Sidebar + Header + Content) --- */ .asana-shell { display: grid; grid-template-columns: var(--asana-sidebar-width) 1fr; grid-template-rows: var(--asana-header-height) 1fr; height: 100vh; overflow: hidden; } /* --- Top Header Bar --- */ .asana-header { grid-column: 2; grid-row: 1; background: var(--asana-bg); border-bottom: 1px solid var(--asana-border); display: flex; align-items: center; padding: 0 var(--asana-space-xl); height: var(--asana-header-height); z-index: 100; gap: var(--asana-space-lg); } .asana-header-logo { display: flex; align-items: center; gap: var(--asana-space-sm); font-weight: 700; font-size: 1.05rem; color: var(--asana-primary); text-decoration: none; flex-shrink: 0; } .asana-header-logo:hover { color: var(--asana-primary-hover); text-decoration: none; } .asana-header-logo-icon { width: 28px; height: 28px; background: var(--asana-primary); border-radius: var(--asana-radius-md); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; font-weight: 700; } .asana-header-nav { display: flex; align-items: center; gap: 2px; flex: 1; } .asana-header-nav-item { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--asana-radius-md); color: var(--asana-text-secondary); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.15s ease; white-space: nowrap; } .asana-header-nav-item:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); text-decoration: none; } .asana-header-nav-item.active { background: var(--asana-bg-tertiary); color: var(--asana-text-primary); font-weight: 600; } .asana-header-actions { display: flex; align-items: center; gap: var(--asana-space-sm); flex-shrink: 0; } .asana-header-user { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--asana-radius-md); cursor: pointer; color: var(--asana-text-secondary); font-size: 0.825rem; text-decoration: none; transition: all 0.15s ease; } .asana-header-user:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); } .asana-header-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--asana-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; } /* --- Left Sidebar --- */ .asana-sidebar { grid-row: 1 / -1; grid-column: 1; background: var(--asana-bg); border-right: 1px solid var(--asana-border); display: flex; flex-direction: column; overflow: hidden; z-index: 200; } .asana-sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 600; font-size: 0.95rem; color: var(--asana-text-primary); text-decoration: none; transition: all 0.15s ease; cursor: pointer; } .asana-sidebar-workspace:hover { background: var(--asana-bg-hover); text-decoration: none; } .asana-sidebar-workspace-icon { width: 24px; height: 24px; background: var(--asana-primary); border-radius: var(--asana-radius-md); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; } .asana-sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; } .asana-sidebar-section { margin-bottom: 4px; } .asana-sidebar-section-header { display: flex; align-items: center; gap: 4px; padding: 6px 16px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--asana-text-tertiary); cursor: pointer; user-select: none; transition: color 0.15s ease; } .asana-sidebar-section-header:hover { color: var(--asana-text-secondary); } .asana-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 6px 16px; color: var(--asana-text-secondary); font-size: 0.875rem; font-weight: 400; text-decoration: none; cursor: pointer; transition: all 0.12s ease; margin: 1px 8px; border-radius: var(--asana-radius-md); white-space: nowrap; } .asana-sidebar-item:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); text-decoration: none; } .asana-sidebar-item.active { background: var(--asana-bg-tertiary); color: var(--asana-text-primary); font-weight: 500; } .asana-sidebar-item-count { margin-left: auto; font-size: 0.72rem; color: var(--asana-text-tertiary); font-weight: 500; } .asana-sidebar-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .asana-sidebar-footer { padding: 8px; border-top: 1px solid var(--asana-border); } .asana-sidebar-footer a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--asana-radius-md); color: var(--asana-text-secondary); font-size: 0.825rem; text-decoration: none; transition: all 0.15s ease; } .asana-sidebar-footer a:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); text-decoration: none; } /* --- Main Content --- */ .asana-main { grid-column: 2; grid-row: 2; overflow-y: auto; background: var(--asana-bg); display: flex; flex-direction: column; } .asana-content { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* --- Page Header --- */ .asana-page-header { padding: var(--asana-space-xl) var(--asana-space-xxl); border-bottom: 1px solid var(--asana-border); background: var(--asana-bg); flex-shrink: 0; } .asana-page-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--asana-space-lg); margin-bottom: var(--asana-space-md); } .asana-page-title { font-size: 1.5rem; font-weight: 600; color: var(--asana-text-primary); line-height: 1.3; } .asana-page-subtitle { font-size: 0.875rem; color: var(--asana-text-secondary); margin-top: 4px; } .asana-page-actions { display: flex; align-items: center; gap: var(--asana-space-sm); flex-shrink: 0; } .asana-page-breadcrumb { font-size: 0.8rem; color: var(--asana-text-tertiary); margin-bottom: 4px; } .asana-page-breadcrumb a { color: var(--asana-text-secondary); } .asana-page-breadcrumb a:hover { color: var(--asana-primary); } /* --- Buttons --- */ .asana-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border: none; border-radius: var(--asana-radius-md); font-family: var(--asana-font); font-size: 0.825rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; text-decoration: none; white-space: nowrap; line-height: 1.4; } .asana-btn-primary { background: var(--asana-primary); color: var(--asana-text-inverse); } .asana-btn-primary:hover { background: var(--asana-primary-hover); color: var(--asana-text-inverse); text-decoration: none; } .asana-btn-secondary { background: var(--asana-bg); color: var(--asana-text-primary); border: 1px solid var(--asana-border-strong); } .asana-btn-secondary:hover { background: var(--asana-bg-hover); } .asana-btn-tertiary { background: transparent; color: var(--asana-text-secondary); } .asana-btn-tertiary:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); } .asana-btn-danger { background: var(--asana-error); color: white; } .asana-btn-danger:hover { background: #c42f38; color: white; } .asana-btn-sm { padding: 4px 10px; font-size: 0.78rem; } .asana-btn-lg { padding: 10px 20px; font-size: 0.9rem; } .asana-btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--asana-radius-md); } .asana-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* --- Cards --- */ .asana-card { background: var(--asana-bg); border: 1px solid var(--asana-border); border-radius: var(--asana-radius-lg); box-shadow: var(--asana-shadow-sm); transition: box-shadow 0.15s ease; } .asana-card:hover { box-shadow: var(--asana-shadow-md); } .asana-card-body { padding: var(--asana-space-lg); } /* --- Kanban Board (Asana Style) --- */ .asana-board { display: flex; gap: var(--asana-space-lg); padding: var(--asana-space-lg); overflow-x: auto; flex: 1; align-items: flex-start; } .asana-board-column { min-width: 280px; max-width: 280px; background: var(--asana-bg-secondary); border-radius: var(--asana-radius-lg); display: flex; flex-direction: column; max-height: calc(100vh - var(--asana-header-height) - 140px); } .asana-board-column-header { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .asana-board-column-title { display: flex; align-items: center; gap: 8px; font-size: 0.825rem; font-weight: 600; color: var(--asana-text-primary); } .asana-board-column-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .asana-board-column-count { background: var(--asana-bg-tertiary); color: var(--asana-text-secondary); font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: var(--asana-radius-full); } .asana-board-column-body { flex: 1; overflow-y: auto; padding: 0 8px 8px; } /* --- Task Cards (Asana Style) --- */ .asana-task-card { background: var(--asana-bg); border: 1px solid var(--asana-border); border-radius: var(--asana-radius-md); padding: 12px; margin-bottom: 6px; cursor: grab; transition: all 0.15s ease; box-shadow: var(--asana-shadow-sm); } .asana-task-card:hover { box-shadow: var(--asana-shadow-md); border-color: var(--asana-border-strong); } .asana-task-card:active { cursor: grabbing; } .asana-task-card.dragging { opacity: 0.5; transform: rotate(2deg); } .asana-task-card-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; } .asana-task-card-checkbox { width: 18px; height: 18px; border: 2px solid var(--asana-border-strong); border-radius: 3px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; background: transparent; } .asana-task-card-checkbox:hover { border-color: var(--asana-primary); } .asana-task-card-checkbox.checked { background: var(--asana-primary); border-color: var(--asana-primary); } .asana-task-card-checkbox.checked::after { content: '\2713'; color: white; font-size: 0.65rem; font-weight: 700; } .asana-task-card-title { font-size: 0.875rem; font-weight: 500; color: var(--asana-text-primary); line-height: 1.4; flex: 1; min-width: 0; } .asana-task-card-title.completed { text-decoration: line-through; color: var(--asana-text-tertiary); } .asana-task-card-tags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .asana-task-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--asana-radius-full); font-size: 0.7rem; font-weight: 500; white-space: nowrap; } .asana-task-tag-color { width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; flex-shrink: 0; } .asana-task-tag-green { background: #d1f5d8; color: #1a7f37; } .asana-task-tag-blue { background: #d4e8fc; color: #0c60a6; } .asana-task-tag-orange { background: #fde8cc; color: #c2671a; } .asana-task-tag-red { background: #fde2e5; color: #c42f38; } .asana-task-tag-purple { background: #e8ddf8; color: #6b3fa0; } .asana-task-tag-yellow { background: #fdf3d7; color: #92600e; } .asana-task-meta { display: flex; align-items: center; gap: var(--asana-space-md); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--asana-bg-tertiary); } .asana-task-meta-item { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--asana-text-tertiary); } .asana-task-meta-item.overdue { color: var(--asana-error); } .asana-task-meta-item.due-today { color: var(--asana-today); font-weight: 500; } .asana-task-assignee { display: flex; align-items: center; gap: 2px; } .asana-task-assignee-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--asana-bg-tertiary); color: var(--asana-text-secondary); display: flex; align-items: center; justify-content: center; font-size: 0.58rem; font-weight: 600; border: 1px solid var(--asana-border); } /* --- List View (Asana Style) --- */ .asana-list { flex: 1; overflow: auto; } .asana-list-table { width: 100%; border-collapse: collapse; } .asana-list-table thead { position: sticky; top: 0; z-index: 10; } .asana-list-table th { background: var(--asana-bg); border-bottom: 2px solid var(--asana-border); padding: 10px 16px; text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--asana-text-tertiary); } .asana-list-table td { padding: 10px 16px; border-bottom: 1px solid var(--asana-border); font-size: 0.875rem; color: var(--asana-text-primary); vertical-align: top; } .asana-list-table tbody tr { transition: background 0.1s ease; } .asana-list-table tbody tr:hover { background: var(--asana-bg-hover); } .asana-list-table tbody tr:last-child td { border-bottom: none; } .asana-list-row { cursor: pointer; } .asana-list-row-title { font-weight: 500; color: var(--asana-text-primary); } .asana-list-row-desc { font-size: 0.78rem; color: var(--asana-text-secondary); margin-top: 2px; } .asana-list-row-checkbox { width: 18px; height: 18px; border: 2px solid var(--asana-border-strong); border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: transparent; transition: all 0.15s ease; } .asana-list-row-checkbox.checked { background: var(--asana-primary); border-color: var(--asana-primary); } .asana-list-row-checkbox.checked::after { content: '\2713'; color: white; font-size: 0.65rem; font-weight: 700; } /* --- Task Form Styles (create/update/delete/details in board and list views) --- */ .task-create-form { padding: 8px 0; } .task-create-grid { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .task-create-title { flex: 1; min-width: 160px; padding: 6px 10px; border: 1px solid var(--asana-border-strong); border-radius: 6px; font-size: 0.875rem; font-family: var(--asana-font); color: var(--asana-text-primary); background: var(--asana-bg); } .task-create-form select, .task-create-form input[type="date"] { padding: 6px 10px; border: 1px solid var(--asana-border-strong); border-radius: 6px; font-size: 0.875rem; font-family: var(--asana-font); color: var(--asana-text-primary); background: var(--asana-bg); } .task-create-form button { padding: 6px 14px; background: var(--asana-primary); color: #fff; border: none; border-radius: 6px; font-size: 0.875rem; cursor: pointer; font-family: var(--asana-font); } .task-update-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .task-update-grid { display: inline-flex; gap: 6px; align-items: center; } .task-update-field { display: inline-flex; flex-direction: column; gap: 2px; font-size: 0.75rem; } .task-update-field label { font-size: 0.7rem; color: var(--asana-text-tertiary); } .task-update-form select { padding: 4px 8px; border: 1px solid var(--asana-border-strong); border-radius: 4px; font-size: 0.78rem; font-family: var(--asana-font); background: var(--asana-bg); color: var(--asana-text-primary); } .task-update-form button { padding: 4px 10px; background: var(--asana-primary); color: #fff; border: none; border-radius: 4px; font-size: 0.78rem; cursor: pointer; white-space: nowrap; font-family: var(--asana-font); } .task-details { margin-top: 4px; } .task-details summary { font-size: 0.78rem; color: var(--asana-text-secondary); cursor: pointer; } .task-details-form { margin-top: 8px; } .task-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .task-details-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; } .task-details-field-full { grid-column: 1 / -1; } .task-details-field label { font-size: 0.72rem; color: var(--asana-text-secondary); font-weight: 500; } .task-details-field input, .task-details-field select, .task-details-field textarea { padding: 6px 10px; border: 1px solid var(--asana-border-strong); border-radius: 4px; font-size: 0.82rem; font-family: var(--asana-font); color: var(--asana-text-primary); background: var(--asana-bg); } .task-details-field textarea { resize: vertical; min-height: 60px; } .task-details-form button { padding: 6px 14px; background: var(--asana-primary); color: #fff; border: none; border-radius: 6px; font-size: 0.82rem; cursor: pointer; font-family: var(--asana-font); } .task-delete-form { display: inline; margin-left: 4px; } .task-delete-btn { padding: 4px 10px; background: var(--asana-error); color: #fff; border: none; border-radius: 4px; font-size: 0.78rem; cursor: pointer; font-family: var(--asana-font); } /* --- Metrics / Stats Cards (Asana Style) --- */ .asana-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--asana-space-md); padding: var(--asana-space-lg) var(--asana-space-xl); border-bottom: 1px solid var(--asana-border); background: var(--asana-bg); flex-shrink: 0; } .asana-metric { background: var(--asana-bg-secondary); border-radius: var(--asana-radius-md); padding: var(--asana-space-md) var(--asana-space-lg); border: 1px solid var(--asana-border); } .asana-metric-value { font-size: 1.5rem; font-weight: 700; color: var(--asana-text-primary); line-height: 1.2; } .asana-metric-label { font-size: 0.72rem; color: var(--asana-text-tertiary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; } /* --- Filter Bar (Asana Style) --- */ .asana-filters { display: flex; align-items: center; gap: var(--asana-space-md); padding: var(--asana-space-md) var(--asana-space-xl); border-bottom: 1px solid var(--asana-border); background: var(--asana-bg); flex-wrap: wrap; flex-shrink: 0; } .asana-filter-search { position: relative; flex: 1; min-width: 200px; max-width: 360px; } .asana-filter-search input { width: 100%; padding: 8px 12px 8px 36px; border: 1px solid var(--asana-border-strong); border-radius: var(--asana-radius-md); font-size: 0.875rem; color: var(--asana-text-primary); background: var(--asana-bg); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .asana-filter-search input:focus { outline: none; border-color: var(--asana-primary); box-shadow: 0 0 0 2px var(--asana-primary-light); } .asana-filter-search input::placeholder { color: var(--asana-text-tertiary); } .asana-filter-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--asana-text-tertiary); font-size: 0.85rem; pointer-events: none; } .asana-filter-select { padding: 8px 32px 8px 12px; border: 1px solid var(--asana-border-strong); border-radius: var(--asana-radius-md); font-size: 0.825rem; color: var(--asana-text-primary); background: var(--asana-bg); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2361605e' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .asana-filter-select:focus { outline: none; border-color: var(--asana-primary); box-shadow: 0 0 0 2px var(--asana-primary-light); } .asana-filter-reset { font-size: 0.825rem; color: var(--asana-primary); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: var(--asana-radius-md); transition: background 0.15s ease; } .asana-filter-reset:hover { background: var(--asana-primary-light); text-decoration: none; } /* --- Forms (Asana Style) --- */ .asana-form { width: 100%; } .asana-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--asana-space-lg); } .asana-form-group { display: flex; flex-direction: column; } .asana-form-group-full { grid-column: 1 / -1; } .asana-form-label { display: block; margin: 0 0 6px; font-size: 0.825rem; font-weight: 500; color: var(--asana-text-primary); } .asana-form-label .required { color: var(--asana-error); margin-left: 2px; } .asana-form-input, .asana-form-select, .asana-form-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--asana-border-strong); border-radius: var(--asana-radius-md); font-size: 0.875rem; color: var(--asana-text-primary); background: var(--asana-bg); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .asana-form-input:focus, .asana-form-select:focus, .asana-form-textarea:focus { outline: none; border-color: var(--asana-primary); box-shadow: 0 0 0 2px var(--asana-primary-light); } .asana-form-input::placeholder, .asana-form-textarea::placeholder { color: var(--asana-text-tertiary); } .asana-form-textarea { min-height: 100px; resize: vertical; } .asana-form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2361605e' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; } .asana-form-error { margin-top: 4px; font-size: 0.78rem; color: var(--asana-error); font-weight: 400; } .asana-form-actions { margin-top: var(--asana-space-lg); display: flex; gap: var(--asana-space-md); } /* --- Messages / Notices (Asana Style) --- */ .asana-message { padding: 12px 16px; border-radius: var(--asana-radius-md); font-size: 0.875rem; display: flex; align-items: center; gap: 10px; } .asana-message-notice { color: var(--asana-success); background: var(--asana-success-bg); border: 1px solid var(--asana-success-border); } .asana-message-error { color: var(--asana-error); background: var(--asana-error-bg); border: 1px solid var(--asana-error-border); } .asana-message-warning { color: var(--asana-warning); background: var(--asana-warning-bg); border: 1px solid var(--asana-warning-border); } .asana-message-info { color: var(--asana-info); background: var(--asana-info-bg); border: 1px solid var(--asana-info-border); } /* --- Login Page (Asana Style) --- */ .asana-login-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--asana-bg-secondary); padding: var(--asana-space-xl); } .asana-login-card { background: var(--asana-bg); border: 1px solid var(--asana-border); border-radius: var(--asana-radius-xl); box-shadow: var(--asana-shadow-lg); width: 100%; max-width: 400px; padding: var(--asana-space-xxl); } .asana-login-card-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--asana-space-xl); } .asana-login-card-logo-icon { width: 36px; height: 36px; background: var(--asana-primary); border-radius: var(--asana-radius-lg); display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; font-weight: 700; } .asana-login-card-logo-text { font-size: 1.25rem; font-weight: 700; color: var(--asana-primary); } .asana-login-card h2 { font-size: 1.375rem; font-weight: 600; color: var(--asana-text-primary); text-align: center; margin-bottom: var(--asana-space-sm); } .asana-login-card-subtitle { text-align: center; color: var(--asana-text-secondary); font-size: 0.875rem; margin-bottom: var(--asana-space-xl); } .asana-login-card .asana-form-group { margin-bottom: var(--asana-space-lg); } .asana-login-card .asana-form-input { padding: 10px 14px; font-size: 0.9rem; } .asana-login-card .asana-btn { width: 100%; padding: 10px; font-size: 0.9rem; margin-top: var(--asana-space-md); } .asana-login-remember { display: flex; align-items: center; gap: 8px; font-size: 0.825rem; color: var(--asana-text-secondary); margin-top: var(--asana-space-md); } .asana-login-remember input { width: auto; } .asana-login-card-footer { text-align: center; margin-top: var(--asana-space-xl); padding-top: var(--asana-space-xl); border-top: 1px solid var(--asana-border); } .asana-login-card-footer p { font-size: 0.75rem; color: var(--asana-text-tertiary); line-height: 1.6; } .asana-login-card-footer a { color: var(--asana-primary); } /* --- Auth Notice --- */ .asana-auth-notice { background: var(--asana-info-bg); border: 1px solid #b8ddf0; border-radius: var(--asana-radius-md); padding: 12px 16px; margin-bottom: var(--asana-space-xl); font-size: 0.8rem; color: #0c5fa1; line-height: 1.5; } .asana-auth-notice strong { display: block; margin-bottom: 4px; color: #0a4d80; } /* --- Data Table (Asana Style) --- */ .asana-table-wrap { border: 1px solid var(--asana-border); border-radius: var(--asana-radius-lg); overflow: auto; background: var(--asana-bg); } .asana-table { width: 100%; border-collapse: collapse; } .asana-table th { background: var(--asana-bg-secondary); border-bottom: 2px solid var(--asana-border); padding: 10px 14px; text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--asana-text-tertiary); } .asana-table td { padding: 10px 14px; border-bottom: 1px solid var(--asana-border); font-size: 0.875rem; color: var(--asana-text-primary); } .asana-table tbody tr { transition: background 0.1s ease; } .asana-table tbody tr:hover { background: var(--asana-bg-hover); } .asana-table tbody tr:last-child td { border-bottom: none; } /* --- Section Heading --- */ .asana-section-heading { font-size: 1.125rem; font-weight: 600; color: var(--asana-text-primary); margin-bottom: var(--asana-space-md); } /* --- Empty State (Asana Style) --- */ .asana-empty { text-align: center; padding: var(--asana-space-xxl); background: var(--asana-bg-secondary); border: 1px dashed var(--asana-border-strong); border-radius: var(--asana-radius-lg); } .asana-empty-icon { font-size: 2.5rem; margin-bottom: var(--asana-space-md); color: var(--asana-text-tertiary); } .asana-empty-title { font-size: 1rem; font-weight: 600; color: var(--asana-text-primary); margin-bottom: var(--asana-space-xs); } .asana-empty-desc { font-size: 0.875rem; color: var(--asana-text-secondary); margin-bottom: var(--asana-space-lg); } /* --- Badge / Pill --- */ .asana-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--asana-radius-full); font-size: 0.72rem; font-weight: 500; white-space: nowrap; } .asana-badge-gray { background: var(--asana-bg-tertiary); color: var(--asana-text-secondary); } .asana-badge-green { background: #d1f5d8; color: #1a7f37; } .asana-badge-blue { background: #d4e8fc; color: #0c60a6; } .asana-badge-orange { background: #fde8cc; color: #c2671a; } .asana-badge-red { background: #fde2e5; color: #c42f38; } .asana-badge-purple { background: #e8ddf8; color: #6b3fa0; } .asana-badge-teal { background: #d1f5f0; color: #0a7d6e; } /* --- Inline Search --- */ .asana-inline-search { margin-bottom: var(--asana-space-lg); } .asana-inline-search-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* --- Board Grid (for form entries / cards) --- */ .asana-board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--asana-space-lg); } .asana-board-card { background: var(--asana-bg); border: 1px solid var(--asana-border); border-radius: var(--asana-radius-lg); box-shadow: var(--asana-shadow-sm); padding: var(--asana-space-lg); transition: box-shadow 0.15s ease; } .asana-board-card:hover { box-shadow: var(--asana-shadow-md); } .asana-board-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .asana-board-card-title { font-size: 1rem; font-weight: 600; color: var(--asana-text-primary); } .asana-board-card-type { padding: 2px 10px; border-radius: var(--asana-radius-full); font-size: 0.72rem; font-weight: 500; background: #e8ddf8; color: #6b3fa0; } .asana-board-card-desc { font-size: 0.825rem; color: var(--asana-text-secondary); line-height: 1.5; } .asana-board-card-meta { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--asana-border); font-size: 0.78rem; color: var(--asana-text-tertiary); } /* --- Task Item (legacy card style) --- */ .asana-task-item { margin-top: 10px; border: 1px solid var(--asana-border); border-radius: var(--asana-radius-md); padding: 12px; background: var(--asana-bg); box-shadow: var(--asana-shadow-sm); } .asana-task-item-meta { margin-top: 6px; color: var(--asana-text-tertiary); font-size: 0.8rem; } /* --- Footer --- */ .asana-footer { padding: var(--asana-space-lg); border-top: 1px solid var(--asana-border); background: var(--asana-bg); text-align: right; } .asana-footer-text { font-size: 0.78rem; color: var(--asana-text-tertiary); } /* --- Skip Link --- */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { left: 12px; top: 12px; width: auto; height: auto; z-index: 9999; background: var(--asana-bg); color: var(--asana-text-primary); border: 1px solid var(--asana-border-strong); border-radius: var(--asana-radius-md); padding: 8px 14px; font-size: 0.875rem; } /* --- Utility Classes --- */ .text-primary { color: var(--asana-text-primary); } .text-secondary { color: var(--asana-text-secondary); } .text-tertiary { color: var(--asana-text-tertiary); } .text-error { color: var(--asana-error); } .text-success { color: var(--asana-success); } .mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--asana-space-sm); } .mt-md { margin-top: var(--asana-space-md); } .mt-lg { margin-top: var(--asana-space-lg); } .mt-xl { margin-top: var(--asana-space-xl); } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: var(--asana-space-sm); } .mb-md { margin-bottom: var(--asana-space-md); } .mb-lg { margin-bottom: var(--asana-space-lg); } .mb-xl { margin-bottom: var(--asana-space-xl); } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .gap-sm { gap: var(--asana-space-sm); } .gap-md { gap: var(--asana-space-md); } .gap-lg { gap: var(--asana-space-lg); } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .w-full { width: 100%; } /* --- Responsive --- */ @media (max-width: 768px) { .asana-shell { grid-template-columns: 1fr; } .asana-sidebar { display: none; } .asana-header { padding: 0 var(--asana-space-md); } .asana-page-header { padding: var(--asana-space-lg); } .asana-board { padding: var(--asana-space-md); } .asana-board-column { min-width: 260px; max-width: 260px; } .asana-form-grid { grid-template-columns: 1fr; } .asana-metrics { grid-template-columns: repeat(2, 1fr); } .asana-filters { padding: var(--asana-space-md); } } /* --- Scrollbar Styling --- */ .asana-sidebar-nav::-webkit-scrollbar, .asana-board-column-body::-webkit-scrollbar, .asana-main::-webkit-scrollbar, .asana-list::-webkit-scrollbar { width: 6px; height: 6px; } .asana-sidebar-nav::-webkit-scrollbar-thumb, .asana-board-column-body::-webkit-scrollbar-thumb, .asana-main::-webkit-scrollbar-thumb, .asana-list::-webkit-scrollbar-thumb { background: var(--asana-border-strong); border-radius: 3px; } .asana-sidebar-nav::-webkit-scrollbar-track, .asana-board-column-body::-webkit-scrollbar-track, .asana-main::-webkit-scrollbar-track, .asana-list::-webkit-scrollbar-track { background: transparent; } /* --- Drag Drop Target --- */ .asana-board-column.is-drop-target { border-color: var(--asana-accent); box-shadow: 0 0 0 2px var(--asana-accent-light); } /* --- Detail Panel / Modal --- */ .asana-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 560px; max-width: 100vw; background: var(--asana-bg); box-shadow: var(--asana-shadow-xl); z-index: 500; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; } .asana-panel.is-open { transform: translateX(0); } .asana-panel-header { padding: var(--asana-space-lg) var(--asana-space-xxl); border-bottom: 1px solid var(--asana-border); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--asana-space-md); flex-shrink: 0; } .asana-panel-close { width: 32px; height: 32px; border-radius: var(--asana-radius-md); border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--asana-text-secondary); font-size: 1.2rem; transition: all 0.15s ease; flex-shrink: 0; } .asana-panel-close:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); } .asana-panel-body { flex: 1; overflow-y: auto; padding: var(--asana-space-xxl); } .asana-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 499; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .asana-panel-overlay.is-open { opacity: 1; pointer-events: auto; } /* ============================================================ ADDITIONAL ENHANCEMENTS ============================================================ */ /* --- Dark Mode Variables (toggle via .dark-mode on ) --- */ .dark-mode { --asana-bg: #1d1d1d; --asana-bg-secondary: #2a2a2a; --asana-bg-tertiary: #333333; --asana-bg-hover: #333333; --asana-bg-active: #3a3a3a; --asana-text-primary: #e8e8e8; --asana-text-secondary: #b0b0b0; --asana-text-tertiary: #808080; --asana-border: #3a3a3a; --asana-border-strong: #555555; --asana-shadow-sm: 0 1px 2px rgba(0,0,0,0.2); --asana-shadow-md: 0 2px 8px rgba(0,0,0,0.3); --asana-shadow-lg: 0 4px 16px rgba(0,0,0,0.4); --asana-shadow-xl: 0 8px 32px rgba(0,0,0,0.5); /* Dark-mode border variables for message components */ --asana-success-border: rgba(12,110,103,0.5); --asana-error-border: rgba(222,57,66,0.5); --asana-warning-border: rgba(255,140,31,0.5); --asana-info-border: rgba(20,126,212,0.5); /* Dark-mode backgrounds for message components */ --asana-success-bg: rgba(12,110,103,0.15); --asana-error-bg: rgba(222,57,66,0.12); --asana-warning-bg: rgba(255,140,31,0.12); --asana-info-bg: rgba(20,126,212,0.12); } .dark-mode .asana-task-card { background: #2a2a2a; } .dark-mode .asana-board-card { background: #2a2a2a; } .dark-mode .asana-card { background: #2a2a2a; } .dark-mode .asana-login-card { background: #2a2a2a; } .dark-mode .asana-form-input, .dark-mode .asana-form-select, .dark-mode .asana-form-textarea { background: #333333 !important; color: #e8e8e8 !important; border-color: #555555 !important; } .dark-mode .asana-form-input:focus, .dark-mode .asana-form-select:focus, .dark-mode .asana-form-textarea:focus { border-color: var(--asana-primary) !important; box-shadow: 0 0 0 2px var(--asana-primary-light) !important; } .dark-mode .asana-list-table tbody tr:hover { background: #333333; } .dark-mode .asana-table tbody tr:hover { background: #333333; } .dark-mode .asana-board-column { background: #252525; } .dark-mode .asana-board-column-body { background: transparent; } .dark-mode .asana-metric { background: #252525; } .dark-mode .asana-filter-select { background: #333333 !important; color: #e8e8e8 !important; } .dark-mode .asana-board-grid { background: transparent; } .dark-mode .asana-list-table th { background: #252525; } .dark-mode .asana-table th { background: #252525; } .dark-mode .asana-board-card-type { background: #3a3a3a; color: #b0b0b0; } /* Dark mode: task tag colors */ .dark-mode .asana-task-tag-green { background: rgba(74,222,128,0.15); color: #4ade80; } .dark-mode .asana-task-tag-blue { background: rgba(96,165,250,0.15); color: #60a5fa; } .dark-mode .asana-task-tag-orange { background: rgba(251,146,60,0.15); color: #fb923c; } .dark-mode .asana-task-tag-red { background: rgba(248,113,113,0.15); color: #f87171; } .dark-mode .asana-task-tag-purple { background: rgba(167,139,250,0.15); color: #a78bfa; } .dark-mode .asana-task-tag-yellow { background: rgba(250,204,21,0.15); color: #facc15; } /* Dark mode: filter inputs */ .dark-mode .asana-filter-search input { background: var(--asana-bg-tertiary); } .dark-mode .asana-filter-search input:focus { background: var(--asana-bg-secondary); } .dark-mode .asana-filter-select { background: var(--asana-bg-secondary) !important; color: #e8e8e8 !important; border-color: var(--asana-border-strong) !important; } /* Dark mode: grid cells */ .dark-mode .asana-grid td input, .dark-mode .asana-grid td select, .dark-mode .asana-grid td textarea { color: var(--asana-text-primary); background: transparent; } .dark-mode .asana-grid td { border-color: var(--asana-border); } .dark-mode .asana-grid th { background: var(--asana-bg-secondary) !important; color: var(--asana-text-tertiary) !important; border-color: var(--asana-border) !important; } /* Dark mode: list view — override hardcoded light backgrounds */ .dark-mode .asana-list { background: #1a1a1b; } .dark-mode .asana-list-create { background: #242526; border-color: #3a3b3c; } .dark-mode .asana-list-table { border-color: #3a3b3c; } .dark-mode .asana-list-table th { border-color: #3a3b3c !important; } .dark-mode .asana-list-row-checkbox { border-color: #555; } .dark-mode .task-create-inline { background: #242526; border-color: #3a3b3c; } .dark-mode .asana-metrics { background: #242526; border-color: #3a3b3c; } .dark-mode .asana-metric { border-color: #3a3b3c; } /* Dark mode: sidebar toggle/dark-toggle buttons use dark-appropriate hover */ .dark-mode .asana-sidebar-footer .asana-dark-toggle:hover, .dark-mode .asana-sidebar-footer .asana-dark-toggle:focus { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.9) !important; } /* Header page-header & list-create in dark mode */ .dark-mode .asana-page-header { background: #242526; border-color: #3a3b3c; } /* --- Sidebar Collapse --- */ .asana-shell.sidebar-collapsed { grid-template-columns: var(--asana-sidebar-collapsed-width) 1fr; } .asana-shell.sidebar-collapsed .asana-sidebar .asana-sidebar-workspace span:last-child, .asana-shell.sidebar-collapsed .asana-sidebar-nav, .asana-shell.sidebar-collapsed .asana-sidebar-footer { display: none; } .asana-shell.sidebar-collapsed .asana-sidebar { padding: 8px 0; } .asana-shell.sidebar-collapsed .asana-sidebar-workspace { justify-content: center; padding: 12px; } .asana-shell.sidebar-collapsed .asana-sidebar-workspace-icon { margin: 0; } /* --- Sidebar Toggle & Dark Mode Toggle Buttons --- */ .asana-sidebar-toggle, .asana-dark-toggle { border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--asana-text-secondary); border-radius: var(--asana-radius-md); transition: all 0.15s ease; flex-shrink: 0; } .asana-sidebar-toggle { width: 32px; height: 32px; font-size: 1.1rem; } .asana-dark-toggle { width: 32px; height: 32px; font-size: 1.1rem; } .asana-sidebar-toggle:hover, .asana-dark-toggle:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); } /* Sidebar footer variant — full-width with label */ .asana-sidebar-footer .asana-dark-toggle { width: 100%; justify-content: flex-start; gap: 8px; padding: 8px 12px; font-size: 0.82rem; border-radius: var(--asana-radius-sm); } /* Sidebar is always dark (#1e1f21) so its button hover must use dark-appropriate color */ .asana-sidebar-footer .asana-dark-toggle:hover { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.9) !important; } /* --- Global Search Modal --- */ .asana-search-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: flex-start; justify-content: center; background: rgba(0,0,0,0.5); padding-top: 15vh; } .asana-search-modal.is-open { display: flex; } .asana-search-modal-content { width: 560px; max-width: 90vw; background: var(--asana-bg); border-radius: var(--asana-radius-lg); box-shadow: var(--asana-shadow-xl); overflow: hidden; } .asana-search-modal-input { width: 100%; padding: 16px 20px; border: none; border-bottom: 1px solid var(--asana-border); font-size: 1rem; color: var(--asana-text-primary); background: transparent; outline: none; } .asana-search-modal-input::placeholder { color: var(--asana-text-tertiary); } .asana-search-modal-results { max-height: 360px; overflow-y: auto; padding: 8px; } .asana-search-modal-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--asana-radius-md); cursor: pointer; text-decoration: none; color: var(--asana-text-primary); transition: background 0.1s ease; } .asana-search-modal-item:hover { background: var(--asana-bg-hover); } .asana-search-modal-item-icon { width: 28px; height: 28px; border-radius: var(--asana-radius-sm); background: var(--asana-bg-tertiary); display: flex; align-items: center; justify-content: center; color: var(--asana-text-secondary); font-size: 0.85rem; flex-shrink: 0; } .asana-search-modal-item-text { font-size: 0.875rem; } .asana-search-modal-item-meta { font-size: 0.75rem; color: var(--asana-text-tertiary); } .asana-search-modal-empty { padding: 32px; text-align: center; color: var(--asana-text-tertiary); font-size: 0.875rem; } .asana-search-modal-hint { padding: 12px 16px; border-top: 1px solid var(--asana-border); font-size: 0.72rem; color: var(--asana-text-tertiary); display: flex; gap: 16px; } .asana-search-modal-hint kbd { background: var(--asana-bg-tertiary); border: 1px solid var(--asana-border); border-radius: 3px; padding: 1px 6px; font-size: 0.7rem; font-family: var(--asana-font-mono); } /* --- Smooth Animations --- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .asana-animate-in { animation: fadeInUp 0.2s ease forwards; } .asana-fade-in { animation: fadeIn 0.2s ease forwards; } /* --- Notification Bell --- */ .asana-notification-bell { position: relative; width: 32px; height: 32px; border-radius: var(--asana-radius-md); border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--asana-text-secondary); font-size: 1.1rem; transition: all 0.15s ease; } .asana-notification-bell:hover { background: var(--asana-bg-hover); color: var(--asana-text-primary); } .asana-notification-badge { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--asana-error); border: 1px solid var(--asana-bg); } /* --- Accessibility: Focus Visible --- */ *:focus-visible { outline: 2px solid var(--asana-primary); outline-offset: 2px; } button:focus-visible, a:focus-visible { outline: 2px solid var(--asana-primary); outline-offset: 2px; } /* --- Accessibility: Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- Print Styles --- */ @media print { .asana-shell, .asana-sidebar, .asana-header, .asana-filters, .asana-page-header, .asana-footer, .asana-dark-toggle, .asana-notification-bell, .asana-board-column, .asana-board-grid, .asana-panel, .asana-panel-overlay, .asana-search-modal { display: none !important; } body { background: white !important; color: black !important; font-size: 12pt; overflow: visible !important; height: auto !important; } .asana-main, .asana-content { overflow: visible !important; height: auto !important; } .asana-table-wrap, .asana-table { border: none !important; box-shadow: none !important; } .asana-table th { background: #f0f0f0 !important; color: black !important; border: 1px solid #ccc !important; } .asana-table td { border: 1px solid #ccc !important; } a { color: black !important; text-decoration: underline !important; } } /* --- High Contrast Mode --- */ /* Bulk Action Toolbar */ .asana-bulk-bar { padding: 12px var(--asana-space-xxl); background: var(--asana-bg-secondary); border-top: 1px solid var(--asana-border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .asana-bulk-bar-label { font-size: 0.8125rem; color: var(--asana-text-secondary); font-weight: 500; } .asana-bulk-bar-select { padding: 6px 10px; border: 1px solid var(--asana-border); border-radius: 6px; background: var(--asana-bg); color: var(--asana-text-primary); font-size: 0.8125rem; cursor: pointer; } .asana-bulk-bar-select:focus { outline: 2px solid var(--asana-primary); outline-offset: 1px; } .asana-bulk-bar-count { font-size: 0.8125rem; color: var(--asana-text-tertiary); margin-left: auto; } @media (forced-colors: active) { .asana-task-card, .asana-board-card, .asana-card, .asana-metric, .asana-board-column { border: 2px solid ButtonText !important; } .asana-badge { border: 1px solid ButtonText !important; } } /* ============================================================ ASANA OVERHAUL v2 — Full redesign additions & overrides ============================================================ */ /* --- Dark Sidebar --- */ .asana-sidebar { background: #1e1f21; border-right: none; display: flex; flex-direction: column; } .asana-sidebar-workspace { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 0 16px; height: 56px; gap: 10px; } .asana-sidebar-workspace-icon { background: #F06A00; color: #fff; width: 28px; height: 28px; border-radius: 6px; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .asana-sidebar-workspace span:last-child { font-size: 0.9rem; font-weight: 600; color: #fff; } .asana-sidebar-new-btn { display: flex; align-items: center; gap: 8px; margin: 12px 10px 6px; padding: 8px 14px; background: rgba(255,255,255,0.12); color: #fff; border-radius: 8px; font-size: 0.84rem; font-weight: 500; text-decoration: none; transition: background 0.15s ease; border: 1px solid rgba(255,255,255,0.15); flex-shrink: 0; } .asana-sidebar-new-btn:hover { background: rgba(255,255,255,0.2); color: #fff; } .asana-sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 0; } .asana-sidebar-section { padding: 4px 0; } .asana-sidebar-section-header { color: rgba(255,255,255,0.4); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 18px 4px; display: flex; align-items: center; gap: 6px; } .asana-sidebar-section-header span:first-child { display: none; } .asana-sidebar-item { color: rgba(255,255,255,0.78); padding: 7px 18px; font-size: 0.875rem; border-radius: 0; margin: 0; display: flex; align-items: center; gap: 10px; transition: background 0.1s ease, color 0.1s ease; } .asana-sidebar-item:hover { background: rgba(255,255,255,0.1); color: #fff; } .asana-sidebar-item.active { background: rgba(255,255,255,0.15); color: #fff; font-weight: 500; } .asana-sidebar-item-icon { width: 18px; text-align: center; font-size: 0.9rem; opacity: 0.7; flex-shrink: 0; } .asana-sidebar-item-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .asana-sidebar-footer { border-top: 1px solid rgba(255,255,255,0.1); padding: 10px 10px; } .asana-sidebar-footer a { color: rgba(255,255,255,0.5); font-size: 0.82rem; padding: 7px 12px; border-radius: 6px; display: flex; align-items: center; gap: 8px; text-decoration: none; transition: background 0.1s ease, color 0.1s ease; } .asana-sidebar-footer a:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); } /* --- Header Polish --- */ .asana-header { background: #fff; border-bottom: 1px solid #e8e8e8; box-shadow: none; padding: 0 20px 0 16px; gap: 12px; } .asana-header-logo { color: var(--asana-text-primary); font-weight: 700; font-size: 1.05rem; gap: 8px; text-decoration: none; display: flex; align-items: center; flex-shrink: 0; } .asana-header-logo-icon { width: 28px; height: 28px; background: #F06A00; color: #fff; border-radius: 6px; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .asana-header-search { flex: 1; max-width: 440px; position: relative; display: flex; align-items: center; } .asana-header-search-icon { position: absolute; left: 10px; color: #9e9c9a; font-size: 1rem; pointer-events: none; z-index: 1; } .asana-header-search-input { width: 100%; background: #f1f1f1; border: 1.5px solid transparent; border-radius: 20px; padding: 7px 14px 7px 34px; font-size: 0.84rem; color: #6d6e6f; cursor: pointer; transition: all 0.15s ease; font-family: var(--asana-font); } .asana-header-search-input:focus { outline: none; background: #fff; border-color: var(--asana-primary); color: var(--asana-text-primary); cursor: text; box-shadow: 0 0 0 2px var(--asana-primary-light); border-radius: 8px; } .asana-header-new-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--asana-primary); color: #fff; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.15s ease, transform 0.1s ease; flex-shrink: 0; } .asana-header-new-btn:hover { background: #0a5c56; transform: scale(1.08); color: #fff; } .asana-header-nav { display: none; } .asana-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .asana-header-user { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--asana-text-secondary); text-decoration: none; padding: 4px 8px; border-radius: 6px; transition: background 0.1s ease; } .asana-header-user:hover { background: var(--asana-bg-hover); } .asana-header-avatar { width: 30px; height: 30px; border-radius: 50%; background: #F06A00; color: #fff; font-size: 0.72rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* --- Main content background --- */ .asana-main { background: #f8f8f8; } .asana-content { background: #f8f8f8; } /* --- Page header --- */ .asana-page-header { background: #fff; border-bottom: 1px solid var(--asana-border); padding: 20px 28px 16px; } .asana-page-title { font-size: 1.25rem; font-weight: 600; color: var(--asana-text-primary); } /* --- Task Panel (slide-out from right) --- */ .task-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 300; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .task-panel-overlay.is-active { opacity: 1; visibility: visible; } .task-panel { position: fixed; top: 0; right: 0; width: 520px; max-width: 100vw; height: 100vh; background: #fff; z-index: 301; transform: translateX(110%); transition: transform 0.26s cubic-bezier(0.4,0,0.2,1); overflow-y: auto; box-shadow: -6px 0 40px rgba(0,0,0,0.14); display: flex; flex-direction: column; } .task-panel.is-open { transform: translateX(0); } .task-panel-header { display: flex; align-items: center; gap: 10px; padding: 0 20px; height: 56px; border-bottom: 1px solid var(--asana-border); position: sticky; top: 0; background: #fff; z-index: 2; flex-shrink: 0; } .task-panel-close { width: 30px; height: 30px; border-radius: 6px; border: none; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--asana-text-secondary); display: flex; align-items: center; justify-content: center; transition: background 0.1s ease, color 0.1s ease; margin-left: auto; flex-shrink: 0; line-height: 1; } .task-panel-close:hover { background: #f0f0f0; color: var(--asana-text-primary); } .task-panel-status-badge { font-size: 0.75rem; padding: 3px 10px; border-radius: 12px; background: var(--asana-bg-secondary); color: var(--asana-text-secondary); font-weight: 500; border: 1px solid var(--asana-border); } .task-panel-body { padding: 28px 28px 20px; flex: 1; display: flex; flex-direction: column; gap: 0; } .task-panel-title-input { font-size: 1.3rem; font-weight: 600; color: var(--asana-text-primary); border: none; padding: 0 0 12px; width: 100%; background: transparent; font-family: var(--asana-font); border-bottom: 2px solid transparent; transition: border-color 0.15s ease; line-height: 1.3; margin-bottom: 4px; } .task-panel-title-input:focus { outline: none; border-bottom-color: var(--asana-primary); } .task-panel-section { padding: 16px 0; border-bottom: 1px solid #f0f0f0; } .task-panel-section:last-child { border-bottom: none; } .task-panel-label { font-size: 0.72rem; font-weight: 600; color: var(--asana-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; display: block; } .task-panel-desc-input { font-size: 0.875rem; color: var(--asana-text-primary); border: 1px solid transparent; border-radius: 6px; padding: 8px 10px; width: 100%; min-height: 80px; resize: vertical; font-family: var(--asana-font); background: #fafafa; transition: border-color 0.15s ease, background 0.15s ease; line-height: 1.5; } .task-panel-desc-input:focus { outline: none; border-color: var(--asana-primary); background: #fff; box-shadow: 0 0 0 3px var(--asana-primary-light); } .task-panel-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .task-panel-field { display: flex; flex-direction: column; gap: 6px; } .task-panel-field select, .task-panel-field input[type="date"], .task-panel-field input[type="text"] { padding: 8px 12px; border: 1px solid var(--asana-border-strong); border-radius: 6px; font-size: 0.875rem; font-family: var(--asana-font); color: var(--asana-text-primary); background: var(--asana-bg); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .task-panel-field select:focus, .task-panel-field input[type="date"]:focus, .task-panel-field input[type="text"]:focus { outline: none; border-color: var(--asana-primary); box-shadow: 0 0 0 3px var(--asana-primary-light); } .task-panel-divider { height: 1px; background: #f0f0f0; margin: 8px 0; } .task-panel-save-btn { width: 100%; padding: 11px; background: var(--asana-primary); color: #fff; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; font-family: var(--asana-font); transition: background 0.15s ease; margin-top: 4px; } .task-panel-save-btn:hover { background: #0a5c56; } .task-panel-delete-btn { width: 100%; padding: 9px; background: transparent; color: var(--asana-error); border: 1px solid #fccdd0; border-radius: 8px; font-size: 0.84rem; cursor: pointer; font-family: var(--asana-font); transition: background 0.15s ease, border-color 0.15s ease; margin-top: 8px; } .task-panel-delete-btn:hover { background: #fde8ea; border-color: var(--asana-error); } /* --- View toggle (icon buttons) --- */ .asana-view-toggle { display: flex; gap: 2px; background: #ebebeb; border-radius: 6px; padding: 3px; flex-shrink: 0; } .asana-view-btn { padding: 5px 12px; border-radius: 4px; border: none; background: transparent; color: var(--asana-text-secondary); font-size: 0.8rem; cursor: pointer; transition: all 0.12s ease; text-decoration: none; display: flex; align-items: center; gap: 5px; font-family: var(--asana-font); font-weight: 500; white-space: nowrap; } .asana-view-btn.is-active { background: #fff; color: var(--asana-text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.14); } .asana-view-btn:hover:not(.is-active) { background: rgba(255,255,255,0.5); color: var(--asana-text-primary); } /* --- Filter bar --- */ .asana-filters { background: #fff; border-bottom: 1px solid #ebebeb; padding: 10px 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .asana-filter-search { position: relative; display: flex; align-items: center; } .asana-filter-search-icon { position: absolute; left: 9px; color: #9e9c9a; font-size: 1rem; pointer-events: none; } .asana-filter-search input { background: var(--asana-bg-tertiary); border: 1.5px solid transparent; border-radius: 6px; padding: 6px 12px 6px 30px; font-size: 0.84rem; color: var(--asana-text-primary); width: 200px; font-family: var(--asana-font); transition: all 0.15s ease; } .asana-filter-search input:focus { outline: none; background: var(--asana-bg); border-color: var(--asana-primary); box-shadow: 0 0 0 2px var(--asana-primary-light); width: 240px; } .asana-filter-select { padding: 6px 10px; border: 1.5px solid var(--asana-border-strong); border-radius: 6px; background: var(--asana-bg); color: var(--asana-text-secondary); font-size: 0.82rem; font-family: var(--asana-font); cursor: pointer; transition: border-color 0.12s ease; } .asana-filter-select:focus { outline: none; border-color: var(--asana-primary); } .asana-filter-reset { font-size: 0.82rem; color: var(--asana-text-tertiary); text-decoration: none; padding: 5px 8px; border-radius: 4px; transition: color 0.1s ease, background 0.1s ease; } .asana-filter-reset:hover { color: var(--asana-text-primary); background: var(--asana-bg-hover); } .asana-filter-spacer { flex: 1; } .asana-filter-add-btn { padding: 7px 16px; background: var(--asana-primary); color: #fff; border: none; border-radius: 6px; font-size: 0.84rem; font-weight: 500; cursor: pointer; font-family: var(--asana-font); text-decoration: none; display: flex; align-items: center; gap: 6px; transition: background 0.12s ease; flex-shrink: 0; } .asana-filter-add-btn:hover { background: #0a5c56; color: #fff; } /* --- Board improvements --- */ .asana-board { padding: 16px 20px; gap: 14px; background: #f8f8f8; } .asana-board-column { background: #fff; border-radius: 10px; border: 1px solid #e8e8e8; min-width: 280px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .asana-board-column-header { padding: 14px 16px 10px; border-bottom: 1px solid #f0f0f0; } .asana-board-column-title { font-size: 0.875rem; font-weight: 600; color: var(--asana-text-primary); display: flex; align-items: center; gap: 8px; } .asana-board-column-count { background: #f0f0f0; color: var(--asana-text-secondary); font-size: 0.72rem; font-weight: 600; padding: 2px 7px; border-radius: 10px; } .asana-board-column-body { padding: 8px; min-height: 80px; } .asana-board-column-add { padding: 8px 12px 12px; } .asana-board-column-add-btn { width: 100%; padding: 7px 12px; background: transparent; border: 1.5px dashed #d0d0d0; border-radius: 7px; color: var(--asana-text-tertiary); font-size: 0.82rem; cursor: pointer; font-family: var(--asana-font); text-align: left; display: flex; align-items: center; gap: 6px; transition: all 0.12s ease; } .asana-board-column-add-btn:hover { border-color: var(--asana-primary); color: var(--asana-primary); background: var(--asana-primary-light); } /* --- Task Cards --- */ .asana-task-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease; position: relative; } .asana-task-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.1); border-color: #d0d0d0; } .asana-task-card:last-child { margin-bottom: 0; } .asana-task-card-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; } .asana-task-card-checkbox { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #c0c0c0; flex-shrink: 0; margin-top: 2px; transition: border-color 0.12s ease, background 0.12s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; } .asana-task-card-checkbox:hover { border-color: var(--asana-primary); } .asana-task-card-checkbox.checked { background: var(--asana-primary); border-color: var(--asana-primary); } .asana-task-card-checkbox.checked::after { content: '\2713'; color: white; font-size: 0.6rem; font-weight: 700; } .asana-task-card-title { font-size: 0.875rem; font-weight: 500; color: var(--asana-text-primary); line-height: 1.4; flex: 1; } .asana-task-card-title.completed { text-decoration: line-through; color: var(--asana-text-tertiary); } .asana-task-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; } .asana-task-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 500; } .asana-task-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 8px; } .asana-task-meta-item { font-size: 0.75rem; color: var(--asana-text-tertiary); display: flex; align-items: center; gap: 3px; } .asana-task-meta-item.overdue { color: var(--asana-error); font-weight: 500; } .asana-task-meta-item.due-today { color: var(--asana-today); font-weight: 500; } .asana-task-assignee-avatar { width: 22px; height: 22px; border-radius: 50%; background: #F06A00; color: #fff; font-size: 0.6rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } /* Hide inline forms inside cards — only drag-drop form stays */ .asana-task-card .task-update-form { display: none !important; } .asana-task-card .task-details { display: none !important; } .asana-task-card .task-delete-form { display: none !important; } /* Same for list rows */ .asana-list-row .task-update-form { display: none !important; } .asana-list-row .task-details { display: none !important; } .asana-list-row .task-delete-form { display: none !important; } /* Show drag-drop update form (needed for JS but hidden visually) */ .task-update-form { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; } /* --- List view improvements --- */ .asana-list { padding: 0 20px 20px; background: #f8f8f8; } .asana-list-table { background: #fff; border-radius: 10px; border: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; } .asana-list-table th { background: #fafafa; font-size: 0.75rem; font-weight: 600; color: var(--asana-text-secondary); padding: 10px 14px; text-align: left; border-bottom: 1px solid #ebebeb; text-transform: uppercase; letter-spacing: 0.03em; } .asana-list-table td { padding: 11px 14px; border-bottom: 1px solid var(--asana-border); font-size: 0.875rem; vertical-align: middle; } .asana-list-row { cursor: pointer; transition: background 0.1s ease; } .asana-list-row:hover { background: var(--asana-bg-hover); } .asana-list-row:last-child td { border-bottom: none; } .asana-list-row-title { font-weight: 500; color: var(--asana-text-primary); } .asana-list-row-desc { font-size: 0.78rem; color: var(--asana-text-tertiary); margin-top: 2px; } .asana-list-row-checkbox { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #c0c0c0; display: inline-block; cursor: pointer; transition: border-color 0.12s ease; } .asana-list-row-checkbox:hover { border-color: var(--asana-primary); } /* --- Add task inline (in board columns) --- */ .task-create-inline { display: none; margin: 0 8px 8px; padding: 10px; background: #fff; border: 1px solid #d0d0d0; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .task-create-inline.is-open { display: block; } .task-create-inline-title { width: 100%; padding: 7px 10px; border: 1.5px solid var(--asana-border-strong); border-radius: 6px; font-size: 0.875rem; font-family: var(--asana-font); color: var(--asana-text-primary); margin-bottom: 8px; background: var(--asana-bg); } .task-create-inline-title:focus { outline: none; border-color: var(--asana-primary); box-shadow: 0 0 0 2px var(--asana-primary-light); } .task-create-inline-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .task-create-inline select, .task-create-inline input[type="date"] { padding: 5px 8px; border: 1.5px solid var(--asana-border); border-radius: 5px; font-size: 0.8rem; font-family: var(--asana-font); background: var(--asana-bg); color: var(--asana-text-secondary); flex: 1; min-width: 0; } .task-create-inline-submit { padding: 5px 14px; background: var(--asana-primary); color: #fff; border: none; border-radius: 5px; font-size: 0.82rem; cursor: pointer; font-family: var(--asana-font); font-weight: 500; white-space: nowrap; } .task-create-inline-cancel { padding: 5px 8px; background: transparent; color: var(--asana-text-tertiary); border: none; border-radius: 5px; font-size: 0.82rem; cursor: pointer; font-family: var(--asana-font); } /* --- List view create task form at top --- */ .asana-list-create { background: #fff; border-radius: 10px; border: 1px solid #e8e8e8; padding: 14px 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .asana-list-create-input { flex: 1; border: none; background: transparent; font-size: 0.875rem; font-family: var(--asana-font); color: var(--asana-text-primary); padding: 4px 0; } .asana-list-create-input:focus { outline: none; } .asana-list-create-input::placeholder { color: #b0b0b0; } /* --- Metrics bar --- */ .asana-metrics { background: #fff; border-bottom: 1px solid #ebebeb; padding: 10px 20px; gap: 0; } .asana-metric { padding: 4px 20px; border-right: 1px solid #ebebeb; } .asana-metric:first-child { padding-left: 0; } .asana-metric:last-child { border-right: none; } .asana-metric-value { font-size: 1.2rem; font-weight: 700; } .asana-metric-label { font-size: 0.72rem; color: var(--asana-text-tertiary); margin-top: 0; } /* --- Dashboard --- */ .ems-dashboard-greeting { padding: 28px 28px 0; font-size: 1.5rem; font-weight: 700; color: var(--asana-text-primary); } .ems-dashboard-subtitle { padding: 4px 28px 20px; font-size: 0.9rem; color: var(--asana-text-secondary); } .ems-dashboard-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; padding: 0 28px 28px; align-items: start; } .ems-dashboard-main {} .ems-dashboard-sidebar {} .ems-dashboard-card { background: #fff; border-radius: 10px; border: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 16px; overflow: hidden; } .ems-dashboard-card-header { padding: 14px 20px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; } .ems-dashboard-card-title { font-size: 0.9rem; font-weight: 600; color: var(--asana-text-primary); margin: 0; } .ems-dashboard-card-link { font-size: 0.8rem; color: var(--asana-primary); text-decoration: none; font-weight: 500; } .ems-dashboard-card-link:hover { text-decoration: underline; } .ems-dashboard-task-row { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid #f8f8f8; cursor: pointer; transition: background 0.1s ease; text-decoration: none; color: inherit; } .ems-dashboard-task-row:last-child { border-bottom: none; } .ems-dashboard-task-row:hover { background: #fafafa; } .ems-dashboard-task-check { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #c0c0c0; flex-shrink: 0; } .ems-dashboard-task-title { flex: 1; font-size: 0.875rem; color: var(--asana-text-primary); font-weight: 500; } .ems-dashboard-task-due { font-size: 0.75rem; color: var(--asana-text-tertiary); white-space: nowrap; } .ems-dashboard-task-due.overdue { color: var(--asana-error); font-weight: 500; } .ems-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .ems-stat-item { padding: 18px 20px; border-right: 1px solid #f0f0f0; text-align: center; } .ems-stat-item:last-child { border-right: none; } .ems-stat-value { font-size: 1.6rem; font-weight: 700; color: var(--asana-text-primary); display: block; } .ems-stat-label { font-size: 0.72rem; color: var(--asana-text-tertiary); margin-top: 2px; display: block; } .ems-quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; } .ems-quick-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fafafa; border: 1px solid #ebebeb; border-radius: 8px; text-decoration: none; color: var(--asana-text-primary); font-size: 0.84rem; font-weight: 500; transition: all 0.12s ease; } .ems-quick-link:hover { background: #fff; border-color: var(--asana-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .ems-quick-link-icon { width: 32px; height: 32px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .ems-empty-section { padding: 28px 20px; text-align: center; color: var(--asana-text-tertiary); font-size: 0.875rem; } /* --- Dark mode sidebar fix --- */ .dark-mode .asana-sidebar { background: #18191a; } .dark-mode .asana-main, .dark-mode .asana-content { background: #1a1a1b; } .dark-mode .asana-task-card, .dark-mode .asana-list-table, .dark-mode .asana-board-column, .dark-mode .ems-dashboard-card, .dark-mode .asana-page-header { background: #242526; border-color: #3a3b3c; } .dark-mode .asana-header { background: #242526; border-color: #3a3b3c; } .dark-mode .task-panel { background: #242526; } .dark-mode .task-panel-header { background: #242526; border-color: #3a3b3c; } .dark-mode .task-panel-title-input, .dark-mode .task-panel-desc-input { color: #e4e6eb; background: #3a3b3c; } .dark-mode .asana-filters { background: #242526; border-color: #3a3b3c; } /* --- Responsive --- */ @media (max-width: 900px) { .asana-shell { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; } .asana-sidebar { display: none; } .ems-dashboard-grid { grid-template-columns: 1fr; } .task-panel { width: 100vw; } .asana-board { padding: 12px; gap: 10px; } .asana-board-column { min-width: 260px; } } /* --- Project sidebar scrolling for many projects --- */ .asana-sidebar-projects { max-height: 320px; overflow-y: auto; } .asana-sidebar-projects::-webkit-scrollbar { width: 3px; } .asana-sidebar-projects::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; } /* Safety: hide task update forms everywhere except when explicitly shown */ .task-update-form { display: none !important; } /* --- Subtasks --- */ .asana-list-subtask { background: rgba(0,0,0,0.015); } .asana-subtask-indent { color: #aaa; margin-right: 6px; font-size: 0.85rem; } .asana-subtask-count { font-size: 0.72rem; color: #888; background: #f0f0f0; border-radius: 10px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; } .asana-task-card .asana-subtask-count { font-size: 0.7rem; color: #888; } .task-panel-subtask-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .task-panel-subtask { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--asana-border); font-size: 0.85rem; } .task-panel-subtask:hover { background: var(--asana-bg-secondary); } .task-panel-subtask-check { width: 14px; height: 14px; border: 2px solid #aaa; border-radius: 50%; flex-shrink: 0; } .task-panel-subtask-check.done { background: #5cb85c; border-color: #5cb85c; } .task-panel-subtask-title.completed { text-decoration: line-through; color: #aaa; } /* --- Task panel assignee checkboxes --- */ .task-panel-assignee-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 220px; overflow-y: auto; } .task-panel-assignee-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; color: var(--asana-text-primary); } .task-panel-assignee-item:hover { background: var(--asana-bg-secondary); } .task-panel-assignee-item input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--asana-primary); } .task-panel-assignee-avatar-sm { width: 24px; height: 24px; border-radius: 50%; background: var(--asana-primary); color: #fff; font-size: 0.7rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* --- List view section headers --- */ .asana-list-section-header { background: var(--asana-bg-secondary); } .asana-list-section-title { padding: 8px 12px; font-size: 0.8rem; font-weight: 600; color: var(--asana-text-secondary); letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--asana-border); } .asana-list-section-title .asana-board-column-count { font-size: 0.75rem; font-weight: 400; color: var(--asana-text-tertiary); background: rgba(0,0,0,0.06); border-radius: 10px; padding: 1px 7px; } /* --- Project sub-navigation tab bar --- */ .project-subnav { display: flex; align-items: center; gap: 2px; padding: 0 var(--asana-space-xl); border-bottom: 1px solid var(--asana-border); background: var(--asana-bg); overflow-x: auto; flex-shrink: 0; } .project-subnav-item { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 0.82rem; font-weight: 500; color: var(--asana-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; } .project-subnav-item:hover { color: var(--asana-text-primary); } .project-subnav-item--active { color: var(--asana-primary); border-bottom-color: var(--asana-primary); font-weight: 600; } .project-subnav-icon { font-size: 0.9rem; } /* ─── Timeline Gantt bars ──────────────────────────────────────────── */ .tl-bar { position: absolute; top: 8px; height: 22px; border-radius: 4px; cursor: grab; z-index: 2; user-select: none; overflow: visible; transition: filter 0.1s; } .tl-bar:active { cursor: grabbing; filter: brightness(1.1); } .tl-resize-handle { position: absolute; right: 0; top: 0; width: 10px; height: 100%; cursor: ew-resize; background: rgba(0,0,0,.18); border-radius: 0 4px 4px 0; } /* ─── Workflow kanban columns ──────────────────────────────────────── */ .wf-col { min-width: 240px; max-width: 280px; flex: 1; border-right: 1px solid var(--asana-border); display: flex; flex-direction: column; transition: opacity 0.15s; } .wf-task-list { flex: 1; overflow-y: auto; padding: 8px; } .wf-task-card { background: var(--asana-bg); border: 1px solid var(--asana-border); border-radius: 6px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; transition: box-shadow 0.1s, border-color 0.1s; } .wf-task-card:hover { box-shadow: var(--asana-shadow); border-color: var(--asana-border-strong); } /* ─── File cards (Files tab) ───────────────────────────────────────── */ .file-card { background: var(--asana-bg); border: 1px solid var(--asana-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.1s, border-color 0.1s; } .file-card:hover { box-shadow: var(--asana-shadow); border-color: var(--asana-border-strong); } /* ─── Comments (task panel) ────────────────────────────────────────── */ .asana-comment { background: var(--asana-bg-secondary); border: 1px solid var(--asana-border); border-radius: 8px; padding: 10px 14px; } .asana-comment-form textarea:focus { outline: none; border-color: var(--asana-primary); box-shadow: 0 0 0 2px rgba(37,99,235,.12); }