1885 lines
39 KiB
CSS
1885 lines
39 KiB
CSS
/* Dashboard Page Styles - Kanban Board (Dark Theme) */
|
|
.dashboard-page {
|
|
padding: var(--space-page-x, 1.5rem);
|
|
max-width: 100%;
|
|
min-height: 100vh;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Header */
|
|
.page-header {
|
|
margin-bottom: var(--space-6, 1.5rem);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.header-content h1 {
|
|
margin: 0;
|
|
font-size: 1.75rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #ffffff);
|
|
font-family: var(--font-family-heading, inherit);
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Alert (page-specific override — base .alert and .alert-danger inherited from app.css section 7) */
|
|
.alert {
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.alert-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.25rem;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.alert-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Statistics Grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: var(--space-6, 1.5rem);
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--surface-primary, rgba(28, 28, 30, 0.95));
|
|
border-radius: var(--radius-lg, 0.75rem);
|
|
padding: 1rem 1.25rem;
|
|
box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.4));
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
border-left: 4px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-left-width: 4px;
|
|
}
|
|
|
|
.stat-card.warning {
|
|
border-left-color: var(--color-warning, #fbbf24);
|
|
}
|
|
|
|
.stat-card.danger {
|
|
border-left-color: var(--color-error, #ef4444);
|
|
}
|
|
|
|
.stat-card.success {
|
|
border-left-color: var(--color-success, #22c55e);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #ffffff);
|
|
font-family: var(--font-family-heading, inherit);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
/* Board Toolbar - Search & Filters */
|
|
.board-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: 0.75rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 0.875rem;
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
padding: 0.5rem 2rem 0.5rem 2.25rem;
|
|
border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-radius: var(--radius-md, 0.375rem);
|
|
font-size: 0.875rem;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: var(--text-primary, #ffffff);
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.search-input::placeholder {
|
|
color: var(--text-placeholder, rgba(255, 255, 255, 0.3));
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary, #dc2626);
|
|
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
|
|
}
|
|
|
|
.search-clear {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.5));
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
padding: 0.125rem 0.25rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.search-clear:hover {
|
|
color: var(--text-primary, #ffffff);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.filter-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-dropdown-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.filter-btn.active {
|
|
border-color: var(--color-primary, #dc2626);
|
|
background: rgba(220, 38, 38, 0.15);
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.filter-badge {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.filter-active-text {
|
|
font-size: 0.75rem;
|
|
max-width: 80px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filter-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
left: 0;
|
|
min-width: 200px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
background: var(--surface-primary, rgba(28, 28, 30, 0.98));
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-radius: var(--radius-md, 0.5rem);
|
|
box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.5));
|
|
z-index: 100;
|
|
}
|
|
|
|
.filter-dropdown-customers {
|
|
min-width: 240px;
|
|
}
|
|
|
|
.filter-search-box {
|
|
position: sticky;
|
|
top: 0;
|
|
padding: 0.5rem;
|
|
background: var(--surface-primary, rgba(28, 28, 30, 0.98));
|
|
border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
|
|
z-index: 1;
|
|
}
|
|
|
|
.filter-search-input {
|
|
width: 100%;
|
|
padding: 0.4rem 0.6rem;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 0.5px solid rgba(255, 255, 255, 0.15);
|
|
border-radius: var(--radius-sm, 0.25rem);
|
|
color: var(--text-primary, #ffffff);
|
|
font-family: inherit;
|
|
font-size: 0.8rem;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.filter-search-input::placeholder {
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
|
|
}
|
|
|
|
.filter-search-input:focus {
|
|
border-color: var(--color-primary, #dc2626);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.filter-dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
|
|
color: var(--text-primary, #ffffff);
|
|
font-family: inherit;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.filter-dropdown-item:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.filter-dropdown-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.filter-dropdown-item.selected {
|
|
background: rgba(220, 38, 38, 0.15);
|
|
color: var(--color-primary-light, #ef4444);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.filter-label-dot {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.filter-customer-number {
|
|
margin-left: auto;
|
|
font-size: 0.7rem;
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
font-family: var(--font-family-heading), monospace;
|
|
}
|
|
|
|
.filter-clear-btn {
|
|
color: var(--color-error-light, #f87171) !important;
|
|
border-color: rgba(239, 68, 68, 0.3) !important;
|
|
}
|
|
|
|
.filter-clear-btn:hover {
|
|
background: rgba(239, 68, 68, 0.15) !important;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.board-toolbar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.search-box {
|
|
max-width: none;
|
|
}
|
|
|
|
.filter-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
/* Kanban Board */
|
|
.kanban-board {
|
|
display: flex;
|
|
gap: 1rem;
|
|
overflow-x: auto;
|
|
padding-bottom: 1rem;
|
|
min-height: calc(100vh - 320px);
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.kanban-column {
|
|
flex: 1 1 0;
|
|
min-width: 250px;
|
|
max-width: none;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
border-radius: var(--radius-lg, 0.75rem);
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100vh - 300px);
|
|
transition: background-color 0.2s, box-shadow 0.2s;
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
/* On smaller screens, use fixed width columns */
|
|
@media (max-width: 1200px) {
|
|
.kanban-column {
|
|
flex: 0 0 280px;
|
|
}
|
|
}
|
|
|
|
.kanban-column.drag-over {
|
|
background: rgba(220, 38, 38, 0.15);
|
|
box-shadow: 0 0 0 2px var(--color-primary, #dc2626);
|
|
}
|
|
|
|
.column-header {
|
|
padding: 1rem;
|
|
border-top: 4px solid var(--color-primary, #dc2626);
|
|
border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: var(--surface-tertiary, rgba(58, 58, 60, 0.8));
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.column-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.column-title h2 {
|
|
margin: 0;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.column-icon {
|
|
font-size: 1.1rem;
|
|
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
|
|
line-height: 1;
|
|
}
|
|
|
|
.task-count {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
.column-add-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
border: none;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
font-size: 1.25rem;
|
|
line-height: 1;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.column-add-btn:hover {
|
|
background: var(--color-primary, #dc2626);
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.column-tasks {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
min-height: 100px;
|
|
}
|
|
|
|
/* Task Card */
|
|
.task-card {
|
|
background: var(--surface-primary, rgba(28, 28, 30, 0.95));
|
|
border-radius: var(--radius-md, 0.5rem);
|
|
padding: 0.75rem;
|
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.3));
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border-left: 3px solid transparent;
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-left-width: 3px;
|
|
user-select: none;
|
|
}
|
|
|
|
.task-card:hover {
|
|
box-shadow: var(--shadow-glow, 0 0 20px rgba(220, 38, 38, 0.4));
|
|
border-color: var(--color-primary, #dc2626);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.task-card.dragging {
|
|
opacity: 0.5;
|
|
transform: rotate(2deg);
|
|
}
|
|
|
|
.task-card.overdue {
|
|
border-left-color: var(--color-error, #ef4444);
|
|
background: rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
.task-card.due-today {
|
|
border-left-color: var(--color-warning, #fbbf24);
|
|
background: rgba(251, 191, 36, 0.1);
|
|
}
|
|
|
|
.task-card.priority-urgent {
|
|
border-left-color: var(--color-error, #ef4444);
|
|
}
|
|
|
|
.task-card.priority-high {
|
|
border-left-color: var(--color-warning, #fbbf24);
|
|
}
|
|
|
|
.task-card.priority-medium {
|
|
border-left-color: var(--color-info, #60a5fa);
|
|
}
|
|
|
|
.task-card.priority-low {
|
|
border-left-color: var(--color-success, #22c55e);
|
|
}
|
|
|
|
.task-card.archived {
|
|
opacity: 0.55;
|
|
border-left-color: var(--text-tertiary, rgba(255, 255, 255, 0.3));
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-style: dashed;
|
|
}
|
|
|
|
.task-card.archived:hover {
|
|
opacity: 0.85;
|
|
border-color: var(--text-secondary, rgba(255, 255, 255, 0.5));
|
|
box-shadow: none;
|
|
}
|
|
|
|
.archived-badge {
|
|
margin-right: 0.25rem;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.task-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.task-title {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary, #ffffff);
|
|
word-break: break-word;
|
|
flex: 1;
|
|
}
|
|
|
|
.task-dropdown {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.column-select {
|
|
font-size: 0.7rem;
|
|
padding: 0.125rem 0.25rem;
|
|
border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-radius: 0.25rem;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
cursor: pointer;
|
|
max-width: 80px;
|
|
}
|
|
|
|
.column-select option {
|
|
background: #1c1c1e;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.task-labels {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
margin-bottom: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.label-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.label-more {
|
|
font-size: 0.7rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
.task-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.task-meta-icons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.meta-icon {
|
|
font-size: 0.7rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.125rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.meta-icon.due-date.overdue {
|
|
color: var(--color-error-light, #f87171);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.meta-icon.due-date.due-today {
|
|
color: var(--color-warning-light, #fde047);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.task-assignees {
|
|
display: flex;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.assignee-avatar {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: var(--color-primary, #dc2626);
|
|
color: var(--text-primary, #ffffff);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
margin-left: -6px;
|
|
border: 2px solid var(--surface-primary, rgba(28, 28, 30, 0.95));
|
|
}
|
|
|
|
.assignee-avatar:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.assignee-more {
|
|
font-size: 0.7rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
margin-left: 0.25rem;
|
|
align-self: center;
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
z-index: var(--z-modal-backdrop, 900);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.modal {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: var(--surface-primary, rgba(28, 28, 30, 0.98));
|
|
border-radius: var(--radius-lg, 0.75rem);
|
|
box-shadow: var(--shadow-xl, 0 20px 40px rgba(0, 0, 0, 0.5));
|
|
max-height: 90vh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
z-index: var(--z-modal, 1000);
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
.modal.large {
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
gap: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.modal-header h2 {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.modal-header-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
line-height: 1;
|
|
padding: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: var(--text-primary, #ffffff);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1.5rem;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
padding: 1rem 1.5rem;
|
|
border-top: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Form Styles */
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-radius: var(--radius-md, 0.375rem);
|
|
font-size: 0.9rem;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: var(--text-primary, #ffffff);
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: var(--text-placeholder, rgba(255, 255, 255, 0.3));
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary, #dc2626);
|
|
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
|
|
}
|
|
|
|
.form-control option {
|
|
background: #1c1c1e;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.form-control-color {
|
|
width: 50px;
|
|
height: 38px;
|
|
padding: 0.25rem;
|
|
border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-radius: var(--radius-md, 0.375rem);
|
|
cursor: pointer;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Label Selector */
|
|
.label-selector {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.label-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.label-checkbox input {
|
|
display: none;
|
|
}
|
|
|
|
.label-checkbox .label-tag {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
background: var(--label-color, #6b7280);
|
|
color: white;
|
|
opacity: 0.5;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.label-checkbox input:checked + .label-tag {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Assignee Selector */
|
|
.assignee-selector {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.assignee-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
cursor: pointer;
|
|
padding: 0.25rem 0.5rem;
|
|
border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.assignee-checkbox:has(input:checked) {
|
|
border-color: var(--color-primary, #dc2626);
|
|
background: rgba(220, 38, 38, 0.15);
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
/* Customer Selection */
|
|
.selected-customers {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.customer-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.25rem 0.5rem;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-primary, #ffffff);
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
.customer-tag .remove-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
padding: 0;
|
|
}
|
|
|
|
.customer-tag .remove-btn:hover {
|
|
color: var(--color-error, #ef4444);
|
|
}
|
|
|
|
/* Vehicle selector per customer */
|
|
.customer-tag-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.customer-vehicle-badge {
|
|
font-size: 0.75rem;
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
font-weight: 400;
|
|
}
|
|
|
|
.vehicle-select {
|
|
min-height: 36px !important;
|
|
padding: 0.25rem 0.5rem !important;
|
|
font-size: 0.8125rem !important;
|
|
background-color: rgba(0, 0, 0, 0.25) !important;
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1)) !important;
|
|
border-radius: 0.375rem !important;
|
|
color: var(--text-primary, #fff) !important;
|
|
}
|
|
|
|
.vehicle-select:focus {
|
|
border-color: var(--border-focus, rgba(220, 38, 38, 0.5)) !important;
|
|
box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
|
|
}
|
|
|
|
/* Tire Stack Selector */
|
|
.tirestack-selector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tirestack-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-radius: 0.375rem;
|
|
transition: all 0.2s;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
.tirestack-checkbox:has(input:checked) {
|
|
border-color: var(--color-primary, #dc2626);
|
|
background: rgba(220, 38, 38, 0.15);
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.tirestack-info {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.tirestack-info small {
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
}
|
|
|
|
/* Task Detail Modal */
|
|
.task-detail-modal .modal-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.task-detail-header-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.task-detail-header-content h2 {
|
|
word-break: break-word;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.task-meta {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-top: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.priority-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.priority-badge.priority-low {
|
|
background: rgba(34, 197, 94, 0.2);
|
|
color: var(--color-success-light, #86efac);
|
|
}
|
|
|
|
.priority-badge.priority-medium {
|
|
background: rgba(96, 165, 250, 0.2);
|
|
color: var(--color-info-light, #93c5fd);
|
|
}
|
|
|
|
.priority-badge.priority-high {
|
|
background: rgba(251, 191, 36, 0.2);
|
|
color: var(--color-warning-light, #fde047);
|
|
}
|
|
|
|
.priority-badge.priority-urgent {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
color: var(--color-error-light, #f87171);
|
|
}
|
|
|
|
.priority-badge.archived-indicator {
|
|
background: rgba(156, 163, 175, 0.2);
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
border: 1px dashed rgba(156, 163, 175, 0.4);
|
|
}
|
|
|
|
.due-date {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
.due-date.overdue {
|
|
color: var(--color-error-light, #f87171);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.due-date.due-today {
|
|
color: var(--color-warning-light, #fde047);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.task-detail-body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 300px;
|
|
min-height: 400px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.task-detail-body {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.task-detail-sidebar {
|
|
border-left: none;
|
|
border-top: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
max-height: 300px;
|
|
}
|
|
}
|
|
|
|
.task-detail-main {
|
|
padding: 1.5rem;
|
|
overflow-y: auto;
|
|
max-height: 60vh;
|
|
}
|
|
|
|
.task-detail-sidebar {
|
|
border-left: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
}
|
|
|
|
.task-detail-sidebar h3 {
|
|
margin: 0;
|
|
padding: 1rem;
|
|
font-size: 0.95rem;
|
|
border-bottom: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
flex-shrink: 0;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
/* Detail Sections */
|
|
.detail-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.detail-section h3 {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
margin: 0 0 0.75rem 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.description-content {
|
|
color: var(--text-primary, #ffffff);
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.tire-size-badge {
|
|
display: inline-block;
|
|
padding: 0.35rem 0.75rem;
|
|
background: rgba(59, 130, 246, 0.15);
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
border-radius: 6px;
|
|
color: #93c5fd;
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.tire-size-input {
|
|
max-width: 300px;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.text-muted {
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Labels List */
|
|
.label-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.label-tag {
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: white;
|
|
}
|
|
|
|
/* Assignee List */
|
|
.assignee-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.assignee-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.25rem 0.5rem;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
color: var(--text-primary, #ffffff);
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
.assignee-badge .assignee-avatar {
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 0.6rem;
|
|
margin: 0;
|
|
border: none;
|
|
}
|
|
|
|
/* Customer/TireStack Lists */
|
|
.customer-list,
|
|
.tirestack-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.customer-card,
|
|
.tirestack-card {
|
|
padding: 0.75rem;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
border-radius: var(--radius-md, 0.5rem);
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
.customer-name {
|
|
font-weight: 500;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.customer-vehicles {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
margin-top: 0.375rem;
|
|
}
|
|
|
|
.vehicle-badge {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
.tirestack-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.season-icon {
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tirestack-card .tirestack-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tirestack-card .vehicle {
|
|
font-weight: 500;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.tirestack-card .details {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
/* Todo List */
|
|
.todo-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.todo-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
border-radius: 0.375rem;
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
.todo-item.completed .todo-text {
|
|
text-decoration: line-through;
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
}
|
|
|
|
.todo-item input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
accent-color: var(--color-primary, #dc2626);
|
|
}
|
|
|
|
.todo-text {
|
|
flex: 1;
|
|
font-size: 0.9rem;
|
|
word-break: break-word;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.todo-edit-input {
|
|
flex: 1;
|
|
padding: 0.25rem 0.5rem;
|
|
border: 1px solid var(--color-primary, #dc2626);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.9rem;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.todo-delete {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
font-size: 1.1rem;
|
|
line-height: 1;
|
|
opacity: 0;
|
|
transition: all 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.todo-item:hover .todo-delete {
|
|
opacity: 1;
|
|
}
|
|
|
|
.todo-delete:hover {
|
|
color: var(--color-error, #ef4444);
|
|
}
|
|
|
|
.todo-add {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.todo-add .form-control {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Attachments */
|
|
.attachment-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.attachment-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
border-radius: 0.375rem;
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
.attachment-icon {
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.attachment-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.attachment-name {
|
|
font-size: 0.9rem;
|
|
color: var(--color-primary-light, #ef4444);
|
|
text-decoration: none;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.attachment-size {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
.attachment-delete {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
font-size: 1.1rem;
|
|
transition: color 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.attachment-delete:hover {
|
|
color: var(--color-error, #ef4444);
|
|
}
|
|
|
|
.attachment-upload {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.attachment-upload ::deep input[type="file"] {
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
.upload-hint {
|
|
font-size: 0.75rem;
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
}
|
|
|
|
.upload-progress {
|
|
font-size: 0.875rem;
|
|
color: var(--color-primary-light, #ef4444);
|
|
padding: 0.5rem;
|
|
background: rgba(220, 38, 38, 0.1);
|
|
border-radius: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Notes - Simple textarea */
|
|
.notes-textarea {
|
|
min-height: 8rem;
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Chat/Activity Sidebar */
|
|
.chat-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.chat-message {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.chat-message.activity {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.activity-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
font-size: 0.8rem;
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.activity-icon {
|
|
font-size: 0.9rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.activity-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.activity-time {
|
|
font-size: 0.7rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.message-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.message-author {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.message-time {
|
|
font-size: 0.7rem;
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
}
|
|
|
|
.message-content {
|
|
font-size: 0.875rem;
|
|
color: var(--text-primary, #ffffff);
|
|
background: var(--surface-tertiary, rgba(58, 58, 60, 0.8));
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: var(--radius-md, 0.5rem);
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
word-break: break-word;
|
|
}
|
|
|
|
.chat-input {
|
|
padding: 0.75rem;
|
|
border-top: 1px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chat-input textarea {
|
|
resize: none;
|
|
}
|
|
|
|
/* Task Detail Modal Footer */
|
|
.task-detail-modal .modal-footer {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.footer-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.task-info {
|
|
font-size: 0.75rem;
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
|
|
}
|
|
|
|
.footer-right {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Templates Modal */
|
|
.template-modal {
|
|
max-width: 650px;
|
|
}
|
|
|
|
.template-actions {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.template-form {
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
padding: 1rem;
|
|
border-radius: var(--radius-md, 0.5rem);
|
|
margin-bottom: 1rem;
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
.template-form h3 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 1rem;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
/* Placeholder Legend */
|
|
.placeholder-legend {
|
|
margin-bottom: 1rem;
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-radius: var(--radius-md, 0.5rem);
|
|
background: var(--surface-tertiary, rgba(58, 58, 60, 0.6));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.placeholder-legend summary {
|
|
padding: 0.625rem 0.75rem;
|
|
cursor: pointer;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary, #ffffff);
|
|
user-select: none;
|
|
}
|
|
|
|
.placeholder-legend summary:hover {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.placeholder-legend .legend-hint {
|
|
font-weight: 400;
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.5));
|
|
}
|
|
|
|
.placeholder-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 0.75rem;
|
|
padding: 0.5rem 0.75rem 0.75rem;
|
|
}
|
|
|
|
.placeholder-group h5 {
|
|
margin: 0 0 0.375rem 0;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
.placeholder-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.6));
|
|
padding: 0.125rem 0;
|
|
}
|
|
|
|
.placeholder-item code {
|
|
background: rgba(59, 130, 246, 0.15);
|
|
color: var(--color-primary, #3b82f6);
|
|
padding: 0.0625rem 0.3125rem;
|
|
border-radius: 0.1875rem;
|
|
font-size: 0.6875rem;
|
|
font-family: 'SF Mono', 'Menlo', monospace;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Template Todos */
|
|
.template-todos {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.template-todo-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.template-todo-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 0.5rem;
|
|
background: var(--surface-tertiary, rgba(58, 58, 60, 0.6));
|
|
border-radius: var(--radius-sm, 0.25rem);
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.08));
|
|
}
|
|
|
|
.template-todo-item .todo-reorder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.template-todo-item .todo-text {
|
|
flex: 1;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-primary, #ffffff);
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-icon {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.5));
|
|
cursor: pointer;
|
|
padding: 0.0625rem 0.25rem;
|
|
font-size: 0.625rem;
|
|
line-height: 1;
|
|
border-radius: 0.125rem;
|
|
}
|
|
|
|
.btn-icon:hover:not(:disabled) {
|
|
color: var(--text-primary, #ffffff);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.btn-icon:disabled {
|
|
opacity: 0.3;
|
|
cursor: default;
|
|
}
|
|
|
|
.btn-icon-danger:hover:not(:disabled) {
|
|
color: var(--color-error-light, #f87171);
|
|
background: rgba(239, 68, 68, 0.15);
|
|
}
|
|
|
|
.template-todo-add {
|
|
display: flex;
|
|
gap: 0.375rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.template-todo-add .form-control {
|
|
flex: 1;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* Template Todos Preview (in task modal) */
|
|
.template-todos-preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
padding: 0.625rem 0.75rem;
|
|
background: var(--surface-tertiary, rgba(58, 58, 60, 0.6));
|
|
border-radius: var(--radius-sm, 0.25rem);
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.08));
|
|
max-height: 180px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.template-todo-preview-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem 0;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
.template-todo-preview-item .todo-check {
|
|
color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
|
|
font-size: 0.875rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.template-form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.template-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.template-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
padding: 1rem;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
border-radius: var(--radius-md, 0.5rem);
|
|
gap: 0.75rem;
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
.template-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.template-name {
|
|
font-weight: 500;
|
|
color: var(--text-primary, #ffffff);
|
|
}
|
|
|
|
.template-description {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
.template-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.meta-item {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
background: var(--surface-tertiary, rgba(58, 58, 60, 0.8));
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.template-labels {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.template-item-actions {
|
|
display: flex;
|
|
gap: 0.375rem;
|
|
flex-shrink: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Labels Modal */
|
|
.labels-modal {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.label-form {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.label-form .form-control {
|
|
flex: 1;
|
|
}
|
|
|
|
.label-list-manage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.label-list-manage .label-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.9));
|
|
border-radius: 0.375rem;
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
}
|
|
|
|
/* Buttons — .btn, .btn-primary, .btn-outline, .btn-danger, .btn-sm inherited from app.css section 5 */
|
|
|
|
.spinner-sm {
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid currentColor;
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spin 0.75s linear infinite;
|
|
}
|
|
|
|
/* Loading & Empty States */
|
|
.loading-state,
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3rem;
|
|
gap: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-top-color: var(--color-primary, #dc2626);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
/* .empty-state h2/p, @keyframes spin, .access-denied — inherited from app.css sections 11, 19 */
|
|
|
|
/* Responsive */
|
|
@media (max-width: 640px) {
|
|
.dashboard-page {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.kanban-column {
|
|
flex: 0 0 280px;
|
|
}
|
|
|
|
.modal {
|
|
width: 95%;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.header-actions {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
/* Additional scrollbar styling for dark theme */
|
|
.kanban-board::-webkit-scrollbar,
|
|
.column-tasks::-webkit-scrollbar,
|
|
.modal-body::-webkit-scrollbar,
|
|
.task-detail-main::-webkit-scrollbar,
|
|
.chat-messages::-webkit-scrollbar,
|
|
.note-content::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.kanban-board::-webkit-scrollbar-track,
|
|
.column-tasks::-webkit-scrollbar-track,
|
|
.modal-body::-webkit-scrollbar-track,
|
|
.task-detail-main::-webkit-scrollbar-track,
|
|
.chat-messages::-webkit-scrollbar-track,
|
|
.note-content::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.kanban-board::-webkit-scrollbar-thumb,
|
|
.column-tasks::-webkit-scrollbar-thumb,
|
|
.modal-body::-webkit-scrollbar-thumb,
|
|
.task-detail-main::-webkit-scrollbar-thumb,
|
|
.chat-messages::-webkit-scrollbar-thumb,
|
|
.note-content::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.kanban-board::-webkit-scrollbar-thumb:hover,
|
|
.column-tasks::-webkit-scrollbar-thumb:hover,
|
|
.modal-body::-webkit-scrollbar-thumb:hover,
|
|
.task-detail-main::-webkit-scrollbar-thumb:hover,
|
|
.chat-messages::-webkit-scrollbar-thumb:hover,
|
|
.note-content::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* ========================================
|
|
Customer Search Dropdown
|
|
======================================== */
|
|
.customer-search-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.customer-search-results {
|
|
max-height: 180px;
|
|
overflow-y: auto;
|
|
margin-top: 4px;
|
|
background: var(--surface-secondary, rgba(44, 44, 46, 0.95));
|
|
border: 0.5px solid var(--border-default, rgba(255, 255, 255, 0.1));
|
|
border-radius: var(--radius-md, 0.5rem);
|
|
}
|
|
|
|
.customer-search-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
|
|
color: var(--text-primary, #ffffff);
|
|
font-family: inherit;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.customer-search-item:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.customer-search-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.customer-search-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.customer-search-number {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.5));
|
|
font-family: var(--font-family-heading), monospace;
|
|
}
|
|
|
|
.customer-search-empty {
|
|
padding: 0.75rem;
|
|
text-align: center;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.5));
|
|
font-size: 0.85rem;
|
|
}
|