1295 lines
33 KiB
CSS
1295 lines
33 KiB
CSS
@import "tailwindcss";
|
||
|
||
:root {
|
||
--background: #f3f6fb;
|
||
--foreground: #131a24;
|
||
--muted-foreground: #667287;
|
||
--surface-primary: rgba(255, 255, 255, 0.97);
|
||
--surface-elevated: #ffffff;
|
||
--surface-secondary: #f2f5fa;
|
||
--surface-tertiary: #e8eef7;
|
||
--surface-overlay: rgba(255, 255, 255, 0.88);
|
||
--border-subtle: rgba(148, 163, 184, 0.22);
|
||
--border-strong: rgba(148, 163, 184, 0.32);
|
||
--accent-primary: #1296ea;
|
||
--accent-primary-strong: #0284c7;
|
||
--accent-soft: rgba(14, 165, 233, 0.14);
|
||
--accent-soft-strong: rgba(14, 165, 233, 0.24);
|
||
--success-soft: rgba(16, 185, 129, 0.15);
|
||
--danger-soft: rgba(239, 68, 68, 0.12);
|
||
--danger-foreground: #dc2626;
|
||
--warning-soft: rgba(245, 158, 11, 0.15);
|
||
--warning-foreground: #b45309;
|
||
--regulation-border: #a9822f;
|
||
--regulation-soft: rgba(169, 130, 47, 0.1);
|
||
--app-shell-gradient: radial-gradient(circle at top, rgba(125, 211, 252, 0.12), transparent 32%), linear-gradient(180deg, #f5f9ff 0%, #eef3fb 46%, #f4f7fb 100%);
|
||
--header-surface: rgba(255, 255, 255, 0.84);
|
||
--shadow-card: 0 12px 30px -22px rgba(15, 23, 42, 0.16), 0 3px 10px -8px rgba(15, 23, 42, 0.08);
|
||
--shadow-elevated: 0 18px 40px -24px rgba(15, 23, 42, 0.18), 0 8px 16px -12px rgba(15, 23, 42, 0.1);
|
||
}
|
||
|
||
@theme inline {
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--font-sans: var(--font-geist-sans);
|
||
--font-mono: var(--font-geist-mono);
|
||
}
|
||
|
||
html[data-bs-theme="dark"] {
|
||
--background: #0b0f14;
|
||
--foreground: #eef2f7;
|
||
--muted-foreground: #97a3b7;
|
||
--surface-primary: rgba(18, 24, 32, 0.92);
|
||
--surface-elevated: #10161d;
|
||
--surface-secondary: #1b212a;
|
||
--surface-tertiary: #232c37;
|
||
--surface-overlay: rgba(12, 18, 25, 0.88);
|
||
--border-subtle: rgba(119, 140, 167, 0.18);
|
||
--border-strong: rgba(119, 140, 167, 0.28);
|
||
--accent-primary: #1ea7ff;
|
||
--accent-primary-strong: #0b8ee5;
|
||
--accent-soft: rgba(30, 167, 255, 0.18);
|
||
--accent-soft-strong: rgba(30, 167, 255, 0.28);
|
||
--success-soft: rgba(16, 185, 129, 0.17);
|
||
--danger-soft: rgba(239, 68, 68, 0.16);
|
||
--danger-foreground: #f87171;
|
||
--warning-soft: rgba(245, 158, 11, 0.18);
|
||
--warning-foreground: #fbbf24;
|
||
--regulation-border: #d0ad58;
|
||
--regulation-soft: rgba(208, 173, 88, 0.12);
|
||
--app-shell-gradient: radial-gradient(circle at top, rgba(30, 167, 255, 0.08), transparent 24%), linear-gradient(180deg, #10161d 0%, #111922 38%, #0b1016 100%);
|
||
--header-surface: rgba(14, 20, 28, 0.88);
|
||
--shadow-card: 0 20px 48px -30px rgba(2, 6, 23, 0.72);
|
||
--shadow-elevated: 0 36px 72px -40px rgba(2, 6, 23, 0.82);
|
||
}
|
||
|
||
html, body {
|
||
overflow-x: hidden;
|
||
overscroll-behavior-x: none;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
body {
|
||
background: var(--background);
|
||
color: var(--foreground);
|
||
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
|
||
transition: background-color 180ms ease, color 180ms ease;
|
||
}
|
||
|
||
a,
|
||
button,
|
||
input,
|
||
select,
|
||
textarea {
|
||
transition:
|
||
background-color 180ms ease,
|
||
border-color 180ms ease,
|
||
color 180ms ease,
|
||
box-shadow 180ms ease;
|
||
}
|
||
|
||
::selection {
|
||
background: rgba(14, 165, 233, 0.32);
|
||
}
|
||
|
||
.app-shell {
|
||
background: var(--app-shell-gradient);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-header {
|
||
background: var(--header-surface);
|
||
border-color: var(--border-subtle);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-surface {
|
||
background: var(--surface-primary);
|
||
border: 1px solid var(--border-subtle);
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.app-surface-elevated {
|
||
background: var(--surface-elevated);
|
||
border: 1px solid var(--border-subtle);
|
||
box-shadow: var(--shadow-elevated);
|
||
}
|
||
|
||
.app-surface-muted {
|
||
background: var(--surface-secondary);
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.app-card {
|
||
background: var(--surface-primary);
|
||
border: 1px solid var(--border-subtle);
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.app-input,
|
||
.app-select {
|
||
background: var(--surface-secondary);
|
||
border: 1px solid var(--border-strong);
|
||
color: var(--foreground);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||
transition:
|
||
background-color 160ms ease,
|
||
border-color 160ms ease,
|
||
box-shadow 160ms ease,
|
||
color 160ms ease;
|
||
}
|
||
|
||
.app-field-label {
|
||
display: block;
|
||
margin-bottom: 0.375rem;
|
||
color: var(--foreground);
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.app-choice-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: var(--foreground);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.app-checkbox,
|
||
.app-radio {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
flex-shrink: 0;
|
||
accent-color: var(--accent-primary);
|
||
border: 1px solid var(--border-strong);
|
||
background: var(--surface-secondary);
|
||
}
|
||
|
||
.app-checkbox {
|
||
border-radius: 0.25rem;
|
||
}
|
||
|
||
.app-radio {
|
||
border-radius: 9999px;
|
||
}
|
||
|
||
.app-color-input {
|
||
width: 4.5rem;
|
||
height: 2.5rem;
|
||
padding: 0.375rem;
|
||
border-radius: 0.875rem;
|
||
border: 1px solid var(--border-strong);
|
||
background: var(--surface-secondary);
|
||
cursor: pointer;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||
transition:
|
||
background-color 160ms ease,
|
||
border-color 160ms ease,
|
||
box-shadow 160ms ease,
|
||
transform 160ms ease;
|
||
}
|
||
|
||
.app-color-input::-webkit-color-swatch-wrapper {
|
||
padding: 0;
|
||
}
|
||
|
||
.app-color-input::-webkit-color-swatch {
|
||
border: none;
|
||
border-radius: 0.625rem;
|
||
}
|
||
|
||
.app-input::placeholder {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
input:-webkit-autofill,
|
||
input:-webkit-autofill:hover,
|
||
input:-webkit-autofill:focus,
|
||
textarea:-webkit-autofill,
|
||
textarea:-webkit-autofill:hover,
|
||
textarea:-webkit-autofill:focus,
|
||
select:-webkit-autofill,
|
||
select:-webkit-autofill:hover,
|
||
select:-webkit-autofill:focus {
|
||
-webkit-text-fill-color: var(--foreground);
|
||
caret-color: var(--foreground);
|
||
box-shadow:
|
||
inset 0 0 0 1000px var(--surface-secondary),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||
transition: background-color 99999s ease-in-out 0s;
|
||
}
|
||
|
||
.app-input:hover,
|
||
.app-select:hover,
|
||
.app-color-input:hover {
|
||
background: var(--surface-tertiary);
|
||
border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-strong));
|
||
}
|
||
|
||
.app-input:focus,
|
||
.app-select:focus {
|
||
background: var(--surface-elevated);
|
||
border-color: var(--accent-primary);
|
||
outline: none;
|
||
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
|
||
}
|
||
|
||
.app-color-input:focus {
|
||
border-color: var(--accent-primary);
|
||
outline: none;
|
||
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
|
||
}
|
||
|
||
.app-input[type="date"],
|
||
.app-input[type="datetime-local"],
|
||
.app-input[type="time"] {
|
||
color-scheme: light;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .app-input[type="date"],
|
||
html[data-bs-theme="dark"] .app-input[type="datetime-local"],
|
||
html[data-bs-theme="dark"] .app-input[type="time"] {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .app-input::-webkit-calendar-picker-indicator {
|
||
filter: invert(0.92) saturate(0.2) brightness(1.05);
|
||
}
|
||
|
||
.app-chip {
|
||
background: var(--surface-secondary);
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.app-chip-active {
|
||
background: var(--accent-primary);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.app-icon-button {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.app-icon-button:hover {
|
||
background: var(--surface-secondary);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-text-muted {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.app-text-wrap {
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.app-card-caption {
|
||
color: var(--muted-foreground);
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.025em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.app-divider {
|
||
border-color: var(--border-subtle);
|
||
}
|
||
|
||
.app-menu {
|
||
background: var(--surface-elevated);
|
||
border: 1px solid var(--border-subtle);
|
||
color: var(--foreground);
|
||
box-shadow: var(--shadow-elevated);
|
||
}
|
||
|
||
.app-link-accent {
|
||
color: var(--accent-primary-strong);
|
||
}
|
||
|
||
.app-link-accent:hover {
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
.app-accent-text {
|
||
color: var(--accent-primary-strong);
|
||
}
|
||
|
||
.app-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
flex-wrap: wrap;
|
||
border-radius: 9999px;
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-secondary);
|
||
color: var(--muted-foreground);
|
||
overflow-wrap: anywhere;
|
||
text-align: center;
|
||
white-space: normal;
|
||
}
|
||
|
||
.app-badge-accent {
|
||
border-color: color-mix(in srgb, var(--accent-primary) 20%, var(--border-subtle));
|
||
background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
|
||
color: var(--accent-primary-strong);
|
||
}
|
||
|
||
.app-badge-danger {
|
||
border-color: color-mix(in srgb, #ef4444 24%, var(--border-subtle));
|
||
background: var(--danger-soft);
|
||
color: #dc2626;
|
||
}
|
||
|
||
.app-status-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: fit-content;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
min-height: 1.75rem;
|
||
flex-shrink: 1;
|
||
border-radius: 9999px;
|
||
padding: 0.25rem 0.75rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
line-height: 1.2;
|
||
overflow-wrap: anywhere;
|
||
text-align: center;
|
||
white-space: normal;
|
||
}
|
||
|
||
.guest-status-pill {
|
||
min-height: 2rem;
|
||
flex-shrink: 0;
|
||
padding: 0.375rem 0.875rem;
|
||
font-size: 0.8125rem;
|
||
font-weight: 600;
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.app-avatar-frame {
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-secondary);
|
||
}
|
||
|
||
.app-avatar-fallback {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-subtle));
|
||
background: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-secondary));
|
||
color: var(--accent-primary-strong);
|
||
line-height: 1;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.app-counter {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 9999px;
|
||
background: var(--accent-primary);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.app-counter-danger {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 9999px;
|
||
background: #ef4444;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.chat-list-unread-badge {
|
||
min-height: 1.35rem;
|
||
border: 2px solid var(--surface-primary);
|
||
box-shadow: 0 4px 10px color-mix(in srgb, #ef4444 22%, transparent);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.chat-unread-divider {
|
||
color: var(--accent-primary-strong);
|
||
}
|
||
|
||
.chat-unread-divider__label {
|
||
border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, var(--border-subtle));
|
||
background: color-mix(in srgb, var(--accent-primary) 10%, var(--surface-primary));
|
||
color: var(--accent-primary-strong);
|
||
box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-primary) 10%, transparent);
|
||
}
|
||
|
||
.app-action-primary {
|
||
border: 1px solid transparent;
|
||
background: var(--accent-primary);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.app-action-primary:hover {
|
||
background: var(--accent-primary-strong);
|
||
}
|
||
|
||
.app-action-success {
|
||
border: 1px solid color-mix(in srgb, #10b981 20%, var(--border-strong));
|
||
background: var(--success-soft);
|
||
color: #059669;
|
||
}
|
||
|
||
.app-action-success:hover {
|
||
background: color-mix(in srgb, #10b981 18%, var(--surface-elevated));
|
||
border-color: color-mix(in srgb, #10b981 30%, var(--border-strong));
|
||
}
|
||
|
||
.app-action-warning {
|
||
border: 1px solid color-mix(in srgb, #f59e0b 20%, var(--border-strong));
|
||
background: var(--warning-soft);
|
||
color: #d97706;
|
||
}
|
||
|
||
.app-action-warning:hover {
|
||
background: color-mix(in srgb, #f59e0b 18%, var(--surface-elevated));
|
||
border-color: color-mix(in srgb, #f59e0b 30%, var(--border-strong));
|
||
}
|
||
|
||
.app-action-approval {
|
||
border: 1px solid color-mix(in srgb, #f97316 28%, var(--border-strong));
|
||
background: color-mix(in srgb, #f97316 16%, transparent);
|
||
color: #ea580c;
|
||
}
|
||
|
||
.app-action-approval:hover {
|
||
background: color-mix(in srgb, #f97316 22%, transparent);
|
||
border-color: color-mix(in srgb, #f97316 40%, var(--border-strong));
|
||
}
|
||
|
||
.app-action-notify {
|
||
border: 1px solid color-mix(in srgb, #8b5cf6 28%, var(--border-strong));
|
||
background: color-mix(in srgb, #8b5cf6 16%, transparent);
|
||
color: #7c3aed;
|
||
}
|
||
|
||
.app-action-notify:hover {
|
||
background: color-mix(in srgb, #8b5cf6 22%, transparent);
|
||
border-color: color-mix(in srgb, #8b5cf6 40%, var(--border-strong));
|
||
}
|
||
|
||
.app-action-secondary {
|
||
border: 1px solid var(--border-strong);
|
||
background: var(--surface-elevated);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-action-secondary:hover {
|
||
background: var(--surface-secondary);
|
||
}
|
||
|
||
.app-action-ghost {
|
||
border: 1px solid transparent;
|
||
background: transparent;
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-action-ghost:hover {
|
||
background: var(--surface-secondary);
|
||
}
|
||
|
||
.app-menu-danger-item {
|
||
border: 1px solid transparent;
|
||
background: transparent;
|
||
color: var(--danger-foreground);
|
||
}
|
||
|
||
.app-menu-danger-item:hover {
|
||
background: var(--danger-soft);
|
||
}
|
||
|
||
.app-action-danger {
|
||
border: 1px solid color-mix(in srgb, var(--danger-foreground) 18%, var(--border-strong));
|
||
background: var(--surface-elevated);
|
||
color: #dc2626;
|
||
}
|
||
|
||
.app-action-danger:hover {
|
||
background: var(--danger-soft);
|
||
border-color: color-mix(in srgb, var(--danger-foreground) 24%, var(--border-strong));
|
||
}
|
||
|
||
.app-action-approve {
|
||
border: 1px solid color-mix(in srgb, #10b981 18%, var(--border-strong));
|
||
background: var(--surface-elevated);
|
||
color: #10b981;
|
||
}
|
||
|
||
.app-action-approve:hover {
|
||
background: var(--success-soft);
|
||
border-color: color-mix(in srgb, #10b981 24%, var(--border-strong));
|
||
}
|
||
|
||
.document-card {
|
||
container-type: inline-size;
|
||
}
|
||
|
||
.payroll-admin-records-responsive {
|
||
container-type: inline-size;
|
||
}
|
||
|
||
.procurement-detail-layout {
|
||
container-type: inline-size;
|
||
}
|
||
|
||
.procurement-detail-layout-grid {
|
||
display: grid;
|
||
grid-auto-flow: dense;
|
||
align-items: start;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.procurement-detail-layout-full {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.procurement-detail-support-grid {
|
||
display: grid;
|
||
align-items: start;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.procurement-items-table-row {
|
||
display: grid;
|
||
grid-template-columns:
|
||
minmax(0, 1.5fr)
|
||
minmax(0, 0.7fr)
|
||
minmax(0, 0.7fr)
|
||
minmax(0, 0.9fr)
|
||
minmax(0, 1fr)
|
||
minmax(0, 1.15fr)
|
||
minmax(0, 0.9fr);
|
||
}
|
||
|
||
.procurement-items-table-row > * {
|
||
min-width: 0;
|
||
border-right: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.procurement-items-table-row > :last-child {
|
||
border-right: 0;
|
||
}
|
||
|
||
.procurement-item-wide-rowgroup {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.procurement-item-wide-main {
|
||
grid-row: 1;
|
||
}
|
||
|
||
.procurement-item-wide-processing {
|
||
grid-row: 1;
|
||
}
|
||
|
||
.procurement-item-wide-details {
|
||
display: grid;
|
||
grid-row: 2;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.procurement-item-wide-description {
|
||
grid-row: 2;
|
||
}
|
||
|
||
.procurement-item-wide-comments {
|
||
grid-row: 3;
|
||
}
|
||
|
||
@container (min-width: 44rem) {
|
||
.procurement-detail-layout-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.procurement-detail-support-grid {
|
||
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
|
||
}
|
||
}
|
||
|
||
@container (min-width: 74rem) {
|
||
.procurement-detail-layout-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.procurement-detail-support-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.procurement-detail-support-comments {
|
||
grid-column: span 2 / span 2;
|
||
}
|
||
}
|
||
|
||
.payroll-admin-toolbar-responsive {
|
||
container-type: inline-size;
|
||
}
|
||
|
||
.payroll-admin-toolbar-layout {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.payroll-admin-toolbar-search,
|
||
.payroll-admin-toolbar-status,
|
||
.payroll-admin-toolbar-sort,
|
||
.payroll-admin-toolbar-actions {
|
||
width: 100%;
|
||
}
|
||
|
||
@container (min-width: 42rem) {
|
||
.payroll-admin-toolbar-layout {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.payroll-admin-toolbar-search {
|
||
width: auto;
|
||
flex: 1 1 0%;
|
||
}
|
||
|
||
.payroll-admin-toolbar-status {
|
||
width: 11rem;
|
||
}
|
||
|
||
.payroll-admin-toolbar-sort {
|
||
width: 12rem;
|
||
}
|
||
|
||
.payroll-admin-toolbar-actions {
|
||
width: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.payroll-admin-toolbar-actions > .app-action-primary {
|
||
flex: none;
|
||
}
|
||
}
|
||
|
||
.payroll-admin-records-table {
|
||
display: none;
|
||
}
|
||
|
||
@container (min-width: 58rem) {
|
||
.payroll-admin-records-compact {
|
||
display: none;
|
||
}
|
||
|
||
.payroll-admin-records-table {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.document-card-detail-action {
|
||
display: none;
|
||
}
|
||
|
||
@container (min-width: 20rem) {
|
||
.document-card-detail-action {
|
||
display: inline-flex;
|
||
}
|
||
}
|
||
|
||
@container (min-width: 32rem) {
|
||
.document-card-actions {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.document-card-acknowledge {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.app-action-reject {
|
||
border: 1px solid var(--border-strong);
|
||
background: var(--surface-elevated);
|
||
color: var(--danger-foreground);
|
||
}
|
||
|
||
.app-action-reject:hover {
|
||
background: var(--danger-soft);
|
||
border-color: color-mix(in srgb, var(--danger-foreground) 24%, var(--border-strong));
|
||
}
|
||
|
||
.app-selected {
|
||
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
|
||
background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
|
||
color: var(--foreground);
|
||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 10%, transparent);
|
||
}
|
||
|
||
.app-selected-soft {
|
||
background: color-mix(in srgb, var(--accent-primary) 10%, var(--surface-secondary));
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-pill {
|
||
border: 1px solid transparent;
|
||
background: var(--surface-secondary);
|
||
color: var(--foreground);
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
overflow-wrap: anywhere;
|
||
text-align: center;
|
||
white-space: normal;
|
||
}
|
||
|
||
.app-pill:hover {
|
||
background: var(--surface-tertiary);
|
||
}
|
||
|
||
.app-pill-active {
|
||
border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
|
||
background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
|
||
color: var(--foreground);
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
overflow-wrap: anywhere;
|
||
text-align: center;
|
||
white-space: normal;
|
||
}
|
||
|
||
.app-pill-count {
|
||
background: color-mix(in srgb, var(--foreground) 8%, var(--surface-secondary));
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.app-pill-count-active {
|
||
background: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
|
||
color: var(--accent-primary-strong);
|
||
}
|
||
|
||
.app-unread-surface {
|
||
background: color-mix(in srgb, var(--accent-primary) 8%, var(--surface-primary));
|
||
}
|
||
|
||
.app-dot-accent {
|
||
background: var(--accent-primary);
|
||
}
|
||
|
||
.app-feedback-danger {
|
||
border: 1px solid color-mix(in srgb, #ef4444 20%, var(--border-subtle));
|
||
background: var(--danger-soft);
|
||
color: #b91c1c;
|
||
}
|
||
|
||
.app-feedback-success {
|
||
border: 1px solid color-mix(in srgb, #10b981 18%, var(--border-subtle));
|
||
background: var(--success-soft);
|
||
color: #047857;
|
||
}
|
||
|
||
.app-feedback-warning {
|
||
border: 1px solid color-mix(in srgb, #f59e0b 20%, var(--border-subtle));
|
||
background: var(--warning-soft);
|
||
color: var(--warning-foreground);
|
||
}
|
||
|
||
.app-feedback-approval {
|
||
border: 1px solid color-mix(in srgb, #f97316 24%, var(--border-subtle));
|
||
background: color-mix(in srgb, #f97316 14%, var(--surface-primary));
|
||
color: #c2410c;
|
||
}
|
||
|
||
.app-feedback-notify {
|
||
border: 1px solid color-mix(in srgb, #8b5cf6 24%, var(--border-subtle));
|
||
background: color-mix(in srgb, #8b5cf6 14%, var(--surface-primary));
|
||
color: #7c3aed;
|
||
}
|
||
|
||
.attendance-matrix-cell--technical {
|
||
background: color-mix(in srgb, #ef4444 14%, var(--surface-primary));
|
||
color: #b91c1c;
|
||
}
|
||
|
||
.attendance-matrix-cell--technical:hover {
|
||
background: color-mix(in srgb, #ef4444 20%, var(--surface-primary));
|
||
}
|
||
|
||
.attendance-matrix-cell--issue {
|
||
background: color-mix(in srgb, #f59e0b 20%, var(--surface-primary));
|
||
color: #92400e;
|
||
}
|
||
|
||
.attendance-matrix-cell--issue:hover {
|
||
background: color-mix(in srgb, #f59e0b 28%, var(--surface-primary));
|
||
}
|
||
|
||
.attendance-matrix-cell--overtime {
|
||
background: color-mix(in srgb, #10b981 16%, var(--surface-primary));
|
||
color: #047857;
|
||
}
|
||
|
||
.attendance-matrix-cell--overtime:hover {
|
||
background: color-mix(in srgb, #10b981 22%, var(--surface-primary));
|
||
}
|
||
|
||
.attendance-matrix-cell--non-working {
|
||
background: color-mix(in srgb, #64748b 14%, var(--surface-primary));
|
||
color: #475569;
|
||
}
|
||
|
||
.attendance-matrix-cell--non-working:hover {
|
||
background: color-mix(in srgb, #64748b 20%, var(--surface-primary));
|
||
}
|
||
|
||
.attendance-matrix-cell--normal {
|
||
background: var(--surface-primary);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.attendance-matrix-cell--normal:hover,
|
||
.attendance-matrix-cell--empty:hover {
|
||
background: var(--surface-tertiary);
|
||
}
|
||
|
||
.attendance-matrix-cell--empty {
|
||
background: transparent;
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.attendance-matrix-date--weekend {
|
||
background: color-mix(in srgb, #64748b 10%, var(--surface-secondary));
|
||
color: #64748b;
|
||
}
|
||
|
||
.attendance-matrix-issue-pill {
|
||
border-color: color-mix(in srgb, #f59e0b 24%, var(--border-subtle));
|
||
background: color-mix(in srgb, #f59e0b 16%, var(--surface-primary));
|
||
color: #92400e;
|
||
}
|
||
|
||
.attendance-matrix-manual-pill {
|
||
border: 1px solid color-mix(in srgb, #8b5cf6 26%, var(--border-subtle));
|
||
background: color-mix(in srgb, #8b5cf6 12%, var(--surface-primary));
|
||
color: #6d28d9;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-cell--technical {
|
||
background: color-mix(in srgb, #ef4444 18%, transparent);
|
||
color: #fecaca;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-cell--technical:hover {
|
||
background: color-mix(in srgb, #ef4444 24%, transparent);
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-cell--issue {
|
||
background: color-mix(in srgb, #f59e0b 18%, transparent);
|
||
color: #fde68a;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-cell--issue:hover {
|
||
background: color-mix(in srgb, #f59e0b 24%, transparent);
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-cell--overtime {
|
||
background: color-mix(in srgb, #10b981 17%, transparent);
|
||
color: #a7f3d0;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-cell--overtime:hover {
|
||
background: color-mix(in srgb, #10b981 23%, transparent);
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-cell--non-working {
|
||
background: color-mix(in srgb, #64748b 18%, transparent);
|
||
color: #cbd5e1;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-cell--non-working:hover {
|
||
background: color-mix(in srgb, #64748b 24%, transparent);
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-date--weekend {
|
||
background: color-mix(in srgb, #64748b 16%, var(--surface-secondary));
|
||
color: #cbd5e1;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-issue-pill {
|
||
border-color: color-mix(in srgb, #f59e0b 32%, var(--border-subtle));
|
||
background: color-mix(in srgb, #f59e0b 16%, transparent);
|
||
color: #fde68a;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .attendance-matrix-manual-pill {
|
||
border-color: color-mix(in srgb, #a78bfa 34%, var(--border-subtle));
|
||
background: color-mix(in srgb, #8b5cf6 16%, transparent);
|
||
color: #ddd6fe;
|
||
}
|
||
|
||
.reaction-picker-surface {
|
||
border: 1px solid var(--border-subtle);
|
||
background: var(--surface-secondary);
|
||
}
|
||
|
||
.reaction-picker-modal .EmojiPickerReact,
|
||
.reaction-picker-modal aside.EmojiPickerReact {
|
||
--epr-bg-color: var(--surface-secondary);
|
||
--epr-picker-border-color: var(--border-subtle);
|
||
--epr-text-color: var(--muted-foreground);
|
||
--epr-search-input-bg-color: var(--surface-primary);
|
||
--epr-search-input-bg-color-active: var(--surface-primary);
|
||
--epr-search-border-color: var(--border-strong);
|
||
--epr-search-border-color-active: var(--accent-primary);
|
||
--epr-search-input-text-color: var(--foreground);
|
||
--epr-search-input-placeholder-color: var(--muted-foreground);
|
||
--epr-hover-bg-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
|
||
--epr-hover-bg-color-reduced-opacity: color-mix(in srgb, var(--accent-primary) 10%, transparent);
|
||
--epr-focus-bg-color: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
|
||
--epr-highlight-color: var(--accent-primary);
|
||
--epr-category-label-bg-color: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
|
||
--epr-category-label-text-color: var(--muted-foreground);
|
||
--epr-category-icon-active-color: var(--accent-primary-strong);
|
||
--epr-emoji-variation-picker-bg-color: var(--surface-secondary);
|
||
--epr-preview-border-color: var(--border-subtle);
|
||
--epr-dark-bg-color: var(--surface-secondary);
|
||
--epr-dark-picker-border-color: var(--border-subtle);
|
||
--epr-dark-text-color: var(--muted-foreground);
|
||
--epr-dark-search-input-bg-color: var(--surface-primary);
|
||
--epr-dark-search-input-bg-color-active: var(--surface-primary);
|
||
--epr-dark-category-label-bg-color: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
|
||
--epr-dark-hover-bg-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
|
||
--epr-dark-hover-bg-color-reduced-opacity: color-mix(in srgb, var(--accent-primary) 10%, transparent);
|
||
--epr-dark-focus-bg-color: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
|
||
--epr-dark-highlight-color: var(--accent-primary);
|
||
--epr-dark-category-icon-active-color: var(--accent-primary-strong);
|
||
border: none !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.reaction-picker-modal .EmojiPickerReact * {
|
||
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif !important;
|
||
}
|
||
|
||
.reaction-picker-modal .epr-search-container input {
|
||
background: var(--surface-primary) !important;
|
||
border: 1px solid var(--border-strong) !important;
|
||
color: var(--foreground) !important;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
|
||
}
|
||
|
||
.reaction-picker-modal .epr-search-container input::placeholder {
|
||
color: var(--muted-foreground) !important;
|
||
}
|
||
|
||
.reaction-picker-modal .epr-category-label {
|
||
font-size: 0.875rem !important;
|
||
font-weight: 600 !important;
|
||
letter-spacing: 0 !important;
|
||
text-transform: none !important;
|
||
}
|
||
|
||
.app-overlay {
|
||
background: rgba(2, 6, 23, 0.56);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
html[data-bs-theme="dark"] {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
html[data-bs-theme="light"] {
|
||
color-scheme: light;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .bg-white {
|
||
background-color: var(--surface-primary) !important;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .bg-gray-50,
|
||
html[data-bs-theme="dark"] .bg-slate-50 {
|
||
background-color: var(--surface-secondary) !important;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .bg-gray-100,
|
||
html[data-bs-theme="dark"] .bg-slate-100 {
|
||
background-color: var(--surface-tertiary) !important;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .text-gray-900,
|
||
html[data-bs-theme="dark"] .text-slate-900,
|
||
html[data-bs-theme="dark"] .text-gray-800 {
|
||
color: var(--foreground) !important;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .text-gray-700,
|
||
html[data-bs-theme="dark"] .text-gray-600,
|
||
html[data-bs-theme="dark"] .text-gray-500,
|
||
html[data-bs-theme="dark"] .text-gray-400,
|
||
html[data-bs-theme="dark"] .text-slate-600,
|
||
html[data-bs-theme="dark"] .text-slate-500,
|
||
html[data-bs-theme="dark"] .text-slate-400 {
|
||
color: var(--muted-foreground) !important;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .border-gray-100,
|
||
html[data-bs-theme="dark"] .border-gray-200,
|
||
html[data-bs-theme="dark"] .border-gray-300,
|
||
html[data-bs-theme="dark"] .border-slate-100,
|
||
html[data-bs-theme="dark"] .border-slate-200 {
|
||
border-color: var(--border-subtle) !important;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .ring-gray-100,
|
||
html[data-bs-theme="dark"] .ring-gray-200,
|
||
html[data-bs-theme="dark"] .ring-slate-100,
|
||
html[data-bs-theme="dark"] .ring-slate-200 {
|
||
--tw-ring-color: var(--border-subtle) !important;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .shadow-sm,
|
||
html[data-bs-theme="dark"] .shadow-lg,
|
||
html[data-bs-theme="dark"] .shadow-xl {
|
||
box-shadow: var(--shadow-card) !important;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .tasks-board-column-header,
|
||
html[data-bs-theme="dark"] .tasks-board-subcolumn-header {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .tasks-board-column-header-sticky {
|
||
background: var(--surface-elevated);
|
||
}
|
||
|
||
html[data-bs-theme="dark"] .tasks-board-group-header-sticky {
|
||
background: var(--surface-elevated);
|
||
}
|
||
|
||
|
||
/* Скрытые полосы прокрутки везде */
|
||
* {
|
||
scrollbar-width: none; /* Firefox */
|
||
-ms-overflow-style: none; /* IE/Edge */
|
||
}
|
||
*::-webkit-scrollbar {
|
||
display: none; /* Chrome/Safari/Opera */
|
||
}
|
||
|
||
.app-tabs-scroll {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: color-mix(in srgb, var(--accent-primary) 45%, var(--surface-tertiary)) transparent;
|
||
-ms-overflow-style: auto;
|
||
}
|
||
|
||
.app-tabs-scroll::-webkit-scrollbar {
|
||
display: block;
|
||
height: 6px;
|
||
}
|
||
|
||
.app-tabs-scroll::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.app-tabs-scroll::-webkit-scrollbar-thumb {
|
||
border-radius: 9999px;
|
||
background: color-mix(in srgb, var(--accent-primary) 42%, var(--surface-tertiary));
|
||
}
|
||
|
||
.app-tabs-scroll::-webkit-scrollbar-thumb:hover {
|
||
background: var(--accent-primary);
|
||
}
|
||
|
||
.app-table-scroll {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: color-mix(in srgb, var(--accent-primary) 48%, var(--surface-tertiary)) var(--surface-secondary);
|
||
-ms-overflow-style: auto;
|
||
}
|
||
|
||
.app-table-scroll::-webkit-scrollbar {
|
||
display: block;
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
.app-table-scroll::-webkit-scrollbar-track {
|
||
background: var(--surface-secondary);
|
||
}
|
||
|
||
.app-table-scroll::-webkit-scrollbar-thumb {
|
||
border: 2px solid var(--surface-secondary);
|
||
border-radius: 9999px;
|
||
background: color-mix(in srgb, var(--accent-primary) 48%, var(--surface-tertiary));
|
||
}
|
||
|
||
.app-table-scroll::-webkit-scrollbar-thumb:hover {
|
||
background: var(--accent-primary);
|
||
}
|
||
|
||
.tasks-board-scroll,
|
||
.tasks-column-scroll {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: color-mix(in srgb, var(--accent-primary) 42%, var(--surface-tertiary)) transparent;
|
||
-ms-overflow-style: auto;
|
||
}
|
||
|
||
/* Карточка остаётся в DOM с полной высотой для стабильного скролла, но браузер
|
||
может не выполнять её layout/paint далеко за пределами видимой области. */
|
||
.tasks-task-card {
|
||
content-visibility: auto;
|
||
contain-intrinsic-size: auto 10rem;
|
||
}
|
||
|
||
.tasks-board-scroll::-webkit-scrollbar,
|
||
.tasks-column-scroll::-webkit-scrollbar {
|
||
display: block;
|
||
}
|
||
|
||
.tasks-board-scroll::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
.tasks-column-scroll::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.tasks-board-scroll::-webkit-scrollbar-track,
|
||
.tasks-column-scroll::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.tasks-board-scroll::-webkit-scrollbar-thumb,
|
||
.tasks-column-scroll::-webkit-scrollbar-thumb {
|
||
border-radius: 9999px;
|
||
background: color-mix(in srgb, var(--accent-primary) 38%, var(--surface-tertiary));
|
||
}
|
||
|
||
.tasks-board-scroll::-webkit-scrollbar-thumb:hover,
|
||
.tasks-column-scroll::-webkit-scrollbar-thumb:hover {
|
||
background: var(--accent-primary);
|
||
}
|
||
|
||
/* На мобильной доске каждая колонка, подколонка и ячейка дорожки имеет
|
||
собственную область прокрутки. contain не передаёт скролл всей странице,
|
||
когда пользователь дошёл до начала или конца конкретной ленты. */
|
||
@media (max-width: 79.999rem) {
|
||
.tasks-task-card,
|
||
.tasks-board-column-header,
|
||
.tasks-board-subcolumn-header {
|
||
-webkit-touch-callout: none;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.tasks-task-card img,
|
||
.tasks-board-column-header img,
|
||
.tasks-board-subcolumn-header img {
|
||
-webkit-user-drag: none;
|
||
}
|
||
|
||
.tasks-board-column-header,
|
||
.tasks-board-subcolumn-header {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.tasks-mobile-lane-viewport {
|
||
height: var(--tasks-mobile-lane-height, calc(100dvh - 18rem));
|
||
min-height: var(--tasks-mobile-lane-height, calc(100dvh - 18rem));
|
||
max-height: var(--tasks-mobile-lane-height, calc(100dvh - 18rem));
|
||
}
|
||
|
||
.tasks-mobile-lane-scroll {
|
||
overscroll-behavior-y: contain;
|
||
scrollbar-gutter: stable;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
}
|
||
|
||
@media (min-width: 80rem) {
|
||
.tasks-board-column-group {
|
||
--tasks-board-stack-gap: 0.5rem;
|
||
--tasks-board-column-header-height: 4rem;
|
||
--tasks-board-subcolumn-header-height: 4rem;
|
||
--tasks-board-group-header-stack-height: calc(
|
||
var(--tasks-board-column-header-height, 4rem)
|
||
+ var(--tasks-board-stack-gap, 0.5rem)
|
||
+ var(--tasks-board-subcolumn-header-height, 4rem)
|
||
+ 1rem
|
||
+ 1px
|
||
);
|
||
}
|
||
|
||
.tasks-board-column-header-sticky {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 30;
|
||
padding-bottom: var(--tasks-board-stack-gap, 0.5rem);
|
||
background: var(--background);
|
||
}
|
||
|
||
.tasks-board-column-header-sticky-standalone {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.tasks-board-column-header {
|
||
min-height: var(--tasks-board-column-header-height, 4rem);
|
||
background: var(--surface-elevated);
|
||
}
|
||
|
||
.tasks-board-group-header-sticky {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 30;
|
||
background: var(--background);
|
||
}
|
||
|
||
.tasks-board-subcolumn-header-row {
|
||
min-height: var(--tasks-board-subcolumn-header-height, 4rem);
|
||
}
|
||
|
||
.tasks-board-subcolumn-header-surface::after {
|
||
position: absolute;
|
||
right: -1px;
|
||
bottom: -0.75rem;
|
||
left: -1px;
|
||
height: 0.75rem;
|
||
border: 1px solid transparent;
|
||
border-top: 0;
|
||
border-radius: 0 0 0.75rem 0.75rem;
|
||
pointer-events: none;
|
||
background: transparent;
|
||
content: "";
|
||
}
|
||
|
||
.tasks-board-column-group[data-content-bottom-reached="true"] .tasks-board-subcolumn-header-surface::after {
|
||
border-color: var(--border-subtle);
|
||
border-top-color: transparent;
|
||
background: var(--surface-secondary);
|
||
}
|
||
|
||
.tasks-board-lane-header {
|
||
position: sticky;
|
||
top: var(--tasks-board-group-header-stack-height, calc(9.5rem + 1px));
|
||
z-index: 15;
|
||
background: var(--surface-secondary);
|
||
}
|
||
|
||
.tasks-board-content-section-continuous {
|
||
margin-bottom: -3.9375rem;
|
||
}
|
||
|
||
.tasks-board-content-section-continuous::after {
|
||
display: block;
|
||
height: 3.9375rem;
|
||
content: "";
|
||
}
|
||
|
||
}
|