/*
* Шервуд Хоум СтройКонтроль - корпоративный стиль Sherwood Home
* sherwoodhome.ru - цвета: тёмно-зелёный #104b2d, #186b2b, акцент #c9a227
*/
/* Font loaded via in base.html for non-blocking render */
:root {
color-scheme: light dark;
/* Brand accents (keep Sherwood DNA) */
--brand-green: #104b2d;
--brand-green-2: #186b2b;
--brand-gold: #c9a227;
--brand-gold-hover: #b8860b;
/* Surfaces (light) */
--color-bg: #f6f7f9;
--color-surface: #ffffff;
--color-surface-2: #fbfcfd;
--color-elevated: rgba(255,255,255,0.92);
/* Text (light) */
--color-text: #0f172a;
--color-text-muted: #475569;
--color-text-soft: #64748b;
/* Borders */
--color-border: rgba(15, 23, 42, 0.12);
--color-border-strong: rgba(15, 23, 42, 0.18);
/* Accents */
--color-accent: var(--brand-gold);
--color-accent-hover: var(--brand-gold-hover);
--color-accent-contrast: #0b0f1a;
/* Status */
--color-success: #16a34a;
--color-warning: #f59e0b;
--color-danger: #ef4444;
/* Shadows */
--shadow-1: 0 1px 1px rgba(15,23,42,0.04), 0 8px 20px rgba(15,23,42,0.08);
--shadow-2: 0 2px 3px rgba(15,23,42,0.06), 0 16px 40px rgba(15,23,42,0.14);
/* Radius */
--radius: 12px;
--radius-sm: 10px;
--radius-lg: 16px;
--touch-min: 44px;
--layout-max-width: 1240px;
--content-gutter: 1.25rem;
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.25rem;
--space-xl: 1.5rem;
--control-height: 38px;
--control-height-sm: 32px;
--form-compact-padding-y: 0.42rem;
--form-compact-padding-x: 0.75rem;
--form-compact-min-height: 38px;
--btn-compact-padding-y: 0.46rem;
--btn-compact-padding-x: 0.95rem;
--btn-small-compact-padding-y: 0.25rem;
--btn-small-compact-padding-x: 0.5rem;
/* Typography */
--font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
/* Focus */
--focus-ring: rgba(30, 64, 175, 0.20);
--focus-ring-strong: rgba(201, 162, 39, 0.35);
/* Buttons */
--btn-shadow: 0 1px 1px rgba(15,23,42,0.05), 0 12px 28px rgba(15,23,42,0.10);
--btn-shadow-pressed: 0 1px 1px rgba(15,23,42,0.06);
/* Header */
--header-bg: rgba(15, 23, 42, 0.92);
--header-fg: rgba(255, 255, 255, 0.92);
--header-fg-soft: rgba(255, 255, 255, 0.78);
--header-border: rgba(255,255,255,0.10);
/* Dark accent (header nav, badges, links) */
--color-dark: #0f172a;
--color-ink-strong: var(--color-text);
/* Card surface (shared alias) */
--color-card: var(--color-surface);
/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
/*
* Единая типографика интерфейса (как на проде: body + compact-mode в base.html).
* Все формы, кнопки и заголовки страниц опираются на эти переменные - локально и на сервере одинаково.
*/
--typo-document: 16px;
--typo-page-title: 1.35rem;
--typo-card-title: 1rem;
--typo-subtitle: 0.9rem;
--typo-body: 1rem;
--typo-label: 0.85rem;
--typo-control: 0.9rem;
--typo-hint: 0.8rem;
--typo-btn: 0.9rem;
--typo-btn-sm: 0.85rem;
--typo-secondary: 0.85rem;
--typo-caption: 0.82rem;
--typo-lead: 0.95rem;
--typo-micro: 0.78rem;
/* Компактные формы / тулбары (единая шкала ширин) */
--form-toolbar-gap-row: 0.65rem;
--form-toolbar-gap-col: 1rem;
--field-w-date: 11.75rem;
--field-w-num-sm: 7.5rem;
--field-w-num-md: 9.5rem;
--field-w-select-sm: 11rem;
--field-w-select-md: 16rem;
--field-w-select-lg: 20rem;
--field-w-email: 22rem;
--field-w-name-max: 24rem;
--field-amocrm-sub: 13.5rem;
--field-amocrm-tok: 20rem;
--field-w-year: 8.75rem;
--field-w-month: 10rem;
--field-w-month-nav: 11.25rem;
--field-w-stage-input: 17.5rem;
}
/*
* Масштаб UI: см. STROYCONTROL_UI_FONT_PLUS_PT и inject_ui_font_plus_pt в app.py.
* Корневой rem + N pt - масштабируются все --typo-* в rem; --typo-document → 1rem следует корню.
*/
html.ui-font-plus-pt {
font-size: calc(100% + var(--ui-font-plus-pt, 2pt));
--typo-document: 1rem;
}
@media (prefers-color-scheme: dark) {
:root {
/* Surfaces (dark) */
--color-bg: #0b1220;
--color-surface: rgba(17, 24, 39, 0.72);
--color-surface-2: rgba(17, 24, 39, 0.55);
--color-elevated: rgba(17, 24, 39, 0.85);
/* Text (dark) */
--color-text: rgba(248, 250, 252, 0.92);
--color-text-muted: rgba(226, 232, 240, 0.72);
--color-text-soft: rgba(148, 163, 184, 0.85);
/* Borders (dark) */
--color-border: rgba(148, 163, 184, 0.16);
--color-border-strong: rgba(148, 163, 184, 0.22);
/* Shadows (dark) */
--shadow-1: 0 1px 1px rgba(0,0,0,0.35), 0 18px 45px rgba(0,0,0,0.35);
--shadow-2: 0 2px 3px rgba(0,0,0,0.45), 0 28px 70px rgba(0,0,0,0.45);
/* Focus */
--focus-ring: rgba(96, 165, 250, 0.22);
/* Header */
--header-bg: rgba(2, 6, 23, 0.78);
--header-fg: rgba(248, 250, 252, 0.92);
--header-fg-soft: rgba(226, 232, 240, 0.72);
--header-border: rgba(148,163,184,0.16);
/* Dark accent (dark mode) */
--color-dark: #f8fafc;
--color-ink-strong: var(--color-text);
}
}
* {
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
font-size: var(--typo-document);
line-height: 1.55;
color: var(--color-text);
background: var(--color-bg);
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Skip-link: скрыт, виден при фокусе (Tab) */
.skip-link {
position: fixed;
left: -9999px;
top: 0.75rem;
z-index: 9999;
padding: 0.5rem 1rem;
background: var(--color-accent);
color: var(--color-accent-contrast);
font-weight: 600;
border-radius: var(--radius);
text-decoration: none;
}
.skip-link:focus {
left: 1rem;
}
/* Шапка - z-index чтобы раскрытое меню было поверх контента */
.header {
position: relative;
z-index: 1000;
background: var(--header-bg);
color: var(--header-fg);
padding: 0.65rem var(--content-gutter);
padding-top: max(0.65rem, env(safe-area-inset-top));
box-shadow: var(--shadow-1);
border-bottom: 1px solid var(--header-border);
backdrop-filter: saturate(140%) blur(14px);
}
.header-inner {
max-width: var(--layout-max-width);
margin: 0 auto;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 0.3rem 0.6rem;
}
.logo {
display: flex;
align-items: center;
gap: 0.6rem;
flex: 0 0 auto;
font-size: 1.2rem;
font-weight: 700;
color: var(--header-fg);
text-decoration: none;
}
.logo-img {
height: 32px;
width: auto;
max-width: 100%;
display: block;
}
.logo-text {
white-space: nowrap;
}
@media (max-width: 600px) {
.logo-text {
font-size: 1rem;
}
.logo-img {
height: 28px;
}
}
.nav {
display: flex;
flex-wrap: nowrap;
align-items: start;
gap: 0.15rem;
flex: 1 1 auto;
min-width: 0;
}
.nav-section {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.15rem;
min-width: 0;
}
.nav-section-primary {
flex: 1 1 0;
min-width: 0;
}
.nav-section-system {
flex: 0 0 auto;
min-width: max-content;
padding-left: 0.5rem;
margin-left: auto;
border-left: 1px solid rgba(255,255,255,0.15);
align-self: start;
z-index: 2;
}
.nav-section-items {
display: flex;
align-items: center;
gap: 0.1rem 0.15rem;
flex-wrap: wrap;
min-width: 0;
}
.nav-system-actions {
gap: 0.35rem;
justify-content: flex-end;
flex-wrap: nowrap;
}
/* Кнопка выхода - всегда справа, крупная для touch */
.btn-logout {
margin-left: 0;
min-height: var(--form-compact-min-height);
padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
color: var(--header-fg) !important;
border-color: rgba(255, 255, 255, 0.55);
}
.btn-logout:hover {
background: rgba(255, 255, 255, 0.2) !important;
border-color: #fff;
}
.impersonation-form {
margin: 0;
}
.impersonation-select {
min-width: 200px;
max-width: 280px;
min-height: var(--form-compact-min-height);
padding: var(--form-compact-padding-y) 0.7rem;
font-size: 0.88rem;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.35);
color: var(--header-fg);
border-radius: var(--radius-sm);
cursor: pointer;
}
.impersonation-select:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.5);
}
.impersonation-select option {
background: var(--color-surface);
color: var(--color-text);
}
/* Impersonation - максимальный контраст при любых стилях */
.impersonation-form-high-contrast .impersonation-select {
background: rgba(255, 255, 255, 0.95);
color: #0f172a;
border: 2px solid rgba(255, 255, 255, 0.9);
font-weight: 600;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.impersonation-form-high-contrast .impersonation-select:hover {
background: #fff;
border-color: #fff;
}
.mobile-impersonation-bar {
display: none;
}
/* Mobile impersonation panel - custom styled role picker */
.mobile-imp-panel {
width: 100%;
}
.mobile-imp-panel > summary { list-style: none; }
.mobile-imp-panel > summary::-webkit-details-marker { display: none; }
.mobile-imp-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.65rem 1rem;
cursor: pointer;
user-select: none;
background: rgba(255,255,255,0.06);
border-radius: var(--radius-sm);
}
.mobile-imp-toggle-label {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255,255,255,0.8);
}
.mobile-imp-toggle-arrow {
font-size: 0.9rem;
color: rgba(255,255,255,0.5);
transition: transform 0.2s;
}
.mobile-imp-panel[open] .mobile-imp-toggle-arrow {
transform: rotate(180deg);
}
.mobile-imp-list {
display: flex;
flex-direction: column;
gap: 0;
padding: 0.35rem 0;
max-height: 55vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-imp-group-label {
padding: 0.6rem 1rem 0.3rem;
margin-top: 0.25rem;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--brand-gold);
border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-imp-list .mobile-imp-group-label:first-child {
border-top: none;
margin-top: 0;
}
.mobile-imp-item {
display: flex;
flex-direction: column;
gap: 0.1rem;
width: 100%;
padding: 0.6rem 1rem;
background: none;
border: none;
text-align: left;
cursor: pointer;
color: rgba(255,255,255,0.88);
font-family: inherit;
transition: background 0.15s;
}
.mobile-imp-item:hover,
.mobile-imp-item:active {
background: rgba(255,255,255,0.1);
}
.mobile-imp-item-active {
background: rgba(255,255,255,0.12);
border-left: 3px solid var(--brand-gold);
padding-left: calc(1rem - 3px);
}
.mobile-imp-item-back {
color: var(--brand-gold);
font-weight: 600;
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 0.7rem;
margin-bottom: 0.15rem;
}
.mobile-imp-name {
font-size: 0.92rem;
font-weight: 600;
line-height: 1.25;
}
.mobile-imp-login {
font-weight: 400;
color: rgba(255,255,255,0.45);
font-size: 0.82rem;
}
.mobile-imp-sub {
font-size: 0.78rem;
font-weight: 500;
line-height: 1.2;
color: rgba(255,255,255,0.55);
max-width: 100%;
}
.mobile-imp-role {
display: inline-block;
align-self: flex-start;
margin-top: 0.15rem;
padding: 0.15rem 0.55rem;
font-size: 0.74rem;
font-weight: 600;
line-height: 1.2;
color: rgba(255,255,255,0.88);
background: rgba(255,255,255,0.1);
border-radius: 100px;
letter-spacing: 0.01em;
}
/* Desktop impersonation dropdown - styled list with role pills */
.desktop-imp-dropdown {
position: relative;
}
.desktop-imp-trigger {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
}
.desktop-imp-menu {
min-width: 280px;
max-height: min(70vh, 500px);
overflow-y: auto;
padding: 0.35rem 0 !important;
}
.desktop-imp-group-label {
padding: 0.5rem 0.75rem 0.2rem;
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--brand-gold);
border-top: 1px solid rgba(255,255,255,0.08);
}
.desktop-imp-menu .desktop-imp-group-label:first-child {
border-top: none;
}
.desktop-imp-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.1rem;
width: 100%;
padding: 0.45rem 0.75rem;
background: none;
border: none;
text-align: left;
cursor: pointer;
color: rgba(255,255,255,0.88);
font-family: inherit;
border-radius: 6px;
margin: 0 0.25rem;
width: calc(100% - 0.5rem);
transition: background 0.15s;
}
.desktop-imp-item:hover {
background: rgba(255,255,255,0.1);
}
.desktop-imp-item-active {
background: rgba(255,255,255,0.08);
border-left: 3px solid var(--brand-gold);
padding-left: calc(0.75rem - 3px);
}
.desktop-imp-item-back {
color: var(--brand-gold);
font-weight: 600;
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 0.5rem;
margin-bottom: 0.15rem;
border-radius: 0;
width: 100%;
margin-left: 0;
}
.desktop-imp-group-divider,
.mobile-imp-group-divider {
height: 1px;
margin: 0.35rem 0.5rem 0.5rem;
background: rgba(255, 255, 255, 0.12);
border: 0;
}
.desktop-imp-name {
font-size: 0.85rem;
font-weight: 600;
line-height: 1.25;
white-space: normal;
}
.desktop-imp-login {
font-weight: 400;
color: rgba(255,255,255,0.4);
font-size: 0.78rem;
}
.desktop-imp-sub {
font-size: 0.72rem;
font-weight: 500;
line-height: 1.2;
color: rgba(255,255,255,0.52);
max-width: 100%;
}
.desktop-imp-role {
display: inline-block;
align-self: flex-start;
margin-top: 0.1rem;
padding: 0.12rem 0.5rem;
font-size: 0.7rem;
font-weight: 600;
line-height: 1.2;
color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.1);
border-radius: 100px;
}
/* Связи ролей - верхний уровень доступа, выделение в навигации */
.nav-link-roles.active {
background: rgba(255, 255, 255, 0.28) !important;
color: #fff !important;
font-weight: 700;
box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}
.nav-link {
color: var(--header-fg-soft);
text-decoration: none;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0.22rem 0.5rem;
border-radius: var(--radius-sm);
white-space: nowrap;
font-size: 0.9rem;
line-height: 1.15;
transition: background 0.15s, color 0.15s;
}
/* Пункты меню переносятся на узком десктопе; «Выйти» остаётся справа */
@media (min-width: 1025px) {
.header {
padding: 0.4rem var(--content-gutter) 0.55rem;
padding-top: max(0.4rem, env(safe-area-inset-top));
}
.header-inner {
max-width: none;
align-items: start;
}
.logo-img {
height: 28px;
}
.nav-section-items:not(.nav-system-actions) {
flex-wrap: wrap;
row-gap: 0.2rem;
}
.nav-dropdown[open] {
z-index: 1100;
isolation: isolate;
}
.nav-dropdown[open] .nav-dropdown-menu {
z-index: 1100;
}
.nav-link {
min-height: 30px;
padding: 0.18rem 0.42rem;
font-size: 0.88rem;
}
.impersonation-select {
min-height: 30px;
max-width: 220px;
padding: 0.18rem 0.5rem;
font-size: 0.84rem;
}
.btn-logout {
min-height: 30px;
padding: 0.18rem 0.5rem;
font-size: 0.86rem;
}
}
/* (compact nav handled in base styles) */
.nav-link:hover, .nav-link.active {
background: rgba(255, 255, 255, 0.14);
color: var(--header-fg);
}
.nav-link:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.8);
outline-offset: 2px;
}
/* Выпадающие пункты меню в шапке (для админа - много разделов) */
.nav-dropdown {
position: relative;
}
.nav-dropdown > summary.nav-link {
list-style: none;
cursor: pointer;
user-select: none;
justify-content: space-between;
}
.nav-dropdown > summary.nav-link::-webkit-details-marker {
display: none;
}
.nav-dropdown > summary.nav-link::after {
content: "▾";
margin-left: 0.45rem;
font-size: 0.85em;
opacity: 0.9;
}
.nav-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: auto;
min-width: 260px;
width: max-content;
max-width: min(420px, calc(100vw - 24px));
padding: 0.45rem;
border-radius: var(--radius);
background: rgba(2, 6, 23, 0.86);
border: 1px solid rgba(148,163,184,0.18);
box-shadow: var(--shadow-2);
z-index: 200;
max-height: min(70vh, calc(100dvh - 24px));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
transform: translate(var(--dropdown-shift-x, 0px), var(--dropdown-shift-y, 0px));
}
.nav-dropdown[open] .nav-dropdown-menu {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.nav-dropdown-menu .nav-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: var(--control-height);
padding: 0.55rem 0.75rem;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
border-radius: 10px;
}
.nav-dropdown-menu .nav-link.active {
background: rgba(255, 255, 255, 0.22);
font-weight: 600;
}
/* Глобальный .nav-link:hover слишком похож на .active - визуально «два выбранных» пункта */
.nav-dropdown-menu .nav-link:hover:not(.active) {
background: rgba(255, 255, 255, 0.06);
color: var(--header-fg);
}
.nav-dropdown-menu .nav-link.active:hover {
background: rgba(255, 255, 255, 0.26);
color: var(--header-fg);
}
/* Заголовки секций (мастер/прораб/рабочий и др.) */
.flow-section-title {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
/* Мобильные: dropdown открывается поверх контента и не растягивает шапку */
@media (max-width: 1024px) {
.nav-dropdown > summary.nav-link::after {
margin-left: auto;
}
.nav-dropdown[open] > summary.nav-link {
background: rgba(255, 255, 255, 0.14);
color: var(--header-fg);
}
.nav-dropdown-menu .nav-link {
padding: 0.75rem 1rem;
border-radius: 10px;
}
}
.nav-badge {
display: inline-block;
min-width: 1.25em;
padding: 0.15em 0.4em;
margin-left: 0.35rem;
font-size: 0.8rem;
font-weight: 600;
background: var(--color-danger);
color: #fff;
border-radius: 10px;
vertical-align: middle;
}
.project-badge {
display: inline-block;
min-width: 1.25em;
padding: 0.15em 0.4em;
margin-left: 0.25rem;
font-size: 0.8rem;
font-weight: 600;
background: var(--color-danger);
color: #fff;
border-radius: 10px;
vertical-align: middle;
}
.project-card-mini .project-badge,
.project-card .project-badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
margin: 0;
z-index: 10;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.project-badge-corner {
top: 0.4rem;
right: 0.4rem;
}
/* Кнопки */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
min-height: var(--form-compact-min-height);
font-size: var(--typo-btn);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.005em;
text-align: center;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
text-decoration: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
box-shadow: var(--btn-shadow);
transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.btn:focus {
outline: none;
}
.btn:focus-visible {
box-shadow: 0 0 0 3px var(--focus-ring), var(--btn-shadow);
}
.btn:active {
transform: translateY(1px);
box-shadow: var(--btn-shadow-pressed);
}
.btn:hover {
transform: translateY(-1px);
}
.btn[disabled],
.btn.disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-primary {
background: var(--color-accent);
color: #fff;
border-color: rgba(0,0,0,0.06);
}
.btn-primary:hover {
background: var(--color-accent-hover);
}
.btn-primary:focus-visible {
box-shadow: 0 0 0 3px var(--focus-ring-strong), var(--btn-shadow);
}
.btn-outline {
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-border-strong);
box-shadow: none;
}
.btn-outline:hover {
background: rgba(15, 23, 42, 0.04);
border-color: var(--color-border-strong);
}
@media (prefers-color-scheme: dark) {
.btn-outline:hover {
background: rgba(148, 163, 184, 0.10);
}
}
.btn-sm {
min-height: 32px;
padding: 0.25rem 0.65rem;
font-size: var(--typo-btn-sm);
}
.btn-block {
width: 100%;
}
.btn-small {
min-height: var(--control-height-sm);
padding: var(--btn-small-compact-padding-y) var(--btn-small-compact-padding-x);
font-size: var(--typo-btn-sm);
font-weight: 600;
box-shadow: none;
}
.btn-danger {
background: var(--color-danger);
color: #fff;
border: none;
border-color: rgba(0,0,0,0.06);
}
.btn-danger:hover {
background: #dc2626;
}
.btn-danger:focus-visible {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
}
.btn-danger[disabled],
.btn-danger.disabled {
background: #fca5a5;
color: #fff;
cursor: not-allowed;
pointer-events: none;
}
.btn-action-edit {
background: rgba(37, 99, 235, 0.10);
border-color: rgba(37, 99, 235, 0.18);
color: #1d4ed8;
box-shadow: none;
}
.btn-action-edit:hover {
background: rgba(37, 99, 235, 0.16);
border-color: rgba(37, 99, 235, 0.26);
color: #1e40af;
}
.btn-action-delete {
background: rgba(220, 38, 38, 0.08);
border: 1px solid rgba(220, 38, 38, 0.14);
color: #dc2626;
box-shadow: none;
}
.btn-action-delete:hover {
background: rgba(220, 38, 38, 0.14);
border-color: rgba(220, 38, 38, 0.2);
color: #b91c1c;
}
.work-items-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.45rem;
flex-wrap: wrap;
}
.work-qr-btn,
.worker-qr-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
}
.work-qr-btn {
min-width: 38px;
padding-inline: 0.6rem;
}
.qr-mini-icon {
width: 16px;
height: 16px;
display: inline-block;
border-radius: 4px;
background:
linear-gradient(#111827 0 0) left top / 5px 5px no-repeat,
linear-gradient(#111827 0 0) right top / 5px 5px no-repeat,
linear-gradient(#111827 0 0) left bottom / 5px 5px no-repeat,
linear-gradient(#111827 0 0) right bottom / 5px 5px no-repeat,
linear-gradient(#111827 0 0) center / 4px 4px no-repeat,
linear-gradient(#111827 0 0) 70% 45% / 3px 3px no-repeat,
linear-gradient(#111827 0 0) 38% 72% / 3px 3px no-repeat;
box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.14);
}
.qr-display-modal,
.worker-qr-scan-modal {
background: rgba(255, 255, 255, 0.97);
border: 1px solid rgba(148, 163, 184, 0.28);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
.qr-display-meta {
margin-bottom: 1rem;
}
.qr-display-meta strong,
.qr-display-meta span {
display: block;
}
.qr-display-meta span {
margin-top: 0.2rem;
color: var(--color-text-muted);
}
.qr-display-canvas-wrap {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.qr-display-canvas {
width: min(320px, 100%);
height: auto;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.2);
}
/* Хлебные крошки */
.breadcrumbs {
max-width: 1200px;
width: 100%;
min-width: 0;
margin: 0 auto;
padding: 0.75rem 1rem;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.breadcrumbs a {
color: var(--color-text);
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Основной контент */
.main {
flex: 1;
max-width: var(--layout-max-width);
width: 100%;
min-width: 0;
margin: 0 auto;
padding: var(--space-lg) var(--content-gutter);
}
/* TV-режим: без шапки, на весь экран */
body.tv-mode .main {
max-width: none;
padding: 0.5rem 1rem;
}
/* Сообщения */
.flash-messages {
margin-bottom: 1rem;
}
.flash {
padding: 0.75rem 1rem;
border-radius: var(--radius);
margin-bottom: 0.5rem;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-1);
}
.flash-success {
border-color: rgba(22, 163, 74, 0.30);
background: rgba(22, 163, 74, 0.10);
color: var(--color-text);
}
.flash-error {
border-color: rgba(239, 68, 68, 0.30);
background: rgba(239, 68, 68, 0.10);
color: var(--color-text);
}
.flash-warning {
border-color: rgba(245, 158, 11, 0.35);
background: rgba(245, 158, 11, 0.12);
color: var(--color-text);
}
.flash-info {
border-color: rgba(96, 165, 250, 0.35);
background: rgba(96, 165, 250, 0.12);
color: var(--color-text);
}
/* Всплывающее уведомление (toast) */
.toast {
position: fixed;
left: 50%;
bottom: 20px;
transform: translateX(-50%) translateY(20px);
max-width: min(720px, calc(100% - 32px));
background: rgba(2, 6, 23, 0.86);
color: var(--header-fg);
border: 1px solid rgba(148,163,184,0.18);
padding: 0.75rem 1rem;
border-radius: 999px;
box-shadow: var(--shadow-2);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 400;
font-weight: 600;
text-align: center;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.toast.toast-error {
background: rgba(185, 28, 28, 0.92);
border-color: rgba(239, 68, 68, 0.3);
}
.toast.toast-success {
background: rgba(21, 128, 61, 0.92);
border-color: rgba(22, 163, 74, 0.3);
}
/* Страница */
.page-header {
margin-bottom: var(--space-lg);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-sm) var(--space-md);
}
.page-header h1 {
margin: 0;
font-size: var(--typo-page-title);
line-height: 1.12;
}
.page-header .subtitle {
flex-basis: 100%;
}
.page-header-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.page-header-actions .btn {
white-space: normal;
}
/* TV-dashboard header: everything in one row */
.tv-dash-header,
.page-header:has(.tv-dash-actions) {
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem 0.75rem;
}
.tv-dash-actions {
flex-wrap: nowrap;
flex-shrink: 0;
}
.tv-dash-actions .btn {
white-space: nowrap;
}
.tv-dash-label {
white-space: nowrap;
font-size: var(--text-sm);
font-weight: 600;
}
.tv-dash-select {
width: auto;
min-width: 90px;
}
@media (max-width: 768px) {
.tv-dash-header,
.page-header:has(.tv-dash-actions) {
flex-wrap: wrap;
}
.tv-dash-actions {
flex-basis: 100%;
flex-wrap: wrap;
justify-content: flex-start;
}
}
.page-header-with-actions .theme-toggle {
margin-left: auto;
}
.page-header-actions-sep {
width: 1px;
height: 1.5em;
background: var(--color-border);
margin: 0 0.25rem;
}
.subtitle {
margin: 0;
color: var(--color-text-muted);
font-size: var(--typo-subtitle);
}
/* Карточки */
.card {
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-1);
padding: 1.15rem 1.25rem;
margin-bottom: var(--space-lg);
min-width: 0;
overflow-wrap: break-word;
}
.card h2 {
margin: 0 0 var(--space-md) 0;
font-size: var(--typo-card-title);
line-height: 1.2;
}
.card-meta {
margin-top: 0.75rem;
color: var(--color-text-muted);
font-size: var(--typo-subtitle);
}
.form-hint {
margin-top: 0.35rem;
color: var(--color-text-muted);
font-size: var(--typo-hint);
}
.amocrm-leads-card {
background: var(--color-surface-2);
}
.amocrm-filters {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.amocrm-filters-compact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 0.5rem 0.6rem;
align-items: end;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 0.6rem;
margin-bottom: 0.75rem;
}
.amocrm-filter-box {
min-width: 280px;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 0.75rem;
}
.amocrm-filters-compact .amocrm-filter-box {
min-width: 0;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
}
.amocrm-filters-compact .amocrm-filter-box label {
margin-bottom: 0.2rem;
font-size: 0.78rem;
line-height: 1.2;
color: var(--color-text-muted);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.amocrm-filters-compact .amocrm-filter-box .form-control {
min-height: var(--form-compact-min-height);
padding: var(--form-compact-padding-y) 0.6rem;
font-size: 0.9rem;
border-radius: 8px;
}
.amocrm-filters-compact .amocrm-filter-box .form-hint {
display: none;
}
.amocrm-filter-actions {
display: flex;
gap: 0.5rem;
align-items: flex-end;
}
.amocrm-filters-compact .amocrm-filter-actions {
grid-column: 1 / -1;
justify-content: flex-end;
gap: 0.45rem;
margin-top: 0.1rem;
}
.amocrm-filters-compact .amocrm-filter-actions .btn {
min-height: var(--form-compact-min-height);
padding: var(--btn-compact-padding-y) 0.75rem;
font-size: 0.88rem;
}
.amocrm-leads-table th,
.amocrm-leads-table td {
font-size: 0.92rem;
}
/* AmoCRM «Потенциальные клиенты»: не сжимать колонки - как у проектов, но без nth-child под 19 колонок */
table.users-table.amocrm-leads-table:not(.amocrm-projects-table) {
width: max-content;
min-width: 100%;
}
table.users-table.amocrm-leads-table:not(.amocrm-projects-table) tbody td {
white-space: nowrap;
vertical-align: middle;
}
table.users-table.amocrm-leads-table:not(.amocrm-projects-table) tbody td.amocrm-comment-cell {
white-space: normal;
max-width: 22rem;
overflow-wrap: break-word;
}
/* AmoCRM «Проекты Sherwood Home»: шапка переносится по словам; значения в строку, прокрутка по X */
.amocrm-projects-table.amocrm-leads-table {
width: max-content;
min-width: 100%;
}
/* Колонка широкая из-за tbody (nowrap) - перенос только у текста внутри span */
.amocrm-projects-table.amocrm-leads-table thead th {
text-align: center;
vertical-align: middle;
padding: 0.45rem 0.3rem;
}
.amocrm-projects-table.amocrm-leads-table thead th .amocrm-prj-th-text {
display: inline-block;
max-width: 9rem;
margin: 0 auto;
text-align: center;
white-space: normal !important;
word-break: normal;
overflow-wrap: break-word;
font-weight: 600;
font-size: 0.88rem;
line-height: 1.25;
}
.amocrm-projects-table.amocrm-leads-table thead th:first-child .amocrm-prj-th-text {
max-width: 2.25rem;
}
/* Перебить глобальный .users-table th { white-space: nowrap } */
table.users-table.amocrm-leads-table.amocrm-projects-table > thead > tr > th {
white-space: normal !important;
}
.amocrm-projects-table.amocrm-leads-table tbody td {
white-space: nowrap;
vertical-align: middle;
}
/* Центр: дата заключения; площадь и суммы; итог договора; даты */
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(2),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(8),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(9),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(10),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(11),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(12),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(14),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(15),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(16),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(17),
.amocrm-projects-table.amocrm-leads-table tbody td:nth-child(18) {
text-align: center;
}
.amocrm-report-view {
display: none;
}
.amocrm-report-view.is-active {
display: block;
}
.amocrm-cards-grid {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.amocrm-kanban {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(300px, 360px);
gap: 0.9rem;
overflow-x: auto;
padding-bottom: 0.25rem;
}
.amocrm-kanban-col {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
min-height: 220px;
}
.amocrm-kanban-col-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.75rem;
border-bottom: 1px solid var(--color-border);
}
.amocrm-kanban-col-head h3 {
margin: 0;
font-size: 1rem;
}
.amocrm-kanban-col-head span {
background: var(--color-surface-2);
border-radius: 999px;
padding: 0.18rem 0.5rem;
font-size: 0.85rem;
}
.amocrm-kanban-col-body {
padding: 0.65rem;
display: grid;
gap: 0.55rem;
}
.amocrm-kanban-card {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 0.55rem;
}
.amocrm-kanban-title {
font-weight: 700;
margin-bottom: 0.35rem;
}
.amocrm-kanban-meta {
display: grid;
grid-template-columns: 1fr;
gap: 0.2rem;
font-size: 0.88rem;
}
.amocrm-kanban-comment {
margin: 0.45rem 0 0 0;
font-size: 0.88rem;
font-weight: 700;
}
.amocrm-summary-kpis {
display: grid;
gap: 0.7rem;
grid-template-columns: repeat(4, minmax(160px, 1fr));
margin-bottom: 0.8rem;
}
.amocrm-kpi {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 0.7rem;
}
.amocrm-kpi-label {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.amocrm-kpi-value {
margin-top: 0.2rem;
font-size: 1.15rem;
font-weight: 700;
}
.amocrm-summary-grid {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(2, minmax(260px, 1fr));
}
.amocrm-lead-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 0.8rem;
}
.amocrm-lead-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.amocrm-lead-title {
font-weight: 700;
line-height: 1.3;
}
.amocrm-lead-price {
font-weight: 700;
white-space: nowrap;
}
.amocrm-lead-meta {
display: grid;
gap: 0.35rem 0.9rem;
grid-template-columns: 1fr 1fr;
font-size: 0.9rem;
}
.amocrm-lead-comment {
margin: 0.6rem 0 0 0;
font-size: 0.92rem;
font-weight: 700;
}
.amocrm-group-block {
margin-bottom: 1rem;
}
.amocrm-group-block h3 {
margin: 0 0 0.5rem 0;
}
.amocrm-mobile-list {
display: grid;
gap: 0.7rem;
}
.amocrm-mobile-item {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 0.75rem;
}
.amocrm-mobile-title {
font-weight: 700;
margin-bottom: 0.45rem;
}
.amocrm-mobile-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.3rem;
font-size: 0.9rem;
}
.amocrm-mobile-comment {
margin-top: 0.55rem;
font-size: 0.9rem;
font-weight: 700;
}
.amocrm-comment-cell {
font-weight: 700;
}
.amocrm-sources-weekly-table th,
.amocrm-sources-weekly-table td {
text-align: center;
vertical-align: middle;
white-space: nowrap;
border-color: var(--color-border-strong);
padding: 0.3rem 0.35rem;
}
.amocrm-sources-weekly-table td:first-child {
text-align: left;
font-weight: 600;
}
.amocrm-sources-weekly-table td:last-child {
white-space: normal;
text-align: left;
}
.amocrm-sources-weekly-table thead th {
background: var(--brand-gold);
color: var(--color-accent-contrast);
font-weight: 700;
border-width: 1.5px;
}
.amocrm-sources-weekly-table thead .source-group {
font-size: 1rem;
letter-spacing: 0.01em;
}
.amocrm-sources-weekly-table .source-tag-head {
min-width: 42px;
height: 112px;
padding: 0;
vertical-align: bottom;
position: relative;
}
.amocrm-sources-weekly-table .source-tag-rot {
position: absolute;
left: 8px;
bottom: 10px;
transform: rotate(-45deg);
transform-origin: left bottom;
white-space: nowrap;
font-size: 0.86rem;
}
.amocrm-sources-weekly-table .source-value {
font-variant-numeric: tabular-nums;
}
.amocrm-sources-weekly-table .total-leads-cell {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.amocrm-sources-weekly-table col.col-week { width: 72px; }
.amocrm-sources-weekly-table col.col-source { width: 48px; }
.amocrm-sources-weekly-table col.col-total { width: 108px; }
.amocrm-sources-weekly-table col.col-meetings { width: 132px; }
.amocrm-sources-weekly-table col.col-comment { width: 340px; }
.amocrm-sources-weekly-table .source-comment-input {
min-height: 38px;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.2;
padding-top: 0.35rem;
padding-bottom: 0.35rem;
}
.amocrm-sources-monthly-table th,
.amocrm-sources-monthly-table td {
white-space: nowrap;
text-align: center;
vertical-align: middle;
}
.amocrm-sources-monthly-table th {
font-size: 0.84rem;
}
.amocrm-sources-monthly-table .form-control {
min-height: var(--form-compact-min-height);
padding: var(--form-compact-padding-y) 0.45rem;
font-size: 0.88rem;
}
/* Фиксация первых 2 столбцов в месячном отчёте при скролле вправо */
.amocrm-sources-monthly-table th:nth-child(1),
.amocrm-sources-monthly-table td:nth-child(1) {
position: sticky;
left: 0;
z-index: 3;
background: var(--color-surface);
}
.amocrm-sources-monthly-table th:nth-child(2),
.amocrm-sources-monthly-table td:nth-child(2) {
position: sticky;
left: 90px;
z-index: 3;
background: var(--color-surface);
}
.amocrm-sources-monthly-table thead th:nth-child(1),
.amocrm-sources-monthly-table thead th:nth-child(2) {
z-index: 4;
background: var(--brand-gold);
}
@media (max-width: 860px) {
.amocrm-filter-box {
min-width: 100%;
}
.amocrm-filter-actions {
width: 100%;
flex-wrap: wrap;
}
.amocrm-filters-compact {
grid-template-columns: repeat(2, minmax(150px, 1fr));
}
.amocrm-filters-compact .amocrm-filter-actions {
justify-content: flex-start;
}
}
@media (max-width: 700px) {
.amocrm-lead-meta {
grid-template-columns: 1fr;
}
.amocrm-summary-kpis {
grid-template-columns: repeat(2, minmax(130px, 1fr));
}
.amocrm-summary-grid {
grid-template-columns: 1fr;
}
.amocrm-filters-compact {
grid-template-columns: 1fr;
padding: 0.55rem;
}
.amocrm-filters-compact .amocrm-filter-actions .btn {
width: 100%;
}
}
.td-null {
color: var(--color-danger);
font-weight: 600;
font-style: italic;
}
/* Формы */
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.4rem;
font-size: var(--typo-label);
font-weight: 600;
}
.form-control {
width: 100%;
padding: var(--form-compact-padding-y) var(--form-compact-padding-x);
font-size: var(--typo-control);
line-height: 1.3;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
min-height: var(--form-compact-min-height);
transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.form-control::placeholder {
color: var(--color-text-soft);
}
.form-control:hover {
border-color: var(--color-border-strong);
}
.form-control:focus {
outline: none;
border-color: rgba(96, 165, 250, 0.55);
}
.form-control:focus-visible {
box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-control:disabled,
.form-control[readonly] {
background: var(--color-surface-2);
color: var(--color-text-muted);
cursor: not-allowed;
}
select.form-control {
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, rgba(148,163,184,0.95) 50%),
linear-gradient(135deg, rgba(148,163,184,0.95) 50%, transparent 50%),
linear-gradient(to right, transparent, transparent);
background-position:
calc(100% - 16px) calc(50% - 2px),
calc(100% - 11px) calc(50% - 2px),
calc(100% - 2rem) 50%;
background-size: 5px 5px, 5px 5px, 1px 60%;
background-repeat: no-repeat;
padding-right: 2.2rem;
}
.password-field {
position: relative;
}
.password-field .form-control {
padding-right: 3.0rem;
}
.password-toggle {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
height: 34px;
min-width: 34px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
font-size: 0.85rem;
color: var(--color-text-muted);
box-shadow: none;
}
.password-toggle-icon {
padding: 0;
width: 34px;
}
.password-toggle-icon svg {
display: block;
}
.password-toggle-icon .icon-eye-off {
display: none;
}
.password-toggle-icon.is-visible .icon-eye {
display: none;
}
.password-toggle-icon.is-visible .icon-eye-off {
display: block;
}
.password-toggle:hover {
border-color: var(--color-border-strong);
color: var(--color-text);
}
.password-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--focus-ring);
}
/*
* Поле пароля = тот же input.form-control, что у логина (одинаковая высота и рамка).
* Кнопка глаза - absolute поверх правого края: фокус/autofill закрашивают всю ширину под ней.
*/
.password-field--modern {
position: relative;
display: block;
width: 100%;
}
.login-form .form-group .password-field.password-field--modern {
display: block;
}
.password-field--modern .password-field__input,
.password-field--modern .form-control.password-field__input {
width: 100%;
padding-right: 2.75rem;
/* остальное - от .form-control: border, radius, min-height, фокус, голубая обводка */
}
/* Три класса на кнопке - выше, чем отдельно .password-toggle-icon, чтобы не потерять absolute */
.password-field--modern .password-toggle.password-toggle-icon.password-toggle--infield {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
margin: 0;
padding: 0;
border: none;
background: transparent;
color: var(--color-text-muted);
box-shadow: none;
border-radius: 50%;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.password-field--modern .password-toggle.password-toggle-icon.password-toggle--infield:hover {
background: rgba(148, 163, 184, 0.14);
color: var(--color-text);
}
.password-field--modern .password-field__input:focus + .password-toggle.password-toggle-icon.password-toggle--infield,
.password-field--modern .form-control.password-field__input:focus + .password-toggle.password-toggle-icon.password-toggle--infield {
color: var(--color-text-muted);
background: transparent;
}
.password-field--modern .password-field__input:focus + .password-toggle.password-toggle-icon.password-toggle--infield:hover,
.password-field--modern .form-control.password-field__input:focus + .password-toggle.password-toggle-icon.password-toggle--infield:hover {
background: rgba(96, 165, 250, 0.12);
color: var(--color-text);
}
.password-field--modern .password-toggle.password-toggle-icon.password-toggle--infield:active {
transform: translateY(-50%) scale(0.94);
}
.password-field--modern .password-toggle.password-toggle-icon.password-toggle--infield:focus-visible {
outline: none;
box-shadow: none;
}
.password-field--modern .password-toggle-icon .icon-eye,
.password-field--modern .password-toggle-icon .icon-eye-off {
transition: opacity 0.2s ease, transform 0.22s ease;
}
/* Пароль скрыт (точки): закрытый глаз */
.password-field--modern .password-toggle-icon .icon-eye-off {
display: block;
opacity: 1;
transform: scale(1);
position: absolute;
left: 50%;
top: 50%;
margin-left: -11px;
margin-top: -11px;
pointer-events: none;
}
.password-field--modern .password-toggle-icon .icon-eye {
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -11px;
margin-top: -11px;
opacity: 0;
transform: scale(0.88);
pointer-events: none;
}
.password-field--modern .password-toggle-icon:not(.is-visible) .icon-eye {
display: block;
}
/* Не задавать position:relative здесь - перебивает position:absolute у .password-toggle--infield
и кнопка уезжает в поток. У absolute-кнопки дочерние svg всё равно якорятся к ней. */
/* Пароль виден: открытый глаз (перебиваем глобальные .password-toggle-icon.is-visible) */
.password-field--modern .password-toggle-icon.is-visible .icon-eye-off {
display: block;
opacity: 0;
transform: scale(0.88);
}
.password-field--modern .password-toggle-icon.is-visible .icon-eye {
display: block;
opacity: 1;
transform: scale(1);
}
.login-form .form-group .password-field--modern {
max-width: 100%;
}
@media (max-width: 480px) {
.password-field--modern .password-field__input,
.password-field--modern .form-control.password-field__input {
font-size: 16px; /* меньше зум iOS при фокусе */
}
}
textarea.form-control {
min-height: 112px;
padding: var(--form-compact-padding-y) var(--form-compact-padding-x);
line-height: 1.4;
resize: vertical;
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 0.95rem 1rem;
}
.form-row .form-group {
flex: 1;
min-width: 200px;
}
.form-row .form-group.form-group-wide {
flex: 2 1 260px;
min-width: 260px;
}
.form-row .form-group.form-group-medium {
flex: 1.5 1 220px;
min-width: 220px;
}
.form-row .form-group.form-group-compact {
flex: 1 1 120px;
min-width: 120px;
}
.form-row .form-group.form-group-filter-compact {
flex: 0 1 var(--field-w-date);
min-width: min(11rem, 100%);
max-width: var(--field-w-date);
}
.form-row .form-group.form-group-actions-end {
display: flex;
align-items: flex-end;
justify-content: flex-start;
min-width: 140px;
}
.form-row .form-group.form-group-actions-end .btn {
min-width: 140px;
}
.action-link-inline {
margin-left: 0.5rem;
}
.table-cell-actions {
text-align: right;
white-space: nowrap;
}
.form-inline {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.95rem 1rem;
}
.form-inline .form-control {
flex: 0 1 auto;
}
/* ========== Компактные формы: тулбар + стек «подпись → поле → подсказка» ========== */
.form-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--form-toolbar-gap-row) var(--form-toolbar-gap-col);
width: 100%;
}
.form-toolbar--nowrap {
flex-wrap: nowrap;
}
.form-field-stack {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.35rem;
min-width: 0;
}
.form-field-stack > label {
margin: 0;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.25;
}
.form-field-stack .form-control {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.form-field-stack .form-hint {
margin: 0;
font-size: 0.82rem;
line-height: 1.35;
}
.form-col--date {
flex: 0 0 auto;
width: var(--field-w-date);
max-width: 100%;
}
.form-col--select-sm {
flex: 0 0 auto;
width: var(--field-w-select-sm);
max-width: 100%;
}
.form-col--select-md {
flex: 0 0 auto;
width: var(--field-w-select-md);
max-width: 100%;
}
.form-col--select-lg {
flex: 1 1 var(--field-w-select-lg);
min-width: min(var(--field-w-select-md), 100%);
max-width: min(var(--field-w-select-lg), 100%);
width: auto;
}
.form-col--num-sm {
flex: 0 0 auto;
width: var(--field-w-num-sm);
max-width: 100%;
}
.form-col--num-md {
flex: 0 0 auto;
width: var(--field-w-num-md);
max-width: 100%;
}
.form-col--email {
flex: 0 0 auto;
width: min(var(--field-w-email), 100%);
max-width: 100%;
}
.form-col--name {
flex: 1 1 14rem;
min-width: min(12rem, 100%);
max-width: min(var(--field-w-name-max), 100%);
}
.form-col--year {
flex: 0 0 auto;
width: var(--field-w-year);
max-width: 100%;
}
.form-col--month {
flex: 0 0 auto;
width: var(--field-w-month);
max-width: 100%;
}
.form-col--month-nav {
flex: 0 0 auto;
width: var(--field-w-month-nav);
max-width: 100%;
}
/* AmoCRM settings + любые формы с теми же ширинами */
.form-col--amocrm-sub {
flex: 0 0 auto;
width: var(--field-amocrm-sub);
max-width: 100%;
}
.form-col--amocrm-tok {
flex: 0 1 auto;
width: var(--field-amocrm-tok);
max-width: min(var(--field-amocrm-tok), 100%);
min-width: 0;
}
.form-col--text-wide {
flex: 1 1 var(--field-w-stage-input);
min-width: min(var(--field-w-stage-input), 100%);
max-width: 100%;
}
.form-toolbar--align-center {
align-items: center;
}
.form-inline-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.amocrm-sources-top-toolbar {
align-items: flex-end;
}
.amocrm-sources-top-toolbar .form-field-stack > label {
font-size: 0.92rem;
font-weight: 600;
}
body.amocrm-settings-page .amocrm-settings-form > .form-toolbar {
gap: 0.65rem 1.1rem;
}
.form-toolbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem 0.55rem;
flex: 0 0 auto;
align-self: flex-end;
}
/* Выровнять кнопки с полями ввода (ниже подписи) */
.form-toolbar-actions--align-fields {
align-self: center;
padding-top: calc(0.92rem * 1.25 + 0.35rem);
padding-bottom: 0.1rem;
}
@media (max-width: 900px) {
.form-toolbar--nowrap {
flex-wrap: wrap;
}
.form-col--date,
.form-col--select-sm,
.form-col--select-md,
.form-col--email {
flex: 1 1 auto;
width: 100%;
max-width: 100%;
}
.form-col--select-lg,
.form-col--name {
flex: 1 1 100%;
max-width: 100%;
}
.form-col--year,
.form-col--month,
.form-col--month-nav,
.form-col--amocrm-sub,
.form-col--amocrm-tok {
flex: 1 1 100%;
width: 100%;
max-width: 100%;
}
.form-col--text-wide {
flex: 1 1 100%;
}
.form-toolbar-actions--align-fields {
padding-top: 0.25rem;
align-self: flex-start;
width: 100%;
}
}
/* Страница входа */
.login-container {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 0;
padding: 0.75rem 1rem 0;
}
body.login-page .main {
padding-top: 0.65rem;
padding-bottom: 2.75rem;
}
body.login-page .nav,
body.login-page .nav-toggle,
body.login-page .mobile-impersonation-bar,
body.login-page .breadcrumbs {
display: none !important;
}
.login-card {
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-2);
padding: 1rem 1.1rem;
width: 100%;
max-width: 420px;
}
.login-title {
text-align: center;
margin: 0 0 0.25rem 0;
font-size: 1.2rem;
}
.login-subtitle {
text-align: center;
color: var(--color-text-muted);
margin: 0 0 0.8rem 0;
font-size: 0.9rem;
}
.login-form {
text-align: center;
}
.login-form .form-group {
margin-bottom: 0.65rem;
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
.login-form .form-group label {
display: block;
text-align: center;
}
.login-form .form-group .form-control {
width: 100%;
}
.login-form .form-group .password-field {
display: flex;
}
.login-form .btn {
margin-top: 0.5rem;
max-width: 280px;
margin-left: auto;
margin-right: auto;
display: block;
}
/* Кнопка «Войти» - случайный цвет при каждой загрузке */
.login-form .btn-primary {
--login-btn-color: var(--login-btn-random, var(--brand-green));
background: var(--login-btn-color) !important;
border-color: var(--login-btn-color) !important;
color: #fff !important;
}
.login-hint {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
font-size: 0.9rem;
color: var(--color-text-muted);
}
@media (max-width: 640px) {
.login-hint {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.login-hint-table {
min-width: 520px;
}
}
.login-hint ul {
margin: 0.5rem 0 0 0;
padding-left: 1.25rem;
}
.login-hint-table {
width: 100%;
margin-top: 0.75rem;
border-collapse: collapse;
font-size: 0.82rem;
}
.login-hint-table th,
.login-hint-table td {
padding: 0.45rem 0.6rem;
border: 1px solid var(--color-border);
text-align: left;
vertical-align: middle;
}
.login-hint-table thead th {
background: var(--color-surface-2);
font-weight: 600;
}
@media (min-width: 641px) {
.login-hint-table thead th {
white-space: nowrap;
}
}
.login-hint-table tr:nth-child(even) td {
background: var(--color-surface-2);
}
.login-hint-table code {
background: rgba(148, 163, 184, 0.18);
border-radius: 3px;
padding: 0.1rem 0.35rem;
font-size: 0.85em;
font-family: monospace;
color: var(--brand-green-2);
}
/* Проекты */
.project-list-simple { list-style: none; padding: 0; margin: 0; }
.project-list-simple li { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.project-list-simple a { font-weight: 500; }
.project-list, .project-grid, .dashboard-grid {
display: grid;
gap: 1rem;
}
.project-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.project-card, .project-card-mini, .project-card-link {
position: relative;
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-1);
padding: 1.25rem;
text-decoration: none;
color: inherit;
display: block;
transition: transform 0.2s, box-shadow 0.2s;
}
.project-card:hover, .project-card-link:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
a.project-card:focus-visible,
a.project-card-link:focus-visible,
a.project-card-mini:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.project-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
.project-name {
font-weight: 600;
font-size: 1.1rem;
}
.project-type {
font-size: 0.85rem;
color: var(--color-text-soft);
white-space: normal;
overflow-wrap: anywhere;
}
.project-address {
margin: 0.5rem 0;
color: var(--color-text-muted);
font-size: 0.95rem;
}
.project-meta {
margin: 0;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.project-card-photo {
width: 100%;
height: 160px;
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
margin: -1.25rem -1.25rem 1rem -1.25rem;
}
.project-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* У клиента - фото отцентровано в карточке */
.project-card-photo-centered {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface-2);
}
.project-card-photo-centered img {
object-fit: contain;
object-position: center;
}
/* У админа - миниатюра */
.project-card-photo-thumb {
height: 120px;
}
.project-card-photo-mini {
height: 100px;
margin: -1rem -1rem 0.75rem -1rem;
}
/* === 4 варианта карточки проекта (превью) === */
/* Вариант A: Классика - фото cover сверху */
.project-card-variant-a .project-card-photo {
height: 160px;
margin: -1.25rem -1.25rem 1rem -1.25rem;
border-radius: var(--radius) var(--radius) 0 0;
}
.project-card-variant-a .project-card-photo img { object-fit: cover; }
/* Вариант B: Горизонтальная - фото слева, текст справа */
.project-card-variant-b {
display: flex;
flex-direction: row;
padding: 0;
overflow: hidden;
}
.project-card-variant-b .project-card-photo {
width: 140px;
min-width: 140px;
height: auto;
min-height: 120px;
margin: 0;
border-radius: var(--radius) 0 0 var(--radius);
flex-shrink: 0;
}
.project-card-variant-b .project-card-photo img { object-fit: cover; height: 100%; min-height: 120px; }
.project-card-variant-b .project-card-inner {
padding: 1rem 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Вариант C: Оверлей - фото на весь фон, текст поверх градиента */
.project-card-variant-c {
position: relative;
padding: 0;
min-height: 200px;
overflow: hidden;
}
.project-card-variant-c .project-card-photo {
position: absolute;
inset: 0;
height: 100%;
margin: 0;
border-radius: var(--radius);
}
.project-card-variant-c .project-card-photo img { object-fit: cover; height: 100%; }
.project-card-variant-c .project-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem 1.25rem 1.25rem;
background: linear-gradient(transparent, rgba(0,0,0,0.85));
color: #fff;
}
.project-card-variant-c .project-card-overlay .project-name { color: #fff; }
.project-card-variant-c .project-card-overlay .project-type { color: var(--color-accent); }
.project-card-variant-c .project-card-overlay .project-address,
.project-card-variant-c .project-card-overlay .project-meta { color: rgba(255,255,255,0.85); }
/* Плейсхолдер при отсутствии фото (вариант C) */
.project-card-photo-placeholder {
background: var(--color-text-muted);
background: linear-gradient(135deg, var(--color-text-muted) 0%, var(--color-text-soft) 100%);
}
/* === Варианты отображения проектов для админа (много объектов) === */
.projects-list-head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1rem;
}
.projects-list-head h2 {
margin-bottom: 0.25rem;
}
.projects-status-tabs {
flex-shrink: 0;
}
@media (max-width: 720px) {
.projects-list-head {
flex-direction: column;
align-items: stretch;
gap: 0.45rem;
}
.projects-list-head h2 {
flex: 0 0 auto;
white-space: nowrap;
}
.projects-status-tabs {
width: 100%;
flex: 0 0 auto;
min-width: 0;
}
}
/* Вариант 1: Таблица */
.admin-projects-table {
width: 100%;
border-collapse: collapse;
}
.admin-projects-table th,
.admin-projects-table td {
padding: 0.6rem 0.75rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.admin-projects-table th {
font-weight: 600;
background: var(--color-bg);
font-size: 0.9rem;
}
.admin-projects-table tr:hover {
background: var(--color-surface-2);
}
.admin-projects-table a {
color: inherit;
text-decoration: none;
}
.admin-projects-table a:hover {
color: var(--color-accent);
}
.admin-projects-table .table-filter-row th {
padding: 0.35rem 0.5rem;
vertical-align: middle;
background: var(--color-surface-2);
border-bottom: 1px solid var(--color-border);
}
.admin-projects-table .table-filter {
width: 100%;
min-width: 60px;
padding: 0.25rem 0.4rem;
font-size: 0.85rem;
}
.admin-projects-thumb {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 4px;
display: block;
}
.admin-projects-thumb-placeholder {
width: 48px;
height: 48px;
background: #ddd;
border-radius: 4px;
}
/* Вариант 2: Компактные строки (ленточки) */
.admin-project-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--color-surface);
border-radius: var(--radius-lg);
margin-bottom: 0.5rem;
text-decoration: none;
color: inherit;
border: 1px solid var(--color-border);
transition: box-shadow 0.2s, border-color 0.2s;
}
.admin-project-row:hover {
box-shadow: var(--shadow-1);
border-color: var(--color-accent);
}
.admin-project-row-thumb {
width: 100px;
height: 70px;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
}
.admin-project-row-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.admin-project-row-thumb-placeholder {
background: #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 0.75rem;
}
.admin-project-row-body {
flex: 1;
min-width: 0;
}
.admin-project-row-body .project-name {
font-size: 1rem;
margin-right: 0.5rem;
}
.admin-project-row-meta {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-top: 0.25rem;
}
.admin-project-row-badges {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.35rem;
margin-left: auto;
padding-left: 0.5rem;
}
.admin-project-row-badges .project-badge {
position: static;
top: auto;
right: auto;
margin: 0;
}
/* Вариант 3: Плотная сетка (мини-карточки) */
.admin-projects-dense {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.admin-project-dense {
position: relative;
aspect-ratio: 1;
padding: 0;
overflow: hidden;
position: relative;
}
.admin-project-dense .project-card-photo {
position: absolute;
inset: 0;
margin: 0;
border-radius: var(--radius);
height: 100%;
}
.admin-project-dense .project-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.admin-project-dense .project-name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5rem;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: #fff;
font-size: 0.9rem;
}
/* Вариант 5: Переключатель сетка/список (только CSS для списка) */
.admin-view-toggle {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.admin-view-toggle .btn-small.active {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
}
/* Компактный переключатель отображения (админ + мастер) */
.card-header-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem 1rem;
margin-bottom: 1rem;
}
.card-header-row > h2 {
margin: 0;
line-height: 1.2;
}
.display-toggle-compact {
display: flex;
gap: 0.2rem;
padding: 0.18rem;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 999px;
}
.display-toggle-compact .display-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--control-height-sm);
min-height: var(--control-height-sm);
padding: 0 0.5rem;
font-size: 0.82rem;
font-weight: 700;
font-family: inherit;
color: var(--color-text-muted);
background: transparent;
border: 1px solid var(--color-border);
border-radius: 999px;
text-decoration: none;
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.display-toggle-compact .display-btn:hover {
color: var(--color-text);
border-color: var(--color-accent);
background: var(--color-surface-2);
}
.display-toggle-compact .display-btn.active {
color: #fff;
background: var(--color-accent);
border-color: var(--color-accent);
}
.dashboard-recent-rows {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Вариант D: Акцентная рамка - оранжевая полоса слева, фото по центру */
.project-card-variant-d {
border-left: 4px solid var(--color-accent);
}
.project-card-variant-d .project-card-photo {
height: 140px;
margin: -1.25rem -1.25rem 1rem -1.25rem;
border-radius: var(--radius) var(--radius) 0 0;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
}
.project-card-variant-d .project-card-photo img { object-fit: contain; }
.project-photo-gallery-preview {
margin-bottom: 1rem;
}
.project-photo-gallery-preview .project-photo-preview-track {
max-height: 200px;
border-radius: var(--radius);
}
.project-gallery-edit .project-photo-preview-track {
max-height: none;
}
/* Не трогать режим редактирования галереи (.project-gallery-edit) - там плитка 4:3 и cover */
.project-photo-gallery-preview:not(.project-gallery-edit) .project-gallery-slide .project-photo-preview {
max-height: 200px;
width: auto;
max-width: 100%;
}
.project-gallery-slide-edit {
position: relative;
}
.project-gallery-slide-edit .gallery-remove-form {
position: absolute;
top: 0.5rem;
right: 0.5rem;
margin: 0;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 2;
}
.project-gallery-slide-edit:hover .gallery-remove-form {
opacity: 1;
}
.project-gallery-slide-edit .gallery-remove-btn {
padding: var(--btn-small-compact-padding-y) var(--btn-small-compact-padding-x);
line-height: 1;
background: #dc3545;
border-color: #dc3545;
color: #fff;
}
.project-gallery-slide-edit .gallery-remove-btn:hover {
background: #c82333;
border-color: #bd2130;
color: #fff;
}
/* Галерея в режиме редактирования: адаптивная сетка 4→2→1, плитка 4:3, cover (как /test/gallery-grid-demo) */
.project-gallery-edit .project-gallery-track {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
overflow-x: visible;
scroll-snap-type: none;
max-width: 100%;
}
@media (max-width: 900px) {
.project-gallery-edit .project-gallery-track {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.project-gallery-edit .project-gallery-track {
grid-template-columns: 1fr;
}
}
.project-gallery-edit .project-gallery-slide {
width: 100%;
min-width: 0;
aspect-ratio: 4 / 3;
height: auto;
scroll-snap-align: none;
overflow: hidden;
border-radius: var(--radius);
position: relative;
background: var(--color-surface-2);
}
.project-gallery-edit .project-gallery-slide > a.photo-open-full {
position: absolute;
inset: 0;
display: block;
z-index: 1;
}
.project-gallery-edit .project-gallery-slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center;
display: block;
}
/* img.project-photo-preview + ниже .project-photo-card .project-photo-preview { contain } - перебиваем жёстко */
.project-photo-card .project-gallery-edit .project-gallery-slide img.project-photo-preview,
.project-photo-card .project-gallery-edit .project-gallery-slide-edit img.project-photo-preview {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center;
margin-bottom: 0;
border-radius: 0;
}
.project-photo-card .project-photo-preview {
max-width: 300px;
max-height: 200px;
object-fit: contain;
border-radius: var(--radius);
margin-bottom: 1rem;
}
.project-photo-form {
margin-top: 1rem;
}
/* Кнопки загрузки файлов - единый стиль Sherwood Home, эмодзи по типу раздела */
.photo-upload-btn-wrap,
.file-upload-wrap {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.photo-upload-input,
.photo-upload-input-hidden,
.file-upload-input {
position: absolute;
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
z-index: -1;
}
/* Базовый стиль всех кнопок выбора файла */
.photo-upload-btn,
.btn-photo-upload,
.btn-file-upload {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
min-height: var(--form-compact-min-height);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.1s;
background: var(--brand-green);
color: #fff;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: var(--btn-shadow);
}
.photo-upload-btn:hover,
.btn-photo-upload:hover,
.btn-file-upload:hover {
background: var(--brand-green-2);
color: #fff;
transform: translateY(-1px);
}
.photo-upload-btn:active,
.btn-photo-upload:active,
.btn-file-upload:active {
transform: translateY(0);
}
/* Эмодзи в начале кнопки - в одну строку с надписью, выровнены по центру */
.photo-upload-btn,
.btn-photo-upload,
.btn-file-upload {
line-height: 1.2;
}
.photo-upload-btn::before,
.btn-photo-upload::before,
.btn-file-upload[data-emoji]::before {
display: inline-block;
line-height: 1;
font-size: 1.1em;
vertical-align: middle;
transform: translateY(-0.08em);
}
.photo-upload-btn::before,
.btn-photo-upload::before {
content: "📷 ";
}
.btn-file-upload[data-emoji]::before {
content: attr(data-emoji) " ";
}
.photo-upload-count {
font-size: 0.9rem;
color: var(--color-text-muted);
}
.photo-upload-count.ok {
color: var(--color-success, #22c55e);
}
.photo-upload-count.warn {
color: var(--color-warning, #eab308);
}
.file-upload-filename {
font-size: 0.85rem;
color: var(--color-success, #22c55e);
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.form-group-photo-upload .photo-upload-btn-wrap,
.form-group-file-upload .file-upload-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Мастер: превью выбранных фото с отметкой «отправить» */
.photo-pick-list {
margin-top: 0.75rem;
}
.photo-pick-hint {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-top: 0.45rem;
margin-bottom: 0;
}
.photo-pick-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
width: 100%;
}
.modal-report .photo-pick-list,
.modal-substage .photo-pick-list {
width: 100%;
}
.photo-pick-count {
margin-top: 0.4rem;
margin-bottom: 0.5rem;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.photo-pick-tile {
position: relative;
border-radius: var(--radius-sm, 8px);
overflow: hidden;
border: 2px solid transparent;
background: var(--color-bg-elevated, #f4f4f5);
}
.photo-pick-tile.is-selected {
border-color: var(--brand-green, #16a34a);
}
.photo-pick-tile-inner {
display: block;
position: relative;
cursor: pointer;
margin: 0;
}
.photo-pick-preview {
display: block;
text-decoration: none;
color: inherit;
}
.photo-pick-tile-inner img {
width: 100%;
height: 5.5rem;
object-fit: cover;
display: block;
vertical-align: top;
}
.photo-pick-check {
position: absolute;
top: 0.35rem;
left: 0.35rem;
width: 1.15rem;
height: 1.15rem;
z-index: 1;
margin: 0;
}
.photo-pick-label {
display: block;
font-size: 0.68rem;
text-align: center;
padding: 0.15rem 0.25rem;
background: rgba(0, 0, 0, 0.55);
color: #fff;
line-height: 1.2;
}
.photo-pick-remove {
position: absolute;
top: 0.2rem;
right: 0.2rem;
z-index: 2;
width: 1.6rem;
min-height: 1.6rem;
padding: 0;
line-height: 1;
font-size: 1.1rem;
border-radius: var(--radius-sm, 6px);
background: rgba(0, 0, 0, 0.55);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.photo-pick-remove:hover {
background: rgba(0, 0, 0, 0.75);
color: #fff;
}
/* Создание проекта: заметная «кнопка»-summary, форма по умолчанию свёрнута у всех ролей */
.admin-projects-page #project-create-form .project-create-collapsible > summary {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1rem;
margin: 0;
border-radius: var(--radius-md, 10px);
border: 1px solid rgba(37, 99, 235, 0.35);
background: linear-gradient(145deg, rgba(239, 246, 255, 0.95), rgba(219, 234, 254, 0.65));
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary::-webkit-details-marker {
display: none;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary:hover {
border-color: rgba(37, 99, 235, 0.55);
background: linear-gradient(145deg, rgba(239, 246, 255, 1), rgba(191, 219, 254, 0.75));
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary:focus {
outline: none;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.admin-projects-page #project-create-form .project-create-collapsible[open] > summary {
border-color: rgba(37, 99, 235, 0.45);
background: linear-gradient(145deg, rgba(224, 231, 255, 0.5), rgba(239, 246, 255, 0.9));
margin-bottom: 0.5rem;
}
.admin-projects-page #project-create-form .project-create-summary-icon {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.65rem;
font-weight: 300;
line-height: 1;
color: #fff;
background: linear-gradient(145deg, #3b82f6, #1d4ed8);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
transition: transform 0.25s ease;
}
.admin-projects-page #project-create-form .project-create-collapsible[open] .project-create-summary-icon {
transform: rotate(45deg);
}
.admin-projects-page #project-create-form .project-create-summary-copy {
flex: 1;
min-width: 0;
text-align: left;
}
.admin-projects-page #project-create-form .project-create-summary-h2 {
margin: 0 0 0.2rem 0;
font-size: 1.2rem;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.02em;
}
.admin-projects-page #project-create-form .project-create-summary-hint {
margin: 0;
font-size: 0.88rem;
line-height: 1.35;
color: #475569;
}
.admin-projects-page #project-create-form .project-create-summary-cta {
flex-shrink: 0;
display: none;
}
@media (min-width: 520px) {
.admin-projects-page #project-create-form .project-create-summary-cta {
display: block;
}
.admin-projects-page #project-create-form .project-create-summary-cta-inner {
display: inline-block;
padding: 0.4rem 0.75rem;
font-size: 0.82rem;
font-weight: 600;
color: #1e40af;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(37, 99, 235, 0.35);
border-radius: 999px;
}
.admin-projects-page #project-create-form .project-create-collapsible[open] .project-create-cta-when-closed,
.admin-projects-page #project-create-form .project-create-collapsible:not([open]) .project-create-cta-when-open {
display: none;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary:hover .project-create-summary-cta-inner {
background: #fff;
border-color: rgba(37, 99, 235, 0.5);
}
}
.admin-projects-page #project-create-form .project-create-collapsible-body {
padding-top: 0.15rem;
}
/* Единый паттерн action-формы для создания проекта */
.project-create-form {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-md);
}
.project-create-form .form-row {
align-items: flex-start;
}
.project-create-form .form-row-uploads {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-md);
align-items: start;
}
.project-create-form .form-row-uploads .form-group {
min-width: 0;
margin-bottom: 0;
}
.project-create-form .photo-upload-btn-wrap,
.project-create-form .file-upload-wrap,
.project-create-form .form-group-submit-inner {
display: grid;
grid-template-rows: minmax(var(--control-height), auto) 1.15rem;
align-items: start;
gap: 0.4rem;
width: 100%;
}
.project-create-form .photo-upload-btn,
.project-create-form .btn-file-upload,
.project-create-form .form-row-uploads .form-group-create-client .btn-create-client,
.project-create-form .form-row-uploads .form-group-submit .btn-primary {
width: 100%;
min-height: var(--control-height);
}
.project-create-form .photo-upload-count,
.project-create-form .file-upload-filename,
.project-create-form .project-create-meta-spacer {
display: block;
min-height: 1.15rem;
max-width: none;
line-height: 1.25;
}
.project-create-form .project-create-meta-spacer {
visibility: hidden;
}
.project-create-form .form-row-uploads .form-group-submit {
align-self: stretch;
}
.project-create-form .form-row-uploads .form-group-submit-inner {
align-items: stretch;
}
.project-create-form .form-row-uploads .form-group-create-client .btn-create-client {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
flex-shrink: 0;
min-height: var(--form-compact-min-height);
padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: normal;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
border: 1px solid #1e40af;
box-shadow: var(--btn-shadow);
}
.admin-projects-page .form-row-uploads .form-group-create-client .btn-create-client:hover {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #fff;
border-color: #1d4ed8;
}
.project-create-form .form-row-uploads .form-group-create-client .btn-create-client:focus-visible {
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45), var(--btn-shadow);
}
.project-client-modal-card {
max-width: 420px;
}
.project-client-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.project-client-modal-title {
margin: 0;
}
.project-client-modal-footer {
margin-top: 1rem;
}
.project-card-mini {
padding: 1rem;
}
.dashboard-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.5rem;
align-items: stretch;
}
.dashboard-grid > .btn {
width: 100%;
max-width: none;
min-height: 40px;
white-space: normal;
box-sizing: border-box;
}
.admin-dashboard-page .dashboard-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 0.5rem;
}
.admin-dashboard-page .dashboard-grid-home {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 0.6rem;
margin: 0 auto 1.5rem;
}
.admin-dashboard-page .dashboard-grid-home > .btn {
flex: 0 1 10.75rem;
width: 10.75rem;
max-width: 100%;
}
/* Этапы */
.stages-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.stage-item {
display: flex;
flex-direction: column;
gap: 0;
padding: 0.65rem 0.75rem;
background: var(--color-surface-2);
border-radius: var(--radius);
border: 1px solid var(--color-border);
}
.stage-item-content {
min-width: 0;
/* Левый край поля названия: ручка + gap + номер + gap (без ручки - только номер + gap) */
--stage-dates-indent: calc(28px + 0.5rem);
}
.stage-item-content--reorder {
--stage-dates-indent: calc(1.35rem + 0.5rem + 28px + 0.5rem);
}
/* Верхняя строка: ручка (если есть) · номер · название · удалить */
.stage-item-row-top {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: nowrap;
}
.stage-drag-handle {
cursor: grab;
color: var(--color-text-muted);
font-size: 1rem;
line-height: 1;
user-select: none;
width: 1.35rem;
flex-shrink: 0;
text-align: center;
padding: 0.15rem 0;
}
.stage-drag-handle:hover {
color: var(--color-text);
}
.stage-drag-handle:active {
cursor: grabbing;
}
.stage-item-wrapper.stage-draggable-wrap .stage-item.stage-item-with-drag {
display: block;
}
.stage-order {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-accent);
color: #fff;
border-radius: 50%;
font-weight: 700;
font-size: 0.8125rem;
flex-shrink: 0;
}
.stage-name-wrap {
flex: 1;
min-width: 0;
}
/* Этапы проекта: «Этап закрыт» и бейдж в строке с названием; без отдельной строки «Дата закрытия» и без заголовка «Фото:» */
.stages-list .stage-name-wrap--closure-inline {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.25rem;
}
.stages-list .stage-name-heading {
flex: 0 1 auto;
min-width: 0;
}
.stages-list .stage-item-row-top .stage-name-wrap--closure-inline .stage-name-readonly {
display: inline;
}
.stages-list .stage-name-wrap--closure-inline .stage-name-edit {
width: auto;
flex: 1 1 10rem;
min-width: 7rem;
max-width: min(100%, 22rem);
}
.stages-list .stage-top-inline-closure {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.6rem;
font-size: 0.92rem;
font-weight: 500;
color: var(--color-text-muted);
}
.stages-list .stage-top-inline-closure .badge {
font-size: 0.75rem;
color: #fff;
}
.stages-list .stage-top-inline-gap {
white-space: pre;
user-select: none;
}
.stage-item-row-top .stage-delete-btn {
flex-shrink: 0;
margin-left: 0.15rem;
}
.stage-item-row-top .stage-title-text,
.stage-item-row-top .stage-name-edit {
font-weight: 700;
font-size: 1.02rem;
line-height: 1.25;
color: #111827;
}
.stage-item-row-top .stage-name-readonly {
display: block;
}
.stage-name-edit {
width: 100%;
max-width: none;
}
/* Вторая строка: даты с выравниванием по левому краю поля названия */
.stage-item-row-dates {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.65rem 1rem;
margin-top: 0.4rem;
margin-left: var(--stage-dates-indent);
padding-top: 0.45rem;
border-top: 1px solid var(--color-border);
}
.stage-date-field {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.stage-date-label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.stage-item-row-dates .stage-date-input {
max-width: 11rem;
min-width: 8.5rem;
}
.stage-date-input {
max-width: 11rem;
}
.stage-item-row-dates-readonly {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
margin-top: 0.4rem;
margin-left: var(--stage-dates-indent);
padding-top: 0.45rem;
border-top: 1px solid var(--color-border);
font-size: 0.82rem;
color: var(--color-text-muted);
}
.stage-item-row-dates .stage-dates-readonly {
font-size: 0.9rem;
color: var(--color-text-muted);
}
/* Карточки этапов для мастера и клиента */
.stage-card {
background: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-1);
padding: 1.25rem;
margin-bottom: 1rem;
}
.stage-card.stage-done {
border-left: 4px solid var(--color-success);
}
.stage-card.stage-done .stage-card-header {
border-left-color: var(--color-success);
}
.stage-card.stage-pending {
border-left: 4px solid var(--color-warning);
}
.stage-card.stage-pending .stage-card-header {
border-left-color: var(--color-warning);
}
/* Этап с заявкой на редактирование (ожидает подтверждения админа) */
.stage-card.stage-pending-edit {
border-left: 4px solid var(--color-danger);
background: rgba(239, 68, 68, 0.08);
}
.stage-card.stage-pending-edit .stage-card-header {
border-left-color: var(--color-danger);
}
.stage-pending-edit .stage-status-label {
color: var(--color-danger) !important;
}
.edit-pending-note {
color: var(--color-danger);
font-size: 0.9rem;
margin: 0.5rem 0 0 0;
}
/* Группа кнопок в ряд - единый размер, не съезжают */
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.btn-row .btn,
.btn-row .btn-small,
.btn-row form {
flex-shrink: 0;
}
.reject-details {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
.reject-details summary {
cursor: pointer;
list-style: none;
}
.reject-details summary::-webkit-details-marker { display: none; }
.reject-form {
position: static;
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
background: var(--card-bg, #fff);
border: 1px solid #cfd6de;
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
min-width: 0;
width: min(420px, 100%);
max-width: 420px;
}
.reject-form textarea {
width: 100%;
min-height: 72px;
}
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 1200;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 1rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.modal-backdrop[hidden] {
display: none !important;
}
.modal-card {
width: min(520px, 100%);
background: var(--card-bg, #fff);
border: 1px solid var(--border-color, #dee2e6);
border-radius: var(--radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
padding: 1rem;
max-height: calc(100dvh - 2rem);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin-block: auto;
}
.modal-card--work-start {
display: flex;
flex-direction: column;
max-width: 36rem;
width: min(36rem, 100%);
max-height: calc(100dvh - 2rem);
overflow: hidden;
padding: 0;
position: relative;
}
.modal-card--work-start .modal-close {
position: static;
line-height: 1;
}
.modal-card--work-start .modal-card__head {
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1rem 1rem 0.75rem;
}
.modal-card--work-start .modal-card__form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.modal-card--work-start .modal-card__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0 1rem 0.5rem;
}
.modal-card--work-start .modal-card__foot {
flex-shrink: 0;
margin-top: 0;
padding: 0.85rem 1rem 1rem;
border-top: 1px solid var(--border-color, #dee2e6);
background: var(--card-bg, #fff);
}
.btn-row .btn,
.btn-row .btn-small {
white-space: nowrap;
min-width: fit-content;
}
.nav-approvals-dropdown .nav-dropdown-menu {
right: 0;
left: auto;
}
.btn-row form {
display: inline-flex;
}
@media (max-width: 480px) {
.btn-row .btn,
.btn-row .btn-small {
white-space: normal;
min-width: 0;
}
}
.takeover-actions .takeover-reject-form {
display: inline-flex;
gap: 0.35rem;
align-items: center;
}
.takeover-actions .takeover-comment {
width: 120px;
min-width: 80px;
padding: 0.35rem 0.5rem;
font-size: 0.9rem;
}
.import-extras-form {
display: inline-flex;
gap: 0.35rem;
align-items: center;
}
.import-extras-form .import-file-input {
width: 140px;
min-width: 100px;
padding: 0.35rem 0.5rem;
font-size: 0.85rem;
}
.stage-actions-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
.stage-card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
padding: 0.85rem 1rem;
background: rgba(15, 23, 42, 0.04);
border-radius: var(--radius-sm);
border-left: 3px solid var(--color-accent);
}
.stage-status-icon {
font-size: 1.25rem;
}
.stage-name {
font-weight: 700;
font-size: 1.1rem;
color: var(--color-text);
}
.stage-dates {
font-size: 0.9rem;
color: var(--color-text-muted);
font-weight: 500;
}
.stage-status-label {
margin-left: auto;
font-size: 0.9rem;
font-weight: 500;
}
.stage-done .stage-status-label {
color: var(--color-success);
}
.stage-pending .stage-status-label {
color: var(--color-warning);
}
.stages-section {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
/* Клиент - этапы: на широких экранах иконка + название + статус в одну строку */
.client-stages .stage-card-header {
display: flex;
align-items: flex-start;
gap: 0.65rem;
}
.client-stages .stage-status-icon {
flex-shrink: 0;
line-height: 1.5;
}
.client-stages .stage-name {
flex: 1;
min-width: 0;
}
.client-stages .stage-status-label {
flex-shrink: 0;
white-space: nowrap;
margin-left: 0;
text-align: right;
}
@media (max-width: 768px) {
/* Клиент - мобильный вид: 1 ряд иконка+название, 2 ряд статус/дата */
.client-stages .stage-card-header {
flex-wrap: initial;
}
.client-stages .stage-status-label {
width: auto;
margin-top: 0;
white-space: nowrap;
}
}
.foreman-substages-list {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.foreman-substage-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
padding: 0.85rem 0.9rem;
border: 1px solid var(--color-border);
border-radius: 12px;
background: var(--color-card);
}
.foreman-substage-item.substage-done {
border-color: rgba(16, 185, 129, 0.42);
background: rgba(16, 185, 129, 0.08);
}
.substage-main {
min-width: 0;
flex: 1;
}
.substage-title-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.substage-meta-row {
margin-top: 0.25rem;
}
.substage-actions {
display: flex;
align-items: center;
}
.substage-actions .close-substage-btn {
white-space: nowrap;
flex-shrink: 0;
font-size: 0.88rem;
line-height: 1.1;
padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
min-height: var(--form-compact-min-height);
}
/* Подложка модалки «Закрыть подэтап» - затемнённый фон для читаемости */
.modal-substage {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.modal-substage .substage-modal-content {
width: min(760px, 95vw);
max-width: 760px;
max-height: 88vh;
overflow-y: auto;
padding: 1.15rem 1.2rem 1rem;
background: #ffffff;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
.modal-substage .substage-modal-content {
background: #1e293b;
color: #f1f5f9;
}
.modal-substage .checklist-section {
background: #334155;
border-color: #475569;
}
.modal-substage .checklist-op {
background: #475569;
border-color: #64748b;
}
}
.substage-modal-close {
border: none;
background: transparent;
line-height: 1;
}
.substage-photo-info {
margin-top: 0.4rem;
}
.checklist-section {
margin-top: 0.75rem;
padding: 1rem;
background: #f8fafc;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
.checklist-op {
margin: 0.5rem 0;
padding: 0.6rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: 10px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.checklist-op strong {
display: block;
margin-bottom: 0.4rem;
}
.checklist-op .checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.4rem;
margin-bottom: 0.35rem;
line-height: 1.35;
}
.checklist-hint {
margin-top: 0.35rem;
}
.substage-form-actions {
display: flex;
justify-content: flex-end;
margin-top: 0.8rem;
}
body.modal-open {
overflow: hidden;
}
.foreman-style-switcher-card {
margin-bottom: 1rem;
}
.foreman-style-switcher {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.foreman-style-switcher-buttons {
display: inline-flex;
gap: 0.45rem;
flex-wrap: wrap;
}
.foreman-style-btn.is-active {
background: var(--fp-btn-primary-bg, var(--color-accent));
color: var(--fp-btn-primary-text, #fff);
border-color: var(--fp-btn-primary-bg, var(--color-accent));
}
.foreman-style-scope {
--fp-page-bg: transparent;
--fp-card-bg: var(--color-card);
--fp-surface-bg: var(--color-surface);
--fp-substage-bg: var(--color-card);
--fp-border: var(--color-border);
--fp-title: var(--color-text);
--fp-muted: var(--color-text-muted);
--fp-accent: #c78a12;
--fp-success: #138a5d;
--fp-warning: #c78a12;
--fp-btn-primary-bg: #d1a62a;
--fp-btn-primary-text: #1f2937;
--fp-btn-primary-border: #b88712;
--fp-btn-outline-bg: transparent;
--fp-btn-outline-text: var(--color-text);
--fp-btn-outline-border: var(--color-border);
--fp-btn-radius: 10px;
--fp-card-shadow: var(--shadow-1);
}
.foreman-style-scope .card {
background: var(--fp-card-bg);
border-color: var(--fp-border);
box-shadow: var(--fp-card-shadow);
}
.foreman-style-scope .subtitle,
.foreman-style-scope .card-meta,
.foreman-style-scope .substage-photos {
color: var(--fp-muted);
}
.foreman-style-scope .stage-card {
background: var(--fp-surface-bg);
border-color: var(--fp-border);
}
.foreman-style-scope .stage-card.stage-done {
border-left-color: var(--fp-success);
}
.foreman-style-scope .stage-card.stage-pending {
border-left-color: var(--fp-warning);
}
.foreman-style-scope .stage-status-label,
.foreman-style-scope .stage-name,
.foreman-style-scope .substage-name {
color: var(--fp-title);
}
.foreman-style-scope .stage-card-header {
background: rgba(15, 23, 42, 0.06);
border-left-color: var(--fp-warning);
}
.foreman-style-scope .stage-card.stage-done .stage-card-header {
border-left-color: var(--fp-success);
}
.foreman-style-scope .stage-dates {
color: var(--fp-muted);
}
/* Проект 200: кнопки «Закрыть подэтап» - один размер, выровнены в столбик по правому краю */
#foremanStyleScope.foreman-style-scope .foreman-substage-item,
.foreman-style-scope .foreman-substage-item {
display: grid !important;
grid-template-columns: 1fr 150px !important;
align-items: center;
gap: 1rem 3rem;
width: 100%;
background: var(--fp-substage-bg);
border-color: var(--fp-border);
}
#foremanStyleScope.foreman-style-scope .substage-main,
.foreman-style-scope .substage-main {
min-width: 0;
}
#foremanStyleScope.foreman-style-scope .substage-actions,
.foreman-style-scope .substage-actions {
width: 150px;
flex-shrink: 0;
justify-content: center;
}
#foremanStyleScope.foreman-style-scope .substage-actions .close-substage-btn,
.foreman-style-scope .substage-actions .close-substage-btn {
width: 150px;
min-width: 150px;
flex-shrink: 0;
white-space: nowrap;
text-align: center;
}
.foreman-style-scope .btn-primary,
.foreman-style-scope .close-substage-btn {
background: var(--fp-btn-primary-bg);
color: var(--fp-btn-primary-text);
border-color: var(--fp-btn-primary-border);
border-radius: var(--fp-btn-radius);
font-weight: 600;
}
.foreman-style-scope .btn-primary:hover,
.foreman-style-scope .close-substage-btn:hover {
filter: brightness(0.95);
}
.foreman-style-scope .btn-outline {
background: var(--fp-btn-outline-bg);
color: var(--fp-btn-outline-text);
border-color: var(--fp-btn-outline-border);
border-radius: var(--fp-btn-radius);
}
/* foreman-style-scope наследует тему от body */
body.theme-style-1 .foreman-style-scope,
.foreman-style-scope.foreman-style-1 {
--fp-card-bg: #ffffff;
--fp-surface-bg: #f8fafc;
--fp-substage-bg: #ffffff;
--fp-border: #d6deea;
--fp-title: #0f172a;
--fp-muted: #64748b;
--fp-success: #0f766e;
--fp-warning: #2563eb;
--fp-btn-primary-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
--fp-btn-primary-text: #ffffff;
--fp-btn-primary-border: #1e40af;
--fp-btn-outline-bg: #f8fafc;
--fp-btn-outline-text: #1e293b;
--fp-btn-outline-border: #cbd5e1;
--fp-btn-radius: 12px;
--fp-card-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
body.theme-style-2 .foreman-style-scope,
.foreman-style-scope.foreman-style-2 {
--fp-card-bg: #f6fffb;
--fp-surface-bg: #eefcf6;
--fp-substage-bg: #f8fffc;
--fp-border: #c5ead7;
--fp-title: #113229;
--fp-muted: #4d6b62;
--fp-success: #047857;
--fp-warning: #059669;
--fp-btn-primary-bg: linear-gradient(135deg, #10b981, #059669);
--fp-btn-primary-text: #ffffff;
--fp-btn-primary-border: #047857;
--fp-btn-outline-bg: #ecfdf5;
--fp-btn-outline-text: #14532d;
--fp-btn-outline-border: #86efac;
--fp-btn-radius: 14px;
--fp-card-shadow: 0 8px 20px rgba(5, 150, 105, 0.12);
}
body.theme-style-3 .foreman-style-scope,
.foreman-style-scope.foreman-style-3 {
--fp-card-bg: #fffaf2;
--fp-surface-bg: #fff5e6;
--fp-substage-bg: #fffdf8;
--fp-border: #f3d3a3;
--fp-title: #412819;
--fp-muted: #7c5a41;
--fp-success: #b45309;
--fp-warning: #ea580c;
--fp-btn-primary-bg: linear-gradient(135deg, #f97316, #ea580c);
--fp-btn-primary-text: #ffffff;
--fp-btn-primary-border: #c2410c;
--fp-btn-outline-bg: #fff7ed;
--fp-btn-outline-text: #9a3412;
--fp-btn-outline-border: #fdba74;
--fp-btn-radius: 18px;
--fp-card-shadow: 0 8px 22px rgba(194, 65, 12, 0.14);
}
body.theme-style-4 .foreman-style-scope,
.foreman-style-scope.foreman-style-4 {
--fp-card-bg: #f7f5ff;
--fp-surface-bg: #efebff;
--fp-substage-bg: #f9f7ff;
--fp-border: #d9ccff;
--fp-title: #2e1f63;
--fp-muted: #5b4d95;
--fp-success: #6d28d9;
--fp-warning: #7c3aed;
--fp-btn-primary-bg: linear-gradient(135deg, #8b5cf6, #7c3aed);
--fp-btn-primary-text: #ffffff;
--fp-btn-primary-border: #6d28d9;
--fp-btn-outline-bg: #f5f3ff;
--fp-btn-outline-text: #5b21b6;
--fp-btn-outline-border: #c4b5fd;
--fp-btn-radius: 10px;
--fp-card-shadow: 0 8px 24px rgba(91, 33, 182, 0.14);
}
body.theme-style-5 .foreman-style-scope,
.foreman-style-scope.foreman-style-5 {
--fp-card-bg: #0f172a;
--fp-surface-bg: #111c33;
--fp-substage-bg: #16233e;
--fp-border: #2b3b5f;
--fp-title: #eaf1ff;
--fp-muted: #9fb1d7;
--fp-success: #38bdf8;
--fp-warning: #60a5fa;
--fp-btn-primary-bg: linear-gradient(135deg, #38bdf8, #3b82f6);
--fp-btn-primary-text: #0b1220;
--fp-btn-primary-border: #2563eb;
--fp-btn-outline-bg: #111b30;
--fp-btn-outline-text: #dbeafe;
--fp-btn-outline-border: #3b4f75;
--fp-btn-radius: 12px;
--fp-card-shadow: 0 10px 28px rgba(2, 6, 23, 0.55);
}
/* Sherwood Home - фирменный стиль для карточки прораба */
body.theme-style-6 .foreman-style-scope {
--fp-card-bg: #ffffff;
--fp-surface-bg: #f6f7f9;
--fp-substage-bg: #ffffff;
--fp-border: rgba(15, 23, 42, 0.12);
--fp-title: #0f172a;
--fp-muted: #475569;
--fp-success: #16a34a;
--fp-warning: var(--brand-gold);
--fp-btn-primary-bg: var(--brand-green);
--fp-btn-primary-text: #ffffff;
--fp-btn-primary-border: rgba(0,0,0,0.15);
--fp-btn-outline-bg: #f8fafc;
--fp-btn-outline-text: #1e293b;
--fp-btn-outline-border: #cbd5e1;
--fp-btn-radius: 12px;
--fp-card-shadow: var(--shadow-1);
}
.stage-reports, .stage-gallery {
margin: 1rem 0;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}
.reports-title, .gallery-title {
margin: 0 0 0.75rem 0;
font-size: 0.95rem;
}
.report-item {
margin-bottom: 1rem;
}
.report-thumb {
max-width: 200px;
height: auto;
border-radius: var(--radius);
box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}
.report-comment {
margin: 0.35rem 0 0 0;
font-size: 0.9rem;
color: var(--color-text-muted);
}
/* Галерея (клиент) - сетка 3-4 в ряд */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
}
.gallery-item {
text-align: center;
}
.gallery-item img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: var(--radius);
cursor: pointer;
transition: opacity 0.2s;
}
.gallery-item img:hover {
opacity: 0.9;
}
.photo-link {
display: block;
}
.gallery-comment {
margin: 0.5rem 0 0 0;
font-size: 0.85rem;
color: var(--color-text-muted);
}
/* Комментарий клиента к сданному этапу (стройка на участке) */
.client-stage-comment-block {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}
.client-comments-list {
margin-bottom: 0.75rem;
}
.client-comment {
margin: 0.35rem 0;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.client-comment-form {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.client-comment-form textarea {
flex: 1;
min-width: 200px;
min-height: 2.25rem;
padding: 0.4rem 0.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-family: inherit;
resize: vertical;
}
/* Прогресс-бар */
.progress-section {
margin-bottom: 2rem;
}
.progress-bar-wrap {
position: relative;
height: 32px;
background: rgba(148, 163, 184, 0.28);
border-radius: var(--radius);
overflow: hidden;
}
.progress-bar {
height: 100%;
background: var(--color-success);
border-radius: var(--radius);
transition: width 0.3s;
}
.progress-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text);
}
/* ========== Карточка «Документы» клиента - 6 стилей ========== */
.client-docs-card .client-docs-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.client-docs-card .client-docs-header h2 {
margin: 0;
}
.client-docs-style-switcher {
display: flex;
align-items: center;
gap: 0.25rem;
}
.style-switcher-label {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-right: 0.25rem;
}
.doc-style-btn {
width: 28px;
height: 28px;
padding: 0;
font-size: 0.8rem;
font-weight: 600;
border: 1px solid var(--color-border);
background: var(--color-surface-2);
color: var(--color-text-muted);
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.doc-style-btn:hover {
background: var(--color-border);
color: var(--color-text);
}
.doc-style-btn.active {
background: var(--brand-green);
color: #fff;
border-color: var(--brand-green);
}
/* Базовые элементы документа */
.client-doc-item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.client-doc-item .doc-name a {
color: var(--color-accent);
text-decoration: none;
}
.client-doc-item .doc-name a:hover {
text-decoration: underline;
}
.doc-status-ok {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.doc-status-wait {
font-size: 0.85rem;
color: var(--color-warning);
}
.doc-actions-inline {
display: inline-flex;
gap: 0.35rem;
align-items: center;
}
/* Стиль 1: Компактная строка - всё в одну линию */
.client-docs-card[data-doc-style="1"] .client-docs-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
}
.client-docs-card[data-doc-style="1"] .client-doc-item {
gap: 0.35rem;
}
.client-docs-card[data-doc-style="1"] .doc-status-ok::before {
content: "· ";
color: var(--color-text-soft);
}
/* Стиль 2: Чипы - документы как pill-бейджи */
.client-docs-card[data-doc-style="2"] .client-docs-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.client-docs-card[data-doc-style="2"] .client-doc-item {
background: var(--color-surface-2);
padding: 0.35rem 0.65rem;
border-radius: 999px;
gap: 0.4rem;
}
.client-docs-card[data-doc-style="2"] .doc-status-ok {
font-size: 0.75rem;
}
.client-docs-card[data-doc-style="2"] .doc-actions-inline {
margin-left: 0.25rem;
}
/* Стиль 3: список - название и статус в одной строке, статусы в одном столбце */
.client-docs-card[data-doc-style="3"] .client-docs-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.client-docs-card[data-doc-style="3"] .client-doc-item {
display: grid;
grid-template-columns: 7.75rem minmax(0, 1fr);
align-items: center;
column-gap: 0.75rem;
row-gap: 0.2rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--color-border);
}
.client-docs-card[data-doc-style="3"] .client-doc-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.client-docs-card[data-doc-style="3"] .doc-name {
grid-column: 1;
}
.client-docs-card[data-doc-style="3"] .doc-status,
.client-docs-card[data-doc-style="3"] .doc-actions-inline {
grid-column: 2;
justify-self: start;
margin-left: 0;
}
/* Стиль 4: Таблица - документ | статус в колонках */
.client-docs-card[data-doc-style="4"] .client-docs-list {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25rem 1.5rem;
align-items: center;
font-size: 0.9rem;
}
.client-docs-card[data-doc-style="4"] .client-doc-item {
display: contents;
}
.client-docs-card[data-doc-style="4"] .client-doc-item .doc-name {
grid-column: 1;
}
.client-docs-card[data-doc-style="4"] .client-doc-item .doc-status,
.client-docs-card[data-doc-style="4"] .client-doc-item .doc-actions-inline {
grid-column: 2;
}
/* Стиль 5: Иконка + текст - компактно в ряд */
.client-docs-card[data-doc-style="5"] .client-docs-list {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.2rem;
}
.client-docs-card[data-doc-style="5"] .client-doc-item .doc-name::before {
content: "📄 ";
font-size: 0.9em;
}
.client-docs-card[data-doc-style="5"] .doc-status-ok {
font-size: 0.8rem;
}
.client-docs-card[data-doc-style="5"] .doc-status-ok::before {
content: " ";
}
/* Стиль 6: Ультра-компакт - всё в одну строку, даты мелко */
.client-docs-card[data-doc-style="6"] .client-docs-list {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.75rem;
font-size: 0.9rem;
}
.client-docs-card[data-doc-style="6"] .client-doc-item {
display: inline-flex;
align-items: baseline;
gap: 0.25rem;
}
.client-docs-card[data-doc-style="6"] .client-doc-item::after {
content: "";
margin-right: 0.25rem;
}
.client-docs-card[data-doc-style="6"] .client-doc-item:last-child::after {
display: none;
}
.client-docs-card[data-doc-style="6"] .client-doc-item:not(:last-child)::after {
content: "|";
color: var(--color-border);
font-weight: 300;
}
.client-docs-card[data-doc-style="6"] .doc-status-ok {
font-size: 0.75rem;
color: var(--color-text-soft);
}
/* ========== Глобальный компактный стиль (минимализм) - body.compact-mode ========== */
body.compact-mode .page-header {
margin-bottom: 1rem;
}
body.compact-mode .page-header h1 {
font-size: var(--typo-page-title);
font-weight: 600;
}
body.compact-mode .page-header .subtitle {
font-size: var(--typo-subtitle);
color: var(--color-text-muted);
}
body.compact-mode .card {
padding: 0.85rem 1rem;
margin-bottom: 1rem;
border-radius: var(--radius);
}
body.compact-mode .card h2 {
font-size: var(--typo-card-title);
font-weight: 600;
margin: 0 0 0.6rem 0;
}
body.compact-mode .card-meta {
font-size: var(--typo-secondary);
margin-top: 0.5rem;
}
body.compact-mode .progress-section {
margin-bottom: 1.25rem;
}
body.compact-mode .progress-section h2 {
font-size: var(--typo-card-title);
font-weight: 600;
margin: 0 0 0.5rem 0;
}
body.compact-mode .progress-bar-wrap {
height: 24px;
}
body.compact-mode .progress-text {
font-size: var(--typo-hint);
}
body.compact-mode .client-docs-card .client-docs-header h2 {
font-size: var(--typo-card-title);
}
body.compact-mode .client-docs-style-switcher {
transform: scale(0.9);
transform-origin: right center;
}
body.compact-mode .client-stages h2,
body.compact-mode .stages-section h2 {
font-size: var(--typo-card-title);
font-weight: 600;
margin: 0 0 0.6rem 0;
}
body.compact-mode .stage-card {
padding: 0.75rem 1rem;
margin-bottom: 0.65rem;
border-radius: var(--radius);
}
body.compact-mode .stages-section {
gap: 0.6rem;
}
body.compact-mode .stage-card-header {
gap: 0.5rem;
padding: 0.5rem 0.75rem;
margin-bottom: 0.5rem;
}
body.compact-mode .client-stages .stage-card-header {
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
body.compact-mode .stage-status-icon {
font-size: 1rem;
}
body.compact-mode .stage-name {
font-weight: 500;
font-size: var(--typo-lead);
}
body.compact-mode .stage-status-label {
font-size: var(--typo-micro);
color: var(--color-text-muted);
}
@media (max-width: 768px) {
body.compact-mode .client-stages .stage-card-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
column-gap: 0.55rem;
row-gap: 0.25rem;
}
body.compact-mode .client-stages .stage-status-icon {
grid-column: 1;
grid-row: 1;
}
body.compact-mode .client-stages .stage-name {
grid-column: 2;
grid-row: 1;
text-align: left;
}
body.compact-mode .client-stages .stage-status-label {
grid-column: 2;
grid-row: 2;
width: auto;
margin-top: 0;
text-align: left;
white-space: nowrap;
}
}
body.compact-mode .stage-gallery {
margin: 0.6rem 0 0 0;
padding-top: 0.6rem;
}
body.compact-mode .gallery-title,
body.compact-mode .reports-title {
font-size: var(--typo-secondary);
margin: 0 0 0.5rem 0;
}
body.compact-mode .stage-photo-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 0.4rem;
}
body.compact-mode .client-stage-comment-block {
margin-top: 0.6rem;
padding-top: 0.6rem;
}
body.compact-mode .client-comment-form textarea {
min-height: 60px;
font-size: var(--typo-control);
}
body.compact-mode .client-comment {
font-size: var(--typo-secondary);
}
body.compact-mode .project-gallery-section .card h2,
body.compact-mode .project-gallery-section h2 {
font-size: var(--typo-card-title);
}
body.compact-mode .photo-carousel-hint {
font-size: var(--typo-hint);
}
body.compact-mode .back-link {
font-size: var(--typo-subtitle);
margin-top: 0.5rem;
}
body.compact-mode section.card p {
font-size: var(--typo-subtitle);
}
/* Дашборды и карточки проектов */
body.compact-mode .main {
padding: 0.85rem 1rem;
}
body.compact-mode .breadcrumbs {
font-size: var(--typo-subtitle);
padding: 0.4rem 0;
}
body.compact-mode .dashboard-grid {
gap: 0.5rem;
}
body.compact-mode .dashboard-grid > .btn {
font-size: var(--typo-btn-sm);
}
body.compact-mode .project-card .project-name,
body.compact-mode .project-card .project-card-header .project-name {
font-size: var(--typo-lead);
}
body.compact-mode .project-card .project-type,
body.compact-mode .project-card .project-address {
font-size: var(--typo-secondary);
}
body.compact-mode .card-header-row h2 {
font-size: var(--typo-card-title);
margin: 0;
}
/* Таблицы */
body.compact-mode .data-table th,
body.compact-mode .data-table td,
body.compact-mode .users-table th,
body.compact-mode .users-table td,
body.compact-mode .admin-projects-table th,
body.compact-mode .admin-projects-table td {
padding: 0.5rem 0.65rem;
font-size: var(--typo-control);
}
body.compact-mode .admin-projects-thumb {
width: 48px;
height: 48px;
}
body.compact-mode .admin-project-row,
body.compact-mode .dashboard-recent-rows .admin-project-row {
padding: 0.5rem 0.75rem;
}
body.compact-mode .admin-project-row .project-name {
font-size: var(--typo-lead);
}
body.compact-mode .admin-project-row-meta {
font-size: var(--typo-caption);
}
/* Формы и кнопки - компактный принцип как в «Добавить этап» */
body.compact-mode .form-group {
margin-bottom: 0.5rem;
}
body.compact-mode .form-row .form-group {
margin-bottom: 0;
}
body.compact-mode .form-row {
gap: 0.5rem 0.75rem;
align-items: flex-end;
}
body.compact-mode .form-row .form-group {
min-width: 140px;
}
body.compact-mode .form-group label {
font-size: var(--typo-label);
margin-bottom: 0.2rem;
}
body.compact-mode .form-control {
padding: 0.25rem 0.5rem;
font-size: var(--typo-control);
min-height: 30px;
}
body.compact-mode .form-group .form-hint,
body.compact-mode .form-group .card-meta {
font-size: var(--typo-hint);
margin-top: 0.2rem;
}
body.compact-mode .card .subtitle {
margin-bottom: 0.5rem;
}
body.compact-mode textarea.form-control {
min-height: 80px;
padding: 0.25rem 0.5rem;
}
body.compact-mode .btn-small {
padding: 0.2rem 0.45rem;
font-size: var(--typo-btn-sm);
min-height: 28px;
}
body.compact-mode .btn {
font-size: var(--typo-btn);
}
/* Прораб, мастер - этапы и подэтапы */
body.compact-mode .foreman-style-scope .card,
body.compact-mode .substage-item,
body.compact-mode .foreman-substage-item {
padding: 0.65rem 0.85rem;
}
body.compact-mode .substage-name {
font-size: 0.9rem;
}
body.compact-mode .stage-item {
padding: 0.5rem 0.75rem;
}
/* Отчёты и аналитика */
body.compact-mode .report-section h2 {
font-size: 1rem;
margin: 0 0 0.5rem 0;
}
body.compact-mode .report-dashboard,
body.compact-mode .analytics-dashboard {
gap: 0.85rem;
}
/* Карточки проектов (сетка клиента, дашборды) */
body.compact-mode .project-card-variant-c .project-card-overlay {
padding: 0.6rem 0.85rem;
}
body.compact-mode .project-card-variant-c .project-card-photo {
height: 100%;
}
body.compact-mode .project-grid {
gap: 0.85rem;
}
body.compact-mode .flash {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
/* Пользователи */
.users-search-form {
margin-bottom: 1rem;
}
.users-search-row {
display: grid;
grid-template-columns: minmax(0, 1.8fr) minmax(180px, 0.9fr) auto;
gap: 0.75rem;
align-items: end;
}
.users-search-row input[type="text"] {
flex: 1;
min-width: 180px;
}
.users-role-filter {
min-width: 160px;
}
.users-list-details summary {
cursor: pointer;
font-weight: 600;
padding: 0.5rem 0;
user-select: none;
}
.users-list-details summary::-webkit-details-marker {
opacity: 0.6;
}
.users-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.2rem;
border-radius: var(--radius);
/* Во flex/grid-родителях без min-width:0 таблица может раздувать страницу по ширине */
max-width: 100%;
min-width: 0;
}
/* data-table - базовые стили (совместимо с users-table-wrap) */
.data-table {
width: 100%;
max-width: 100%;
border-collapse: collapse;
background: var(--color-surface);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--color-border);
}
.data-table th, .data-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
font-size: var(--typo-control);
/* break-word переносит длинные «слова» без пробелов; word-break: break-word устарел и даёт перенос по буквам в узких ячейках */
overflow-wrap: break-word;
word-break: normal;
}
/* Доска календаря: мини-график и фиксированная колонка - не ломать переносами внутри трека */
.data-table.cal-board-table .cal-board-chart-cell {
overflow-wrap: normal;
word-break: normal;
}
.data-table th {
background: var(--color-surface-2);
font-weight: 600;
}
/* ДП - подтверждение дат: без горизонтального скролла, таблица на всю ширину карточки */
.production-dates-pending-wrap .production-dates-pending-table {
table-layout: fixed;
width: 100%;
min-width: 0;
max-width: 100%;
}
.production-dates-pending-wrap .production-dates-pending-table th,
.production-dates-pending-wrap .production-dates-pending-table td {
min-width: 0;
word-break: normal;
overflow-wrap: break-word;
}
.production-dates-pending-wrap .production-dates-pending-table th:nth-child(1),
.production-dates-pending-wrap .production-dates-pending-table td:nth-child(1) {
width: 19%;
}
.production-dates-pending-wrap .production-dates-pending-table th:nth-child(2),
.production-dates-pending-wrap .production-dates-pending-table td:nth-child(2) {
width: 35%;
}
.production-dates-pending-wrap .production-dates-pending-table th:nth-child(3),
.production-dates-pending-wrap .production-dates-pending-table td:nth-child(3),
.production-dates-pending-wrap .production-dates-pending-table th:nth-child(4),
.production-dates-pending-wrap .production-dates-pending-table td:nth-child(4) {
width: 12%;
}
.production-dates-pending-wrap .production-dates-pending-table th:nth-child(5),
.production-dates-pending-wrap .production-dates-pending-table td:nth-child(5) {
width: 22%;
vertical-align: middle;
}
/* ДП - мобильные карточки вместо таблицы */
.production-dates-pending-mobile-list {
display: none;
}
.production-dates-pending-mcard {
margin: 0;
padding: 0.85rem 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface-2, #f8fafc);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.production-dates-mcard-line {
margin: 0 0 0.55rem 0;
font-size: var(--typo-control);
line-height: 1.45;
word-break: normal;
overflow-wrap: break-word;
}
.production-dates-mcard-line:last-of-type {
margin-bottom: 0.65rem;
}
.production-dates-mcard-label {
font-weight: 600;
color: var(--color-text);
}
.production-dates-mcard-value {
color: var(--color-text);
}
.production-dates-mcard-btn {
margin-top: 0.15rem;
box-sizing: border-box;
text-align: center;
}
@media (max-width: 768px) {
.production-dates-pending-mobile-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 0.35rem;
}
.production-dates-pending-desktop {
display: none !important;
}
}
/* Таблица «Закрыть день» - горизонтальный скролл на мобильных */
@media (max-width: 600px) {
.work-rows-wrap #work-rows {
min-width: 520px;
}
}
.worker-mobile-style-toggle {
display: none;
}
.worker-mobile-style-btn {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
border-radius: 999px;
padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
min-height: var(--form-compact-min-height);
font: inherit;
line-height: 1.2;
cursor: pointer;
}
.worker-mobile-style-btn.is-active {
background: rgba(16, 75, 45, 0.1);
border-color: rgba(16, 75, 45, 0.28);
color: var(--brand-green, #104b2d);
font-weight: 700;
}
.worker-row-summary {
display: none;
}
.worker-row-summary-title,
.worker-row-summary-meta {
display: block;
}
.worker-row-summary-title {
font-weight: 700;
color: var(--color-text);
}
.worker-row-summary-meta {
margin-top: 0.2rem;
font-size: 0.84rem;
color: var(--color-text-muted);
}
.worker-row-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.worker-report-table {
overflow: visible;
}
.worker-report-table tbody,
.worker-report-table tr.work-row,
.worker-report-table td.work-col-item,
.work-item-combobox {
position: relative;
}
.worker-report-table tr.work-row:focus-within {
z-index: 25;
}
#workerDayConfirmModal {
background: rgba(255, 255, 255, 0.58);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#workerQrScanModal {
background: rgba(255, 255, 255, 0.58);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.worker-day-confirm-modal {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(148, 163, 184, 0.28);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}
.worker-day-confirm-modal p {
margin: 0 0 1rem;
color: var(--color-text-muted);
line-height: 1.6;
}
.worker-qr-scan-hint {
margin: 0 0 1rem;
color: var(--color-text-muted);
line-height: 1.6;
}
.worker-qr-reader {
width: 100%;
min-height: 260px;
border-radius: 18px;
overflow: hidden;
background: #f8fafc;
border: 1px solid rgba(148, 163, 184, 0.22);
}
.worker-qr-reader video {
width: 100% !important;
height: auto !important;
border-radius: 18px;
}
.worker-qr-scan-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
flex-wrap: wrap;
margin-top: 1rem;
}
.worker-qr-scan-actions .btn {
min-width: 150px;
}
.worker-form-actions-row.form-toolbar {
flex-wrap: nowrap;
}
.worker-form-actions-row .form-toolbar-actions {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(72px, 0.62fr) minmax(0, 1fr);
gap: 0.75rem;
align-items: stretch;
width: 100%;
flex: 1 1 auto;
align-self: stretch;
}
.worker-form-actions-row .form-toolbar-actions .btn,
.worker-form-actions-row .form-toolbar-actions .worker-qr-trigger {
width: 100%;
min-width: 0;
justify-content: center;
white-space: nowrap;
}
.worker-day-confirm-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.worker-day-confirm-actions .btn {
min-width: 150px;
}
.users-table {
width: 100%;
border-collapse: collapse;
background: var(--color-surface);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--color-border);
}
.users-table th, .users-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}
.users-table th {
white-space: nowrap;
}
.kp-assign-form {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
.kp-assign-form .form-control {
width: auto;
min-width: 10rem;
max-width: 16rem;
}
@media (max-width: 760px) {
.worker-mobile-style-toggle {
display: inline-flex;
gap: 0.45rem;
flex-wrap: wrap;
margin: 0.5rem 0 0.9rem;
}
#close-day-form[data-mobile-style] .work-rows-wrap #work-rows {
min-width: 0;
}
#close-day-form[data-mobile-style] .worker-report-table {
border: none;
background: transparent;
}
#close-day-form[data-mobile-style] .worker-report-table thead {
display: none;
}
#close-day-form[data-mobile-style] .worker-report-table,
#close-day-form[data-mobile-style] .worker-report-table tbody {
display: block;
width: 100%;
}
#close-day-form[data-mobile-style] .worker-report-table tbody {
display: grid;
gap: 0.75rem;
}
#close-day-form[data-mobile-style] .worker-report-table tr.work-row {
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
box-shadow: var(--shadow-1);
overflow: visible;
}
#close-day-form[data-mobile-style] .worker-report-table td {
display: block;
width: 100%;
padding: 0;
border: none;
}
#close-day-form[data-mobile-style] .worker-report-table td::before {
display: block;
margin-bottom: 0.25rem;
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
}
#close-day-form[data-mobile-style] .worker-report-table .work-item-combobox,
#close-day-form[data-mobile-style] .worker-report-table .work-item-dropdown {
min-width: 0;
}
#close-day-form[data-mobile-style="compact"] .worker-report-table tr.work-row {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 0.65rem 0.75rem;
padding: 0.75rem;
}
#close-day-form[data-mobile-style="compact"] .worker-report-table .work-col-item {
grid-column: 1 / -1;
}
#close-day-form[data-mobile-style="compact"] .worker-report-table .work-col-percent {
grid-column: 1;
}
#close-day-form[data-mobile-style="compact"] .worker-report-table .work-col-comment {
grid-column: 2;
}
#close-day-form[data-mobile-style="compact"] .worker-report-table .work-col-actions {
grid-column: 1 / -1;
}
#close-day-form[data-mobile-style="compact"] .worker-report-table td[data-label]::before {
content: attr(data-label);
}
#close-day-form[data-mobile-style="compact"] .worker-row-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#close-day-form[data-mobile-style="compact"] .worker-row-actions .btn {
width: 100%;
justify-content: center;
min-height: var(--form-compact-min-height);
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row {
display: block;
padding: 0.8rem;
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="editing"] td + td {
margin-top: 0.8rem;
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="editing"] td[data-step-label]::before {
content: attr(data-step-label);
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="editing"] .worker-row-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 0.1rem;
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="editing"] .worker-row-actions .btn {
width: 100%;
justify-content: center;
min-height: var(--form-compact-min-height);
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] {
padding: 0.7rem 0.8rem;
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] td {
display: none;
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .work-col-item {
display: block;
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .work-col-actions {
display: block;
margin-top: 0.75rem;
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .work-item-combobox {
display: none;
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .worker-row-summary {
display: block;
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .work-col-item::before {
content: none;
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .worker-row-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#close-day-form[data-mobile-style="step"] .worker-report-table tr.work-row[data-row-state="confirmed"] .worker-row-actions .btn {
width: 100%;
justify-content: center;
min-height: var(--form-compact-min-height);
}
.worker-day-confirm-actions {
flex-direction: column;
}
.worker-day-confirm-actions .btn {
width: 100%;
}
.worker-qr-scan-actions {
flex-direction: column;
}
.worker-qr-scan-actions .btn {
width: 100%;
}
.worker-form-actions-row .form-toolbar-actions {
grid-template-columns: minmax(0, 1.22fr) minmax(64px, 0.58fr) minmax(0, 0.96fr);
gap: 0.4rem;
}
.worker-form-actions-row .form-toolbar-actions .btn,
.worker-form-actions-row .form-toolbar-actions .worker-qr-trigger {
padding: var(--btn-compact-padding-y) 0.6rem;
font-size: 0.92rem;
gap: 0.35rem;
}
}
/* Мои выполненные работы - строчный формат (номер слева, 3 строки справа) */
.worker-completed-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.worker-completed-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.6rem 0.75rem;
background: var(--color-bg-soft, #f8fafc);
border-radius: var(--radius, 6px);
border: 1px solid var(--color-border, #e2e8f0);
}
.worker-completed-num {
flex-shrink: 0;
width: 2.5rem;
min-height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
color: var(--color-text-muted, #64748b);
background: rgba(0, 0, 0, 0.04);
border-radius: 6px;
}
.worker-completed-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.worker-completed-name {
font-weight: 600;
color: var(--color-text, #0f172a);
}
.worker-completed-percent {
font-size: 0.9rem;
color: var(--color-text-muted, #64748b);
}
.worker-completed-status {
font-size: 0.85rem;
font-weight: 500;
}
.worker-completed-status--pending {
color: #b45309;
}
.worker-completed-status--approved {
color: #059669;
}
.worker-completed-status--rejected {
color: #dc2626;
}
/* Подтверждение работ - мастер и директор: компактный мобильный вид */
.work-approvals-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.work-approvals-mobile {
display: none;
}
@media (max-width: 768px) {
.work-approvals-desktop {
display: none;
}
.work-approvals-mobile {
display: block;
}
.work-approvals-worker-block {
margin-bottom: 1.25rem;
}
.work-approvals-worker-block:last-child {
margin-bottom: 0;
}
.work-approvals-worker-name {
margin: 0 0 0.5rem;
padding-bottom: 0.35rem;
font-size: 1rem;
font-weight: 700;
color: var(--color-text, #0f172a);
border-bottom: 2px solid var(--color-border, #e2e8f0);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
}
.work-approvals-worker-date {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-muted, #64748b);
}
.work-approvals-mobile-row {
display: flex;
flex-direction: column;
gap: 0.18rem;
padding: 0.3rem 0.5rem;
margin-bottom: 0.25rem;
background: var(--color-bg-soft, #f8fafc);
border-radius: var(--radius, 6px);
border: 1px solid var(--color-border, #e2e8f0);
}
.work-approvals-mobile-row:last-child {
margin-bottom: 0;
}
.work-approvals-mobile-line {
display: block;
}
.work-approvals-mobile-obj {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted, #64748b);
}
.work-approvals-mobile-work .work-approvals-select,
.work-approvals-mobile-pct .work-approvals-select {
width: 100%;
max-width: none;
padding: 0.15rem 0.3rem;
min-height: 1.6rem;
font-size: 0.8rem;
}
.work-approvals-mobile-actions {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.work-approvals-mobile-actions .btn {
padding: var(--btn-small-compact-padding-y) var(--btn-small-compact-padding-x);
font-size: 0.85rem;
min-height: var(--form-compact-min-height);
}
.work-approvals-inline-form {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.work-approvals-select {
min-width: 0;
max-width: 12rem;
padding: 0.15rem 0.3rem;
min-height: 1.6rem;
font-size: 0.8rem;
}
}
/* Resizable report columns (per-user) */
.users-table.report-cols-resizable {
table-layout: fixed;
}
.users-table.report-cols-resizable th {
position: relative;
padding-right: 18px;
}
.users-table.report-cols-resizable td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.users-table.report-cols-resizable .col-resizer {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
cursor: col-resize;
}
.users-table.report-cols-resizable th:hover .col-resizer::before {
content: "";
position: absolute;
top: 20%;
bottom: 20%;
left: 4px;
width: 2px;
border-radius: 2px;
background: rgba(201, 162, 39, 0.7);
}
/* На мобильных: скрыть ручки ресайза, сохранить адаптивность */
@media (max-width: 768px) {
.users-table.report-cols-resizable .col-resizer,
.wr-list.wr-cols-resizable .col-resizer {
display: none;
}
.users-table.report-cols-resizable th {
padding-right: 0.75rem;
}
.wr-list.wr-cols-resizable .wr-cell {
padding-right: 0.75rem;
}
}
/* wr-list: ресайз колонок (grid) */
.wr-list.wr-cols-resizable .wr-cell {
position: relative;
padding-right: 18px;
}
.wr-list.wr-cols-resizable .col-resizer {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
cursor: col-resize;
}
.wr-list.wr-cols-resizable .wr-cell:hover .col-resizer::before {
content: "";
position: absolute;
top: 20%;
bottom: 20%;
left: 4px;
width: 2px;
border-radius: 2px;
background: rgba(201, 162, 39, 0.7);
}
.wr-list.wr-cols-resizable .wr-row.wr-style-3-main {
grid-template-columns: var(--wr-date, 90px) minmax(80px, var(--wr-work, 1.8fr)) minmax(70px, var(--wr-project, 1.2fr)) minmax(70px, var(--wr-worker, 1fr)) var(--wr-pct, 80px) var(--wr-amount, 100px) minmax(60px, var(--wr-comment, 1.2fr));
}
.wr-list.wr-cols-resizable .wr-row.wr-style-3-main-admin {
grid-template-columns: var(--wr-date, 90px) minmax(80px, var(--wr-work, 1.6fr)) minmax(70px, var(--wr-project, 1.1fr)) minmax(70px, var(--wr-worker, 1fr)) var(--wr-pct, 80px) var(--wr-amount, 100px) minmax(60px, var(--wr-comment, 1fr)) var(--wr-actions, 120px);
}
/* Sticky filter row in reports */
.report-filter-row-sticky th {
position: sticky;
top: 0;
z-index: 10;
background: var(--color-surface);
box-shadow: 0 1px 0 var(--color-border);
}
.wr-list .report-filter-row-sticky {
position: sticky;
top: 0;
z-index: 10;
background: var(--color-surface);
box-shadow: 0 1px 0 var(--color-border);
}
/* Greeting banner (all authenticated pages) */
.greeting-banner {
margin: 0 0 1rem 0;
padding: 0.75rem 0.9rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: linear-gradient(135deg, rgba(201, 162, 39, 0.10), rgba(16, 75, 45, 0.10));
color: var(--color-text);
box-shadow: 0 1px 1px rgba(15,23,42,0.04);
}
.greeting-banner-text {
font-weight: 600;
line-height: 1.45;
}
/* ===== Reports: worker report row style test ===== */
.wr-style-switch {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.wr-style-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 0.6rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
color: var(--color-text-muted);
text-decoration: none;
font-size: 0.92rem;
white-space: nowrap;
}
.wr-style-btn:hover {
border-color: var(--color-accent);
color: var(--color-text);
background: var(--color-surface-2);
}
.wr-style-btn.active {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
.wr-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.25rem;
max-width: 100%;
}
.wr-style-3-wrap {
min-width: 0;
}
.wr-row {
display: grid;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.6rem;
border: 1px solid var(--color-border);
background: var(--color-surface-2);
border-radius: var(--radius);
min-width: 0;
}
.wr-head {
background: var(--color-surface);
border-color: var(--color-border-strong);
padding: 0.4rem 0.75rem;
}
.wr-head-cell {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.wr-row * {
min-width: 0;
}
.wr-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wr-mono {
font-variant-numeric: tabular-nums;
}
.wr-right {
text-align: right;
}
.wr-pill {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 0.5rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
white-space: nowrap;
}
.wr-pill-muted {
color: var(--color-text-muted);
}
.wr-pill-accent {
border-color: rgba(201, 162, 39, 0.45);
background: rgba(201, 162, 39, 0.12);
}
.wr-main-text {
font-weight: 600;
}
.wr-sub {
color: var(--color-text-muted);
}
/* Style presets (all no-wrap, just different layouts) */
.wr-style-1 {
grid-template-columns: 120px 1.3fr 1.1fr 90px 2.2fr 120px 120px 120px 1.2fr;
}
.wr-style-2 {
grid-template-columns: 2.6fr 1.2fr 1.1fr 120px 120px 140px 1.1fr;
}
.wr-style-3 {
grid-template-columns: 2.6fr 1.5fr 1.3fr 140px 140px 1.2fr;
}
.wr-style-4 {
grid-template-columns: 140px 1.5fr 1.4fr 2.8fr 1.4fr 1.2fr;
}
.wr-style-5 {
grid-template-columns: 2.6fr 2.2fr 90px 120px 120px 140px 1.2fr;
}
.wr-style-6 {
grid-template-columns: 2.8fr 2.1fr 1.2fr 120px 1.2fr;
}
/* Worker reports main view: Style 3 (pills) with date column - компактный, влезает на экран */
.wr-style-3-main {
min-width: 0;
grid-template-columns: 90px minmax(80px, 1.8fr) minmax(70px, 1.2fr) minmax(70px, 1fr) 80px 100px minmax(60px, 1.2fr);
}
.wr-style-3-main-admin {
min-width: 0;
grid-template-columns: 90px minmax(80px, 1.6fr) minmax(70px, 1.1fr) minmax(70px, 1fr) 80px 100px minmax(60px, 1fr) 120px;
}
.wr-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: nowrap;
}
.wr-actions form {
margin: 0;
}
.users-table th {
font-weight: 600;
background: var(--color-surface-2);
color: var(--color-text);
}
.users-table tbody tr:nth-child(even) td {
background: rgba(148, 163, 184, 0.06);
}
.users-table tbody tr:hover td {
background: rgba(148, 163, 184, 0.10);
}
@media (prefers-color-scheme: dark) {
.users-table tbody tr:nth-child(even) td { background: rgba(148, 163, 184, 0.05); }
.users-table tbody tr:hover td { background: rgba(148, 163, 184, 0.09); }
}
/* Сортировка в таблицах (кликабельные заголовки) */
.table-sort-link {
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
min-height: 1.25rem;
gap: 0.35rem;
}
.table-sort-link:hover {
color: var(--color-text);
text-decoration: underline;
}
.table-sort-ind {
font-size: 0.85em;
opacity: 0.9;
}
.badge {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.85rem;
}
.badge-admin { background: var(--color-text); color: var(--color-surface); }
.badge-success { background: var(--color-success, #16a34a); color: #fff; }
.badge-manager_op { background: #2d5c4b; color: #fff; }
.badge-superadmin { background: #6b2d5c; color: #fff; }
.badge-super { background: #6b2d5c; color: #fff; }
.badge-director_construction { background: #2c5282; color: #fff; }
.badge-director_production { background: #2b6cb0; color: #fff; }
.badge-foreman { background: #b7791f; color: #fff; }
.badge-master { background: var(--color-accent); color: #fff; }
.badge-worker { background: #718096; color: #fff; }
.badge-client { background: var(--color-success); color: #fff; }
.badge-warning { background: var(--color-warning); color: #fff; }
.badge-completed { background: var(--color-success); color: #fff; }
/* Чек-лист завершения проекта: по умолчанию свёрнут; раскрыт, если не все пункты пройдены */
.project-closure-readiness-details > summary {
list-style: none;
cursor: pointer;
}
.project-closure-readiness-details > summary::-webkit-details-marker {
display: none;
}
.project-closure-readiness-summary {
padding: 0;
border-radius: var(--radius-sm);
outline: none;
}
.project-closure-readiness-summary:focus-visible {
box-shadow: 0 0 0 2px var(--focus-ring-strong, rgba(201, 162, 39, 0.45));
}
.project-closure-readiness-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
min-width: 0;
}
.project-closure-readiness-summary-title {
margin: 0;
font-size: var(--typo-card-title, 1.1rem);
font-weight: 600;
line-height: 1.25;
color: var(--color-text);
}
.project-closure-readiness-chevron {
flex-shrink: 0;
width: 0.55rem;
height: 0.55rem;
border-right: 2px solid var(--color-text-muted);
border-bottom: 2px solid var(--color-text-muted);
transform: rotate(45deg);
margin-top: -0.15rem;
transition: transform 0.2s ease;
}
.project-closure-readiness-details[open] .project-closure-readiness-chevron {
transform: rotate(-135deg);
margin-top: 0.12rem;
}
.project-closure-readiness-body {
margin-top: 0.85rem;
}
.project-closure-readiness-body > .subtitle:first-child {
margin-top: 0;
}
/* Чек-лист завершения проекта (страница этапов) */
.project-closure-readiness-card .project-closure-checklist {
margin: 0.75rem 0 0 0;
padding-left: 1.2rem;
line-height: 1.45;
}
.project-closure-readiness-card .project-closure-checklist li {
margin-bottom: 0.35rem;
}
.project-closure-readiness-card .project-closure-ok {
color: var(--color-success);
}
.project-closure-readiness-card .project-closure-bad {
color: var(--color-danger);
}
.project-closure-readiness-card .project-closure-detail {
font-weight: 500;
}
.project-closure-readiness-card .project-closure-summary--ok {
color: var(--color-success);
font-weight: 600;
}
.page-header-actions .project-close-form,
.stages-page-footer .project-close-form {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
margin: 0;
}
.stages-page-footer {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
}
/* Единое скругление в ряду (все кнопки - btn-small) */
.stages-page-footer .btn,
.stages-page-footer .project-close-form button.btn {
border-radius: var(--radius-sm);
box-sizing: border-box;
}
.project-force-close-label {
font-size: 0.8rem;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
gap: 0.25rem;
cursor: pointer;
user-select: none;
}
.badge-pending { background: var(--color-warning, #eab308); color: #1a1a1a; }
.badge-approved { background: var(--color-success); color: #fff; }
.badge-rejected { background: var(--color-danger, #c53030); color: #fff; }
.badge-success-subtle { background: color-mix(in srgb, var(--color-success) 22%, transparent); color: var(--color-success); font-weight: 600; }
.badge-warning-subtle { background: color-mix(in srgb, var(--color-warning) 22%, transparent); color: var(--color-warning); font-weight: 600; }
/* Двухколоночный layout */
.two-column-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
@media (max-width: 768px) {
.two-column-layout {
grid-template-columns: 1fr;
}
}
/* Модальное окно */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
}
/* Подложка для модалок мастера (фотоотчёт, редактирование этапа) */
.modal-report {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
}
.modal-report .modal-content {
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal-report .form-control::placeholder,
.modal-report .form-control::-webkit-input-placeholder {
color: var(--color-text-muted);
opacity: 1;
}
.modal-report .form-control {
color: var(--color-text);
}
.modal.active {
display: flex;
}
.modal-content {
background: var(--color-card);
padding: 2rem;
border-radius: var(--radius);
max-width: 500px;
width: 90%;
max-height: calc(100dvh - 2rem);
overflow-y: auto;
position: relative;
}
.modal-close {
position: absolute;
right: 1rem;
top: 1rem;
font-size: 1.5rem;
cursor: pointer;
color: var(--color-text-muted);
}
.modal-close:hover {
color: var(--color-text);
}
.modal-close:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.modal-content h3 {
margin: 0 0 1.5rem 0;
}
/* Lightbox для фото на весь экран */
.lightbox {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.92);
align-items: center;
justify-content: center;
touch-action: pan-y;
user-select: none;
}
.lightbox.active {
display: flex;
}
.lightbox-close {
position: absolute;
right: 1rem;
top: 1rem;
font-size: 2rem;
line-height: 1;
color: rgba(255,255,255,0.85);
cursor: pointer;
background: rgba(0,0,0,0.35);
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
z-index: 2001;
}
.lightbox-close:hover {
background: rgba(0,0,0,0.6);
color: #fff;
}
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.38);
border: none;
color: rgba(255,255,255,0.9);
font-size: 2.2rem;
line-height: 1;
width: 44px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 6px;
z-index: 2001;
padding: 0;
}
.lightbox-prev { left: 0.75rem; }
.lightbox-next { right: 0.75rem; }
.lightbox-prev:hover,
.lightbox-next:hover {
background: rgba(0,0,0,0.6);
color: #fff;
}
@media (max-width: 480px) {
.lightbox-prev,
.lightbox-next {
display: none;
}
}
.lightbox-counter {
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.5);
color: rgba(255,255,255,0.9);
padding: 4px 14px;
border-radius: 20px;
font-size: 0.82rem;
font-weight: 500;
pointer-events: none;
white-space: nowrap;
}
.lightbox-track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.18s ease;
will-change: transform;
}
.lightbox-track.is-instant {
transition: none;
}
.lightbox-slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 4vh 4vw;
box-sizing: border-box;
}
.lightbox-slide img,
.lightbox-img {
max-width: 92%;
max-height: 92%;
object-fit: contain;
transition: opacity 0.11s ease;
border-radius: 4px;
}
.lightbox-img.lb-fade {
opacity: 0;
}
/* Пустое состояние */
.empty-state {
text-align: center;
color: var(--color-text-muted);
padding: 3rem 1.5rem;
font-size: 1rem;
line-height: 1.5;
}
.empty-state a {
color: var(--color-accent);
text-decoration: none;
}
.empty-state a:hover {
text-decoration: underline;
}
/* Кнопка "Назад" */
.back-link {
display: inline-block;
margin-top: 1rem;
}
/* Адаптивность для планшета 10" */
@media (max-width: 1024px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Админ: заявки на редактирование */
.edit-request-card {
margin-bottom: 1.5rem;
}
.edit-request-header h3 {
margin: 0 0 0.25rem 0;
}
.edit-request-meta {
margin: 0 0 1rem 0;
color: var(--color-text-muted);
font-size: 0.9rem;
}
/* Сообщение мастера к заявке - выделение для админа */
.master-comment-highlight {
background: #fff3cd;
border: 2px solid #f39c12;
border-radius: var(--radius);
padding: 1rem;
margin-bottom: 1rem;
font-size: 1rem;
}
.edit-request-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.edit-request-comparison {
grid-template-columns: 1fr;
}
}
/* =========================
Стили интерфейса (1–5: карточка проекта 200, 6: Sherwood Home)
========================= */
.theme-toggle {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.15rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.06);
border: 1px solid rgba(148, 163, 184, 0.4);
}
.theme-toggle-btn {
border: none;
background: transparent;
color: var(--color-text-muted);
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.8rem;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
.theme-toggle-btn.is-active {
background: var(--brand-green);
color: #fff;
box-shadow: 0 0 0 1px rgba(16, 75, 45, 0.4);
}
/* Стиль 1 - нейтральный (карточка проекта 200) */
body.theme-style-1 {
--color-bg: #f8fafc;
--color-surface: #ffffff;
--color-surface-2: #f8fafc;
--color-text: #0f172a;
--color-text-muted: #64748b;
--color-dark: #0f172a;
--color-border: #d6deea;
--color-accent: #2563eb;
--color-accent-contrast: #fff;
--color-success: #16a34a;
--color-warning: #f59e0b;
--color-danger: #ef4444;
}
body.theme-style-1 .btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); border-color: #1e40af; color: #fff; }
body.theme-style-1 .btn-primary:hover { filter: brightness(0.95); }
body.theme-style-1 .users-table th { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; }
/* Стиль 2 - зелёный (карточка проекта 200) */
body.theme-style-2 {
--color-bg: #eefcf6;
--color-surface: #f6fffb;
--color-surface-2: #f8fffc;
--color-text: #113229;
--color-text-muted: #4d6b62;
--color-dark: #113229;
--color-border: #c5ead7;
--color-accent: #059669;
--color-accent-contrast: #fff;
--color-success: #059669;
--color-warning: #d97706;
--color-danger: #dc2626;
}
body.theme-style-2 .btn-primary { background: linear-gradient(135deg, #10b981, #059669); border-color: #047857; color: #fff; }
body.theme-style-2 .btn-primary:hover { filter: brightness(0.95); }
body.theme-style-2 .users-table th { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
/* Стиль 3 - оранжевый (карточка проекта 200) */
body.theme-style-3 {
--color-bg: #fff5e6;
--color-surface: #fffaf2;
--color-surface-2: #fffdf8;
--color-text: #412819;
--color-text-muted: #7c5a41;
--color-dark: #412819;
--color-border: #f3d3a3;
--color-accent: #ea580c;
--color-accent-contrast: #fff;
--color-success: #16a34a;
--color-warning: #ea580c;
--color-danger: #dc2626;
}
body.theme-style-3 .btn-primary { background: linear-gradient(135deg, #f97316, #ea580c); border-color: #c2410c; color: #fff; }
body.theme-style-3 .btn-primary:hover { filter: brightness(0.95); }
body.theme-style-3 .users-table th { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; }
/* Стиль 4 - фиолетовый (карточка проекта 200) */
body.theme-style-4 {
--color-bg: #efebff;
--color-surface: #f7f5ff;
--color-surface-2: #f9f7ff;
--color-text: #2e1f63;
--color-text-muted: #5b4d95;
--color-dark: #2e1f63;
--color-border: #d9ccff;
--color-accent: #7c3aed;
--color-accent-contrast: #fff;
--color-success: #16a34a;
--color-warning: #d97706;
--color-danger: #dc2626;
}
body.theme-style-4 .btn-primary { background: linear-gradient(135deg, #8b5cf6, #7c3aed); border-color: #6d28d9; color: #fff; }
body.theme-style-4 .btn-primary:hover { filter: brightness(0.95); }
body.theme-style-4 .users-table th { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }
/* Стиль 5 - тёмный (карточка проекта 200) */
body.theme-style-5 {
--color-bg: #111c33;
--color-surface: #16233e;
--color-surface-2: #0f172a;
--color-text: #eaf1ff;
--color-text-muted: #9fb1d7;
--color-dark: #eaf1ff;
--color-border: #2b3b5f;
--color-accent: #38bdf8;
--color-accent-contrast: #0b1220;
--color-success: #34d399;
--color-warning: #fbbf24;
--color-danger: #f87171;
}
body.theme-style-5 .btn-primary { background: linear-gradient(135deg, #38bdf8, #3b82f6); border-color: #2563eb; color: #fff; }
body.theme-style-5 .btn-primary:hover { filter: brightness(0.95); }
body.theme-style-5 .users-table th { background: linear-gradient(135deg, #38bdf8, #3b82f6); color: #0b1220; }
body.theme-style-5 .header { background: rgba(2, 6, 23, 0.95); }
/* Стиль 6 - Sherwood Home (фирменный) */
body.theme-style-6 {
--color-bg: #f6f7f9;
--color-surface: #ffffff;
--color-surface-2: #fbfcfd;
--color-text: #0f172a;
--color-text-muted: #475569;
--color-dark: #0f172a;
--color-border: rgba(15, 23, 42, 0.12);
--color-accent: var(--brand-gold);
--color-accent-contrast: #0b0f1a;
--color-success: #16a34a;
--color-warning: #f59e0b;
--color-danger: #ef4444;
}
body.theme-style-6 .btn-primary { background: var(--brand-green); border-color: rgba(0,0,0,0.15); color: #fff; }
body.theme-style-6 .btn-primary:hover { background: var(--brand-green-2); }
body.theme-style-6 .users-table th { background: var(--brand-green); color: #fff; }
body.theme-style-6 .header { background: var(--brand-green); }
body.theme-style-6 .theme-toggle-btn.is-active { background: var(--brand-gold); color: #0b0f1a; }
/* Связи ролей - контраст на зелёной шапке Sherwood */
body.theme-style-6 .nav-link-roles.active {
background: var(--brand-gold) !important;
color: #0b0f1a !important;
box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.6);
}
.edit-request-section h4 {
margin: 0 0 0.5rem 0;
font-size: 0.95rem;
}
.edit-request-photos {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.edit-request-photos img {
max-width: 120px;
max-height: 120px;
object-fit: cover;
border-radius: var(--radius);
}
.edit-request-photos .muted {
color: var(--color-text-muted);
font-size: 0.9rem;
}
.edit-request-comment {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.edit-request-actions {
display: flex;
gap: 0.5rem;
}
.edit-warning {
background: #fff3cd;
padding: 0.75rem;
border-radius: var(--radius);
margin-bottom: 1rem;
font-size: 0.95rem;
}
/* Карусель фото в заявках (пролистывание) */
.photo-carousel-wrap {
margin-bottom: 0.5rem;
}
.photo-carousel {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding: 0.5rem 0;
scroll-snap-type: x mandatory;
}
.photo-carousel-item {
flex: 0 0 auto;
scroll-snap-align: start;
}
.photo-carousel-item {
cursor: pointer;
}
.photo-carousel-item {
width: 200px;
height: 200px;
overflow: hidden;
border-radius: var(--radius);
}
.photo-carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: var(--radius);
display: block;
}
/* Слайд карусели (фото + комментарий) */
.photo-carousel-slide {
flex: 0 0 auto;
scroll-snap-align: start;
}
.photo-carousel-slide .report-comment,
.photo-carousel-slide .gallery-comment {
margin: 0.35rem 0 0 0;
max-width: 200px;
}
/* Карусель фото на этапах (мастер, клиент) */
.stage-photo-carousel .photo-carousel-item {
cursor: pointer;
}
.stage-photo-carousel .photo-carousel-item img {
transition: opacity 0.2s;
}
.stage-photo-carousel .photo-carousel-item:hover img {
opacity: 0.9;
}
/* Плиточная карусель - горизонтальный скролл с плитками (мастер, этапы) */
.stage-photo-carousel-tiles-wrap {
margin-bottom: 0.5rem;
position: relative;
}
.stage-photo-carousel-tiles-wrap.project-gallery-with-arrows {
padding: 0 40px 0 0;
}
.stage-photo-carousel-tiles-wrap.project-gallery-with-arrows .gallery-arrow {
top: 50%;
transform: translateY(-50%);
}
.stage-photo-carousel-tiles {
display: flex;
gap: 0.5rem;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 0.5rem 0;
-webkit-overflow-scrolling: touch;
}
/* Горизонтальная карусель: превью 4:3 - div.stage-photo-thumb-frame; панорамы - object-fit:cover + увеличение. */
.stage-photo-carousel-tiles .stage-photo-tile {
flex: 0 0 120px;
min-width: 120px;
max-width: 120px;
scroll-snap-align: start;
flex-shrink: 0;
scroll-snap-align: start;
aspect-ratio: auto;
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
min-height: 0;
}
.stage-photo-carousel-tiles .stage-photo-tile > .stage-photo-tile-link {
display: block;
width: 100%;
max-width: 100%;
flex: 0 0 auto;
flex-shrink: 0;
line-height: 0;
text-decoration: none;
color: inherit;
}
.stage-photo-carousel-tiles .stage-photo-thumb-frame {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--color-surface-2);
}
.stage-photo-carousel-tiles .stage-photo-thumb-frame img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
object-position: center;
}
/* Галерея проекта у клиента - плитки в 2 раза больше */
.project-gallery-section .stage-photo-carousel-tiles .stage-photo-tile {
flex: 0 0 240px;
min-width: 240px;
max-width: 240px;
}
.stage-photo-carousel-tiles .stage-photo-tile-caption {
max-width: 100%;
}
.stage-photo-tile-caption {
margin: 0.25rem 0 0 0;
font-size: 0.78rem;
color: var(--color-text-muted);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Плиточная сетка фото этапов (клиент, прораб) */
.stage-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 0.5rem;
}
.stage-photo-tile {
aspect-ratio: 1;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-surface-2);
}
.stage-photo-tile-link {
display: block;
width: 100%;
height: 100%;
}
.stage-photo-tile-link img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.2s;
}
.stage-photo-tile-link:hover img {
opacity: 0.9;
}
.stage-photo-caption {
margin: 0.25rem 0 0 0;
font-size: 0.75rem;
color: var(--color-text-muted);
line-height: 1.3;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.foreman-stage-photos .stage-photo-tile {
display: flex;
flex-direction: column;
}
.photo-carousel-hint {
font-size: 0.85rem;
color: var(--color-text-muted);
margin: 0.25rem 0 0 0;
}
/* Мини-галерея в карточке проекта (клиент) */
.project-card-gallery {
position: relative;
width: 100%;
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
}
.project-card-gallery.project-card-photo-mini {
height: 100px;
margin: -1rem -1rem 0.75rem -1rem;
}
.project-card-gallery.project-card-gallery-large {
/* Background galleries follow the card, including square dashboard tiles. */
height: 100%;
margin: 0;
position: absolute;
inset: 0;
border-radius: var(--radius);
}
.project-gallery-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
height: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
}
.project-gallery-track::-webkit-scrollbar {
display: none;
}
.project-gallery-slide {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
overflow: hidden;
min-height: 0;
}
.project-gallery-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.project-gallery-dots {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 4px;
z-index: 2;
}
.project-gallery-dots .gallery-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
cursor: pointer;
transition: background 0.2s;
}
.project-gallery-dots .gallery-dot.active {
background: #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
/* Стрелки карусели галереи */
.gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(0,0,0,0.4);
color: #fff;
cursor: pointer;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.gallery-arrow:hover {
background: rgba(0,0,0,0.6);
}
.gallery-arrow::before {
content: '';
width: 8px;
height: 8px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
}
.gallery-arrow-left {
left: 8px;
}
.gallery-arrow-left::before {
transform: rotate(45deg);
margin-left: 4px;
}
.gallery-arrow-right {
right: 8px;
}
.gallery-arrow-right::before {
transform: rotate(225deg);
margin-right: 4px;
}
.gallery-arrow-large {
width: 40px;
height: 40px;
}
.gallery-arrow-large::before {
width: 10px;
height: 10px;
}
.project-gallery-with-arrows {
position: relative;
}
.project-gallery-section .project-gallery-full .photo-carousel {
display: flex;
gap: 0.75rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 0.5rem 0;
scrollbar-width: none;
}
.project-gallery-section .project-gallery-full .photo-carousel::-webkit-scrollbar { display: none; }
.project-gallery-section .project-gallery-full .photo-carousel-slide {
flex: 0 0 auto;
scroll-snap-align: center;
width: 280px;
height: 200px;
overflow: hidden;
border-radius: var(--radius);
}
.project-gallery-section .project-gallery-full .photo-carousel-item {
display: block;
width: 100%;
height: 100%;
}
.project-gallery-section .project-gallery-full .photo-carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: var(--radius);
display: block;
}
/* Клиентская карусель в стиле coverflow */
.client-coverflow-carousel {
perspective: 900px;
padding: 0.75rem 0.25rem 1rem;
}
.client-coverflow-slide {
transition: transform 0.28s ease, opacity 0.28s ease, filter 0.28s ease;
opacity: 0.65;
filter: saturate(0.85);
transform: scale(0.9);
}
.client-coverflow-slide.is-left {
transform: translateX(4px) rotateY(8deg) scale(0.9);
}
.client-coverflow-slide.is-right {
transform: translateX(-4px) rotateY(-8deg) scale(0.9);
}
.client-coverflow-slide.is-active {
opacity: 1;
filter: none;
transform: scale(1);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.client-coverflow-slide .photo-carousel-item {
border-radius: calc(var(--radius) + 2px);
}
@media (max-width: 768px) {
.project-gallery-section .project-gallery-full .photo-carousel-slide {
width: min(84vw, 320px);
height: 200px;
}
.client-coverflow-slide.is-left,
.client-coverflow-slide.is-right {
transform: scale(0.92);
}
}
/* Фото от прораба в подтверждении этапов (директор по строительству) */
.stage-confirm-photos .photo-carousel {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.stage-confirm-photos .photo-carousel-item {
display: block;
width: 56px;
height: 56px;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
}
.stage-confirm-photos .photo-carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* Подтверждение этапов: таблица и скролл при необходимости - внутри белой карточки */
body.stage-confirmations-page .users-table-wrap.stage-confirm-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
/* table-layout: fixed + % по col - «Фото» не раздвигает «Действие» за пределы блока */
body.stage-confirmations-page table.users-table.stage-confirm-table {
width: 100%;
max-width: 100%;
table-layout: fixed !important;
overflow: visible;
}
body.stage-confirmations-page .stage-confirm-col-stage,
body.stage-confirmations-page .stage-confirm-cell-stage,
body.stage-confirmations-page .stage-confirm-col-substage,
body.stage-confirmations-page .stage-confirm-cell-substage {
min-width: 0;
box-sizing: border-box;
vertical-align: top;
}
body.stage-confirmations-page .stage-confirm-stage-text {
display: block;
width: 100%;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.35;
}
body.stage-confirmations-page .stage-confirm-cell-photos {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
vertical-align: top;
}
body.stage-confirmations-page .stage-confirm-cell-photos .stage-comment {
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
max-width: 100%;
}
body.stage-confirmations-page .stage-confirm-cell-photos .stage-photo-carousel-tiles-wrap {
max-width: 100%;
overflow: hidden;
}
body.stage-confirmations-page .stage-confirm-cell-action {
min-width: 0;
vertical-align: top;
overflow: visible;
}
/* Доли колонок при table-layout: fixed (сумма ~100%) */
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-project { width: 12%; }
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-type { width: 10%; }
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-stage { width: 17%; }
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-photos { width: 46%; min-width: 0; }
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-action { width: 15%; min-width: 12rem; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-project { width: 9%; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-type { width: 8%; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-stage { width: 10%; min-width: 0; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-substage { width: 10%; min-width: 0; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-foreman { width: 9%; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-photos { width: 36%; min-width: 0; }
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-action { width: 18%; min-width: 11.5rem; }
body.stage-confirmations-page .stage-confirm-actions.btn-row {
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
max-width: 100%;
}
body.stage-confirmations-page .stage-confirm-actions.btn-row .btn {
flex: 0 0 auto;
}
body.stage-confirmations-page .stage-confirm-actions.btn-row form {
flex: 0 0 auto;
display: flex;
align-items: stretch;
}
body.stage-confirmations-page .stage-confirm-actions.btn-row form > .btn {
width: 100%;
min-height: var(--control-height-sm);
}
body.stage-confirmations-page .stage-confirm-actions.btn-row > .reject-stage-btn {
min-height: var(--control-height-sm);
align-self: stretch;
}
/* «Чат»: та же высота и отступы, что у Подтвердить/Отклонить; ширина по короткому слову */
body.stage-confirmations-page .stage-confirm-actions.btn-row > a.btn.btn-small.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch;
box-sizing: border-box;
min-height: var(--control-height-sm);
padding: var(--btn-small-compact-padding-y) var(--btn-small-compact-padding-x);
font-size: 0.84rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
width: auto;
flex: 0 0 auto;
}
body.stage-confirmations-page .stage-confirm-cell-photos .stage-photo-carousel-tiles {
max-width: 100%;
flex-wrap: wrap;
overflow-x: visible;
scroll-snap-type: none;
}
body.stage-confirmations-page .stage-confirm-table th {
background: var(--color-surface-2) !important;
color: var(--color-text) !important;
border-bottom: 1px solid var(--color-border);
}
body.stage-confirmations-page .stage-confirm-table th.stage-confirm-col-stage,
body.stage-confirmations-page .stage-confirm-table th.stage-confirm-col-substage {
white-space: nowrap !important;
line-height: 1.25;
}
body.stage-confirmations-page .stage-confirm-table th.stage-confirm-col-action {
white-space: nowrap;
}
body.stage-confirmations-page .stage-confirm-table td[data-label="Проект"],
body.stage-confirmations-page .stage-confirm-table td[data-label="Тип"],
body.stage-confirmations-page .stage-confirm-table td[data-label="Прораб"] {
white-space: nowrap;
}
body.stage-confirmations-page .stage-confirm-actions .btn-primary {
background: #2563eb;
border-color: #1d4ed8;
color: #fff;
}
body.stage-confirmations-page .stage-confirm-actions .btn-primary:hover {
background: #1d4ed8;
border-color: #1e40af;
}
body.stage-confirmations-page .stage-confirm-actions .reject-stage-btn {
background: #ef4444;
border-color: #dc2626;
color: #fff;
}
body.stage-confirmations-page .stage-confirm-actions .reject-stage-btn:hover {
background: #dc2626;
border-color: #b91c1c;
color: #fff;
}
body.stage-confirmations-page .stage-confirm-actions > a.btn.btn-small.btn-outline {
background: var(--color-surface);
border-color: var(--color-border-strong);
color: var(--color-text);
}
body.stage-confirmations-page .stage-confirm-actions > a.btn.btn-small.btn-outline:hover {
background: var(--color-surface-2);
color: var(--color-text);
}
@media (max-width: 1100px) and (min-width: 901px) {
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-action,
body.stage-confirmations-page .stage-confirm-table--substage .stage-confirm-cc-action {
width: 15rem;
min-width: 14rem;
}
body.stage-confirmations-page .stage-confirm-table--main .stage-confirm-cc-stage {
width: 13rem;
}
}
/* Мобильная адаптация: карточки вместо таблицы (≤900px) */
@media (max-width: 900px) {
.stage-confirm-wrap {
overflow-x: visible;
}
.stage-confirm-table,
.stage-confirm-table thead,
.stage-confirm-table tbody,
.stage-confirm-table th,
.stage-confirm-table td,
.stage-confirm-table tr {
display: block;
}
.stage-confirm-table thead tr {
position: absolute;
left: -9999px;
}
.stage-confirm-table .stage-confirm-row {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
margin-bottom: 0.6rem;
padding: 0.5rem 0.65rem;
box-shadow: var(--shadow-1);
}
.stage-confirm-table .stage-confirm-row td {
border: none;
padding: 0.05rem 0;
}
.stage-confirm-table .stage-confirm-row td:before {
content: attr(data-label) ": ";
font-weight: 600;
color: var(--color-text-muted);
display: inline;
}
/* Тип / Этап / Подэтап - подпись и значение в одну строку (сетка как у «Фото») */
.stage-confirm-table .stage-confirm-row td[data-label="Тип"],
.stage-confirm-table .stage-confirm-row td[data-label="Этап"],
.stage-confirm-table .stage-confirm-row td[data-label="Подэтап"] {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 0.35rem;
row-gap: 0.1rem;
align-items: start;
}
.stage-confirm-table .stage-confirm-row td[data-label="Тип"]::before,
.stage-confirm-table .stage-confirm-row td[data-label="Этап"]::before,
.stage-confirm-table .stage-confirm-row td[data-label="Подэтап"]::before {
grid-column: 1;
grid-row: 1;
}
.stage-confirm-table .stage-confirm-row td[data-label="Тип"] .stage-confirm-field-value,
.stage-confirm-table .stage-confirm-row td[data-label="Этап"] .stage-confirm-stage-text,
.stage-confirm-table .stage-confirm-row td[data-label="Подэтап"] .stage-confirm-stage-text {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
/* Фото и отчёты: подпись отдельной строкой, комментарий и миниатюры - ниже */
.stage-confirm-table .stage-confirm-row td[data-label="Фото и отчёты"] {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.35rem;
}
.stage-confirm-table .stage-confirm-row td[data-label="Фото и отчёты"]::before {
display: block;
width: 100%;
margin-bottom: 0;
}
.stage-confirm-table .stage-confirm-row td[data-label="Фото и отчёты"] > p.stage-comment {
margin: 0;
min-width: 0;
width: 100%;
}
.stage-confirm-table .stage-confirm-row td[data-label="Фото и отчёты"] > [data-lightbox-group] {
min-width: 0;
width: 100%;
}
.stage-confirm-table .stage-confirm-row td[data-label="Фото и отчёты"] > .stage-confirm-photos-empty {
margin: 0;
min-width: 0;
width: 100%;
}
.stage-confirm-table .stage-confirm-row td[data-label="Проект"] {
font-weight: 600;
padding-bottom: 0.15rem;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
}
.stage-confirm-table .stage-confirm-row td[data-label="Проект"]:before {
display: none;
}
.stage-confirm-table .stage-confirm-row td[data-label="Действие"] {
padding-top: 0.35rem;
margin-top: 0.2rem;
border-top: 1px solid var(--color-border);
}
.stage-confirm-table .stage-confirm-row td[data-label="Действие"]:before {
display: none;
}
.stage-confirm-table .stage-confirm-row td[data-label="Этап"],
.stage-confirm-table .stage-confirm-row td[data-label="Подэтап"] {
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
}
.stage-confirm-table .stage-confirm-row .stage-confirm-stage-text {
max-width: 100%;
white-space: normal !important;
overflow: visible;
text-overflow: unset;
}
.stage-confirm-table .stage-confirm-row .btn-row.stage-confirm-actions,
.stage-confirm-table .stage-confirm-row .btn-row {
flex-wrap: wrap;
width: 100%;
max-width: 100%;
gap: 0.4rem;
overflow-x: visible;
justify-content: flex-start;
align-items: center;
}
.stage-confirm-table .stage-confirm-row .btn-row .btn,
.stage-confirm-table .stage-confirm-row .btn-row form button {
min-height: var(--form-compact-min-height);
}
body.stage-confirmations-page .stage-confirm-table .stage-photo-carousel-tiles {
flex-wrap: wrap;
overflow-x: visible;
max-width: 100%;
}
body.stage-confirmations-page .stage-confirm-table .stage-photo-carousel-tiles .stage-photo-tile {
flex: 0 0 56px;
min-width: 56px;
scroll-snap-align: none;
}
.stage-confirm-photos .photo-carousel-item {
width: 48px;
height: 48px;
}
}
/* Компактное отображение на десктопе: подтверждение этапов */
@media (min-width: 901px) {
body.stage-confirmations-page .stage-confirm-table th,
body.stage-confirmations-page .stage-confirm-table td {
padding: 0.4rem 0.5rem;
font-size: 0.875rem;
}
body.stage-confirmations-page .stage-confirm-table th {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-text-muted);
}
body.stage-confirmations-page .stage-photo-carousel-tiles .stage-photo-tile {
flex: 0 0 72px;
min-width: 72px;
scroll-snap-align: none;
}
body.stage-confirmations-page .stage-photo-carousel-tiles {
gap: 0.35rem;
flex-wrap: wrap;
overflow-x: visible;
scroll-snap-type: none;
max-width: 100%;
}
body.stage-confirmations-page .stage-comment {
margin: 0 0 0.25rem 0;
font-size: 0.8rem;
line-height: 1.35;
}
body.stage-confirmations-page .stage-confirm-row .btn-row.stage-confirm-actions {
flex-wrap: wrap;
gap: 0.35rem;
min-width: 0;
max-width: 100%;
}
body.stage-confirmations-page .stage-confirm-row td.stage-confirm-cell-action {
min-width: 0;
white-space: normal;
}
body.stage-confirmations-page .stage-confirm-row .btn-row .btn,
body.stage-confirmations-page .stage-confirm-row .btn-row form button,
body.stage-confirmations-page .stage-confirm-row .btn-row a.btn.btn-small.btn-outline {
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
min-height: 30px;
}
body.stage-confirmations-page .stage-confirm-wrap {
margin: -0.25rem 0 0 0;
}
body.stage-confirmations-page .card h2 {
font-size: 1.05rem;
margin-bottom: 0.4rem;
}
body.stage-confirmations-page .card-meta {
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
body.stage-confirmations-page .page-header {
margin-bottom: 0.75rem;
}
body.stage-confirmations-page .page-header h1 {
font-size: 1.25rem;
}
body.stage-confirmations-page .page-header .subtitle {
font-size: 0.85rem;
margin-top: 0.2rem;
}
body.stage-confirmations-page .card {
padding: 0.75rem 1rem;
}
}
.stage-comment {
margin: 0 0 0.5rem 0;
font-size: 0.9rem;
}
.stage-rejection-note {
margin: 0.35rem 0 0.5rem 0;
padding: 0.5rem;
background: rgba(239, 68, 68, 0.1);
border-left: 3px solid var(--color-danger);
font-size: 0.9rem;
color: var(--color-text-muted);
}
.edit-request-rejection-comment {
margin: 0.75rem 0;
padding: 0.75rem 1rem;
background: #fef2f2;
border-radius: var(--radius);
border-left: 4px solid var(--color-danger, #c53030);
}
.edit-request-comment-block {
margin: 1rem 0;
}
.edit-request-comment-block label {
display: block;
margin-bottom: 0.35rem;
font-weight: 500;
}
/* Чат проекта */
.chat-container {
display: flex;
flex-direction: column;
min-height: 400px;
}
.chat-messages {
flex: 1;
overflow-y: auto;
max-height: 500px;
padding: 1rem 0;
}
.chat-message {
margin-bottom: 1rem;
padding: 0.75rem 1rem;
background: var(--color-bg);
border-radius: var(--radius);
border-left: 4px solid var(--color-dark);
}
/* Сообщения между админом и мастером - синяя подсветка */
.chat-msg-chat {
background: #e8f4fc;
border-left-color: #3498db;
}
.chat-msg-edit_approval {
border-left-color: var(--color-success);
}
.chat-msg-edit_reject {
border-left-color: var(--color-danger);
}
/* События согласования документов: контрастные и читаемые блоки */
.chat-msg-doc_contract_uploaded,
.chat-msg-doc_estimate_uploaded {
background: #fff7d6;
border-left-color: #d4a017;
}
.chat-msg-doc_contract_approved,
.chat-msg-doc_estimate_approved {
background: #dff6e4;
border-left-color: #1f8a4c;
}
.chat-msg-doc_contract_rejected,
.chat-msg-doc_estimate_rejected {
background: #fde4e6;
border-left-color: #c53030;
}
.chat-msg-doc_contract_uploaded .chat-message-body,
.chat-msg-doc_estimate_uploaded .chat-message-body,
.chat-msg-doc_contract_approved .chat-message-body,
.chat-msg-doc_estimate_approved .chat-message-body,
.chat-msg-doc_contract_rejected .chat-message-body,
.chat-msg-doc_estimate_rejected .chat-message-body {
color: #1f2937;
font-weight: 500;
}
.chat-message-header {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.35rem;
}
.chat-message-time {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.chat-msg-label {
font-size: 0.8rem;
padding: 0.15rem 0.5rem;
border-radius: 4px;
}
.chat-msg-request {
background: #fff3cd;
color: #856404;
}
.chat-msg-approval {
background: #d4edda;
color: #155724;
}
.chat-msg-reject {
background: #f8d7da;
color: #721c24;
}
.chat-msg-edit_request {
background: #fff8e6;
border-left-color: #f39c12;
}
.chat-msg-stage {
font-size: 0.85rem;
color: var(--color-accent);
font-weight: 500;
}
/* Переписка по этапу (под карточкой этапа) */
.stage-pending-confirm {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: #fff8e6;
border-radius: var(--radius);
border-left: 4px solid var(--color-primary, #e6a800);
}
.stage-pending-badge {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text);
}
.stage-name-readonly {
font-weight: 500;
}
/* Мастер: переписка по этапу - десктоп как раньше; на мобильном - аккордеон по тапу */
.stage-chat-wrap {
margin-top: 1rem;
}
.stage-chat-mobile-head {
display: none;
}
.stage-chat-mobile-head-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex: 1;
min-width: 0;
text-align: left;
}
.stage-chat-mobile-head-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
}
.stage-chat-mobile-chevron {
flex-shrink: 0;
width: 0.5rem;
height: 0.5rem;
border-right: 2px solid var(--color-text-muted);
border-bottom: 2px solid var(--color-text-muted);
transform: rotate(45deg);
margin-top: -0.2rem;
transition: transform 0.2s ease;
}
.stage-chat-wrap.stage-chat-mobile-open .stage-chat-mobile-chevron {
transform: rotate(-135deg);
margin-top: 0.15rem;
}
.stage-chat-mobile-head--has-new {
border-left: 4px solid var(--color-warning, #ca8a04);
background: color-mix(in srgb, var(--color-warning, #eab308) 14%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning) 22%, transparent);
}
.stage-chat-new-pill {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.2rem 0.45rem;
border-radius: 999px;
background: var(--color-warning, #ca8a04);
color: #fff;
flex-shrink: 0;
}
.stage-chat-desktop-only-title {
margin: 0 0 0.75rem 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text);
}
.stage-chat-panel {
margin-top: 0.5rem;
padding: 1rem;
background: var(--color-surface-2);
border-radius: var(--radius);
border-left: 3px solid var(--color-accent);
color: var(--color-text);
}
/* Мастер: журнал по проекту - по умолчанию свёрнут (), раскрытие по строке с шевроном */
.master-project-journal-details > summary {
list-style: none;
cursor: pointer;
}
.master-project-journal-details > summary::-webkit-details-marker {
display: none;
}
.master-project-journal-summary {
padding: 0;
border-radius: var(--radius-sm);
outline: none;
}
.master-project-journal-summary:focus-visible {
box-shadow: 0 0 0 2px var(--focus-ring-strong, rgba(201, 162, 39, 0.45));
}
.master-project-journal-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
min-width: 0;
}
.master-project-journal-summary-title {
margin: 0;
font-size: var(--typo-card-title, 1.1rem);
font-weight: 600;
line-height: 1.25;
}
.master-project-journal-chevron {
flex-shrink: 0;
width: 0.55rem;
height: 0.55rem;
border-right: 2px solid var(--color-text-muted);
border-bottom: 2px solid var(--color-text-muted);
transform: rotate(45deg);
margin-top: -0.15rem;
transition: transform 0.2s ease;
}
.master-project-journal-details[open] .master-project-journal-chevron {
transform: rotate(-135deg);
margin-top: 0.12rem;
}
.master-project-journal-body {
margin-top: 0.85rem;
}
.master-project-journal-body .subtitle.card-meta {
margin-top: 0;
}
@media (max-width: 768px) {
.stage-chat-desktop-only-title {
display: none;
}
.stage-chat-mobile-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem 0.6rem;
width: 100%;
margin: 0;
padding: 0.65rem 0.85rem;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
background: #f1f3f5;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--radius-sm);
border-left: 3px solid var(--color-accent);
-webkit-tap-highlight-color: transparent;
}
.stage-chat-mobile-head:active {
background: #e9ecef;
}
.stage-chat-panel {
display: none;
margin-top: 0.5rem;
animation: none;
}
.stage-chat-wrap.stage-chat-mobile-open .stage-chat-panel {
display: block;
animation: stage-chat-panel-open 0.2s ease-out;
}
}
@media (min-width: 769px) {
.stage-chat-mobile-head {
display: none !important;
}
.stage-chat-panel {
display: block !important;
margin-top: 1rem;
}
.stage-chat-wrap .stage-chat-new-pill {
display: none !important;
}
}
@keyframes stage-chat-panel-open {
from { opacity: 0.65; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.stage-chat-section {
margin-top: 1rem;
padding: 1rem;
background: var(--color-surface-2);
border-radius: var(--radius);
border-left: 3px solid var(--color-accent);
color: var(--color-text);
}
.stage-chat-title {
margin: 0 0 0.75rem 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text);
}
.stage-chat-message {
margin-bottom: 0.75rem;
padding: 0.5rem;
background: var(--color-surface);
border-radius: 4px;
color: var(--color-text);
}
.stage-chat-message.chat-msg-chat {
background: #e8f4fc;
border-left: 3px solid #3498db;
}
.stage-chat-message.chat-msg-edit_request {
background: #fff8e6;
border-left: 3px solid #f39c12;
}
.stage-chat-message:last-child {
margin-bottom: 0;
}
.stage-chat-author {
font-weight: 600;
margin-right: 0.5rem;
}
.stage-chat-time {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.stage-chat-body {
margin-top: 0.35rem;
font-size: 0.95rem;
}
.stage-chat-empty {
color: var(--color-text-muted);
font-size: 0.9rem;
margin: 0 0 0.75rem 0;
}
.stage-chat-form {
margin-top: 0.75rem;
}
.stage-chat-form-row {
display: flex;
gap: 0.5rem;
}
.stage-chat-form-row .form-control {
flex: 1;
}
.chat-stage-select {
max-width: 280px;
}
.stage-item-wrapper {
margin-bottom: 1rem;
}
/* Форма «Добавить этап» - компактная, всё в одну строку */
.stages-add-subtitle {
margin: 0 0 0.5rem 0 !important;
font-size: 0.85rem;
}
.stages-add-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.5rem 0.75rem;
}
.stages-add-group {
margin-bottom: 0 !important;
flex: 1 1 auto;
min-width: 120px;
}
.stages-add-group:first-child {
min-width: 160px;
flex: 2 1 auto;
}
.stages-add-group label {
display: block;
margin-bottom: 0.2rem;
font-size: 0.85rem;
}
.stages-add-group .form-control {
padding: var(--form-compact-padding-y) var(--form-compact-padding-x);
font-size: 0.9rem;
}
.stages-add-btn {
flex-shrink: 0;
align-self: flex-end;
}
@media (max-width: 600px) {
.stages-add-row {
flex-direction: column;
align-items: stretch;
}
.stages-add-group {
min-width: 100%;
}
.stages-add-btn {
align-self: stretch;
}
}
.stage-chat-inline {
margin-left: 2.5rem;
}
@media (max-width: 600px) {
.stage-chat-inline {
margin-left: 0;
}
}
.chat-message-body {
white-space: pre-wrap;
word-break: break-word;
}
.chat-empty {
color: var(--color-text-muted);
text-align: center;
padding: 2rem;
}
.chat-form {
border-top: 1px solid #eee;
padding-top: 1rem;
}
.chat-form-row {
display: flex;
gap: 0.5rem;
}
.chat-form-row textarea {
flex: 1;
resize: vertical;
}
@media (max-width: 600px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
.project-grid {
grid-template-columns: 1fr;
}
.project-grid.admin-projects-dense {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Диаграмма Ганта - производственный календарь */
.gantt-legend-green { color: var(--color-success); }
.gantt-legend-blue { color: #3498db; }
.gantt-legend-red { color: var(--color-danger); }
.gantt-bar-actual {
background: #3498db;
opacity: 0.9;
}
.gantt-stage-overdue .gantt-stage-label {
color: var(--color-danger);
}
.gantt-stage-overdue {
background: #fff5f5;
}
.gantt-overdue-label {
color: var(--color-danger);
}
.gantt-days-diff {
font-weight: 600;
}
.gantt-days-early {
color: var(--color-success);
}
.gantt-days-late {
color: var(--color-danger);
}
.gantt-card {
overflow-x: auto;
}
.production-load-panel {
margin: 0 0 1.25rem;
padding: 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
}
.production-load-head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
margin-bottom: 0.85rem;
}
.production-load-head h3 {
margin: 0 0 0.25rem;
}
.production-load-status {
flex-shrink: 0;
padding: 0.45rem 0.7rem;
border-radius: var(--radius-md);
background: rgba(34, 197, 94, 0.12);
color: var(--color-success);
font-weight: 700;
white-space: nowrap;
}
.production-load-status.is-tight {
background: rgba(245, 158, 11, 0.14);
color: #b45309;
}
.production-load-status.is-over {
background: rgba(239, 68, 68, 0.14);
color: var(--color-danger);
}
.production-load-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.production-load-kpi {
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.production-load-kpi span,
.production-load-kpi small {
display: block;
color: var(--color-text-muted);
font-size: 0.8rem;
}
.production-load-kpi strong {
display: block;
margin: 0.25rem 0;
font-size: 1.25rem;
color: var(--color-text);
}
.production-capacity-window {
margin: 0 0 1rem;
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
overflow: hidden;
}
.production-capacity-window summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1rem;
cursor: pointer;
color: var(--color-text);
list-style-position: outside;
border-bottom: 1px solid transparent;
}
.production-capacity-window[open] summary {
border-bottom-color: var(--color-border);
}
.production-capacity-summary-title {
font-size: 1rem;
font-weight: 700;
min-width: 180px;
}
.production-capacity-summary-formula {
color: var(--color-primary);
font-size: 0.95rem;
text-align: right;
white-space: nowrap;
}
.production-capacity-form {
padding: 1rem;
}
.production-capacity-grid {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) minmax(180px, 0.9fr) max-content;
gap: 1rem;
align-items: stretch;
}
.production-capacity-grid .form-group {
margin: 0;
}
.production-capacity-grid label {
display: block;
min-height: 1.15rem;
margin-bottom: 0.4rem;
font-weight: 700;
}
.production-capacity-grid .form-control {
width: 100%;
}
.production-capacity-grid .card-meta {
margin: 0.35rem 0 0;
}
.production-capacity-result {
display: flex;
min-height: 72px;
flex-direction: column;
justify-content: center;
padding: 0.65rem 0.8rem;
border-radius: var(--radius-md);
background: var(--color-surface-2);
}
.production-capacity-result span,
.production-capacity-result strong {
display: block;
}
.production-capacity-result span {
color: var(--color-text-muted);
font-size: 0.8rem;
}
.production-capacity-result strong {
color: var(--color-text);
font-size: 1.05rem;
}
.production-capacity-actions {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 72px;
}
.production-capacity-note {
margin: 0.85rem 0 0;
}
.production-load-scroll {
overflow-x: auto;
padding: 0.25rem 0 0.6rem;
border-bottom: 1px solid var(--color-border);
}
.production-load-chart {
display: flex;
align-items: flex-end;
gap: 0.85rem;
height: 240px;
min-width: max(900px, 100%);
padding: 2.4rem 0.35rem 2.7rem;
}
.production-load-week {
position: relative;
flex: 0 0 86px;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
border-radius: var(--radius-md);
background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.03));
}
.production-load-bar {
width: 58px;
min-height: 2px;
border-radius: 10px 10px 0 0;
background: rgba(34, 197, 94, 0.72);
box-shadow: 0 10px 24px rgba(34, 197, 94, 0.16);
}
.production-load-week.is-tight .production-load-bar {
background: rgba(245, 158, 11, 0.82);
box-shadow: 0 10px 24px rgba(245, 158, 11, 0.18);
}
.production-load-week.is-over .production-load-bar {
background: rgba(239, 68, 68, 0.86);
box-shadow: 0 10px 24px rgba(239, 68, 68, 0.18);
}
.production-load-week-values {
position: absolute;
top: -2.05rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: baseline;
gap: 0.15rem;
white-space: nowrap;
font-size: 0.78rem;
color: var(--color-text-muted);
}
.production-load-week-values strong {
color: var(--color-text);
font-size: 0.95rem;
}
.production-load-week-label {
position: absolute;
left: 50%;
bottom: -1.6rem;
transform: translateX(-50%);
transform-origin: center;
color: var(--color-text-muted);
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
}
.production-load-week-pct {
position: absolute;
left: 50%;
bottom: -2.55rem;
transform: translateX(-50%);
color: var(--color-text-muted);
font-size: 0.72rem;
white-space: nowrap;
}
.production-load-list {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 0.6rem;
margin-top: 0.8rem;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.production-load-list span {
padding: 0.25rem 0.45rem;
border-radius: var(--radius-sm);
background: var(--color-surface-2);
}
@media (max-width: 1100px) {
.production-capacity-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.production-capacity-actions {
justify-content: flex-start;
min-height: auto;
}
}
@media (max-width: 700px) {
.production-load-head,
.production-capacity-window summary {
flex-direction: column;
align-items: flex-start;
}
.production-capacity-summary-formula {
text-align: left;
white-space: normal;
}
.production-load-kpis,
.production-capacity-grid {
grid-template-columns: 1fr;
}
.production-capacity-result,
.production-capacity-actions {
min-height: auto;
}
}
.gantt-header {
display: flex;
border-bottom: 2px solid var(--color-border-strong);
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.85rem;
font-weight: 600;
min-width: 600px;
color: var(--color-text);
}
.gantt-label-col {
width: 220px;
flex-shrink: 0;
}
.gantt-timeline-col {
flex: 1;
min-width: 400px;
display: flex;
justify-content: space-between;
color: var(--color-text-muted);
}
.gantt-project {
border-bottom: 1px solid var(--color-border);
}
.gantt-project:last-child {
border-bottom: none;
}
.gantt-project-header {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.5rem 0;
cursor: pointer;
min-width: 600px;
}
.gantt-project-header:hover {
background: var(--color-surface-2);
}
.gantt-project-header-main {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.75rem;
min-width: 0;
}
.gantt-project-header-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.65rem;
}
.gantt-project-title-row {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.5rem;
min-width: 0;
}
.gantt-project-meta-row {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0;
font-size: 0.85rem;
color: var(--color-text-muted);
min-width: 0;
}
.gantt-project-meta-row .gantt-project-responsible,
.gantt-project-meta-row .gantt-project-type-label {
font-size: inherit;
}
.gantt-project-title-text {
font-weight: 600;
color: var(--color-text);
overflow-wrap: anywhere;
max-width: 100%;
}
.gantt-project-responsible,
.gantt-project-type-label {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.gantt-project-goto {
flex-shrink: 0;
margin-left: auto;
align-self: center;
}
.gantt-project-goto-txt--short {
display: none;
}
.gantt-project-goto-txt--long {
display: inline;
}
.gantt-toggle {
width: 18px;
flex-shrink: 0;
padding-top: 0.2em;
font-size: 0.7rem;
color: var(--color-text-muted);
transition: transform 0.2s;
}
.gantt-project.expanded .gantt-toggle {
transform: rotate(0deg);
}
.gantt-project:not(.expanded) .gantt-toggle {
transform: rotate(-90deg);
}
.gantt-project-name {
font-weight: 600;
text-decoration: none;
color: var(--color-text);
}
.gantt-project-name:hover {
color: var(--color-accent);
}
.gantt-project-type {
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text-muted);
margin-right: 0.25rem;
}
.gantt-project-overdue {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-danger);
white-space: nowrap;
}
.gantt-project-meta {
font-size: 0.85rem;
color: var(--color-text-muted);
}
.gantt-stages {
display: none;
padding-left: 1.5rem;
margin-bottom: 0.5rem;
}
.gantt-project.expanded .gantt-stages {
display: block;
}
.gantt-stage-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.35rem 0;
font-size: 0.9rem;
min-width: 600px;
}
.gantt-stage-label {
width: 220px;
flex-shrink: 0;
}
.gantt-stage-num {
color: var(--color-accent);
font-weight: 600;
}
.gantt-stage-dates {
display: block;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.gantt-bar-wrap {
flex: 1;
min-width: 350px;
}
.gantt-bar-track {
position: relative;
height: 20px;
background: #f0f0f0;
border-radius: 4px;
overflow: visible;
}
.gantt-project-markers {
display: flex;
align-items: stretch;
padding: 0.2rem 0 0.35rem 1.5rem;
border-bottom: 1px dashed #e8e8e8;
}
.gantt-markers-label {
flex: 0 0 260px;
max-width: 38%;
font-size: 0.75rem;
}
.gantt-markers-wrap {
flex: 1;
min-width: 350px;
}
.gantt-marker-track {
height: 12px;
background: transparent;
border: 1px dashed #ddd;
border-radius: 4px;
}
.gantt-marker-line {
position: absolute;
top: 0;
bottom: 0;
width: 3px;
margin-left: -1.5px;
border-radius: 1px;
z-index: 5;
pointer-events: auto;
}
.gantt-marker-line--sales-contract {
background: #9b59b6;
}
.gantt-marker-line--sales-site {
background: #2980b9;
}
.gantt-legend-marker-contract {
color: #9b59b6;
}
.gantt-legend-marker-site {
color: #2980b9;
}
/* --- Производственный календарь: компактный переключатель видов (точки / номера) --- */
.calendar-view-switcher {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.65rem;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-2);
}
.calendar-view-switcher-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--color-text-muted);
flex-shrink: 0;
letter-spacing: 0.02em;
}
.calendar-view-switcher-pips {
display: flex;
align-items: center;
gap: 0.2rem;
flex-shrink: 0;
}
.calendar-view-pip {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 1.65rem;
height: 1.65rem;
padding: 0 0.25rem;
border-radius: 999px;
text-decoration: none;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.calendar-view-pip:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.calendar-view-pip.is-active {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
.calendar-view-pip-num {
pointer-events: none;
}
.calendar-skin--compact .gantt-stage-row {
font-size: 0.8rem;
padding: 0.2rem 0;
min-width: 0;
}
.calendar-skin--compact .gantt-stage-label {
width: 160px;
}
.calendar-skin--compact .gantt-bar-track {
height: 14px;
}
.calendar-skin--compact .gantt-project-header {
padding: 0.35rem 0;
min-width: 0;
}
.calendar-skin--compact .gantt-marker-track {
height: 8px;
}
.cal-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
padding: 1rem;
}
.cal-card {
border: 1px solid #e4e8ee;
border-radius: 10px;
padding: 1rem;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.cal-card-head {
margin-bottom: 0.65rem;
}
.cal-card-title {
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 0.25rem 0;
line-height: 1.3;
}
.cal-card-title-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
}
.cal-card-title-text {
flex: 1 1 auto;
min-width: 0;
}
.cal-card-goto {
flex-shrink: 0;
}
.cal-card-title a {
color: inherit;
text-decoration: none;
}
.cal-card-title a:hover {
color: var(--color-accent);
}
.cal-card-meta {
margin: 0;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.cal-card-markers {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.65rem;
}
.cal-marker-pill {
font-size: 0.72rem;
padding: 0.15rem 0.45rem;
border-radius: 4px;
background: #eef2f7;
}
.cal-marker-pill--sales-contract {
background: #f3e8ff;
color: #6b2d8a;
}
.cal-marker-pill--sales-site {
background: #e3f2fd;
color: #1565a0;
}
.cal-card-stages {
list-style: none;
margin: 0;
padding: 0;
}
.cal-card-stage {
padding: 0.55rem 0;
border-top: 1px solid #f0f0f0;
}
.cal-card-stage.is-overdue .cal-card-stage-status {
color: var(--color-danger);
font-weight: 600;
}
.cal-card-stage.is-done .cal-card-stage-status {
color: var(--color-success);
}
.cal-card-stage-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0.35rem;
}
.cal-card-stage-name {
font-size: 0.88rem;
font-weight: 500;
}
.cal-card-stage-status {
font-size: 0.72rem;
color: var(--color-text-muted);
white-space: nowrap;
}
.cal-card-stage-dates {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.35rem;
}
.cal-chip {
font-size: 0.72rem;
padding: 0.12rem 0.4rem;
border-radius: 4px;
background: #f4f6f9;
}
.cal-chip--fact {
background: #e8f4fd;
}
.cal-board-wrap {
padding: 0.75rem 1rem 1rem;
overflow-x: auto;
}
.cal-board-project-cell {
vertical-align: top;
}
.cal-board-project-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
min-width: 140px;
max-width: 240px;
}
.cal-board-goto {
white-space: nowrap;
}
.cal-board-type-cell {
vertical-align: top;
white-space: nowrap;
}
.cal-board-table {
font-size: 0.85rem;
}
.cal-board-table th,
.cal-board-table td {
vertical-align: middle;
}
.cal-board-row-overdue {
background: #fff5f5;
}
.cal-board-col-chart {
width: 140px;
min-width: 120px;
}
.cal-board-chart-cell {
padding: 0.35rem 0.5rem !important;
}
.cal-board-mini-track {
height: 12px;
min-width: 100px;
}
.cal-board-scale {
margin: 0.5rem 0 0;
}
@media (max-width: 768px) {
.cal-cards-grid {
grid-template-columns: 1fr;
}
.calendar-view-switcher {
padding: 0.3rem 0.5rem;
gap: 0.35rem;
}
.calendar-view-pip {
min-width: 1.5rem;
height: 1.5rem;
font-size: 0.66rem;
}
}
.gantt-bar {
position: absolute;
top: 0;
height: 100%;
border-radius: 4px;
min-width: 4px;
}
.gantt-bar-green {
background: var(--color-success);
opacity: 0.85;
}
.gantt-bar-red {
background: var(--color-danger);
}
.gantt-bar-wrap.gantt-bar-hoverable {
position: relative;
cursor: pointer;
touch-action: manipulation;
}
.gantt-bar-hoverable:hover,
.gantt-bar-hoverable.gantt-tooltip-visible {
z-index: 10000;
position: relative;
}
.gantt-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #1e293b !important;
color: #ffffff !important;
padding: 0.6rem 0.9rem;
border-radius: var(--radius);
font-size: 0.85rem;
white-space: normal;
max-width: 280px;
z-index: 9999;
box-shadow: 0 4px 20px rgba(0,0,0,0.35);
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.gantt-tooltip strong {
display: block;
margin-bottom: 0.5rem;
font-size: 0.95rem;
color: #ffffff !important;
}
.gantt-tooltip-row {
margin-top: 0.25rem;
font-size: 0.8rem;
color: #f1f5f9 !important;
}
.gantt-tooltip-label {
opacity: 0.9;
margin-right: 0.35rem;
color: #e2e8f0 !important;
}
.gantt-tooltip-diff {
margin-top: 0.4rem;
padding-top: 0.35rem;
border-top: 1px solid rgba(255,255,255,0.25);
font-weight: 600;
}
.gantt-tooltip .gantt-days-early {
color: #86efac !important;
}
.gantt-tooltip .gantt-days-late {
color: #fca5a5 !important;
}
.gantt-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #1e293b;
}
.gantt-bar-hoverable:hover .gantt-tooltip,
.gantt-bar-hoverable.gantt-tooltip-visible .gantt-tooltip {
opacity: 1;
visibility: visible;
}
@media (hover: none) {
.gantt-bar-hoverable:hover .gantt-tooltip {
opacity: 0;
visibility: hidden;
}
}
/* ========== Аналитика цеха модульных домов ========== */
.analytics-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
}
.analytics-dashboard {
display: flex;
flex-direction: column;
gap: 1rem;
}
.analytics-kpi-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
}
.analytics-kpi-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 0.9rem 1rem;
text-align: center;
box-shadow: var(--shadow-1);
}
.analytics-kpi-value {
display: block;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
}
.analytics-kpi-value.analytics-good {
color: var(--color-success);
}
.analytics-kpi-value.analytics-warn {
color: var(--color-warning);
}
.analytics-kpi-value.analytics-bad {
color: var(--color-danger);
}
.analytics-kpi-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin-top: 0.25rem;
}
.analytics-kpi-hint {
display: block;
font-size: 0.75rem;
color: var(--color-text-muted);
margin-top: 0.15rem;
}
.analytics-chart-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 900px) {
.analytics-chart-row {
grid-template-columns: 1fr;
}
}
.analytics-chart-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem;
box-shadow: var(--shadow-1);
}
.analytics-chart-card h3 {
margin: 0 0 0.75rem 0;
font-size: 0.95rem;
}
.analytics-bar-chart {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.analytics-bar-row {
display: grid;
grid-template-columns: 120px 1fr 40px;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
}
.analytics-bar-label {
color: var(--color-text-muted);
}
.analytics-bar-track {
height: 20px;
background: #f0f0f0;
border-radius: 4px;
overflow: hidden;
}
.analytics-bar {
height: 100%;
min-width: 4px;
border-radius: 4px;
transition: width 0.3s;
}
.analytics-bar-good {
background: var(--color-success);
}
.analytics-bar-bad {
background: var(--color-danger);
}
.analytics-bar-pending {
background: var(--color-text-muted);
opacity: 0.6;
}
.analytics-bar-value {
font-weight: 600;
text-align: right;
}
.analytics-master-table-wrap {
overflow-x: auto;
}
.analytics-master-table {
width: 100%;
font-size: 0.8rem;
border-collapse: collapse;
}
.analytics-master-table th,
.analytics-master-table td {
padding: 0.4rem 0.5rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.analytics-master-table th {
font-weight: 600;
color: var(--color-text-muted);
}
.analytics-master-table .analytics-good {
color: var(--color-success);
}
.analytics-master-table .analytics-warn {
color: var(--color-warning);
}
.analytics-master-table .analytics-bad {
color: var(--color-danger);
}
.analytics-empty {
color: var(--color-text-muted);
font-size: 0.85rem;
margin: 0;
}
.analytics-summary-row {
display: grid;
grid-template-columns: 1fr;
}
.analytics-summary-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem;
box-shadow: var(--shadow-1);
}
.analytics-summary-card h3 {
margin: 0 0 0.5rem 0;
font-size: 0.95rem;
}
.analytics-summary-list {
margin: 0;
padding-left: 1.25rem;
font-size: 0.85rem;
line-height: 1.6;
}
/* ========== Отчёт по производственному календарю ========== */
.report-page-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.report-dashboard {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.report-section h2 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-text-muted);
}
.report-direction-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 900px) {
.report-direction-grid { grid-template-columns: 1fr; }
.report-chart-grid { grid-template-columns: 1fr; }
.report-table-grid { grid-template-columns: 1fr; }
}
.report-direction-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem;
box-shadow: var(--shadow-1);
}
.report-direction-card h3 {
margin: 0 0 0.25rem 0;
font-size: 1rem;
}
.report-direction-desc {
margin: 0 0 0.75rem 0;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.report-kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.report-kpi {
text-align: center;
padding: 0.4rem;
background: var(--color-surface-2);
border-radius: var(--radius-sm);
}
.report-kpi-val {
display: block;
font-weight: 700;
font-size: 1.1rem;
}
.report-kpi-val.good { color: var(--color-success); }
.report-kpi-val.warn { color: var(--color-warning); }
.report-kpi-val.bad { color: var(--color-danger); }
.report-kpi-lbl {
font-size: 0.7rem;
color: var(--color-text-muted);
}
.report-chart-grid,
.report-table-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.report-chart-card,
.report-table-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem;
box-shadow: var(--shadow-1);
}
.report-chart-card h3,
.report-table-card h3 {
margin: 0 0 0.5rem 0;
font-size: 0.9rem;
}
.report-bar-stack {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.report-bar-row {
display: grid;
grid-template-columns: 120px 1fr 36px;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
}
.report-bar-track {
height: 16px;
background: #f0f0f0;
border-radius: 4px;
overflow: hidden;
}
.report-bar {
height: 100%;
min-width: 4px;
border-radius: 4px;
}
.report-bar-good { background: var(--color-success); }
.report-bar-bad { background: var(--color-danger); }
.report-table {
width: 100%;
font-size: 0.8rem;
border-collapse: collapse;
}
.report-table th,
.report-table td {
padding: 0.35rem 0.5rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.report-table th {
font-weight: 600;
color: var(--color-text-muted);
}
.report-table .good { color: var(--color-success); }
.report-table .warn { color: var(--color-warning); }
.report-table .bad { color: var(--color-danger); }
.report-empty {
margin: 0;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.report-summary-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.report-summary-item {
font-size: 0.9rem;
}
.report-page-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.report-section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.report-section-head h2 { margin: 0; }
.report-section-note {
margin: 0;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.report-sales-total {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 0.85rem;
margin-bottom: 0.85rem;
font-size: 0.95rem;
}
.report-sales-total strong { font-size: 1.35rem; }
.report-sales-total span,
.report-sales-total em {
color: var(--color-text-muted);
font-style: normal;
}
.report-sales-total b {
margin-left: auto;
font-size: 1.1rem;
}
.report-sales-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.85rem;
}
@media (max-width: 900px) {
.report-sales-grid { grid-template-columns: 1fr; }
}
.report-sales-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 0.9rem 1rem;
box-shadow: var(--shadow-1);
color: inherit;
text-decoration: none;
display: block;
}
a.report-sales-card:hover {
border-color: var(--color-primary, #1f4d3a);
box-shadow: var(--shadow-2, 0 4px 14px rgba(0, 0, 0, 0.08));
}
.report-sales-card header {
display: flex;
align-items: baseline;
gap: 0.4rem;
margin-bottom: 0.45rem;
}
.report-sales-card h3 {
margin: 0;
font-size: 1rem;
}
.report-sales-card header span {
color: var(--color-text-muted);
font-size: 0.78rem;
}
.report-sales-card header strong { margin-left: auto; }
.report-sales-money {
margin: 0;
font-weight: 700;
font-size: 1.05rem;
}
.report-sales-money span,
.report-sales-area {
font-weight: 500;
color: var(--color-text-muted);
font-size: 0.85rem;
}
.report-sales-area { margin: 0.2rem 0 0.55rem; }
.report-sales-card ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.25rem;
font-size: 0.82rem;
}
.report-sales-card li {
display: flex;
justify-content: space-between;
gap: 0.5rem;
}
.report-sales-card li span { color: var(--color-text-muted); }
.report-type-split {
margin: 0.75rem 0 0;
padding: 0.6rem 0 0;
border-top: 1px solid var(--color-border);
list-style: none;
display: grid;
gap: 0.35rem;
font-size: 0.8rem;
}
.report-type-split li {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.report-type-split span { min-width: 5.5rem; }
.report-type-split em {
margin-left: auto;
font-style: normal;
color: var(--color-text-muted);
}
.gantt-page-header { flex-wrap: wrap; }
.gantt-header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* ========== Адаптация под мобильные устройства ========== */
/* Кнопка-гамбургер (скрыта на десктопе) */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: var(--touch-min);
height: var(--touch-min);
padding: 0;
background: transparent;
border: none;
cursor: pointer;
color: #fff;
}
.nav-toggle-bar {
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: 1px;
}
@media (max-width: 1024px) {
body.nav-open {
overflow: hidden;
}
body.nav-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(2, 6, 23, 0.35);
z-index: 900;
}
.header-inner {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.4rem;
}
.logo {
min-width: 0;
max-width: calc(100% - 56px);
}
.logo-img {
height: 24px;
width: auto;
max-width: min(72vw, 260px);
}
.nav-toggle {
display: flex;
margin-left: auto;
flex: 0 0 auto;
position: relative;
z-index: 2;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
}
/* Мобильное меню: выпадает под шапкой */
.nav {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 12px;
right: 12px;
gap: 0;
background: rgba(2, 6, 23, 0.97);
padding: 0.55rem 0;
padding-bottom: max(0.55rem, env(safe-area-inset-bottom, 0));
box-shadow: 0 20px 48px rgba(0,0,0,0.32);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 16px;
z-index: 1001;
/* Высота шапки+переключателя роли ~8–9rem: панель должна целиком
остаться в экране, иначе контент уезжает под край и скролла нет. */
max-height: calc(100dvh - 9rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
}
.nav.nav-open {
display: flex;
flex-direction: column;
/* fixed: панель не зависит от высоты шапки (переключатель роли)
и остаётся внутри окна, чтобы overflow-y реально скроллился. */
position: fixed;
top: var(--mobile-nav-top, 5.75rem);
left: 12px;
right: 12px;
max-height: var(--mobile-nav-max-height, calc(100dvh - 9rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}
.nav-section {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0.2rem;
padding: 0.15rem 0;
border-top: none;
flex-shrink: 0;
}
.nav-section:first-child {
padding-top: 0;
}
.nav-section-primary,
.nav-section-system {
min-width: 0;
width: 100%;
border-left: none;
padding-left: 0;
margin-left: 0;
}
.nav-section-items,
.nav-system-actions {
width: 100%;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
overflow: visible;
}
.nav-link {
display: block;
padding: 0.75rem 1rem;
border-radius: 0;
white-space: normal;
}
.nav-dropdown {
width: 100%;
}
.nav-dropdown > summary.nav-link {
width: 100%;
border-radius: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
}
.nav-dropdown-menu {
position: static;
top: auto;
left: auto;
right: auto;
min-width: 0;
width: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0.35rem 0;
border-radius: 14px;
background: rgba(8, 14, 32, 0.92);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
transform: none;
overflow: visible;
z-index: auto;
}
.nav-dropdown[open] .nav-dropdown-menu {
margin: 0.2rem 0.75rem 0.1rem;
}
.nav-dropdown-menu .nav-link {
min-height: 42px;
padding: 0.7rem 1rem;
border-radius: 0;
}
.nav-dropdown-menu .nav-link + .nav-link {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-dropdown-menu .nav-badge {
margin-left: 0.75rem;
}
.impersonation-form {
width: 100%;
margin: 0;
padding: 0 1rem;
}
.mobile-impersonation-bar {
display: block;
padding: 0.4rem 0.75rem;
background: rgba(2, 6, 23, 0.25);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-impersonation-form {
padding: 0;
}
.nav-section-system .nav-impersonation-form,
.nav-section-system .desktop-imp-dropdown {
display: none;
}
.impersonation-select {
width: 100%;
max-width: none;
min-height: var(--touch-min);
height: auto;
}
.nav-link {
min-height: var(--touch-min);
display: flex;
align-items: center;
font-size: 0.95rem;
white-space: normal;
}
.nav .btn-logout {
margin: 0;
width: auto;
margin: 0.2rem 1rem 0;
text-align: center;
}
/* Переключатель тем - скрыть на мобильных (экономия места) */
.theme-toggle {
display: none !important;
}
.refresh-progress-wrap {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: rgba(0,0,0,0.04);
overflow: hidden;
}
.refresh-progress-bar {
height: 100%;
width: 100%;
background: rgba(22, 75, 45, 0.4);
transition: width 0.05s linear;
position: absolute;
right: 0;
top: 0;
}
}
@media (max-width: 768px) {
.progress-text {
width: calc(100% - 0.75rem);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.84rem;
line-height: 1;
}
}
/* Админ-панель: компактный вид на планшетах (768px) */
@media (max-width: 768px) {
.admin-dashboard-page .dashboard-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.45rem;
}
.admin-dashboard-page .dashboard-grid > .btn {
padding: var(--btn-compact-padding-y) 0.55rem;
font-size: 0.82rem;
min-height: 40px;
}
.admin-dashboard-page .page-header {
display: none;
}
.admin-dashboard-page .dashboard-tile-more {
display: none;
}
.admin-dashboard-page .dashboard-grid-home {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 28rem;
margin-inline: auto;
margin-bottom: 1.15rem;
}
.admin-dashboard-page .dashboard-grid-home > .btn {
width: 100%;
flex: none;
max-width: none;
}
.admin-dashboard-page .dashboard-home-projects { order: 1; }
.admin-dashboard-page .dashboard-home-users { order: 2; }
.admin-dashboard-page .dashboard-home-kp { order: 3; }
.admin-dashboard-page .dashboard-home-analytics { order: 4; }
.admin-dashboard-page .dashboard-grid + .card {
padding: 0.75rem;
}
}
/* Управление проектами: компактный вид на планшетах (768px) */
@media (max-width: 768px) {
.admin-projects-page .page-header {
flex-direction: column;
align-items: stretch;
gap: 0.45rem;
margin-bottom: 0.6rem;
}
.admin-projects-page .page-header h1 {
flex: 0 0 auto;
min-width: 0;
font-size: 1.05rem;
}
.admin-projects-page .page-header-actions {
display: flex;
flex: 0 0 auto;
flex-wrap: nowrap;
width: 100%;
margin-left: 0;
gap: 0.4rem;
}
.admin-projects-page .page-header .btn,
.admin-projects-page .page-header-actions .btn {
width: auto;
flex: 1 1 0;
white-space: nowrap;
text-align: center;
padding: 0.4rem 0.55rem;
font-size: 0.85rem;
}
.admin-projects-page .projects-status-tabs.btn-row {
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
gap: 0.35rem;
}
.admin-projects-page .projects-status-tabs .btn {
width: auto;
flex: 1 1 0;
white-space: nowrap;
}
.admin-projects-page .card {
padding: 0.65rem 0.85rem;
margin-bottom: 0.65rem;
}
.admin-projects-page .card h2,
.admin-projects-page #project-create-form .project-create-summary-h2 {
font-size: 0.95rem;
margin: 0 0 0.15rem 0;
}
.admin-projects-page #project-create-form .project-create-summary-hint {
font-size: 0.78rem;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary {
flex-wrap: wrap;
gap: 0.6rem;
padding: 0.65rem 0.75rem;
}
.admin-projects-page .form-row {
gap: 0.5rem;
}
.admin-projects-page .form-row .form-group {
margin-bottom: 0.5rem;
min-width: 140px;
}
.admin-projects-page .project-create-form .form-row-uploads {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
.admin-projects-page .project-create-form .form-row-uploads .form-group-submit {
grid-column: 1 / -1;
}
.admin-projects-page .form-group label {
font-size: 0.85rem;
margin-bottom: 0.2rem;
}
.admin-projects-page .form-control {
padding: 0.4rem 0.5rem;
font-size: 0.9rem;
}
.admin-projects-page .card-meta {
font-size: 0.75rem;
margin-top: 0.25rem;
}
.admin-projects-page .btn-primary {
padding: var(--btn-compact-padding-y) 0.75rem;
font-size: 0.9rem;
}
.admin-projects-page .admin-projects-table th,
.admin-projects-page .admin-projects-table td {
padding: 0.4rem 0.35rem;
font-size: 0.85rem;
}
.admin-projects-page .admin-projects-thumb,
.admin-projects-page .admin-projects-thumb-placeholder {
width: 32px;
height: 32px;
}
.admin-projects-page .table-filter-row th {
padding: 0.25rem 0.3rem;
}
.admin-projects-page .table-filter {
padding: 0.2rem 0.3rem;
font-size: 0.8rem;
}
.admin-projects-page .btn-row {
flex-wrap: wrap;
gap: 0.3rem;
}
.admin-projects-page .btn-small {
padding: 0.3rem 0.5rem;
font-size: 0.8rem;
}
}
/* Touch targets на мобильных - компактные отступы */
@media (max-width: 768px) {
.btn-small,
body.compact-mode .btn-small {
min-height: var(--form-compact-min-height);
padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
}
body.compact-mode .form-control {
min-height: var(--form-compact-min-height);
padding: 0.4rem 0.6rem;
}
.display-toggle-compact .display-btn {
min-width: var(--touch-min);
min-height: var(--touch-min);
padding: 0 0.5rem;
}
.password-toggle {
min-width: var(--touch-min);
min-height: var(--touch-min);
height: var(--touch-min);
}
/* Не раздувать строку пароля на странице входа - высота как у логина */
.password-field--modern .password-toggle.password-toggle-icon.password-toggle--infield {
min-width: 32px;
min-height: 32px;
width: 32px;
height: 32px;
}
.table-sort-link {
min-height: var(--touch-min);
display: inline-flex;
align-items: center;
padding: 0.25rem 0;
}
}
@media (max-width: 480px) {
body {
font-size: 15px;
}
.main {
padding: 0.85rem 0.9rem;
}
.breadcrumbs {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
.page-header {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-bottom: 1rem;
}
.page-header h1 {
font-size: 1.35rem;
}
.page-header .btn,
.page-header form {
width: 100%;
}
.page-header .btn {
text-align: center;
}
.page-header form button {
width: 100%;
}
.card {
padding: 1rem;
margin-bottom: 1rem;
}
.card h2 {
font-size: 1.1rem;
}
.form-row {
flex-direction: column;
gap: 0;
}
.form-row .form-group {
min-width: 100% !important;
max-width: none !important;
}
.form-control {
font-size: 16px; /* предотвращает зум iOS при фокусе */
}
.login-container {
padding: 0.5rem 0.65rem 0;
min-height: 0;
}
.login-card {
padding: 0.85rem 0.9rem;
}
.project-grid {
grid-template-columns: 1fr;
}
.dashboard-grid {
grid-template-columns: 1fr;
}
.admin-projects-dense {
grid-template-columns: repeat(2, 1fr);
}
.admin-project-dense .project-name {
font-size: 0.8rem;
}
.card-header-row {
flex-direction: column;
align-items: stretch;
}
.display-toggle-compact {
justify-content: flex-start;
}
/* Админ-панель: только кнопки, без карточек */
.admin-dashboard-page .dashboard-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.35rem;
}
.admin-dashboard-page .dashboard-grid > .btn {
padding: var(--btn-small-compact-padding-y) var(--btn-small-compact-padding-x);
font-size: 0.78rem;
min-height: 40px;
max-width: none;
}
.admin-dashboard-page .page-header {
display: none;
}
.admin-dashboard-page .dashboard-tile-more {
display: none;
}
.admin-dashboard-page .dashboard-grid-home {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 28rem;
margin-inline: auto;
margin-bottom: 1.15rem;
}
.admin-dashboard-page .dashboard-grid-home > .btn {
width: 100%;
flex: none;
max-width: none;
}
.admin-dashboard-page .dashboard-home-projects { order: 1; }
.admin-dashboard-page .dashboard-home-users { order: 2; }
.admin-dashboard-page .dashboard-home-kp { order: 3; }
.admin-dashboard-page .dashboard-home-analytics { order: 4; }
.admin-dashboard-page .dashboard-grid + .card .card-header-row h2 {
font-size: 0.85rem;
margin: 0;
}
.admin-dashboard-page .dashboard-grid + .card .display-toggle-compact .display-btn {
min-width: 32px;
min-height: 32px;
font-size: 0.8rem;
}
.admin-dashboard-page .dashboard-recent-rows .admin-project-row {
padding: 0.35rem 0.5rem;
}
.admin-dashboard-page .admin-projects-table th,
.admin-dashboard-page .admin-projects-table td {
padding: 0.35rem 0.3rem;
font-size: 0.8rem;
}
.admin-dashboard-page .admin-projects-thumb {
width: 28px;
height: 28px;
}
}
/* Управление проектами: компактный вид в 4 раза (480px) */
@media (max-width: 480px) {
.admin-projects-page .page-header {
margin-bottom: 0.4rem;
}
.admin-projects-page .page-header h1 {
font-size: 1rem;
}
.admin-projects-page .card {
padding: 0.45rem 0.55rem;
margin-bottom: 0.5rem;
}
.admin-projects-page .card h2,
.admin-projects-page #project-create-form .project-create-summary-h2 {
font-size: 0.85rem;
margin: 0 0 0.12rem 0;
}
.admin-projects-page #project-create-form .project-create-summary-hint {
font-size: 0.72rem;
}
.admin-projects-page #project-create-form .project-create-collapsible > summary {
padding: 0.55rem 0.6rem;
gap: 0.5rem;
}
.admin-projects-page #project-create-form .project-create-summary-icon {
width: 2rem;
height: 2rem;
font-size: 1.35rem;
}
.admin-projects-page .form-row {
gap: 0.35rem;
}
.admin-projects-page .form-row .form-group {
margin-bottom: 0.35rem;
min-width: 100%;
}
.admin-projects-page .project-create-form .form-row-uploads {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.admin-projects-page .project-create-form .form-row-uploads .form-group-submit {
grid-column: 1 / -1;
}
.admin-projects-page .form-group label {
font-size: 0.75rem;
margin-bottom: 0.15rem;
}
.admin-projects-page .form-control {
padding: 0.35rem 0.45rem;
font-size: 16px; /* предотвращает зум iOS */
}
.admin-projects-page .card-meta {
font-size: 0.7rem;
margin-top: 0.2rem;
}
.admin-projects-page .photo-upload-btn-wrap,
.admin-projects-page .file-upload-wrap {
gap: 0.35rem;
}
.admin-projects-page .btn,
.admin-projects-page .photo-upload-btn,
.admin-projects-page .btn-file-upload,
.admin-projects-page .form-row-uploads .form-group-create-client .btn-create-client {
padding: 0.35rem 0.5rem;
font-size: 0.8rem;
}
.admin-projects-page .btn-primary {
padding: var(--btn-compact-padding-y) 0.6rem;
font-size: 0.85rem;
}
.admin-projects-page .admin-projects-table th,
.admin-projects-page .admin-projects-table td {
padding: 0.3rem 0.25rem;
font-size: 0.75rem;
}
.admin-projects-page .admin-projects-thumb,
.admin-projects-page .admin-projects-thumb-placeholder {
width: 28px;
height: 28px;
}
.admin-projects-page .table-filter-row th {
padding: 0.2rem 0.25rem;
}
.admin-projects-page .table-filter {
padding: 0.18rem 0.25rem;
font-size: 0.75rem;
}
.admin-projects-page .btn-row {
flex-direction: column;
gap: 0.25rem;
}
.admin-projects-page .btn-row .btn,
.admin-projects-page .btn-row form {
width: 100%;
}
.admin-projects-page .btn-row .btn,
.admin-projects-page .btn-row button {
justify-content: center;
}
.admin-projects-page .page-header {
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
}
.admin-projects-page .page-header h1 {
flex: 0 0 auto;
min-width: 0;
font-size: 1rem;
}
.admin-projects-page .page-header-actions {
display: flex;
flex: 0 0 auto;
flex-wrap: nowrap;
width: 100%;
margin-left: 0;
gap: 0.35rem;
}
.admin-projects-page .page-header .btn,
.admin-projects-page .page-header-actions .btn {
width: auto;
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
text-align: center;
padding: 0.4rem 0.5rem;
font-size: 0.82rem;
}
.admin-projects-page .projects-status-tabs.btn-row {
flex-direction: row;
flex-wrap: nowrap;
gap: 0.3rem;
width: 100%;
}
.admin-projects-page .projects-status-tabs .btn,
.admin-projects-page .projects-status-tabs.btn-row .btn {
width: auto;
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
padding: 0.38rem 0.2rem;
font-size: 0.7rem;
}
/* Таблица проектов - карточки на мобильных */
.admin-projects-page .users-table-wrap {
overflow-x: visible;
}
.admin-projects-page .admin-projects-table,
.admin-projects-page .admin-projects-table thead,
.admin-projects-page .admin-projects-table tbody,
.admin-projects-page .admin-projects-table th,
.admin-projects-page .admin-projects-table td,
.admin-projects-page .admin-projects-table tr {
display: block;
}
.admin-projects-page .admin-projects-table thead {
display: block;
}
.admin-projects-page .admin-projects-table .table-header-row {
position: absolute;
left: -9999px;
}
.admin-projects-page .admin-projects-table .table-filter-row {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
padding: 0.35rem 0.5rem;
margin-bottom: 0.35rem;
background: var(--color-surface-2);
border-radius: var(--radius);
}
.admin-projects-page .admin-projects-table .table-filter-row th {
flex: 1 1 45%;
min-width: 0;
padding: 0;
border: none;
}
.admin-projects-page .admin-projects-table .table-filter-row th:first-child,
.admin-projects-page .admin-projects-table .table-filter-row th:last-child {
display: none;
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
margin-bottom: 0.5rem;
padding: 0.4rem 0.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.5rem;
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile td {
border: none;
padding: 0;
display: flex;
align-items: flex-start;
gap: 0.35rem;
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label=""] {
flex: 0 0 auto;
order: -2;
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label="Объект"] {
flex: 1 1 calc(100% - 40px);
order: -1;
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile td:before {
content: attr(data-label);
font-weight: 600;
color: var(--color-text-muted);
flex-shrink: 0;
min-width: 7em;
font-size: 0.7rem;
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label=""] {
display: flex;
align-items: center;
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label=""]:before {
display: none;
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label="Объект"] {
font-weight: 600;
padding-bottom: 0.2rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label="Объект"]:before {
display: none;
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label="Действия"] {
padding-top: 0.35rem;
margin-top: 0.25rem;
border-top: 1px solid var(--color-border);
}
.admin-projects-page .admin-projects-table .admin-project-row-mobile td[data-label="Действия"]:before {
display: none;
}
}
/* Управление пользователями: компактный вид на планшетах (768px) */
@media (max-width: 768px) {
.admin-users-page .page-header {
margin-bottom: 0.6rem;
}
.admin-users-page .page-header h1 {
font-size: 1.15rem;
}
.admin-users-page .two-column-layout {
gap: 1rem;
}
.admin-users-page .card {
padding: 0.65rem 0.85rem;
margin-bottom: 0.65rem;
}
.admin-users-page .card h2 {
font-size: 0.95rem;
margin: 0 0 0.5rem 0;
}
.admin-users-page .form-group {
margin-bottom: 0.5rem;
}
.admin-users-page .form-group label {
font-size: 0.85rem;
}
.admin-users-page .form-control {
padding: 0.4rem 0.5rem;
font-size: 0.9rem;
}
.admin-users-page .card-meta {
font-size: 0.75rem;
margin-top: 0.25rem;
}
.admin-users-page .users-search-form {
margin-bottom: 0.6rem;
}
.admin-users-page .users-search-row {
gap: 0.4rem;
}
.admin-users-page .users-search-row input {
min-width: 120px;
}
.admin-users-page .users-role-filter {
min-width: 120px;
}
.admin-users-page .users-table th,
.admin-users-page .users-table td {
padding: 0.4rem 0.5rem;
font-size: 0.85rem;
}
.admin-users-page .users-list-details summary {
font-size: 0.9rem;
}
/* Форма «Добавить пользователя» - планшет */
.admin-users-page .users-add-form input,
.admin-users-page .users-add-form select {
min-height: var(--touch-min);
}
.admin-users-page .users-add-form .btn-primary {
min-height: var(--form-compact-min-height);
}
}
/* Управление пользователями: карточки на мобильных (480px) */
@media (max-width: 480px) {
.admin-users-page .page-header {
margin-bottom: 0.4rem;
}
.admin-users-page .page-header h1 {
font-size: 1rem;
}
.admin-users-page .card {
padding: 0.45rem 0.55rem;
margin-bottom: 0.5rem;
}
.admin-users-page .card h2 {
font-size: 0.85rem;
margin: 0 0 0.35rem 0;
}
.admin-users-page .form-group {
margin-bottom: 0.35rem;
}
.admin-users-page .form-group label {
font-size: 0.75rem;
}
.admin-users-page .form-control {
padding: 0.35rem 0.45rem;
font-size: 16px;
}
.admin-users-page .card-meta {
font-size: 0.7rem;
}
.admin-users-page .users-search-row {
grid-template-columns: 1fr;
gap: 0.35rem;
}
.admin-users-page .users-search-row input,
.admin-users-page .users-search-row select,
.admin-users-page .users-search-row button {
width: 100%;
}
/* Форма «Добавить пользователя» - мобильная адаптация */
.admin-users-page .users-add-card .form-group {
margin-bottom: 0.4rem;
}
.admin-users-page .users-add-form input,
.admin-users-page .users-add-form select {
width: 100%;
min-height: var(--touch-min);
font-size: 16px; /* предотвращает зум iOS при фокусе */
}
.admin-users-page .users-add-form .card-meta {
font-size: 0.65rem;
margin-top: 0.15rem;
line-height: 1.3;
}
.admin-users-page .users-add-form .btn-primary {
width: 100%;
min-height: var(--form-compact-min-height);
padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
font-size: 1rem;
margin-top: 0.25rem;
}
.admin-users-page .users-list-details summary {
font-size: 0.85rem;
}
/* Таблица пользователей - карточки на мобильных */
.admin-users-page .users-table-wrap {
overflow-x: visible;
}
.admin-users-page .users-table,
.admin-users-page .users-table thead,
.admin-users-page .users-table tbody,
.admin-users-page .users-table th,
.admin-users-page .users-table td,
.admin-users-page .users-table tr {
display: block;
}
.admin-users-page .users-table .users-table-header-row {
position: absolute;
left: -9999px;
}
.admin-users-page .users-table .admin-user-row-mobile {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
margin-bottom: 0.5rem;
padding: 0.4rem 0.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.5rem;
}
.admin-users-page .users-table .admin-user-row-mobile td {
border: none;
padding: 0;
display: flex;
align-items: flex-start;
gap: 0.35rem;
font-size: 0.85rem;
}
.admin-users-page .users-table .admin-user-row-mobile td:before {
content: attr(data-label);
font-weight: 600;
color: var(--color-text-muted);
flex-shrink: 0;
min-width: 5em;
font-size: 0.75rem;
}
.admin-users-page .users-table .admin-user-row-mobile td[data-label="Имя"] {
font-weight: 600;
order: -2;
}
.admin-users-page .users-table .admin-user-row-mobile td[data-label="Логин"] {
order: -1;
}
.admin-users-page .users-table .admin-user-row-mobile td[data-label="Логин"]:before,
.admin-users-page .users-table .admin-user-row-mobile td[data-label="Имя"]:before {
display: none;
}
.admin-users-page .users-table .admin-user-row-mobile td[data-label="Действия"] {
flex: 1 1 100%;
padding-top: 0.35rem;
margin-top: 0.25rem;
border-top: 1px solid var(--color-border);
}
.admin-users-page .users-table .admin-user-row-mobile td[data-label="Действия"]:before {
display: none;
}
.admin-users-page .users-table .admin-user-row-mobile .btn-row {
flex-wrap: wrap;
gap: 0.25rem;
}
.admin-users-page .users-table .admin-user-row-mobile .btn-row .btn,
.admin-users-page .users-table .admin-user-row-mobile .btn-row form {
flex: 1 1 auto;
}
}
/* Таблицы и списки: горизонтальная прокрутка на мобильных */
.users-table-wrap,
.gantt-card,
.wr-list {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
max-width: 100%;
min-width: 0;
}
/* Таблица «ожидающие дат» - без горизонтального скролла (перекрывает overflow-x: auto у .users-table-wrap) */
.users-table-wrap.production-dates-pending-wrap {
overflow-x: visible;
}
/* Мобильный вид wr-list style3: карточки вместо сетки */
@media (max-width: 900px) {
.wr-style-3-wrap .wr-row {
display: block;
padding: 0.6rem 0.75rem;
min-width: 0;
}
.wr-style-3-wrap .wr-row.wr-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
}
.wr-style-3-wrap .wr-row.wr-head .wr-cell {
display: block;
padding: 0;
border: none;
}
.wr-style-3-wrap .wr-row.wr-head .wr-cell::before {
display: block;
margin-bottom: 0.2rem;
font-size: 0.7rem;
}
.wr-style-3-wrap .wr-row.wr-head .wr-cell .report-inline-filter {
width: 100%;
min-width: 0;
}
.wr-style-3-wrap .wr-row.wr-head .col-resizer {
display: none;
}
.wr-style-3-wrap .wr-row .wr-cell {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.25rem 0;
white-space: normal;
overflow: visible;
text-overflow: unset;
border-bottom: 1px solid var(--color-border);
}
.wr-style-3-wrap .wr-row .wr-cell:last-child {
border-bottom: none;
}
.wr-style-3-wrap .wr-row .wr-cell::before {
content: attr(data-label);
flex-shrink: 0;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-muted);
min-width: 5.5rem;
}
.wr-style-3-wrap .wr-row .wr-cell[data-col="actions"]::before {
min-width: 4.5rem;
}
.wr-style-3-wrap .wr-row .wr-cell .wr-actions {
flex-wrap: wrap;
justify-content: flex-start;
gap: 0.4rem;
}
.wr-style-3-wrap .wr-row .wr-cell .wr-actions .btn {
font-size: 0.8rem;
padding: 0.25rem 0.5rem;
}
.wr-style-3-wrap .wr-list {
overflow-x: visible;
}
.wr-style-3-wrap .wr-pill {
font-size: 0.85rem;
height: 22px;
padding: 0 0.4rem;
}
}
@media (max-width: 768px) {
.admin-projects-table th,
.admin-projects-table td {
padding: 0.5rem 0.4rem;
font-size: 0.9rem;
}
.admin-projects-table th:nth-child(n+4),
.admin-projects-table td:nth-child(n+4) {
white-space: nowrap;
}
.admin-projects-thumb,
.admin-projects-thumb-placeholder {
width: 36px;
height: 36px;
}
}
@media (max-width: 480px) {
.admin-projects-table {
font-size: 0.85rem;
}
.admin-projects-table th,
.admin-projects-table td {
padding: 0.4rem 0.3rem;
}
}
/* Вариант B карточки - на мобильных в колонку */
@media (max-width: 600px) {
.project-card-variant-b {
flex-direction: column;
}
.project-card-variant-b .project-card-photo {
width: 100%;
min-width: 100%;
height: 140px;
min-height: 140px;
border-radius: var(--radius) var(--radius) 0 0;
}
}
/* Ленточки проектов - адаптив */
@media (max-width: 480px) {
.admin-project-row {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.admin-project-row-thumb {
width: 100%;
height: 120px;
}
}
/* Критичные кнопки - увеличенная touch-зона на мобильных */
@media (max-width: 768px) {
.stage-confirm,
.close-substage-btn,
.btn-primary[type="submit"] {
min-height: var(--form-compact-min-height);
padding: var(--btn-compact-padding-y) var(--btn-compact-padding-x);
}
}
/* Этапы - мобильная версия */
@media (max-width: 768px) {
.stage-item {
padding: 0.5rem 0.6rem;
}
.stage-item-row-dates,
.stage-item-row-dates-readonly {
flex-wrap: nowrap;
gap: 0.35rem 0.65rem;
padding-top: 0.35rem;
}
.stage-item-row-dates .stage-date-field {
flex: 1;
min-width: 0;
}
.stage-item-row-dates .stage-date-input {
min-width: 0;
width: 100%;
max-width: none;
}
.stage-date-label {
font-size: 0.68rem;
}
}
@media (max-width: 480px) {
.stage-item-row-top {
flex-wrap: wrap;
row-gap: 0.35rem;
}
.stage-item-row-top .stage-order {
order: 0;
}
.stage-item-row-top .stage-drag-handle {
order: 0;
}
.stage-name-wrap {
flex: 1 1 100%;
min-width: 0;
order: 2;
}
.stage-item-row-top .stage-delete-btn {
order: 1;
margin-left: auto;
}
/* Название на всю ширину - даты по левому краю поля имени (без отступа под ручку/номер) */
.stage-item-row-dates,
.stage-item-row-dates-readonly {
margin-left: 0;
}
.stage-date-input {
flex: 1;
min-width: 0;
}
.stage-card-header {
flex-wrap: wrap;
}
.stage-status-label {
margin-left: 0;
width: 100%;
margin-top: 0.25rem;
}
/* Клиент - мобильный вид: 1 ряд иконка+название, 2 ряд статус/дата */
.client-stages .stage-card-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
column-gap: 0.55rem;
row-gap: 0.25rem;
}
.client-stages .stage-status-icon {
grid-column: 1;
grid-row: 1;
}
.client-stages .stage-name {
grid-column: 2;
grid-row: 1;
text-align: left;
}
.client-stages .stage-status-label {
grid-column: 2;
grid-row: 2;
width: auto;
margin-top: 0;
text-align: left;
white-space: nowrap;
}
.stage-actions-row {
flex-direction: column;
}
.stage-actions-row .btn,
.stage-actions-row .btn-small {
width: 100%;
}
.foreman-substage-item {
flex-direction: column;
}
.foreman-style-scope .foreman-substage-item {
grid-template-columns: 1fr !important;
}
.foreman-substage-item {
flex-direction: column;
}
.substage-actions {
width: 100%;
justify-content: flex-start;
}
.foreman-style-scope .substage-actions {
min-width: unset;
justify-content: flex-start;
position: static;
}
.substage-actions .close-substage-btn {
width: auto;
max-width: 100%;
}
.foreman-style-scope .substage-actions .close-substage-btn {
min-width: unset;
}
.substage-form-actions .btn {
width: 100%;
}
.btn-row.takeover-actions {
flex-direction: column;
align-items: flex-start;
}
.btn-row.takeover-actions .takeover-reject-form {
width: 100%;
flex-wrap: wrap;
}
.btn-row.takeover-actions .takeover-comment {
flex: 1;
min-width: 100px;
}
.stage-chat-form-row {
flex-direction: column;
}
}
/* Чат */
@media (max-width: 600px) {
.chat-messages {
max-height: 300px;
}
.chat-form-row {
flex-direction: column;
}
.chat-form-row .chat-stage-select {
max-width: 100%;
}
.chat-form-row textarea {
min-height: 80px;
}
}
/* Диаграмма Ганта */
@media (max-width: 768px) {
.gantt-label-col {
width: 160px;
}
.gantt-stage-label {
width: 160px;
}
.gantt-bar-wrap {
min-width: 200px;
}
.gantt-header,
.gantt-project-header,
.gantt-stage-row {
min-width: 480px;
}
/* Производственный календарь (компакт): без принудительной ширины - влезает в мобильный экран */
.gantt-card.calendar-skin--compact .gantt-header,
.gantt-card.calendar-skin--compact .gantt-project-header,
.gantt-card.calendar-skin--compact .gantt-stage-row {
min-width: 0;
}
.gantt-card.calendar-skin--compact .gantt-timeline-col {
min-width: 0;
flex: 1 1 auto;
}
.gantt-card.calendar-skin--compact .gantt-bar-wrap {
min-width: 0;
}
}
/* Шапка строки проекта в календаре: колонка + кнопка на всю ширину на узких экранах */
@media (max-width: 640px) {
.gantt-card .gantt-project-header-main {
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
}
.gantt-card .gantt-project-header-text {
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
width: 100%;
}
.gantt-card .gantt-project-goto {
margin-left: 0;
align-self: stretch;
width: 100%;
box-sizing: border-box;
}
.gantt-card .gantt-project-goto-txt--long {
display: none;
}
.gantt-card .gantt-project-goto-txt--short {
display: inline;
}
}
@media (max-width: 480px) {
.gantt-label-col {
width: 100px;
font-size: 0.8rem;
}
.gantt-stage-label {
width: 100px;
}
.gantt-stage-num {
font-size: 0.85rem;
}
.gantt-stage-dates {
font-size: 0.7rem;
}
}
/* Галерея фото */
@media (max-width: 480px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.gallery-item img {
height: 100px;
}
}
/* Модальное окно и лайтбокс */
@media (max-width: 600px) {
.modal-content {
width: 95%;
margin: 1rem;
padding: 1.25rem;
}
.lightbox-close {
right: 1rem;
top: 1rem;
font-size: 1.5rem;
}
}
/* Футер: версия всегда видна на скриншотах */
.footer.site-version {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
margin: 0;
padding: 0.35rem 0.75rem;
padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
font-size: 0.78rem;
line-height: 1.2;
color: var(--color-text-muted);
text-align: center;
background: var(--color-bg);
border-top: 1px solid var(--color-border);
}
.footer.site-version p {
margin: 0;
}
body {
padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 480px) {
.footer.site-version {
font-size: 0.75rem;
padding: 0.3rem 0.6rem;
padding-bottom: max(0.3rem, env(safe-area-inset-bottom));
}
}
/* Карточка проекта с фото - минимальная высота на мобильных */
.project-card-variant-c {
min-height: 180px;
}
@media (max-width: 480px) {
.project-card-variant-c {
min-height: 160px;
}
.project-card-variant-c .project-card-overlay {
padding: 1.25rem 1rem 1rem;
}
.project-photo-form .form-row {
flex-direction: column;
}
.project-photo-form .btn {
width: 100%;
}
}
/* Заявки на редактирование */
@media (max-width: 600px) {
.edit-request-actions {
flex-direction: column;
}
.edit-request-actions .btn {
width: 100%;
}
.photo-carousel-item {
width: 160px;
height: 160px;
}
}
/* Предотвращение горизонтального скролла страницы */
html {
overflow-x: hidden;
}
/* (overflow-x: hidden already on body:130) */
/* Страница производственного календаря - кнопка "Свернуть" */
@media (max-width: 600px) {
.page-header .btn-small {
align-self: flex-start;
}
}
/* Плавная прокрутка на iOS */
@media (max-width: 768px) {
.project-list.dashboard-recent-cards {
grid-template-columns: 1fr;
}
}
/* Фильтры и формы: адаптивность на планшетах и телефонах */
@media (max-width: 768px) {
.form-row .form-group {
min-width: 100% !important;
max-width: none !important;
}
}
/* Очень узкие экраны: уменьшить отступы */
@media (max-width: 360px) {
.main {
padding: 0.5rem 0.75rem;
}
.card {
padding: 0.75rem;
}
.breadcrumbs {
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
}
/* Страница связей ролей (супер-админ) */
.roles-hierarchy-card .roles-diagram {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.5rem 0;
}
.roles-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.roles-row-branch {
gap: 1.5rem;
}
.roles-connector {
color: var(--color-text-muted);
font-size: 1.2rem;
}
.role-node {
padding: 0.75rem 1.25rem;
background: var(--color-bg);
border-radius: var(--radius);
text-align: center;
min-width: 140px;
}
.role-node-hint {
margin: 0.35rem 0 0 0;
font-size: 0.85rem;
line-height: 1.4;
color: var(--color-text-muted);
font-weight: 500;
}
/* Тёмная тема - читаемость подсказок */
@media (prefers-color-scheme: dark) {
.role-node-hint { color: var(--color-text-muted); }
}
body.theme-style-5 .role-node-hint,
body.theme-style-5 .roles-reports-to,
body.theme-style-5 .roles-subsection { color: #e2e8f0; }
/* Верхний уровень: admin/roles, impersonation, стратегические правила - максимальный контраст */
.role-node-top-level {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 2px solid #6b2d5c;
box-shadow: 0 4px 12px rgba(107, 45, 92, 0.2);
}
body.theme-style-5 .role-node-top-level,
body.theme-style-5 .role-super {
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
border-color: #a78bfa;
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
}
.role-node-hint-high-contrast {
color: #0f172a !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
padding: 0.4rem 0.6rem;
background: rgba(255,255,255,0.85);
border-radius: 6px;
margin-top: 0.5rem !important;
line-height: 1.45;
text-shadow: none;
}
body.theme-style-5 .role-node-hint-high-contrast,
body.theme-style-5 .role-super .role-node-hint {
color: #f8fafc !important;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(167, 139, 250, 0.4);
}
.roles-reports-to, .roles-reports-via {
font-size: 0.9rem;
color: var(--color-text-muted);
font-weight: 500;
}
body.theme-style-5 .roles-reports-to,
body.theme-style-5 .roles-reports-via { color: #cbd5e1; }
.roles-subsection {
font-size: 0.95rem;
color: var(--color-text);
font-weight: 600;
}
.roles-rights {
color: var(--color-text-muted);
font-weight: 500;
}
body.theme-style-5 .roles-rights { color: #94a3b8; }
.roles-detail-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.roles-detail-item {
padding: 1rem 1.25rem;
background: var(--color-bg);
border-radius: var(--radius);
border-left: 4px solid var(--color-accent);
}
.roles-detail-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin-bottom: 0.5rem;
}
.roles-subordinates {
margin: 0.5rem 0;
font-size: 0.9rem;
color: #334155;
font-weight: 500;
}
body.theme-style-5 .roles-subordinates { color: #cbd5e1; }
.roles-duties, .roles-rights {
margin: 0.5rem 0 0 1.25rem;
padding: 0;
}
.roles-duties li, .roles-rights li {
margin-bottom: 0.25rem;
}
.roles-duties li {
color: #334155;
}
body.theme-style-5 .roles-duties li { color: #cbd5e1; }
/* Сценарии и цепочки действий (страница связей ролей) */
.scenarios-card {
margin-top: 1.5rem;
}
.scenario-block {
padding: 1.25rem 1.5rem;
background: var(--color-bg);
border-radius: var(--radius);
border-left: 4px solid var(--color-accent);
margin-bottom: 1rem;
}
.scenario-block:last-child {
margin-bottom: 0;
}
.scenario-block h3 {
margin: 0 0 0.75rem 0;
font-size: 1.05rem;
color: #0f172a;
font-weight: 700;
}
body.theme-style-5 .scenario-block h3 { color: #f1f5f9; }
.scenario-steps {
margin: 0;
padding-left: 1.5rem;
line-height: 1.6;
color: #334155;
}
body.theme-style-5 .scenario-steps { color: #cbd5e1; }
.scenario-steps li {
margin-bottom: 0.5rem;
}
.scenario-steps li:last-child {
margin-bottom: 0;
}
.scenario-steps .arrow {
color: var(--color-accent);
font-weight: bold;
}
.scenario-steps strong {
color: var(--color-accent);
}
/* Страница связей ролей - читаемость заголовков и подзаголовков */
.roles-page-content .page-header h1 {
color: #0f172a;
font-weight: 800;
}
.roles-page-content .page-header .subtitle {
color: #334155;
font-weight: 500;
line-height: 1.5;
}
body.theme-style-5 .roles-page-content .page-header h1 { color: #f8fafc; }
body.theme-style-5 .roles-page-content .page-header .subtitle { color: #cbd5e1; }
.roles-page-content .card h2 {
color: #0f172a;
font-weight: 700;
}
body.theme-style-5 .roles-page-content .card h2 { color: #f1f5f9; }
body.roles-page .breadcrumbs {
color: #475569;
font-weight: 500;
}
body.roles-page.theme-style-5 .breadcrumbs { color: #94a3b8; }
/* Roles Lab: три формата страницы /admin/roles */
.roles-lab-page {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.roles-lab-header {
align-items: flex-start;
gap: 1rem;
}
.roles-lab-header .subtitle {
max-width: 900px;
}
.roles-lab-switcher-card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.35rem;
}
.roles-lab-switcher-copy {
max-width: 42rem;
}
.roles-lab-switcher-copy h2 {
margin: 0 0 0.35rem 0;
}
.roles-lab-switcher {
width: 100%;
}
.roles-lab-switcher--luxury {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.roles-lab-switch-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0.4rem;
margin: 0;
padding: 1.2rem 1.25rem 1.3rem 1.4rem;
border: 1px solid var(--color-border);
border-radius: 14px;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 45%),
var(--color-surface);
color: var(--color-text);
font: inherit;
cursor: pointer;
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.16s ease;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
overflow: hidden;
}
.roles-lab-switch-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--brand-gold), rgba(201, 162, 39, 0.25));
opacity: 0.4;
transition: opacity 0.2s ease;
}
.roles-lab-switch-card:hover {
transform: translateY(-2px);
border-color: var(--color-border-strong);
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.12);
}
.roles-lab-switch-card:focus {
outline: none;
}
.roles-lab-switch-card:focus-visible {
outline: 2px solid var(--brand-gold);
outline-offset: 3px;
}
.roles-lab-switch-card.is-active {
border-color: rgba(201, 162, 39, 0.5);
box-shadow:
0 0 0 1px rgba(201, 162, 39, 0.18),
0 20px 50px rgba(15, 23, 42, 0.14);
}
.roles-lab-switch-card.is-active::before {
opacity: 1;
}
.roles-lab-switch-card-index {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.22em;
color: var(--color-text-muted);
}
.roles-lab-switch-card-title {
font-size: 1.12rem;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.3;
}
.roles-lab-switch-card-desc {
font-size: 0.84rem;
line-height: 1.48;
color: var(--color-text-muted);
font-weight: 500;
}
.roles-lab-switch-card.is-active .roles-lab-switch-card-title {
color: var(--color-text);
}
.roles-lab-switch-card.is-active .roles-lab-switch-card-desc {
color: var(--color-text);
opacity: 0.9;
}
@media (prefers-color-scheme: dark) {
.roles-lab-switch-card:hover {
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
.roles-lab-switch-card.is-active {
box-shadow:
0 0 0 1px rgba(201, 162, 39, 0.28),
0 20px 56px rgba(0, 0, 0, 0.4);
}
}
@media (max-width: 1040px) {
.roles-lab-switcher--luxury {
grid-template-columns: 1fr;
}
}
.roles-lab-view[hidden] {
display: none !important;
}
.roles-lab-view {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.roles-lab-view.is-entering {
animation: roles-lab-reveal 220ms ease;
}
@keyframes roles-lab-reveal {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.roles-lab-eyebrow {
display: inline-block;
margin-bottom: 0.5rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.roles-section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
margin-bottom: 1rem;
}
.roles-system-tag {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.55rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.06);
color: #334155;
font-size: 0.78rem;
font-weight: 700;
}
.roles-accent-violet { --roles-accent: #8b5cf6; }
.roles-accent-slate { --roles-accent: #334155; }
.roles-accent-emerald { --roles-accent: #059669; }
.roles-accent-amber { --roles-accent: #d97706; }
.roles-accent-pink { --roles-accent: #db2777; }
.roles-accent-blue { --roles-accent: #2563eb; }
.roles-accent-cyan { --roles-accent: #0891b2; }
.roles-accent-indigo { --roles-accent: #4f46e5; }
.roles-accent-orange { --roles-accent: #ea580c; }
.roles-accent-green { --roles-accent: #16a34a; }
.roles-accent-rose { --roles-accent: #e11d48; }
.roles-accent-governance { --roles-accent: #7c3aed; }
.roles-accent-sales { --roles-accent: #059669; }
.roles-accent-production { --roles-accent: #2563eb; }
.roles-accent-construction { --roles-accent: #ea580c; }
.roles-accent-execution { --roles-accent: #16a34a; }
/* View 1: Executive Command Center */
.roles-view-command {
color: #e2e8f0;
}
.roles-command-hero,
.roles-command-card {
color: #e2e8f0;
background: linear-gradient(160deg, #0f172a 0%, #111827 50%, #1f2937 100%);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: calc(var(--radius-lg) + 4px);
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22);
}
.roles-command-hero {
padding: 1.5rem;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
gap: 1.5rem;
position: relative;
overflow: hidden;
}
.roles-command-hero::before {
content: "";
position: absolute;
inset: -40% auto auto 58%;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(96, 165, 250, 0.22), transparent 62%);
pointer-events: none;
}
.roles-command-hero::after {
content: "";
position: absolute;
inset: auto auto -80px -40px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(59, 130, 246, 0.12), transparent 68%);
pointer-events: none;
}
.roles-command-hero h2,
.roles-command-card h3,
.roles-command-panel h4 {
color: #f8fafc;
}
.roles-command-hero h2 {
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1.04;
letter-spacing: -0.02em;
}
.roles-command-hero p,
.roles-command-card p,
.roles-command-card li,
.roles-command-card dd {
color: #cbd5e1;
}
.roles-command-hero-main {
position: relative;
z-index: 1;
}
.roles-command-signal-rail {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin-top: 1rem;
}
.roles-command-signal-chip {
min-width: 148px;
padding: 0.8rem 0.9rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(148, 163, 184, 0.14);
backdrop-filter: blur(8px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.roles-command-signal-chip strong {
display: block;
font-size: 1.15rem;
line-height: 1.1;
color: #fff;
}
.roles-command-signal-chip span {
display: block;
margin-top: 0.22rem;
color: #cbd5e1;
font-size: 0.82rem;
font-weight: 700;
}
.roles-command-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.roles-command-metric {
padding: 1rem;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(148, 163, 184, 0.16);
display: flex;
flex-direction: column;
gap: 0.25rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.roles-command-metric strong {
color: #f8fafc;
}
.roles-command-metric span:last-child {
color: #94a3b8;
font-size: 0.85rem;
}
.roles-command-metric-value {
font-size: 2rem;
line-height: 1;
font-weight: 800;
color: #fff;
}
.roles-command-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
gap: 1.5rem;
}
.roles-command-card {
padding: 1.35rem;
}
.roles-command-band + .roles-command-band {
margin-top: 1rem;
}
.roles-command-band-title {
margin-bottom: 0.7rem;
color: #94a3b8;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.roles-command-band-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.85rem;
}
.roles-command-role,
.roles-command-panel,
.roles-command-split-card {
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(148, 163, 184, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.roles-command-role {
padding: 1rem;
border-top: 3px solid var(--roles-accent, #94a3b8);
}
.roles-command-role:hover,
.roles-command-panel:hover,
.roles-command-split-card:hover {
transform: translateY(-2px);
border-color: rgba(96, 165, 250, 0.32);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 24px rgba(15, 23, 42, 0.18);
}
.roles-command-role .role-badge,
.roles-command-split-card .role-badge {
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.roles-command-role .role-badge,
.roles-command-panel .role-badge,
.roles-command-split-card .role-badge {
position: relative;
}
.roles-command-role p {
margin: 0.65rem 0 0 0;
font-size: 0.9rem;
line-height: 1.5;
}
.roles-command-role p:first-of-type {
min-height: 4.2em;
}
.roles-command-panel-list {
display: grid;
gap: 0.9rem;
}
.roles-command-panel {
padding: 1.05rem 1rem 1.05rem 1.15rem;
position: relative;
overflow: hidden;
}
.roles-command-panel::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg, rgba(96, 165, 250, 0.9), rgba(59, 130, 246, 0.45));
}
.roles-command-panel h4 {
margin: 0 0 0.55rem 0;
font-size: 1.02rem;
letter-spacing: -0.01em;
}
.roles-command-panel ul {
margin: 0;
padding-left: 1.15rem;
}
.roles-command-panel li + li {
margin-top: 0.4rem;
}
.roles-command-split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0.85rem;
}
.roles-command-split-card {
padding: 1rem;
border-left: 4px solid var(--roles-accent, #94a3b8);
}
.roles-command-split-card > .role-badge {
margin-bottom: 0.15rem;
}
.roles-command-split-card dl {
margin: 0.8rem 0 0 0;
display: grid;
gap: 0.65rem;
}
.roles-command-split-card dt {
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
}
.roles-command-split-card dd {
margin: 0.18rem 0 0;
font-size: 0.92rem;
}
.roles-view-command .role-badge {
filter: saturate(1.08) contrast(1.04);
}
.roles-view-command .roles-lab-eyebrow {
color: #93c5fd;
}
/* Master: доступ работников к объекту */
.master-worker-access-form .form-group {
margin-bottom: 1.4rem;
}
.master-worker-access-submit {
margin-top: 0.2rem;
}
.master-worker-access-table th:first-child {
position: relative;
font-weight: 800;
}
.master-worker-access-table th:first-child::after {
content: "";
position: absolute;
left: 0.75rem;
right: 0.75rem;
bottom: 0.42rem;
height: 2px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.42);
}
.master-worker-access-row td {
background: linear-gradient(180deg, rgba(249, 115, 22, 0.06), rgba(249, 115, 22, 0.03));
vertical-align: middle;
}
.master-worker-access-row:hover td {
background: linear-gradient(180deg, rgba(249, 115, 22, 0.12), rgba(249, 115, 22, 0.07));
}
.master-worker-access-name {
font-weight: 700;
color: #9a3412;
vertical-align: middle;
}
/* View 2: Product Operating System */
.roles-system-shell {
padding: 1.35rem;
border-radius: calc(var(--radius-lg) + 2px);
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid rgba(148, 163, 184, 0.18);
}
.roles-system-topbar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
}
.roles-system-topbar h2 {
margin: 0;
}
.roles-system-subnav {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.roles-system-subnav a {
text-decoration: none;
padding: 0.5rem 0.8rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.05);
color: #334155;
font-weight: 700;
}
.roles-system-section + .roles-system-section {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
.roles-system-section h3 {
margin: 0 0 1rem 0;
}
.roles-system-hierarchy {
display: grid;
gap: 1rem;
}
.roles-system-band {
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.85);
}
.roles-system-band-head {
padding: 0.8rem 1rem;
border-bottom: 1px solid var(--color-border);
font-weight: 800;
color: #334155;
}
.roles-system-band-grid {
padding: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
}
.roles-system-role-card,
.roles-system-directory-card,
.roles-system-rule-card,
.roles-system-scenario {
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: #fff;
}
.roles-system-role-card {
padding: 0.9rem;
}
.roles-system-role-card p {
margin: 0.55rem 0 0;
font-size: 0.9rem;
}
.roles-system-directory {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.9rem;
}
.roles-system-directory-card {
padding: 1rem;
}
.roles-system-directory-head {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: center;
}
.roles-system-summary {
margin: 0.8rem 0 0.65rem;
color: #334155;
}
.roles-system-meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.75rem;
color: #64748b;
font-size: 0.84rem;
}
.roles-system-tables {
display: grid;
gap: 1rem;
}
.roles-system-rule-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0.75rem;
}
.roles-system-rule-card {
padding: 0.9rem;
}
.roles-system-rule-card code {
display: block;
margin-top: 0.7rem;
white-space: normal;
}
.roles-system-scenario-list {
display: grid;
gap: 0.85rem;
}
.roles-system-scenario {
padding: 1rem;
}
.roles-system-scenario-head {
display: flex;
gap: 0.85rem;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.roles-system-scenario-head h4 {
margin: 0;
}
.roles-system-scenario-head p {
margin: 0.2rem 0 0;
color: #64748b;
}
.roles-system-scenario-index {
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
}
.roles-system-scenario ol {
margin: 0;
padding-left: 1.25rem;
}
/* View 3: Interactive Role Atlas */
.roles-atlas-layout {
display: grid;
grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
gap: 1.5rem;
}
.roles-atlas-map-card,
.roles-atlas-detail-card {
padding: 1.25rem;
border-radius: calc(var(--radius-lg) + 2px);
}
.roles-atlas-map-card {
background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 45%), linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}
.roles-atlas-map {
display: grid;
gap: 1rem;
}
.roles-atlas-band {
padding: 0.9rem;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(148, 163, 184, 0.2);
}
.roles-atlas-band-title {
margin-bottom: 0.7rem;
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
}
.roles-atlas-band-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
gap: 0.7rem;
}
.roles-atlas-connector {
display: flex;
justify-content: center;
padding: 0.1rem 0 0.25rem;
}
.roles-atlas-connector span {
width: 2px;
height: 26px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.55), rgba(99, 102, 241, 0.15));
box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.05);
}
.roles-atlas-node {
border: 1px solid rgba(148, 163, 184, 0.22);
background: #fff;
border-radius: var(--radius);
padding: 0.85rem;
text-align: left;
cursor: pointer;
transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.roles-atlas-node:hover,
.roles-atlas-node.is-active {
transform: translateY(-1px);
border-color: var(--roles-accent, #2563eb);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.roles-atlas-node.is-related {
border-color: rgba(59, 130, 246, 0.45);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), #fff);
}
.roles-atlas-node small {
display: block;
margin-top: 0.55rem;
color: #64748b;
font-weight: 700;
}
.roles-atlas-node-link {
display: block;
margin-top: 0.55rem;
color: #475569;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.35;
}
.roles-atlas-detail-card {
background: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%);
border: 1px solid rgba(148, 163, 184, 0.18);
}
.roles-atlas-legend {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-bottom: 1rem;
}
.roles-atlas-legend-item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.65rem;
border-radius: 999px;
background: rgba(79, 70, 229, 0.1);
color: #4338ca;
font-size: 0.8rem;
font-weight: 700;
}
.roles-atlas-legend-item::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: currentColor;
}
.roles-atlas-legend-item-related {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
.roles-atlas-detail {
display: none;
}
.roles-atlas-detail.is-active {
display: block;
}
.roles-atlas-detail.is-related {
outline: 2px solid rgba(59, 130, 246, 0.18);
outline-offset: 8px;
}
.roles-atlas-detail-head {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: center;
margin-bottom: 1rem;
}
.roles-atlas-summary {
margin: 0 0 1rem;
font-size: 1rem;
color: #334155;
}
.roles-atlas-meta {
display: grid;
gap: 0.45rem;
margin-bottom: 1rem;
}
.roles-atlas-meta p {
margin: 0;
color: #475569;
}
.roles-atlas-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.roles-atlas-columns h4 {
margin: 0 0 0.65rem;
}
.roles-atlas-columns ul {
margin: 0;
padding-left: 1.15rem;
color: #334155;
}
/* View 4: Scenario Storyboard */
.roles-storyboard-hero {
padding: 1.4rem;
background: linear-gradient(140deg, #fffbeb 0%, #fff7ed 50%, #fef2f2 100%);
border: 1px solid rgba(251, 191, 36, 0.22);
border-radius: calc(var(--radius-lg) + 2px);
}
.roles-storyboard-hero h2 {
margin: 0 0 0.45rem;
}
.roles-storyboard-summary {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.roles-storyboard-summary span {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.7rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(251, 191, 36, 0.22);
color: #92400e;
font-size: 0.84rem;
font-weight: 700;
}
.roles-storyboard-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.roles-storyboard-lane {
padding: 1rem;
border-radius: calc(var(--radius-lg) + 2px);
border: 1px solid rgba(148, 163, 184, 0.18);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}
.roles-storyboard-lane-head {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: center;
margin-bottom: 0.9rem;
}
.roles-storyboard-lane h3 {
margin: 0;
}
.roles-storyboard-lane-head span {
font-size: 0.82rem;
color: #64748b;
font-weight: 700;
}
.roles-storyboard-list {
display: grid;
gap: 0.85rem;
}
.roles-storyboard-card {
padding: 0.95rem;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(148, 163, 184, 0.16);
border-left: 4px solid var(--roles-accent, #94a3b8);
}
.roles-storyboard-card-head {
margin-bottom: 0.75rem;
}
.roles-storyboard-card-head h4 {
margin: 0 0 0.6rem;
}
.roles-storyboard-actors {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.roles-storyboard-steps {
margin: 0;
padding-left: 1.2rem;
}
.roles-storyboard-steps li + li {
margin-top: 0.45rem;
}
.roles-storyboard-rules {
padding: 1rem;
}
.roles-storyboard-rule-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.roles-storyboard-rule-card {
padding: 0.95rem;
border-radius: var(--radius);
background: var(--color-bg);
border: 1px solid var(--color-border);
}
.roles-storyboard-rule-card p {
margin: 0.7rem 0 0;
color: #334155;
}
/* responsive */
@media (max-width: 1024px) {
.roles-command-hero,
.roles-command-grid,
.roles-atlas-layout,
.roles-storyboard-grid {
grid-template-columns: 1fr;
}
.roles-atlas-columns {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.roles-lab-switcher-card,
.roles-system-topbar,
.roles-section-head {
flex-direction: column;
align-items: stretch;
}
.roles-lab-switch-card {
width: 100%;
}
.roles-command-metrics {
grid-template-columns: 1fr;
}
.roles-command-signal-rail {
flex-direction: column;
}
.roles-system-subnav {
width: 100%;
}
.roles-system-subnav a {
flex: 1 1 calc(50% - 0.55rem);
text-align: center;
}
.roles-atlas-map-card,
.roles-atlas-detail-card,
.roles-storyboard-lane,
.roles-storyboard-hero {
padding: 1rem;
}
.roles-atlas-band {
padding: 0.8rem;
}
.roles-atlas-band-grid {
grid-template-columns: 1fr;
}
.roles-atlas-node {
padding: 0.9rem;
}
.roles-storyboard-grid {
gap: 0.85rem;
}
.roles-storyboard-lane-head {
align-items: flex-start;
flex-direction: column;
}
.roles-storyboard-summary {
flex-direction: column;
align-items: stretch;
}
.roles-storyboard-summary span {
justify-content: center;
}
.roles-command-band-list,
.roles-system-band-grid,
.roles-system-directory,
.roles-system-rule-list,
.roles-storyboard-rule-grid {
grid-template-columns: 1fr;
}
}
/* Уведомления */
.notification-list {
list-style: none;
margin: 0;
padding: 0;
}
.notification-item {
border-bottom: 1px solid var(--color-border);
}
.notification-item:last-child {
border-bottom: none;
}
.notification-link {
display: block;
padding: 1rem 1.25rem;
text-decoration: none;
color: inherit;
transition: background 0.15s;
}
.notification-link:hover {
background: var(--color-surface-2);
}
.notification-message {
margin: 0.35rem 0 0;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.notification-project {
display: inline-block;
margin-top: 0.25rem;
font-size: 0.85rem;
color: var(--color-text-soft);
}
.notification-time {
display: block;
margin-top: 0.25rem;
font-size: 0.8rem;
color: var(--color-text-soft);
}
/* Skeleton loaders (для будущего использования) */
.skeleton {
background: linear-gradient(90deg, var(--color-border) 25%, var(--color-surface-2) 50%, var(--color-border) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.2s ease-in-out infinite;
border-radius: var(--radius-sm);
}
.skeleton-text { height: 1em; }
.skeleton-title { height: 1.5em; width: 60%; }
.skeleton-card { height: 120px; }
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Combobox: выпадающий список с поиском (работы для работника) */
.work-item-combobox {
position: relative;
min-width: 200px;
}
.work-item-combobox .work-item-search {
width: 100%;
}
.work-item-dropdown {
display: none;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(37, 99, 235, 0.18);
border-radius: 14px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22), 0 8px 20px rgba(15, 23, 42, 0.12);
max-height: 280px;
overflow-y: auto;
z-index: 5000;
min-width: 200px;
width: min(480px, calc(100vw - 20px));
}
.work-item-dropdown li[role="option"] {
padding: 0.65rem 0.9rem;
cursor: pointer;
font-size: 0.95rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.work-item-dropdown li[role="option"]:last-child {
border-bottom: none;
}
.work-item-dropdown li[role="option"]:hover,
.work-item-dropdown li[role="option"].highlight {
background: rgba(37, 99, 235, 0.08);
box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.9);
color: #0f172a;
}
.work-item-dropdown li[role="option"]:focus {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
/* Справочник работ - компактный вид для Производства */
.work-items-production .users-table {
table-layout: fixed;
}
.work-items-production .work-items-name-col {
width: auto;
}
.work-items-production .work-items-name-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.work-items-production .work-items-name-cell input.form-control {
min-width: 150px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Ячейки ч/ч, 1 ч, Стоим. - полное отображение чисел */
.work-items-production td.work-items-num-cell {
overflow: visible;
white-space: nowrap;
}
.work-items-production td.work-items-num-cell input.form-control {
min-width: 4.5em;
width: 100%;
text-align: right;
font-variant-numeric: tabular-nums;
overflow: visible;
text-overflow: clip;
}
/* Мобильная адаптация: горизонтальный скролл таблиц справочников */
@media (max-width: 768px) {
.users-table-wrap.work-items-table-wrap,
.users-table-wrap.production-extras-table-wrap {
-webkit-overflow-scrolling: touch;
padding-bottom: 0.5rem;
}
.users-table-wrap.work-items-table-wrap .users-table {
min-width: 680px;
}
.users-table-wrap.work-items-production .users-table {
min-width: 720px;
table-layout: auto;
}
.users-table-wrap.work-items-production .work-items-name-col {
min-width: 140px;
}
.users-table-wrap.work-items-production .work-items-name-cell,
.users-table-wrap.work-items-production .work-items-name-cell input.form-control {
min-width: 140px;
white-space: normal;
word-break: break-word;
}
.users-table-wrap.production-extras-table-wrap .users-table {
min-width: 520px;
}
.users-table-wrap.production-extras-table-wrap th:nth-child(2),
.users-table-wrap.production-extras-table-wrap td:nth-child(2) {
min-width: 160px;
word-break: break-word;
}
.users-table-wrap.production-extras-table-wrap th:nth-child(3),
.users-table-wrap.production-extras-table-wrap td:nth-child(3) {
min-width: 110px;
}
.users-table-wrap.work-items-production .work-items-actions {
flex-shrink: 0;
white-space: nowrap;
}
}
/* Подсказка о горизонтальном скролле - только на мобильных */
.mobile-scroll-hint {
display: none;
}
@media (max-width: 768px) {
.mobile-scroll-hint {
display: block;
margin-top: 0.25rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.card-meta .mobile-scroll-hint {
display: inline;
}
}
/* ================================================================
A11Y / UX AUDIT ADDITIONS (2026-03-23)
================================================================ */
/* Visually hidden - accessible to screen readers only */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Reduced motion - respect user preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Inline form validation */
.form-group.has-error .form-control {
border-color: var(--color-danger);
}
.form-group.has-error .form-control:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.form-error-msg {
display: none;
font-size: var(--text-sm);
color: var(--color-danger);
margin-top: 0.25rem;
}
.form-group.has-error .form-error-msg {
display: block;
}
/* Table scroll hint (fade edge on mobile) */
@media (max-width: 768px) {
.users-table-wrap {
position: relative;
}
.users-table-wrap::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 24px;
background: linear-gradient(to right, transparent, var(--color-surface));
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
.users-table-wrap.has-scroll::after {
opacity: 1;
}
}
/* Display toggle view icons (replace numeric "2","3","4") */
.display-btn svg {
width: 16px;
height: 16px;
vertical-align: -2px;
}
/* Photo compress progress overlay */
.photo-compress-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.photo-compress-progress {
background: var(--color-surface);
border-radius: var(--radius);
padding: 1.5rem 2rem;
text-align: center;
box-shadow: var(--shadow-2);
min-width: 240px;
}
.photo-compress-bar {
width: 100%;
height: 6px;
background: var(--color-border);
border-radius: 3px;
margin-top: 0.75rem;
overflow: hidden;
}
.photo-compress-bar-fill {
height: 100%;
background: var(--brand-green);
border-radius: 3px;
transition: width 0.15s ease;
width: 0%;
}
/* Mobile nav: плавное раскрытие (max-height обязан сбрасываться в .nav-open - иначе меню остаётся с высотой 0) */
@media (max-width: 1024px) {
.nav {
transition: max-height 0.28s ease, opacity 0.2s ease;
opacity: 0;
max-height: 0;
}
.nav.nav-open {
opacity: 1;
max-height: var(--mobile-nav-max-height, calc(100dvh - 9rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}
}
/* Print styles */
@media print {
.header, footer, .mobile-impersonation-bar,
.skip-link, .desktop-imp-dropdown, .mobile-imp-panel,
.report-theme-toggle, .display-toggle-compact,
.btn-logout {
display: none !important;
}
body {
font-size: 11pt;
background: #fff;
color: #000;
}
.card {
box-shadow: none;
border: 1px solid #ccc;
break-inside: avoid;
}
.content-wrapper {
max-width: 100%;
padding: 0;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #666;
}
a.nav-link::after, a.btn::after {
content: none;
}
}
/* ─── Мобильные карточки проектов (/a/projects) ─── */
.admin-project-cards-mobile {
display: none;
}
@media (max-width: 768px) {
.admin-projects-page .users-table-wrap {
display: none;
}
.admin-project-cards-mobile {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 0.5rem;
}
.apc-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 20px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
overflow: hidden;
}
.apc-header {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 16px 14px;
}
.apc-photo {
width: 72px;
height: 72px;
border-radius: 14px;
flex-shrink: 0;
overflow: hidden;
background: linear-gradient(135deg, #8a7a6a, #b8a080);
display: flex;
align-items: center;
justify-content: center;
}
.apc-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.apc-photo-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.apc-meta {
flex: 1;
min-width: 0;
}
.apc-title-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.apc-name {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text);
text-decoration: none;
line-height: 1.2;
}
.apc-name:hover {
text-decoration: underline;
}
.apc-type-badge {
display: inline-block;
background: rgba(59, 109, 17, 0.12);
color: #3B6D11;
font-size: 0.68rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
}
.apc-address {
margin: 0;
font-size: 0.78rem;
color: var(--color-text-muted);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.4;
}
.apc-divider {
height: 1px;
background: var(--color-border);
margin: 0 16px;
}
.apc-fields {
padding: 12px 16px 14px;
display: flex;
flex-direction: column;
gap: 9px;
}
.apc-field {
display: flex;
align-items: flex-start;
gap: 8px;
}
.apc-field-label {
font-size: 0.73rem;
color: var(--color-text-muted);
width: 108px;
flex-shrink: 0;
padding-top: 1px;
line-height: 1.3;
}
.apc-field-value {
font-size: 0.82rem;
color: var(--color-text);
font-weight: 500;
flex: 1;
min-width: 0;
line-height: 1.3;
}
.apc-actions {
display: flex;
gap: 8px;
padding: 0 16px 16px;
}
.apc-delete-form {
flex: 1;
display: flex;
}
.apc-btn {
flex: 1;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
border: none;
font-family: inherit;
transition: opacity 0.15s;
}
.apc-btn:active {
opacity: 0.82;
}
.apc-btn-edit {
background: #2D6A2D;
color: #fff;
}
.apc-btn-delete {
width: 100%;
background: #fff5f3;
border: 1px solid #e05a3a;
color: #e05a3a;
}
.apc-actions-solo .apc-btn-edit {
max-width: 60%;
margin: 0 auto;
}
.apc-btn-primary-full {
flex: 1;
background: #2D6A2D;
color: #fff;
}
.apc-btn-outline-action {
flex: 1;
background: transparent;
border: 1.5px solid var(--color-border-strong, rgba(148,163,184,0.35));
color: var(--color-text);
}
.apc-badge-sent {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
border-radius: 10px;
background: rgba(245, 158, 11, 0.1);
color: #b45309;
font-size: 0.85rem;
font-weight: 500;
text-align: center;
}
.apc-requests-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 0.5rem;
}
.apc-request-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
}
.apc-request-name {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
flex: 1;
min-width: 0;
}
.apc-request-meta {
font-size: 0.72rem;
color: var(--color-text-muted);
flex-shrink: 0;
}
}
/* ── Auth Modal (session-expired login overlay) ─────────────────────────── */
.auth-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.auth-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.auth-modal-card {
position: relative;
background: var(--color-card, #fff);
border-radius: 16px;
padding: 2rem 1.75rem 1.75rem;
width: 100%;
max-width: 380px;
box-shadow: 0 24px 64px rgba(0,0,0,0.22);
animation: auth-modal-in 0.22s ease;
}
@keyframes auth-modal-in {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to { opacity: 1; transform: none; }
}
.auth-modal-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--color-text);
}
.auth-modal-subtitle {
font-size: 0.82rem;
color: var(--color-text-muted);
margin: 0 0 1.25rem;
}
.auth-modal-form .form-group {
margin-bottom: 0.85rem;
}
.auth-modal-close {
position: absolute;
top: 0.85rem;
right: 0.85rem;
background: none;
border: none;
font-size: 1.4rem;
line-height: 1;
color: var(--color-text-muted);
cursor: pointer;
padding: 0.2rem 0.4rem;
border-radius: 6px;
transition: background 0.15s;
}
.auth-modal-close:hover {
background: var(--color-bg-hover, rgba(0,0,0,0.06));
color: var(--color-text);
}
/* ── Project Stages List - redesigned card header ───────────────────────── */
.stages-list .stage-item {
position: relative;
overflow: hidden;
padding: 0.9rem 0.95rem 0.9rem 1.1rem;
background: #fff;
border: 1px solid rgba(16, 82, 46, 0.14);
border-radius: 16px;
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
}
/* зелёный акцент слева */
.stages-list .stage-item::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
border-radius: 16px 0 0 16px;
background: linear-gradient(180deg, #0f7a3f 0%, #d7a529 100%);
}
/* ── шапка: grid из 3 колонок - номер | название+статус | удалить ── */
/* !important чтобы перебить flex+order из media-запросов на 480px */
.stages-list .stage-item-row-top {
display: grid !important;
grid-template-columns: 2rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.65rem;
}
/* Номер */
.stages-list .stage-order {
grid-column: 1;
grid-row: 1;
order: unset !important;
align-self: center;
width: 2rem;
height: 2rem;
border-radius: 8px;
background: #f0f9f3;
color: #0f7a3f;
font-size: 0.82rem;
font-weight: 700;
box-shadow: 0 0 0 1.5px rgba(15, 122, 63, 0.2);
}
/* Блок название + статус - на десктопе в одну строку */
.stages-list .stage-name-wrap,
.stages-list .stage-name-wrap--closure-inline {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem 0.65rem;
min-width: 0;
flex: unset !important;
order: unset !important;
width: auto !important;
}
/* Название */
.stages-list .stage-title-text {
font-size: 1rem;
font-weight: 700;
color: #111827;
line-height: 1.3;
white-space: nowrap;
}
/* Статус-строка: бейдж + дата в одну строку */
.stages-list .stage-top-inline-closure {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.4rem;
}
.stages-list .stage-top-inline-gap { display: none; }
/* Бейдж */
.stages-list .stage-top-inline-closure .badge {
order: 1;
border-radius: 999px;
padding: 0.18rem 0.55rem;
font-size: 0.73rem;
font-weight: 600;
background: #0f9f4f;
color: #fff;
white-space: nowrap;
}
/* Дата закрытия */
.stages-list .stage-closed-at-inline {
order: 2;
font-size: 0.8rem;
color: #6b7280;
white-space: nowrap;
}
.stages-list .stage-closed-at-label { color: #9ca3af; }
/* Кнопка удаления - красная */
.stages-list .stage-delete-btn {
grid-column: 3;
grid-row: 1;
order: unset !important;
margin-left: 0 !important;
align-self: center;
padding: 0.3rem 0.7rem;
font-size: 0.78rem;
font-weight: 600;
border-radius: 8px;
background: #dc2626;
color: #fff;
border: 1px solid #dc2626;
box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25);
transition: background 0.15s, box-shadow 0.15s;
}
.stages-list .stage-delete-btn:hover {
background: #b91c1c;
border-color: #b91c1c;
color: #fff;
box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}
/* ── мобильный вид: бейдж в одну строку с "Удалить", дата под бейджем ── */
@media (max-width: 768px) {
.stages-list .stage-item-row-top {
grid-template-columns: 2rem minmax(0, 1fr) auto !important;
grid-template-areas:
"num name name"
"num badge delete"
"num date date" !important;
align-items: center;
column-gap: 0.65rem;
row-gap: 0.3rem;
}
.stages-list .stage-order {
grid-area: num;
grid-column: 1 !important;
grid-row: 1 / 4 !important;
align-self: center;
}
.stages-list .stage-name-wrap,
.stages-list .stage-name-wrap--closure-inline {
display: contents !important;
}
.stages-list .stage-name-heading {
grid-area: name;
justify-self: start;
}
.stages-list .stage-top-inline-closure {
display: contents !important;
}
.stages-list .stage-top-inline-closure .badge {
grid-area: badge;
justify-self: start;
}
.stages-list .stage-closed-at-inline {
grid-area: date;
justify-self: start;
white-space: normal;
}
.stages-list .stage-delete-btn {
grid-area: delete;
grid-column: 3 !important;
grid-row: auto !important;
align-self: center;
}
.stages-list .stage-title-text {
white-space: normal;
}
}
/* ── строка дат ──────────────────────────────────────────────────────────── */
.stages-list .stage-item-row-dates,
.stages-list .stage-item-row-dates-readonly {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.2rem;
margin-top: 0.75rem;
margin-left: calc(2rem + 0.65rem);
padding-top: 0.6rem;
border-top: 1px solid #edf2ed;
}
.stages-list .stage-date-field {
padding: 0.4rem 0.65rem;
background: #f8fbf8;
border-radius: 10px;
border: 1px solid #ddebd8;
min-width: 9rem;
}
.stages-list .stage-date-label {
font-size: 0.67rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #9ca3af;
font-weight: 600;
}
.stages-list .stage-dates-readonly {
display: flex;
align-items: baseline;
gap: 0.35rem;
font-size: 0.83rem;
color: #374151;
}
@media (max-width: 600px) {
.stages-list .stage-item-row-dates,
.stages-list .stage-item-row-dates-readonly {
margin-left: 0;
}
}
.support-status {
display: inline-flex;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
margin-right: 0.5rem;
background: #e5f7ef;
color: #176a48;
}
.support-status-new { background: #e8f1ff; color: #1d4ed8; }
.support-status-accepted { background: #e5f7ef; color: #176a48; }
.support-status-assigned,
.support-status-in_progress { background: #fff4db; color: #8a5a00; }
.support-status-done { background: #e7f6ee; color: #0f6b3c; }
.support-status-closed { background: #eef2f6; color: #475569; }
.support-status-rejected { background: #fde8e8; color: #9b1c1c; }
.support-timeline {
list-style: none;
margin: 0;
padding: 0;
}
.support-timeline-item {
padding: 0.85rem 0;
border-top: 1px solid var(--color-border, rgba(15,23,42,.12));
}
.support-timeline-item:first-child { border-top: 0; padding-top: 0; }
.support-timeline-meta {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.75rem;
align-items: baseline;
margin-bottom: 0.35rem;
}
.support-timeline-text { white-space: pre-wrap; margin: 0.25rem 0 0; }
.support-internal-flag {
font-size: 0.75rem;
font-weight: 700;
color: #7c5a12;
background: #fff4db;
border-radius: 999px;
padding: 0.1rem 0.5rem;
}
.support-action-form {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border, rgba(15,23,42,.12));
}
.support-action-form:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.support-action-form label { display: block; margin: 0.4rem 0; }
.support-action-form textarea,
.support-action-form select,
.support-action-form input[type="file"] { margin-bottom: 0.6rem; }
.client-mobile-only {
display: none;
}
@media (max-width: 768px) {
body.role-client .breadcrumbs,
body.role-client .greeting-banner,
body.role-client .mobile-impersonation-bar,
body.role-client .flash-info,
body.role-client .client-extra {
display: none !important;
}
body.role-client .client-mobile-only {
display: block;
}
body.role-client .main {
padding-top: 0.75rem;
padding-bottom: 1.25rem;
}
body.role-client .page-header {
margin-bottom: 0.75rem;
gap: 0.4rem;
}
body.role-client .client-project-name {
display: none;
}
body.role-client .client-project-address {
margin: 0;
font-size: 1.2rem;
font-weight: 700;
line-height: 1.3;
color: var(--color-text);
}
body.role-client .client-project-done {
margin: 0.15rem 0 0.35rem;
font-size: 0.85rem;
}
body.role-client .client-support-cta {
margin-top: 0.15rem;
}
body.role-client .project-gallery-section,
body.role-client .client-docs-card,
body.role-client .card {
padding: 0.85rem 0.9rem;
margin-bottom: 0.85rem;
}
body.role-client .client-docs-header h2,
body.role-client .client-tickets-head h2 {
font-size: 1rem;
margin: 0;
}
body.role-client .client-tickets-head {
margin: 0.5rem 0 0.4rem !important;
}
body.role-client .support-category-card {
min-height: 0;
padding: 0.85rem 1rem;
}
body.role-client .support-category-card span {
display: none;
}
body.role-client.client-project-done-page .progress-section,
body.role-client.client-project-done-page .client-stages {
display: none;
}
}
/* Compact forms: intrinsic short fields, readable labels, mobile wrapping. */
.form-row > .form-group { flex: 0 1 20rem; min-width: min(100%, 12rem); }
.form-row > .form-group:has(input[type="date"], input[type="time"], input[type="number"]) {
flex: 0 1 12rem; min-width: min(100%, 10rem);
}
.form-row > .form-group:has(textarea) { flex: 1 1 28rem; }
.compact-form { display:flex; flex-wrap:wrap; gap:12px 20px; }
.compact-form > * { flex-basis:100%; }
.compact-form > .form-group { flex:0 1 20rem; min-width:0; }
.compact-form > .form-group:has(textarea) { flex-basis:100%; max-width:none; }
.compact-form > .form-section { display:flex; flex-wrap:wrap; gap:12px 20px; }
.compact-form > .form-section > .form-group { flex:0 1 20rem; min-width:0; margin-bottom:0; }
.compact-form > .form-section > :not(.form-group) { flex-basis:100%; }
.compact-form > .form-group { max-width:32rem; }
.compact-form > .form-group:has(input[type="date"], input[type="number"]) { max-width:12rem; }
.login-card { max-width:360px; padding:24px; box-shadow:0 8px 28px rgb(15 23 42 / 6%); }
.login-title { font-size:1.4rem; text-align:left; margin:0 0 20px; }
.login-subtitle { text-align:left; font-size:.9rem; margin-bottom:16px; }
.login-form { text-align:left; display:grid; gap:14px; }
.login-form .form-group { max-width:none; width:100%; margin:0; }
.login-form .form-group label { text-align:left; }
.login-card .form-control { min-height:42px; }
.login-form .btn, .login-card > .btn { max-width:none; width:100%; margin:0; min-height:42px; }
.login-card .login-remember { display:flex; align-items:center; gap:8px; font-size:.875rem; font-weight:400; }
.login-remember input { width:16px; height:16px; margin:0; flex-shrink:0; }
.login-card #passkey-login { margin-top:12px; }
.login-card [hidden] { display:none !important; }
.login-card #passkey-status:empty { display:none; }
.login-card #code { max-width:12ch; letter-spacing:.2em; font-size:1.15rem; }
.login-card > form + form { margin:12px 0; }
.login-card #passkey-register { margin:14px 0 10px; }
.login-card .form-hint { font-size:.8rem; color:var(--color-text-muted); margin:12px 0 0; }
@media(max-width:600px) {
.compact-form > .form-section > .form-group { flex:1 1 100%; }
.form-row > .form-group { max-width:100%; }
.login-container { padding:12px 0; }
.login-card { padding:20px; }
}