* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Arial, Helvetica, sans-serif; color: #15213b; }
body { background: linear-gradient(180deg,#eef9fd 0%,#f4fbfd 50%,#eef9fc 100%); }
.hidden { display: none !important; }
.header {
width: min(1280px, calc(100% - 80px));
margin: 0 auto;
padding: 40px 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 700px) {
.header { width: calc(100% - 36px); padding: 26px 0 18px; }
}
.office-action-message { margin-top: 16px; }
.office-copy-row { display:flex; gap:8px; align-items:center; }
.office-copy-row input { flex:1; min-width:0; }
.office-copy-button {
min-height:40px; padding:0 12px; border:1px solid #dfe7ee; border-radius:8px;
background:#fff; color:#604fd0; cursor:pointer; font:inherit; font-size:12px; font-weight:600;
}
.office-copy-button:hover { border-color:#604fd0; }
.office-login-wrap { min-height: calc(100vh - 104px); }
.office-loading { padding: 30px; color:#8c9bb7; text-align:center; }
/* ========================================
LOGO
======================================== */
.header__logo {
position: relative;
display: inline-block;
color: #15213b;
font-size: 34px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.04em;
text-decoration: none;
white-space: nowrap;
}
.header__logo:hover,
.header__logo:focus,
.header__logo:visited {
text-decoration: none;
}
.header__logo-dark {
color: #15213b;
}
.header__logo-accent {
color: #28c8df;
}
.header__logo-mark {
position: absolute;
top: 0px;
right: -9px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #28c8df;
}
@media (max-width: 700px) {
.header__logo {
font-size: 28px;
}
.header__logo-mark {
top: 0px;
right: -8px;
border-left-width: 4px;
border-right-width: 4px;
border-bottom-width: 7px;
}
}
/* ========================================
PAGE SAFETY
======================================== */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
body {
background:
linear-gradient(
180deg,
#eef9fd 0%,
#f4fbfd 50%,
#eef9fc 100%
);
}
/* ========================================
ADMIN LOGIN
======================================== */
.admin-login {
min-height: calc(100vh - 100px);
display: flex;
align-items: center;
justify-content: center;
padding: 50px 20px;
box-sizing: border-box;
}
.admin-login__card {
width: 100%;
max-width: 430px;
padding: 44px;
box-sizing: border-box;
background: rgba(
255,
255,
255,
0.96
);
border: 1px solid #e3f0f4;
border-radius: 18px;
box-shadow:
0 15px 45px
rgba(80, 140, 160, 0.08);
}
.admin-login__header {
margin-bottom: 32px;
}
.admin-login__title {
margin: 0 0 8px;
color: #15213b;
font-size: 32px;
font-weight: 500;
letter-spacing: -0.02em;
}
.admin-login__subtitle {
margin: 0;
color: #8a9ab6;
font-size: 15px;
}
.admin-login__brand {
margin: 0 0 10px;
color: #31cbe2;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.04em;
}
.admin-login__notice {
margin-bottom: 28px;
padding: 16px 18px;
border: 1px solid #e3f0f4;
border-radius: 12px;
background: #f7fcfd;
color: #71819b;
font-size: 14px;
line-height: 1.55;
}
.admin-login__notice p {
margin: 0;
}
.admin-login__notice p + p {
margin-top: 10px;
}
.admin-login__notice a,
.admin-login__footer a {
color: #199eb2;
text-decoration: none;
}
.admin-login__notice a:hover,
.admin-login__footer a:hover {
text-decoration: underline;
}
.admin-login__footer {
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid #e8f1f4;
color: #8a9ab6;
font-size: 13px;
line-height: 1.5;
}
.admin-login__footer p {
margin: 0 0 8px;
}
.admin-login__form {
display: flex;
flex-direction: column;
gap: 20px;
}
.admin-login__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-login__label {
color: #71819b;
font-size: 14px;
}
.admin-login__input {
width: 100%;
padding: 14px 16px;
box-sizing: border-box;
border: 1px solid #dbe9ef;
border-radius: 10px;
background: #ffffff;
color: #15213b;
font: inherit;
outline: none;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.admin-login__input:focus {
border-color: #31cbe2;
box-shadow:
0 0 0 3px
rgba(49, 203, 226, 0.12);
}
.admin-login__button {
padding: 14px 20px;
border: 0;
border-radius: 10px;
background: #31cbe2;
color: #ffffff;
font: inherit;
font-weight: 500;
cursor: pointer;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.admin-login__button:hover {
opacity: 0.9;
}
.admin-login__button:active {
transform: translateY(1px);
}
.admin-login__error {
margin-bottom: 20px;
padding: 13px 15px;
border-radius: 10px;
background: #fff0f2;
color: #d85670;
font-size: 14px;
}
/* ========================================
DASHBOARD
======================================== */
.admin-dashboard {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding:
62px 48px
90px;
box-sizing: border-box;
overflow: hidden;
}
/* ========================================
TOP
======================================== */
.admin-dashboard__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
margin-bottom: 34px;
}
.admin-dashboard__title {
margin: 0;
color: #15213b;
font-size: 42px;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.025em;
}
.admin-dashboard__subtitle {
margin: 8px 0 0;
color: #8c9bb7;
font-size: 19px;
line-height: 1.5;
}
.admin-dashboard__account {
display: flex;
align-items: center;
gap: 15px;
}
.admin-dashboard__account-name {
color: #8393ac;
font-size: 14px;
border-bottom:
1px solid #c6d6dd;
padding-bottom: 3px;
}
.admin-dashboard__logout {
padding: 9px 14px;
border: 1px solid #d7e7ed;
border-radius: 8px;
background: rgba(
255,
255,
255,
0.65
);
color: #71819a;
font: inherit;
font-size: 13px;
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease;
}
.admin-dashboard__logout:hover {
background: #ffffff;
border-color: #30c9e0;
}
/* ========================================
ERROR
======================================== */
.admin-dashboard__error {
margin-bottom: 25px;
padding: 14px 16px;
border-radius: 10px;
background: #fff0f2;
color: #c8576d;
}
/* ========================================
TOP CARDS
======================================== */
.admin-dashboard__cards {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 18px;
}
.admin-card {
min-width: 0;
min-height: 150px;
display: flex;
align-items: center;
gap: 22px;
padding: 28px 25px;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #edf4f6;
border-radius: 14px;
box-shadow:
0 9px 30px
rgba(83, 135, 153, 0.06);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.admin-card:hover {
transform: translateY(-2px);
box-shadow:
0 14px 36px
rgba(83, 135, 153, 0.09);
}
.admin-card__icon {
width: 64px;
height: 64px;
flex: 0 0 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ebe9f8;
color: #604fd0;
}
.admin-card__icon svg {
width: 31px;
height: 31px;
}
.admin-card__content {
min-width: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.admin-card__label {
color: #8292ae;
font-size: 14px;
line-height: 1.3;
}
.admin-card__value {
color: #101a34;
font-size: 38px;
font-weight: 400;
line-height: 1;
}
/* ========================================
MINI INFO
======================================== */
.admin-dashboard__mini-info {
display: flex;
justify-content: flex-end;
gap: 25px;
margin-top: 13px;
color: #93a3b8;
font-size: 12px;
}
.admin-dashboard__mini-info strong {
color: #667a94;
font-weight: 500;
}
/* ========================================
MAIN CONTENT
======================================== */
.admin-dashboard__content {
min-width: 0;
display: grid;
grid-template-columns:
minmax(0, 1.35fr)
minmax(0, 1fr);
gap: 18px;
margin-top: 24px;
}
.admin-panel {
min-width: 0;
background: #ffffff;
border: 1px solid #edf4f6;
border-radius: 14px;
box-shadow:
0 9px 30px
rgba(83, 135, 153, 0.06);
}
.admin-panel--table {
min-width: 0;
padding:
28px 25px
22px;
}
.admin-panel--metrics {
min-width: 0;
padding:
28px 26px
25px;
}
.admin-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 22px;
}
.admin-panel__title {
margin: 0;
color: #1a2740;
font-size: 21px;
font-weight: 500;
}
.admin-panel__hint {
color: #a0adbf;
font-size: 11px;
white-space: nowrap;
}
/* ========================================
TABLE
======================================== */
.admin-table-wrapper {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
scrollbar-width: thin;
}
.admin-table {
width: 100%;
min-width: 650px;
border-collapse: collapse;
color: #596b87;
}
.admin-table th {
padding:
0 10px
13px;
border-bottom:
1px solid #e8eff3;
color: #9aa7bb;
font-size: 12px;
font-weight: 400;
text-align: left;
white-space: nowrap;
}
.admin-table td {
padding: 14px 10px;
border-bottom:
1px solid #edf2f5;
color: #64758f;
font-size: 13px;
vertical-align: middle;
white-space: nowrap;
}
.admin-table tbody tr:last-child td {
border-bottom: none;
}
.admin-table tbody tr {
transition:
background 0.15s ease;
}
.admin-table tbody tr:hover {
background: #fbfdfe;
}
.admin-table__employee {
color: #5a6b84 !important;
font-weight: 500;
}
/* ========================================
STATUS
======================================== */
.admin-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.admin-status__dot {
width: 9px;
height: 9px;
flex: 0 0 9px;
border-radius: 50%;
}
.admin-status--normal {
color: #74849b;
}
.admin-status--normal
.admin-status__dot {
background: #5ed88b;
}
.admin-status--risk {
color: #74849b;
}
.admin-status--risk
.admin-status__dot {
background: #ffc85b;
}
.admin-status--attention {
color: #74849b;
}
.admin-status--attention
.admin-status__dot {
background: #ff6580;
}
/* ========================================
BARS
======================================== */
.admin-bars {
display: flex;
flex-direction: column;
gap: 21px;
}
.admin-bar {
min-width: 0;
display: grid;
grid-template-columns:
92px
minmax(0, 1fr)
34px;
align-items: center;
gap: 13px;
}
.admin-bar__name {
color: #536680;
font-size: 14px;
}
.admin-bar__track {
min-width: 0;
height: 16px;
overflow: hidden;
border-radius: 999px;
background: #edf5f8;
}
.admin-bar__fill {
height: 100%;
min-width: 0;
border-radius: inherit;
background:
linear-gradient(
90deg,
#55d5e7,
#29c6df
);
transition:
width 0.5s ease;
}
.admin-bar__value {
color: #53637c;
font-size: 14px;
font-weight: 500;
text-align: right;
}
/* ========================================
SUMMARY
======================================== */
.admin-panel__divider {
height: 1px;
margin: 28px 0 22px;
background: #e7f0f3;
}
.admin-summary {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
box-sizing: border-box;
border-radius: 12px;
background: #edf9fc;
}
.admin-summary__icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(96, 79, 208, 0.12);
color: #604fd0;
}
.admin-summary__icon svg {
width: 22px;
height: 22px;
}
.admin-summary__title {
margin:
2px 0
8px;
color: #334761;
font-size: 14px;
font-weight: 600;
}
.admin-summary__text {
margin: 0;
color: #7d8ea5;
font-size: 12px;
line-height: 1.7;
overflow-wrap: anywhere;
}
/* ========================================
EMPTY
======================================== */
.admin-panel__empty {
padding: 50px 20px;
color: #9aa9ba;
font-size: 14px;
text-align: center;
}
/* ========================================
TABLET
======================================== */
@media (max-width: 1100px) {
.admin-dashboard {
padding:
50px 28px
75px;
}
.admin-dashboard__cards {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.admin-dashboard__content {
grid-template-columns: 1fr;
}
}
/* ========================================
MOBILE
======================================== */
@media (max-width: 700px) {
.admin-login {
padding: 30px 16px;
}
.admin-login__card {
padding: 30px 22px;
border-radius: 16px;
}
.admin-login__title {
font-size: 28px;
}
.admin-dashboard {
padding:
34px 18px
60px;
}
.admin-dashboard__top {
flex-direction: column;
gap: 20px;
margin-bottom: 28px;
}
.admin-dashboard__title {
font-size: 31px;
}
.admin-dashboard__subtitle {
font-size: 15px;
}
.admin-dashboard__account {
width: 100%;
justify-content: flex-end;
}
.admin-dashboard__cards {
grid-template-columns: 1fr;
gap: 12px;
}
.admin-card {
min-height: 120px;
padding: 22px;
}
.admin-card__icon {
width: 54px;
height: 54px;
flex-basis: 54px;
}
.admin-card__icon svg {
width: 27px;
height: 27px;
}
.admin-card__value {
font-size: 34px;
}
.admin-dashboard__mini-info {
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px 18px;
}
.admin-dashboard__content {
grid-template-columns: 1fr;
margin-top: 20px;
}
.admin-panel--table,
.admin-panel--metrics {
padding:
23px 18px;
}
.admin-panel__title {
font-size: 19px;
}
.admin-table {
min-width: 610px;
}
.admin-bar {
grid-template-columns:
78px
minmax(0, 1fr)
30px;
gap: 9px;
}
.admin-bar__name {
font-size: 12px;
}
.admin-summary {
padding: 17px;
}
}
/* ========================================
NEW OVERVIEW
======================================== */
.admin-dashboard__company {
margin: 10px 0 0;
color: #604fd0;
font-size: 17px;
font-weight: 600;
}
.admin-company-meta {
margin-top: 15px;
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
color: #8c9bb7;
font-size: 13px;
}
.admin-company-meta strong {
color: #536680;
font-weight: 500;
}
.admin-dashboard__section {
margin-top: 24px;
}
.admin-section__header {
margin-bottom: 17px;
}
.admin-card__meta {
color: #9aa7bb;
font-size: 11px;
}
.admin-dashboard__content--overview {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.admin-bar--overview {
grid-template-columns:
100px
minmax(0, 1fr)
48px;
}
.admin-bar__fill--purple {
background:
linear-gradient(
90deg,
#8a7ce0,
#604fd0
);
}
.admin-dashboard__specialist {
margin-top: 18px;
}
.admin-specialist-card {
min-height: 125px;
padding: 28px 32px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
background: #ebe9f8;
border: 1px solid
rgba(
96,
79,
208,
0.14
);
border-radius: 14px;
}
.admin-specialist-card__label {
display: block;
color: #334761;
font-size: 21px;
font-weight: 500;
}
.admin-specialist-card__description {
margin: 8px 0 0;
color: #7d8ea5;
font-size: 13px;
}
.admin-specialist-card__value {
flex-shrink: 0;
color: #604fd0;
font-size: 45px;
font-weight: 500;
line-height: 1;
}
@media (max-width: 1100px) {
.admin-dashboard__content--overview {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.admin-company-meta {
flex-direction: column;
gap: 6px;
}
.admin-bar--overview {
grid-template-columns:
82px
minmax(0, 1fr)
43px;
}
.admin-specialist-card {
padding: 23px 20px;
align-items: flex-start;
}
.admin-specialist-card__label {
font-size: 18px;
}
.admin-specialist-card__value {
font-size: 36px;
}
}
/* ========================================
COMPANY MANAGEMENT
======================================== */
.company-create-panel,
.company-created {
margin-top: 24px;
padding: 28px;
background: #ffffff;
border: 1px solid #e8eef4;
border-radius: 14px;
}
.company-form {
max-width: 680px;
display: flex;
flex-direction: column;
gap: 18px;
}
.company-form__row {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 16px;
}
.company-form__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.company-form__field label {
color: #536680;
font-size: 13px;
font-weight: 500;
}
.company-form__field input {
width: 100%;
height: 46px;
padding: 0 14px;
box-sizing: border-box;
border: 1px solid #dce5ed;
border-radius: 10px;
background: #f8f9fb;
color: #334761;
font: inherit;
outline: none;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.company-form__field input:focus {
border-color: #604fd0;
box-shadow:
0 0 0 3px
rgba(96, 79, 208, .10);
}
.company-form__divider {
height: 1px;
margin: 4px 0;
background: #edf1f5;
}
.company-form__submit {
min-height: 48px;
padding: 0 24px;
align-self: flex-start;
border: 0;
border-radius: 10px;
background: #2bc4d6;
color: #ffffff;
font: inherit;
font-weight: 600;
cursor: pointer;
}
.company-created {
background: #ebe9f8;
border-color:
rgba(96, 79, 208, .15);
}
.company-created__title {
margin: 0;
color: #334761;
font-size: 20px;
}
.company-created__name {
margin: 7px 0 22px;
color: #604fd0;
font-weight: 600;
}
.company-created__grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 15px;
}
.company-created__item {
display: flex;
flex-direction: column;
gap: 7px;
}
.company-created__item span {
color: #6e7f96;
font-size: 12px;
}
.company-created__item input {
width: 100%;
height: 43px;
padding: 0 12px;
box-sizing: border-box;
border: 1px solid
rgba(96, 79, 208, .15);
border-radius: 9px;
background: #ffffff;
color: #334761;
font: inherit;
font-size: 13px;
}
.company-created__warning {
margin: 18px 0 0;
color: #7a6998;
font-size: 12px;
}
@media (max-width: 700px) {
.company-create-panel,
.company-created {
padding: 20px;
}
.company-form__row,
.company-created__grid {
grid-template-columns: 1fr;
}
.company-form__submit {
width: 100%;
}
}
/* ========================================
COMPANIES LIST
======================================== */
.companies-list {
margin-top: 24px;
padding: 28px;
background: #ffffff;
border: 1px solid #e8eef4;
border-radius: 14px;
}
.companies-grid {
margin-top: 20px;
display: grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap: 18px;
}
.company-card {
padding: 22px;
border: 1px solid #e6edf3;
border-radius: 13px;
background: #f8f9fb;
}
.company-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.company-card__name {
margin: 0 0 8px;
color: #334761;
font-size: 18px;
}
.company-card__id {
color: #a0adbd;
font-size: 12px;
}
.company-status {
display: inline-flex;
padding: 5px 9px;
border-radius: 50px;
font-size: 11px;
font-weight: 600;
}
.company-status--active {
background: #eaf9fb;
color: #188fa0;
}
.company-status--waiting {
background: #ebe9f8;
color: #604fd0;
}
.company-status--expired {
background: #eef1f5;
color: #7a8799;
}
.company-status--disabled {
background: #f7eded;
color: #a85b5b;
}
.company-card__stats {
margin-top: 20px;
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 8px;
}
.company-card__stats div {
padding: 10px;
border-radius: 9px;
background: #ffffff;
}
.company-card__stats span {
display: block;
margin-bottom: 5px;
color: #97a4b5;
font-size: 10px;
}
.company-card__stats strong {
color: #334761;
font-size: 17px;
}
.company-card__meta {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
color: #8493a6;
font-size: 12px;
}
.company-card__meta strong {
color: #536680;
font-weight: 500;
}
.company-card__link {
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 7px;
}
.company-card__link span {
color: #8493a6;
font-size: 11px;
}
.company-card__link input {
width: 100%;
height: 40px;
padding: 0 11px;
box-sizing: border-box;
border: 1px solid #dfe7ee;
border-radius: 8px;
background: #ffffff;
color: #52657e;
font-size: 12px;
}
@media (max-width: 950px) {
.companies-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.companies-list {
padding: 20px;
}
.company-card {
padding: 17px;
}
.company-card__stats {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
.admin-dashboard__account {
display: flex;
align-items: center;
gap: 10px;
}
.admin-dashboard__report {
min-height: 40px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 9px;
background: #604fd0;
color: #ffffff;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition:
opacity .2s ease,
transform .2s ease;
}
.admin-dashboard__report:hover {
opacity: .9;
transform: translateY(-1px);
}
@media (max-width: 700px) {
.admin-dashboard__account {
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
}
}
.company-update-success {
margin-top: 20px;
padding: 14px 17px;
border-radius: 10px;
background: #eaf9fb;
color: #188fa0;
font-size: 13px;
}
.company-settings {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #e5ebf0;
}
.company-settings__row {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 10px;
}
.company-settings__toggle {
margin-top: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
color: #536680;
font-size: 12px;
cursor: pointer;
}
.company-settings__toggle input {
width: 16px;
height: 16px;
accent-color: #604fd0;
}
.company-settings__submit {
margin-top: 15px;
min-height: 40px;
padding: 0 15px;
border: 0;
border-radius: 8px;
background: #604fd0;
color: #ffffff;
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
@media (max-width: 600px) {
.company-settings__row {
grid-template-columns: 1fr;
}
}
/* ========================================
HR PASSWORD RESET
======================================== */
.company-password {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #e5ebf0;
}
.company-password__label {
display: block;
margin-bottom: 5px;
color: #8493a6;
font-size: 11px;
}
.company-password__login {
color: #334761;
font-size: 14px;
}
.company-password__form {
margin-top: 14px;
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
align-items: end;
gap: 10px;
}
.company-password__submit {
min-height: 46px;
padding: 0 16px;
border: 1px solid #604fd0;
border-radius: 9px;
background: #ffffff;
color: #604fd0;
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition:
background .2s ease,
color .2s ease;
}
.company-password__submit:hover {
background: #604fd0;
color: #ffffff;
}
.company-password-result {
margin-top: 20px;
padding: 18px 20px;
border:
1px solid
rgba(
96,
79,
208,
.18
);
border-radius: 12px;
background: #ebe9f8;
color: #536680;
}
.company-password-result__title {
margin: 0 0 12px;
color: #604fd0;
font-size: 17px;
}
.company-password-result p {
margin: 6px 0;
}
.company-password-result small {
display: block;
margin-top: 13px;
color: #7d719c;
}
@media (max-width: 600px) {
.company-password__form {
grid-template-columns: 1fr;
}
.company-password__submit {
width: 100%;
}
}
@media (max-width: 600px) {
.company-settings__row {
grid-template-columns: 1fr;
}
.company-settings__row > * {
min-width: 0;
}
.company-form__field {
min-width: 0;
width: 100%;
}
.company-form__field input {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.company-form__field input[type="date"] {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
}
/* ========================================
HR TEAMS / GROUP ANALYTICS
======================================== */
.admin-dashboard__report--secondary {
background: #ffffff;
color: #604fd0;
border: 1px solid #dfe7ee;
}
.company-settings__submit {
display: block;
clear: both;
}
.team-create-panel {
margin-bottom: 28px;
padding: 26px;
border: 1px solid #e3eef2;
border-radius: 18px;
background: rgba(255,255,255,.96);
box-shadow: 0 12px 34px rgba(73,126,145,.06);
}
.team-create-form {
display: grid;
grid-template-columns: minmax(0,1fr) 180px auto;
align-items: end;
gap: 14px;
}
.teams-office-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 18px;
}
.team-office-card {
min-width: 0;
padding: 24px;
border: 1px solid #e1edf2;
border-radius: 18px;
background: rgba(255,255,255,.96);
box-shadow: 0 12px 34px rgba(73,126,145,.06);
}
.team-office-card__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
margin-bottom: 20px;
}
.team-office-card__top h3 { margin: 0; font-size: 20px; font-weight: 600; }
.team-office-card__top div > span { display:block; margin-top:6px; color:#95a3b7; font-size:12px; }
.team-office-card__stats {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 8px;
margin-bottom: 18px;
}
.team-office-card__stats > div { padding: 12px; border-radius: 11px; background:#f7fbfd; min-width:0; }
.team-office-card__stats span { display:block; color:#9aa8ba; font-size:10px; margin-bottom:5px; }
.team-office-card__stats strong { font-size:16px; }
.team-office-progress { margin: 16px 0; }
.team-office-progress > div:first-child { display:flex; justify-content:space-between; color:#7d8ca3; font-size:12px; margin-bottom:7px; }
.team-office-progress__track { height:8px; overflow:hidden; border-radius:999px; background:#eaf2f5; }
.team-office-progress__track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#31cbe2,#6b78ea); }
.team-office-link { margin-top: 16px; }
.team-office-link > span { display:block; color:#8998ad; font-size:11px; margin-bottom:7px; }
.team-office-card__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.team-office-card__actions .admin-dashboard__report,
.team-office-card__actions .admin-dashboard__logout { min-height:40px; }
.team-empty { padding: 38px; text-align:center; color:#8d9bb0; border:1px dashed #d9e8ed; border-radius:16px; background:rgba(255,255,255,.72); grid-column:1/-1; }
.team-analytics-stats { margin-bottom:18px; }
.team-risk-panel { margin-bottom:18px; }
.team-eyebrow { display:block; margin-bottom:7px; color:#33b8ce; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.team-risk-title { font-size:26px; }
.team-risk-subtitle { margin:7px 0 0; color:#8999b0; font-size:13px; }
.team-risk-kpi { min-width:128px; padding:15px 18px; border-radius:16px; text-align:right; }
.team-risk-kpi strong { display:block; font-size:30px; line-height:1; }
.team-risk-kpi span { display:block; margin-top:7px; font-size:11px; font-weight:800; }
.team-risk-kpi--green { color:#27865d; background:#eaf8f1; }
.team-risk-kpi--yellow { color:#9f6a19; background:#fff4da; }
.team-risk-kpi--red { color:#b54d57; background:#ffedef; }
.team-risk-chart { height:340px; min-width:0; overflow:hidden; border:1px solid #e4eef2; border-radius:15px; background:#fff; }
.team-risk-svg { width:100%; height:100%; overflow:visible; }
.team-risk-grid { stroke:#e9f0f3; stroke-width:1; vector-effect:non-scaling-stroke; }
.team-risk-y { fill:#9ba9bc; font-size:10px; }
.team-risk-line { stroke-width:4; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.team-risk-dot { stroke-width:3; vector-effect:non-scaling-stroke; }
.team-risk-dates { display:flex; justify-content:space-between; gap:8px; padding:8px 22px 0 25px; color:#97a5b9; font-size:10px; }
.team-risk-legend { display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; color:#77869d; font-size:11px; }
.team-risk-legend span { display:inline-flex; align-items:center; gap:6px; }
.team-risk-legend i { width:8px; height:8px; border-radius:50%; }
.team-risk-legend .green { background:#42b883; }
.team-risk-legend .yellow { background:#e6a93c; }
.team-risk-legend .red { background:#df6671; }
.team-analytics-grid { grid-template-columns:1.15fr .85fr; margin-bottom:18px; }
.team-signals { display:flex; flex-direction:column; gap:20px; }
.team-signal__head { display:flex; justify-content:space-between; align-items:flex-end; gap:15px; margin-bottom:8px; }
.team-signal__head strong { display:block; font-size:13px; line-height:1.35; }
.team-signal__head span { display:block; margin-top:3px; color:#9aa8b8; font-size:10px; }
.team-signal__head b { font-size:15px; }
.team-signal__track { height:9px; overflow:hidden; border-radius:999px; background:#edf3f6; }
.team-signal__fill { display:block; height:100%; border-radius:inherit; }
.team-signal__fill--green { background:#42b883; }
.team-signal__fill--yellow { background:#e6a93c; }
.team-signal__fill--red { background:#df6671; }
.team-recommendation { display:flex; flex-direction:column; }
.team-recommendation--green { border-top:4px solid #42b883; }
.team-recommendation--yellow { border-top:4px solid #e6a93c; }
.team-recommendation--red { border-top:4px solid #df6671; }
.team-recommendation__text { color:#53627a; font-size:14px; line-height:1.65; }
.team-dominant { margin:22px 0; padding:15px; border-radius:13px; background:#f6fafc; }
.team-dominant span { display:block; color:#98a5b7; font-size:10px; text-transform:uppercase; letter-spacing:.07em; font-weight:800; }
.team-dominant strong { display:block; margin-top:6px; font-size:14px; }
.team-method-note { margin-top:auto; color:#a0abbc; font-size:10px; line-height:1.45; }
.team-states { margin-bottom:22px; }
@media (max-width: 960px) {
.teams-office-grid { grid-template-columns:1fr; }
.team-create-form { grid-template-columns:1fr 160px; }
.team-create-form .company-form__submit { grid-column:1/-1; }
.team-analytics-grid { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
.team-create-form { grid-template-columns:1fr; }
.team-office-card__stats { grid-template-columns:1fr 1fr; }
.team-office-card__actions > * { width:100%; }
.team-risk-panel .admin-panel__header { flex-direction:column; }
.team-risk-kpi { width:100%; text-align:left; }
.team-risk-chart { height:260px; }
.team-risk-dates { overflow-x:auto; justify-content:flex-start; }
.team-risk-dates span { min-width:64px; }
}
/* === BEUP HR DEMO VISUAL PARITY V1 START === */
/* Analytics page: approved demo proportions */
#teamAnalyticsView .admin-dashboard {
width: min(1540px, calc(100% - 72px));
max-width: none;
padding: 42px 0 90px;
overflow: visible;
}
#teamAnalyticsView .admin-dashboard__top {
margin-bottom: 28px;
gap: 42px;
}
#teamAnalyticsView .admin-dashboard__title {
font-size: clamp(38px, 4vw, 58px);
line-height: 1.04;
letter-spacing: -0.04em;
}
#teamAnalyticsView .admin-dashboard__subtitle {
max-width: 820px;
margin-top: 14px;
font-size: 16px;
line-height: 1.55;
}
#teamAnalyticsView .admin-dashboard__account {
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
#teamAnalyticsView .admin-dashboard__logout {
min-height: 42px;
padding: 0 16px;
border-radius: 11px;
background: rgba(255,255,255,.88);
font-size: 13px;
font-weight: 650;
}
/* Four KPI cards from demo */
#teamAnalyticsView .team-analytics-stats {
gap: 14px;
margin-bottom: 20px;
}
#teamAnalyticsView .team-analytics-stats .admin-card {
min-height: 132px;
gap: 18px;
padding: 22px 24px;
border: 1px solid #deedf2;
border-radius: 18px;
background: rgba(255,255,255,.95);
box-shadow: 0 12px 34px rgba(70,125,145,.05);
}
#teamAnalyticsView .team-analytics-stats .admin-card__icon {
width: 54px;
height: 54px;
flex: 0 0 54px;
}
#teamAnalyticsView .team-analytics-stats .admin-card__icon svg {
width: 26px;
height: 26px;
}
#teamAnalyticsView .team-analytics-stats .admin-card__label {
font-size: 12px;
}
#teamAnalyticsView .team-analytics-stats .admin-card__value {
font-size: 32px;
}
/* All analytics cards use the same surfaces as the demo */
#teamAnalyticsView .team-risk-panel,
#teamAnalyticsView .team-analytics-grid > .admin-panel,
#teamAnalyticsView .team-states {
padding: 28px;
border: 1px solid #deedf2;
border-radius: 22px;
background: rgba(255,255,255,.95);
box-shadow: 0 20px 55px rgba(71,123,143,.09);
}
#teamAnalyticsView .team-risk-panel {
margin-bottom: 18px;
}
#teamAnalyticsView .team-risk-panel .admin-panel__header,
#teamAnalyticsView .team-analytics-grid .admin-panel__header,
#teamAnalyticsView .team-states .admin-panel__header {
align-items: flex-start;
margin-bottom: 24px;
}
#teamAnalyticsView .team-eyebrow {
margin-bottom: 9px;
color: #35b9cf;
font-size: 12px;
line-height: 1.2;
letter-spacing: .12em;
}
#teamAnalyticsView .team-risk-title {
color: #15213b;
font-size: 30px;
line-height: 1.18;
font-weight: 600;
letter-spacing: -.025em;
}
#teamAnalyticsView .team-risk-subtitle {
margin-top: 8px;
color: #8797b1;
font-size: 14px;
line-height: 1.45;
}
#teamAnalyticsView .team-risk-kpi {
min-width: 150px;
padding: 18px 20px;
border-radius: 18px;
}
#teamAnalyticsView .team-risk-kpi strong {
font-size: 36px;
}
#teamAnalyticsView .team-risk-kpi span {
margin-top: 8px;
font-size: 12px;
}
/* Graph: clean white background, large readable geometry; the line itself carries zone colors */
#teamAnalyticsView .team-risk-chart {
height: 390px;
overflow: hidden;
border: 1px solid #dfecef;
border-radius: 18px;
background: #fff;
}
#teamAnalyticsView .team-risk-grid {
stroke: #e8f0f3;
}
#teamAnalyticsView .team-risk-y {
fill: #91a1b8;
font-size: 11px;
}
#teamAnalyticsView .team-risk-line {
stroke-width: 5;
stroke-linecap: round;
}
#teamAnalyticsView .team-risk-dot {
stroke-width: 3;
}
#teamAnalyticsView .team-risk-dates {
padding: 10px 25px 0 28px;
color: #899ab4;
font-size: 11px;
}
#teamAnalyticsView .team-risk-legend {
margin-top: 18px;
gap: 22px;
font-size: 12px;
}
#teamAnalyticsView .team-risk-legend i {
width: 9px;
height: 9px;
}
/* Two-column detail / recommendation block */
#teamAnalyticsView .team-analytics-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: 18px;
margin-top: 0;
margin-bottom: 18px;
}
#teamAnalyticsView .team-analytics-grid .admin-panel__title,
#teamAnalyticsView .team-states .admin-panel__title {
color: #15213b;
font-size: 24px;
line-height: 1.22;
font-weight: 600;
letter-spacing: -.02em;
}
#teamAnalyticsView .team-signals {
gap: 22px;
}
#teamAnalyticsView .team-signal__head {
margin-bottom: 9px;
}
#teamAnalyticsView .team-signal__head strong {
font-size: 14px;
}
#teamAnalyticsView .team-signal__head span {
margin-top: 4px;
font-size: 11px;
}
#teamAnalyticsView .team-signal__head b {
font-size: 16px;
}
#teamAnalyticsView .team-signal__track {
height: 10px;
background: #edf3f6;
}
#teamAnalyticsView .team-recommendation {
min-height: 100%;
}
#teamAnalyticsView .team-recommendation__text {
color: #53627a;
font-size: 14px;
line-height: 1.7;
}
#teamAnalyticsView .team-dominant {
margin: 26px 0;
padding: 17px;
border-radius: 14px;
background: #f6fafc;
}
#teamAnalyticsView .team-dominant span {
font-size: 10px;
}
#teamAnalyticsView .team-dominant strong {
margin-top: 7px;
font-size: 15px;
}
#teamAnalyticsView .team-method-note {
margin-top: auto;
color: #9eabbc;
font-size: 11px;
line-height: 1.5;
}
/* Bottom states: wide horizontal bars like approved demo */
#teamAnalyticsView .team-states {
margin-bottom: 24px;
}
#teamAnalyticsView .team-states .admin-bars {
display: flex;
flex-direction: column;
gap: 17px;
}
#teamAnalyticsView .team-states .admin-bar__track {
height: 13px;
border-radius: 999px;
background: #e9f2f5;
}
#teamAnalyticsView .team-states .admin-bar__fill {
border-radius: inherit;
background: linear-gradient(90deg, #31cbe2, #25bfd8);
}
@media (max-width: 1050px) {
#teamAnalyticsView .admin-dashboard {
width: min(100% - 40px, 1540px);
}
#teamAnalyticsView .team-analytics-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
#teamAnalyticsView .admin-dashboard {
width: min(100% - 30px, 1540px);
padding: 30px 0 60px;
}
#teamAnalyticsView .admin-dashboard__top {
flex-direction: column;
gap: 20px;
}
#teamAnalyticsView .admin-dashboard__title {
font-size: 40px;
}
#teamAnalyticsView .admin-dashboard__account {
width: 100%;
justify-content: flex-start;
}
#teamAnalyticsView .team-analytics-stats {
grid-template-columns: repeat(2, minmax(0,1fr));
}
#teamAnalyticsView .team-risk-panel,
#teamAnalyticsView .team-analytics-grid > .admin-panel,
#teamAnalyticsView .team-states {
padding: 20px;
}
#teamAnalyticsView .team-risk-panel .admin-panel__header {
flex-direction: column;
}
#teamAnalyticsView .team-risk-kpi {
width: 100%;
text-align: left;
}
#teamAnalyticsView .team-risk-chart {
height: 300px;
}
}
@media (max-width: 480px) {
#teamAnalyticsView .team-analytics-stats {
grid-template-columns: 1fr 1fr;
gap: 9px;
}
#teamAnalyticsView .team-analytics-stats .admin-card {
min-height: 108px;
padding: 16px;
}
#teamAnalyticsView .team-analytics-stats .admin-card__icon {
display: none;
}
#teamAnalyticsView .team-risk-title {
font-size: 24px;
}
}
/* === BEUP HR DEMO VISUAL PARITY V1 END === */
/* ===== HR TEAMS CARD FIX ===== */
.office-teams-list,
.teams-list {
display: grid;
gap: 24px;
}
.office-team-card,
.team-card {
border: 1px solid #d9e5ee;
border-radius: 28px;
background: #ffffff;
padding: 28px 28px 24px;
box-shadow: 0 10px 30px rgba(33, 63, 105, 0.06);
}
.office-team-card__header,
.team-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 20px;
}
.office-team-card__title-wrap,
.team-card__title-wrap {
min-width: 0;
}
.office-team-card__title,
.team-card__title {
margin: 0 0 6px;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
color: #163a70;
}
.office-team-card__subtitle,
.team-card__subtitle {
margin: 0;
color: #8aa0bf;
font-size: 15px;
line-height: 1.35;
}
.office-team-card__status,
.team-card__status {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 16px;
border-radius: 999px;
background: #eaf7f5;
color: #14907f;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
}
.office-team-card__stats,
.team-card__stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.office-team-card__stat,
.team-card__stat {
background: #f5f9fd;
border-radius: 18px;
padding: 14px 16px;
min-height: 86px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.office-team-card__stat-label,
.team-card__stat-label {
color: #8aa0bf;
font-size: 13px;
line-height: 1.3;
}
.office-team-card__stat-value,
.team-card__stat-value {
color: #163a70;
font-size: 38px;
line-height: 1;
font-weight: 700;
}
.office-team-card__progress-head,
.team-card__progress-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.office-team-card__progress-label,
.team-card__progress-label {
color: #5e7698;
font-size: 15px;
font-weight: 600;
}
.office-team-card__progress-value,
.team-card__progress-value {
color: #6f7cff;
font-size: 15px;
font-weight: 700;
}
.office-team-card__progress,
.team-card__progress {
width: 100%;
height: 10px;
border-radius: 999px;
background: #e8f0f7;
overflow: hidden;
margin-bottom: 20px;
}
.office-team-card__progress > span,
.team-card__progress > span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #4cbbf0 0%, #6b57df 100%);
}
.office-team-card__link-block,
.team-card__link-block {
margin-bottom: 22px;
}
.office-team-card__link-label,
.team-card__link-label {
display: block;
margin-bottom: 8px;
color: #5e7698;
font-size: 15px;
font-weight: 600;
}
.office-team-card__link-row,
.team-card__link-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.office-team-card__link-row input,
.team-card__link-row input,
.office-team-card__link-row .input,
.team-card__link-row .input {
width: 100%;
min-width: 0;
height: 48px;
border: 1px solid #cfdae7;
border-radius: 14px;
padding: 0 14px;
background: #fff;
color: #163a70;
font-size: 14px;
}
.office-team-card__link-row button,
.team-card__link-row button {
height: 48px;
padding: 0 20px;
border-radius: 14px;
white-space: nowrap;
}
.office-team-card__actions,
.team-card__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.office-team-card__actions .button,
.team-card__actions .button,
.office-team-card__actions button,
.team-card__actions button {
min-height: 48px;
padding: 0 22px;
border-radius: 16px;
}
@media (max-width: 980px) {
.office-team-card__stats,
.team-card__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.office-team-card,
.team-card {
padding: 20px 18px 18px;
border-radius: 22px;
}
.office-team-card__header,
.team-card__header {
flex-direction: column;
align-items: flex-start;
}
.office-team-card__stats,
.team-card__stats {
grid-template-columns: 1fr;
}
.office-team-card__link-row,
.team-card__link-row {
grid-template-columns: 1fr;
}
.office-team-card__actions,
.team-card__actions {
flex-direction: column;
align-items: stretch;
}
.office-team-card__actions .button,
.team-card__actions .button,
.office-team-card__actions button,
.team-card__actions button {
width: 100%;
}
}
/* ===== TEAM LINK ROW FIX ===== */
.office-copy-row,
.team-card__link-row {
display: flex;
align-items: stretch;
gap: 10px;
width: 100%;
}
.office-copy-row input,
.team-card__link-row input {
flex: 1 1 auto;
min-width: 0;
height: 46px;
padding: 0 14px;
border: 1px solid #d9e6ef;
border-radius: 12px;
background: #f8fbfd;
color: #36506f;
font: inherit;
font-size: 13px;
outline: none;
}
.office-copy-row input:focus,
.team-card__link-row input:focus {
border-color: #31cbe2;
box-shadow: 0 0 0 3px rgba(49, 203, 226, 0.10);
}
.office-copy-button,
.team-card__link-row button {
flex: 0 0 auto;
min-width: 112px;
height: 46px;
padding: 0 16px;
border: 1px solid #d9e6ef;
border-radius: 12px;
background: #ffffff;
color: #604fd0;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.office-copy-button:hover,
.team-card__link-row button:hover {
border-color: #604fd0;
background: #f8f6ff;
}
@media (max-width: 640px) {
.office-copy-row,
.team-card__link-row {
flex-direction: column;
}
.office-copy-button,
.team-card__link-row button {
width: 100%;
}
}
/* ===== CREATE TEAM ALIGNMENT FIX ===== */
.team-create-form,
.office-team-create-form {
display: grid;
grid-template-columns: minmax(0, 1fr) 180px 185px;
gap: 14px;
align-items: end;
}
.team-create-form .company-form__field,
.office-team-create-form .company-form__field {
margin: 0;
}
.team-create-form button,
.office-team-create-form button {
height: 46px;
min-height: 46px;
margin: 0;
align-self: end;
}
.team-create-form .form-note,
.office-team-create-form .form-note {
align-self: center;
margin: 0;
}
@media (max-width: 800px) {
.team-create-form,
.office-team-create-form {
grid-template-columns: 1fr;
}
.team-create-form button,
.office-team-create-form button {
width: 100%;
}
}
/* TEAM LIFECYCLE / PRIVACY / PRINT */
.team-list-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.team-search{width:240px;max-width:100%;height:40px;border:1px solid #d9e6ef;border-radius:12px;padding:0 13px;background:#f8fbfd;color:#36506f;font:inherit}.team-search:focus{outline:0;border-color:#31cbe2;box-shadow:0 0 0 3px rgba(49,203,226,.1)}.team-privacy{min-height:150px;border:1px dashed #cbd9e5;border-radius:18px;background:#f8fbfd;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:#6f829d}.team-privacy strong{color:#244667;font-size:18px}.team-privacy span{max-width:560px;line-height:1.5}@media print{body{background:#fff!important}.admin-dashboard__account,.admin-dashboard__logout,.admin-dashboard__report,#logout{display:none!important}.admin-dashboard{max-width:none!important;padding:0!important}.admin-panel,.team-risk-panel{box-shadow:none!important;break-inside:avoid}.team-risk-svg{max-height:280px}}
/* ===== HR OPERATIONS PATCH V3 ===== */
.team-list-tools--expanded{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;margin:14px 0 20px}.team-list-tools--expanded .team-search{flex:1 1 260px;min-width:220px}.team-filter{height:44px;padding:0 36px 0 14px;border:1px solid #d8e5ee;border-radius:12px;background:#fff;color:#49617f;font:inherit;font-size:13px;outline:none}.team-filter:focus{border-color:#31cbe2;box-shadow:0 0 0 3px rgba(49,203,226,.1)}.team-card-meta{display:flex;gap:20px;flex-wrap:wrap;margin:-4px 0 16px;color:#7c90ad;font-size:12px}.team-card-meta strong{color:#425b7c;font-weight:600}.team-export-actions{flex-wrap:wrap}.team-export-actions a{text-decoration:none}.team-history-panel{margin-bottom:18px}.team-history-list{display:grid;gap:10px}.team-history-item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border:1px solid #e2ebf2;border-radius:14px;background:#f9fbfd}.team-history-item.is-current{border-color:#bcecf2;background:#f3fcfd}.team-history-item>div{display:flex;align-items:center;gap:14px}.team-history-item strong{color:#153766}.team-history-item span,.team-history-item em{color:#8296b1;font-size:12px;font-style:normal}.team-history-item b{color:#163a70;font-size:16px}@media(max-width:720px){.team-list-tools--expanded{align-items:stretch}.team-list-tools--expanded>*{width:100%}.team-history-item,.team-history-item>div{align-items:flex-start;flex-direction:column;gap:5px}}
@media print{body{background:#fff!important}.admin-dashboard__account,.team-create-panel,.team-office-card__actions,.team-office-link,#teamsView,#dashboardView{display:none!important}.admin-dashboard{max-width:none!important;margin:0!important;padding:0!important}.admin-panel,.admin-card{box-shadow:none!important;break-inside:avoid}.team-risk-chart{min-height:260px}.team-history-panel{display:block!important}a[href]:after{content:none!important}}
/* ===== CHECKUP HISTORY VISUAL FIX ===== */
.team-history,
.checkup-history {
margin-top: 28px;
}
.team-history__head,
.checkup-history__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.team-history__title,
.checkup-history__title {
margin: 0;
font-size: 24px;
line-height: 1.2;
font-weight: 700;
color: #173a6b;
}
.team-history__count,
.checkup-history__count {
font-size: 13px;
color: #8ca0bd;
white-space: nowrap;
}
.team-history__list,
.checkup-history__list {
display: grid;
gap: 12px;
}
.team-history__item,
.checkup-history__item {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
align-items: center;
gap: 18px;
min-height: 72px;
padding: 16px 18px;
border: 1px solid #dce7f0;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 6px 20px rgba(40, 70, 110, 0.04);
}
.team-history__item.is-current,
.checkup-history__item.is-current,
.team-history__item.current,
.checkup-history__item.current {
border-color: #7bd8e8;
background: #f4fcfe;
box-shadow: 0 6px 22px rgba(46, 194, 216, 0.08);
}
.team-history__main,
.checkup-history__main {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.team-history__name,
.checkup-history__name {
font-size: 17px;
line-height: 1.2;
font-weight: 700;
color: #173a6b;
white-space: nowrap;
}
.team-history__date,
.checkup-history__date {
font-size: 13px;
color: #8ca0bd;
white-space: nowrap;
}
.team-history__meta,
.checkup-history__meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
white-space: nowrap;
}
.team-history__results,
.checkup-history__results {
font-size: 13px;
color: #7f93ae;
}
.team-history__risk,
.checkup-history__risk {
min-width: 46px;
text-align: right;
font-size: 18px;
font-weight: 700;
color: #173a6b;
}
.team-history__status,
.checkup-history__status {
min-width: 78px;
padding: 6px 10px;
border-radius: 999px;
text-align: center;
background: #eef8f4;
color: #23946f;
font-size: 12px;
font-weight: 600;
}
.team-history__item.is-current .team-history__name::after,
.checkup-history__item.is-current .checkup-history__name::after,
.team-history__item.current .team-history__name::after,
.checkup-history__item.current .checkup-history__name::after {
content: "Текущий";
display: inline-flex;
margin-left: 8px;
padding: 3px 8px;
border-radius: 999px;
background: #def7fb;
color: #1594aa;
font-size: 10px;
font-weight: 700;
vertical-align: middle;
}
@media (max-width: 760px) {
.team-history__item,
.checkup-history__item {
grid-template-columns: 1fr;
align-items: flex-start;
}
.team-history__main,
.checkup-history__main {
flex-wrap: wrap;
}
.team-history__meta,
.checkup-history__meta {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
.team-history__risk,
.checkup-history__risk {
text-align: left;
}
}
/* ===== CHECKUP HISTORY EXACT FIX ===== */
.team-history-panel {
margin: 24px 0 22px;
padding: 24px 26px;
border: 1px solid #dfeaf1;
border-radius: 22px;
background: #ffffff;
box-shadow: 0 10px 28px rgba(39, 72, 110, 0.05);
}
.team-history-panel .admin-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.team-history-panel .admin-panel__title {
margin: 0;
font-size: 23px;
line-height: 1.2;
font-weight: 700;
color: #173a6b;
}
.team-history-panel .admin-panel__hint {
font-size: 13px;
color: #8ea1ba;
white-space: nowrap;
}
.team-history-list {
display: grid;
gap: 12px;
}
.team-history-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 20px;
min-height: 72px;
padding: 16px 18px;
border: 1px solid #dfe8f0;
border-radius: 16px;
background: #f9fbfd;
box-shadow: 0 3px 12px rgba(40, 70, 105, 0.025);
transition:
border-color .18s ease,
background .18s ease,
box-shadow .18s ease;
}
.team-history-item:hover {
border-color: #cbdde9;
background: #ffffff;
box-shadow: 0 7px 18px rgba(40, 70, 105, 0.05);
}
.team-history-item.is-current {
border-color: #7dd9e6;
background: #f3fcfd;
box-shadow: 0 7px 20px rgba(42, 194, 213, 0.08);
}
.team-history-item > div:first-child {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.team-history-item > div:first-child strong {
display: inline-flex;
align-items: center;
gap: 7px;
color: #173a6b;
font-size: 17px;
line-height: 1.2;
font-weight: 700;
white-space: nowrap;
}
.team-history-item.is-current > div:first-child strong::after {
content: "Текущий";
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
background: #def7fb;
color: #1596aa;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.team-history-item > div:first-child span {
color: #8b9db5;
font-size: 13px;
white-space: nowrap;
}
.team-history-item > div:last-child {
display: grid;
grid-template-columns: minmax(90px, auto) 55px 105px;
align-items: center;
gap: 16px;
}
.team-history-item > div:last-child span {
color: #8093ad;
font-size: 13px;
text-align: right;
white-space: nowrap;
}
.team-history-item > div:last-child b {
color: #173a6b;
font-size: 18px;
font-weight: 700;
text-align: right;
}
.team-history-item > div:last-child em {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 11px;
border-radius: 999px;
background: #eef8f4;
color: #248d6a;
font-size: 12px;
font-weight: 600;
font-style: normal;
white-space: nowrap;
}
@media (max-width: 760px) {
.team-history-panel {
padding: 20px 18px;
border-radius: 18px;
}
.team-history-item {
grid-template-columns: 1fr;
align-items: flex-start;
}
.team-history-item > div:first-child {
flex-wrap: wrap;
}
.team-history-item > div:last-child {
width: 100%;
grid-template-columns: 1fr auto;
gap: 8px 14px;
}
.team-history-item > div:last-child span {
text-align: left;
}
.team-history-item > div:last-child em {
grid-column: 1 / -1;
justify-self: start;
}
}
/* BEUP stability/mobile hardening */
@media (max-width: 760px) {
.team-export-actions { width:100%; align-items:stretch; }
.team-export-actions > * { flex:1 1 100%; width:100%; justify-content:center; text-align:center; }
.team-list-tools--expanded { display:grid; grid-template-columns:1fr; }
.team-list-tools--expanded > * { width:100%; min-width:0; }
.team-office-card__actions { display:grid; grid-template-columns:1fr; }
.team-office-card__actions > * { width:100%; }
.team-history-panel { overflow:hidden; }
.team-history-item { min-width:0; }
.team-risk-panel, .team-analytics-grid > .admin-panel, .team-states { min-width:0; }
.team-risk-chart { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
/* HR INTERVIEW UPLOAD V1 */
.interview-modal-backdrop{position:fixed;inset:0;z-index:10000;background:rgba(18,40,67,.44);display:flex;align-items:center;justify-content:center;padding:20px}.interview-modal{width:min(720px,100%);max-height:88vh;overflow:auto;background:#fff;border:1px solid #dce8ef;border-radius:24px;box-shadow:0 28px 80px rgba(24,54,90,.22);padding:26px}.interview-modal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.interview-modal__head h2{margin:0;color:#173a6b;font-size:24px}.interview-modal__head p{margin:7px 0 0;color:#7b8fa9;line-height:1.45;font-size:13px}.interview-modal__close{border:0;background:#f3f7fa;color:#526b89;width:38px;height:38px;border-radius:12px;cursor:pointer;font-size:20px}.interview-drop{display:block;border:1px dashed #bcd8e5;border-radius:18px;background:#f8fcfd;padding:22px;text-align:center;color:#52708f;cursor:pointer}.interview-drop input{display:block;width:100%;margin-top:12px}.interview-help{margin:10px 0 0;color:#91a2b7;font-size:12px}.interview-modal__actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.interview-upload-btn{min-height:44px;border:0;border-radius:13px;background:#604fd0;color:#fff;padding:0 18px;font-weight:700;cursor:pointer}.interview-jobs{display:grid;gap:9px;margin-top:14px}.interview-job{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e2ebf1;border-radius:14px;background:#fbfdfe}.interview-job strong{color:#244665;font-size:13px}.interview-job span{color:#8397b1;font-size:12px}.interview-job em{font-style:normal;font-size:11px;font-weight:700;border-radius:999px;padding:5px 8px;background:#edf3f7;color:#627994}.interview-job--done em{background:#eaf8f1;color:#27865d}.interview-job--error em,.interview-job--needs_review em{background:#fff0f1;color:#b85762}.team-office-card__actions [data-team-interviews]{background:#f2efff;color:#604fd0;border-color:#ded7ff}@media(max-width:640px){.interview-modal-backdrop{padding:10px}.interview-modal{padding:18px;border-radius:18px}.interview-job{grid-template-columns:1fr}.interview-modal__actions>*{width:100%}}
/* HR INTERVIEW SUBJECTS V2 */
.interview-subject-create{margin-bottom:24px}.interview-subject-create .team-create-form{grid-template-columns:minmax(0,1fr) 220px}.interview-subject-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 20px}.interview-subject-tools .team-search{flex:1 1 280px}.interview-alpha{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 18px}.interview-alpha button{border:1px solid #dbe7ef;background:#fff;color:#627793;border-radius:9px;min-width:31px;height:31px;padding:0 8px;cursor:pointer}.interview-alpha button.active,.interview-alpha button:hover{border-color:#31cbe2;color:#1593a8;background:#effbfd}.interview-subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.interview-subject-card{border:1px solid #dfe9f1;border-radius:22px;background:#fff;padding:22px;box-shadow:0 8px 24px rgba(38,67,103,.05)}.interview-subject-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.interview-subject-card h3{margin:0;color:#173a6b;font-size:20px}.interview-subject-card__meta{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0;color:#8295af;font-size:12px}.interview-subject-card__meta strong{color:#405a7a}.interview-subject-risk{min-width:82px;text-align:center;border-radius:14px;padding:9px 11px;background:#eef8f4;color:#258b69}.interview-subject-risk.yellow{background:#fff5dc;color:#9a6b1f}.interview-subject-risk.red{background:#ffedef;color:#b74f59}.interview-subject-risk strong{display:block;font-size:20px}.interview-subject-card__actions{display:flex;gap:10px;flex-wrap:wrap}.interview-subject-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.interview-subject-upload{margin:20px 0}.interview-subject-upload .interview-drop{margin:0}.interview-subject-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}.interview-history-panel{position:sticky;top:18px}.interview-history-list{display:grid;gap:8px;max-height:610px;overflow:auto}.interview-history-button{width:100%;text-align:left;border:1px solid #e0e9f1;background:#f9fbfd;border-radius:14px;padding:13px 14px;cursor:pointer;color:#415b7b}.interview-history-button.active{border-color:#75d7e5;background:#f1fcfd}.interview-history-button strong{display:block;color:#173a6b;font-size:14px}.interview-history-button span{display:flex;justify-content:space-between;gap:8px;margin-top:5px;color:#889ab2;font-size:11px}.interview-result-panel{min-width:0}.interview-result-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.interview-result-nav__buttons{display:flex;gap:8px}.interview-result-risk{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;border-radius:18px;background:#f7fbfd;margin-bottom:18px}.interview-result-risk strong{font-size:34px;color:#173a6b}.interview-score-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:18px 0}.interview-score{padding:13px;border-radius:14px;background:#f7fbfd;text-align:center}.interview-score span{display:block;color:#8598b0;font-size:11px;margin-bottom:5px}.interview-score strong{font-size:22px;color:#173a6b}.interview-result-copy{padding:18px;border-radius:16px;background:#f9fbfd;margin-top:14px}.interview-result-copy h3{margin:0 0 9px;color:#173a6b;font-size:15px}.interview-result-copy p,.interview-result-copy li{color:#536a88;line-height:1.55}.interview-confidence{display:flex;gap:12px;flex-wrap:wrap;color:#748aa7;font-size:12px;margin-top:14px}.interview-dynamics{margin-bottom:18px}.interview-dynamics svg{width:100%;height:210px;display:block}.interview-dynamics-grid{stroke:#e7eef3;stroke-width:1}.interview-dynamics-line{fill:none;stroke:#31bfd5;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}.interview-dynamics-dot{fill:#fff;stroke:#31bfd5;stroke-width:3}.interview-upload-status{margin-top:12px}.interview-pending-note{padding:20px;border:1px dashed #cfdee8;border-radius:16px;color:#7389a5;background:#f8fbfd;text-align:center}
@media(max-width:980px){.interview-subject-grid{grid-template-columns:1fr}.interview-subject-layout{grid-template-columns:1fr}.interview-history-panel{position:static}.interview-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.interview-subject-create .team-create-form{grid-template-columns:1fr}.interview-subject-detail-head{flex-direction:column}.interview-score-grid{grid-template-columns:1fr}.interview-result-nav{align-items:flex-start;flex-direction:column}.interview-subject-card__top{flex-direction:column}.interview-subject-risk{width:100%}}
/* HR INTERVIEW UI ROUTE FIX V2.1 */
.interview-subject-page {
width: min(1240px, calc(100% - 48px));
max-width: none !important;
margin: 0 auto;
padding: 34px 0 60px;
}
.interview-subject-page .admin-dashboard__top {
align-items: flex-start;
margin-bottom: 26px;
}
.interview-subject-page .admin-dashboard__title {
font-size: 34px;
line-height: 1.1;
letter-spacing: -0.02em;
}
.interview-subject-page .admin-dashboard__subtitle {
max-width: 720px;
margin-top: 8px;
font-size: 15px;
line-height: 1.55;
}
.interview-subject-page .admin-dashboard__account {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 9px;
}
.interview-subject-page .admin-dashboard__account button,
.interview-subject-page .admin-dashboard__account a {
min-height: 40px;
padding: 0 14px;
border-radius: 10px;
}
.interview-subject-upload,
.interview-dynamics,
.interview-history-panel,
.interview-result-panel {
padding: 24px 26px;
border: 1px solid #dfe9f0;
border-radius: 22px;
background: #fff;
box-shadow: 0 10px 28px rgba(37, 70, 106, .055);
}
.interview-subject-upload {
margin: 0 0 22px;
}
.interview-subject-upload .admin-panel__header,
.interview-dynamics .admin-panel__header,
.interview-history-panel .admin-panel__header {
margin-bottom: 18px;
}
.interview-subject-upload .admin-panel__title,
.interview-dynamics .admin-panel__title,
.interview-history-panel .admin-panel__title {
font-size: 20px;
}
.interview-subject-upload .interview-drop {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 132px;
width: 100%;
padding: 24px;
border: 1.5px dashed #bcd5e1;
border-radius: 18px;
background: #f8fcfd;
color: #536d8c;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.interview-subject-upload .interview-drop:hover {
border-color: #31c4d8;
background: #f1fbfd;
box-shadow: 0 0 0 4px rgba(49,196,216,.08);
}
.interview-subject-upload .interview-drop::before {
content: "＋";
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-right: 12px;
border-radius: 12px;
background: #e8f8fb;
color: #23a9bd;
font-size: 24px;
line-height: 1;
}
.interview-subject-upload .interview-drop input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.interview-subject-upload .interview-help {
margin: 10px 0 16px;
color: #8a9db4;
font-size: 12px;
line-height: 1.45;
}
.interview-subject-upload .interview-upload-btn {
min-height: 44px;
padding: 0 20px;
border: 0;
border-radius: 12px;
background: #604fd0;
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 7px 18px rgba(96,79,208,.18);
}
.interview-subject-upload .interview-upload-btn:hover {
filter: brightness(.98);
transform: translateY(-1px);
}
.interview-dynamics {
margin-bottom: 22px;
}
.interview-dynamics svg {
height: 250px;
margin-top: 4px;
}
.interview-pending-note {
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
border: 1px dashed #ccdde7;
border-radius: 16px;
background: #f8fbfd;
color: #7d91aa;
line-height: 1.5;
}
.interview-subject-layout {
display: grid;
grid-template-columns: 330px minmax(0, 1fr);
gap: 22px;
align-items: start;
}
.interview-history-panel {
position: sticky;
top: 20px;
}
.interview-history-list {
display: grid;
gap: 9px;
max-height: 650px;
overflow: auto;
padding-right: 3px;
}
.interview-history-button {
width: 100%;
padding: 14px 15px;
border: 1px solid #dde8ef;
border-radius: 14px;
background: #f9fbfd;
color: #435e7e;
text-align: left;
cursor: pointer;
}
.interview-history-button:hover {
border-color: #c3dce6;
background: #fff;
}
.interview-history-button.active {
border-color: #65d0df;
background: #f1fcfd;
box-shadow: 0 5px 15px rgba(49,190,211,.08);
}
.interview-history-button strong {
display: block;
margin-bottom: 6px;
color: #173a6b;
font-size: 14px;
}
.interview-history-button span {
display: flex;
flex-direction: column;
gap: 3px;
color: #8799b0;
font-size: 11px;
}
.interview-result-panel {
min-height: 220px;
}
.interview-result-nav {
padding-bottom: 17px;
border-bottom: 1px solid #edf2f5;
}
.interview-result-risk {
padding: 20px 22px;
background: linear-gradient(135deg,#f6fbfd,#f8f7ff);
}
.interview-score-grid {
gap: 12px;
}
.interview-score {
min-height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid #e8eff4;
background: #f8fbfd;
}
.interview-score strong {
font-size: 26px;
}
.interview-confidence {
padding: 13px 15px;
border-radius: 13px;
background: #f7fafc;
}
.interview-result-copy {
border: 1px solid #e9eff4;
background: #fafcfd;
}
.interview-subject-create,
.interview-subject-page .companies-list {
border-radius: 22px;
}
.interview-subject-grid {
gap: 20px;
}
.interview-subject-card {
padding: 24px;
border-radius: 20px;
}
@media (max-width: 980px) {
.interview-subject-page {
width: min(100% - 28px, 900px);
padding-top: 24px;
}
.interview-subject-layout {
grid-template-columns: 1fr;
}
.interview-history-panel {
position: static;
}
.interview-history-list {
max-height: none;
}
.interview-score-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (max-width: 620px) {
.interview-subject-page {
width: calc(100% - 20px);
padding-top: 18px;
}
.interview-subject-page .admin-dashboard__top {
flex-direction: column;
}
.interview-subject-page .admin-dashboard__account {
width: 100%;
justify-content: flex-start;
}
.interview-subject-page .admin-dashboard__title {
font-size: 27px;
}
.interview-subject-upload,
.interview-dynamics,
.interview-history-panel,
.interview-result-panel {
padding: 18px;
border-radius: 18px;
}
.interview-score-grid {
grid-template-columns: 1fr;
}
}
/* HR INTERVIEW UPLOAD UX V2.2 */
.interview-selected-files{margin:12px 0 4px;padding:14px 16px;border:1px solid #e2ebf1;border-radius:14px;background:#f9fbfd}
.interview-selected-empty{color:#91a2b8;font-size:13px}
.interview-selected-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:9px}
.interview-selected-head strong{color:#21466f;font-size:13px}
.interview-selected-head>span{color:#8a9cb3;font-size:12px}
.interview-selected-list{display:grid;gap:6px}
.interview-selected-list>div{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:7px 9px;border-radius:9px;background:#fff}
.interview-selected-list>div>span{min-width:0;overflow:hidden;color:#47617f;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.interview-selected-list small,.interview-selected-list em{flex:0 0 auto;color:#93a3b7;font-size:11px;font-style:normal}
.interview-upload-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.interview-upload-status:not(:empty){margin-top:16px}
.interview-processing{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px 16px;align-items:center;padding:17px 18px;border:1px solid #dbeaf0;border-radius:16px;background:linear-gradient(135deg,#f5fcfd,#f8f7ff)}
.interview-spinner{width:38px;height:38px;border:4px solid #dceff3;border-top-color:#30bfd5;border-right-color:#6757d5;border-radius:50%;animation:beupInterviewSpin .85s linear infinite}
@keyframes beupInterviewSpin{to{transform:rotate(360deg)}}
.interview-processing__copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.interview-processing__copy strong{color:#173a6b;font-size:14px}
.interview-processing__copy span{color:#627b98;font-size:12px;line-height:1.4}
.interview-processing__copy small{margin-top:2px;color:#96a5b8;font-size:10px}
.interview-processing__steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.interview-processing__steps i{height:5px;overflow:hidden;border-radius:999px;background:#dfe8ef}
.interview-processing__steps i.active{background:linear-gradient(90deg,#31c4da,#6857d6)}
@media(max-width:620px){
.interview-selected-head,.interview-selected-list>div{align-items:flex-start;flex-direction:column;gap:4px}
.interview-processing{grid-template-columns:36px minmax(0,1fr);padding:14px}
.interview-spinner{width:32px;height:32px}
}
/* HR INTERVIEW DRAG & DROP V1 */
.interview-drop.is-dragover {
border-color: #31c4d8;
background: #eefbfd;
box-shadow:
0 0 0 4px rgba(49,196,216,.10),
inset 0 0 0 1px rgba(49,196,216,.12);
}
.interview-drop.is-dragover::after {
content: "Отпустите файл для загрузки";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
background: rgba(245,252,253,.94);
color: #219eb3;
font-size: 15px;
font-weight: 700;
pointer-events: none;
}
/* ===== HR GUIDED TEAM CHECKUP V1 ===== */
.team-guided-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.team-guided-actions .admin-dashboard__report,.team-guided-actions .admin-dashboard__logout{flex:1 1 190px}
/* ===== CUSTOMER FEEDBACK UX V1 ===== */
.team-link-mode{margin-top:14px;padding:14px;border:1px solid #dfeaf1;border-radius:14px;background:#fbfdfe}
.team-link-mode--guided{background:#f4fbfd;border-color:#cfeef3}
.team-link-mode__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.team-link-mode__head strong{color:#24496d;font-size:13px}.team-link-mode__head span{color:#8397ae;font-size:11px;text-align:right}
.team-guided-open{width:100%;margin-top:9px;justify-content:center}
.admin-dashboard__account{align-items:stretch}.admin-dashboard__account>button,.admin-dashboard__account>a{min-width:132px;justify-content:center;text-align:center}
@media(max-width:760px){.team-link-mode__head{flex-direction:column;gap:4px}.team-link-mode__head span{text-align:left}.admin-dashboard__account{display:grid!important;grid-template-columns:1fr 1fr;width:100%}.admin-dashboard__account>*{width:100%!important;min-width:0!important}}
/* ===== NAV WIDTH FIX V2 ===== */
/* Делаем кабинет шире, чтобы навигация помещалась нормально */
.admin-dashboard {
width: min(1480px, calc(100vw - 32px)) !important;
max-width: 1480px !important;
}
/* Верхний блок не ограничивает навигацию */
.admin-dashboard__top {
width: 100% !important;
gap: 24px !important;
}
/* Навигация всегда одной строкой */
.admin-dashboard__account,
.team-export-actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
width: auto !important;
max-width: none !important;
overflow: visible !important;
}
/* Все кнопки одинаково ведут себя */
.admin-dashboard__account > *,
.team-export-actions > * {
flex: 0 0 auto !important;
width: auto !important;
min-width: 118px !important;
white-space: nowrap !important;
}
/* Карточка команды: действия одной строкой */
.team-office-card__actions {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
overflow: visible !important;
}
.team-office-card__actions > button {
width: 100% !important;
min-width: 0 !important;
white-space: nowrap !important;
}
/* Единый hover */
.admin-dashboard__report,
.admin-dashboard__logout,
.team-office-card__actions button {
transition:
background-color .18s ease,
border-color .18s ease,
color .18s ease,
box-shadow .18s ease,
transform .18s ease !important;
}
.admin-dashboard__report--secondary:hover,
.admin-dashboard__logout:hover,
.team-office-card__actions .admin-dashboard__logout:hover {
background: #7657e8 !important;
border-color: #7657e8 !important;
color: #fff !important;
box-shadow: 0 5px 14px rgba(118,87,232,.18);
transform: translateY(-1px);
}
.admin-dashboard__report:not(.admin-dashboard__report--secondary):hover {
background: #6848dc !important;
border-color: #6848dc !important;
color: #fff !important;
box-shadow: 0 5px 14px rgba(104,72,220,.22);
transform: translateY(-1px);
}
/* На обычном desktop ничего не переносим */
@media (min-width: 900px) {
.admin-dashboard__top {
flex-wrap: nowrap !important;
}
}
/* Только на реально маленьком мобильном можно переносить */
@media (max-width: 899px) {
.admin-dashboard__top {
flex-wrap: wrap !important;
}
.admin-dashboard__account,
.team-export-actions {
flex-wrap: wrap !important;
justify-content: flex-start !important;
}
.team-office-card__actions {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* ===== GUIDED ADMISSION FIX V1 ===== */
.guided-disabled-wrap{
position:relative;
display:block;
width:100%;
}
.team-guided-open--disabled,
.team-guided-open--disabled:hover{
opacity:.55 !important;
cursor:not-allowed !important;
transform:none !important;
box-shadow:none !important;
background:#eef2f5 !important;
border-color:#d9e2e7 !important;
color:#8795a5 !important;
}
/*
* Disabled button itself may not emit pointer events consistently.
* Tooltip therefore belongs to its wrapper.
*/
.guided-disabled-wrap::after{
content:attr(data-tooltip);
position:absolute;
z-index:50;
left:50%;
bottom:calc(100% + 9px);
transform:translateX(-50%) translateY(4px);
width:max-content;
max-width:280px;
padding:8px 11px;
border-radius:9px;
background:#26384a;
color:#fff;
font-size:11px;
line-height:1.35;
font-weight:500;
text-align:center;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .15s ease,
transform .15s ease,
visibility .15s ease;
}
.guided-disabled-wrap:hover::after{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
/* ===== MOBILE BUTTON TEXT FIX ===== */
@media (max-width: 760px) {
button,
.admin-dashboard__report,
.admin-dashboard__logout,
.office-copy-button,
.company-form__submit,
.company-settings__submit,
.company-password__submit,
.interview-upload-btn,
.team-office-card__actions button,
.team-office-card__actions a,
.admin-dashboard__account button,
.admin-dashboard__account a {
min-width: 0 !important;
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
line-height: 1.25 !important;
text-align: center !important;
padding-left: 12px !important;
padding-right: 12px !important;
font-size: 12px !important;
}
.admin-dashboard__account,
.team-export-actions {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.admin-dashboard__account > *,
.team-export-actions > * {
width: 100% !important;
min-width: 0 !important;
}
.team-office-card__actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.team-office-card__actions > * {
width: 100% !important;
min-width: 0 !important;
}
.office-copy-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 8px !important;
}
.office-copy-row input {
min-width: 0 !important;
width: 100% !important;
}
}
@media (max-width: 420px) {
button,
.admin-dashboard__report,
.admin-dashboard__logout,
.office-copy-button,
.company-form__submit,
.company-settings__submit,
.company-password__submit,
.interview-upload-btn,
.team-office-card__actions button,
.team-office-card__actions a {
font-size: 11px !important;
padding-left: 9px !important;
padding-right: 9px !important;
}
}
/* ===== MEETINGS PHASE 1A ===== */
.meetings-page {
padding-bottom: 48px;
}
.meetings-intro {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
gap: 22px;
margin-top: 24px;
}
.meetings-create-card,
.meetings-info-card,
.meetings-history {
min-width: 0;
}
.meetings-form-preview {
display: grid;
gap: 18px;
margin-top: 20px;
}
.meetings-form-preview input:disabled {
opacity: .72;
cursor: not-allowed;
}
.meeting-type-preview {
display: grid;
gap: 9px;
}
.meeting-type-preview > span {
color: #657c97;
font-size: 13px;
font-weight: 600;
}
.meeting-type-preview > div {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.meeting-flow {
display: grid;
gap: 13px;
margin-top: 22px;
}
.meeting-flow > div {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.meeting-flow strong {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: #edf9fb;
color: #19b8d0;
font-size: 13px;
}
.meeting-flow span {
color: #526c89;
line-height: 1.45;
}
.meetings-history {
margin-top: 22px;
}
@media (max-width: 900px) {
.meetings-intro {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.meeting-type-preview > div {
display: grid;
grid-template-columns: 1fr 1fr;
}
.meeting-type-preview button {
width: 100%;
min-width: 0 !important;
}
}
/* ===== MEETINGS PHASE 1A ===== */
.meetings-page {
padding-bottom: 48px;
}
.meetings-intro {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
gap: 22px;
margin-top: 24px;
}
.meetings-create-card,
.meetings-info-card,
.meetings-history {
min-width: 0;
}
.meetings-form-preview {
display: grid;
gap: 18px;
margin-top: 20px;
}
.meetings-form-preview input:disabled {
opacity: .72;
cursor: not-allowed;
}
.meeting-type-preview {
display: grid;
gap: 9px;
}
.meeting-type-preview > span {
color: #657c97;
font-size: 13px;
font-weight: 600;
}
.meeting-type-preview > div {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.meeting-flow {
display: grid;
gap: 13px;
margin-top: 22px;
}
.meeting-flow > div {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.meeting-flow strong {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: #edf9fb;
color: #19b8d0;
font-size: 13px;
}
.meeting-flow span {
color: #526c89;
line-height: 1.45;
}
.meetings-history {
margin-top: 22px;
}
@media (max-width: 900px) {
.meetings-intro {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.meeting-type-preview > div {
display: grid;
grid-template-columns: 1fr 1fr;
}
.meeting-type-preview button {
width: 100%;
min-width: 0 !important;
}
}
/* ===== MEETINGS UI POLISH V2 ===== */
.meetings-page .admin-dashboard__top {
align-items: flex-start;
margin-bottom: 30px;
}
.meetings-page .admin-dashboard__top > div:first-child {
min-width: 0;
max-width: 760px;
}
.meetings-page .admin-dashboard__title {
margin-bottom: 10px;
}
.meetings-page .admin-dashboard__subtitle {
max-width: 760px;
margin: 0;
line-height: 1.55;
}
.meetings-intro {
align-items: stretch;
gap: 24px;
margin-top: 0;
}
.meetings-create-card,
.meetings-info-card,
.meetings-history {
overflow: hidden;
}
.meetings-create-card,
.meetings-info-card {
padding: 28px;
}
.meetings-page .admin-panel__header {
width: 100%;
min-width: 0;
align-items: flex-start;
gap: 18px;
}
.meetings-page .admin-panel__header > div {
min-width: 0;
flex: 1 1 auto;
}
.meetings-page .admin-panel__title {
line-height: 1.2;
}
.meetings-badge,
.meetings-history-count {
flex: 0 0 auto;
white-space: nowrap;
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 5px 10px;
border-radius: 999px;
background: #f3f7fb;
color: #7890ad;
font-size: 11px;
font-weight: 600;
}
.meetings-form-preview {
gap: 20px;
margin-top: 26px;
}
.meetings-form-preview .company-form__field {
margin: 0;
}
.meetings-form-preview .company-form__field label {
display: block;
margin-bottom: 8px;
}
.meetings-form-preview input {
width: 100%;
box-sizing: border-box;
}
.meeting-type-preview {
gap: 10px;
}
.meeting-type-preview > div {
gap: 10px;
}
.meeting-type-preview button {
min-width: 76px;
}
.meetings-connect-button {
width: 100%;
min-height: 48px;
margin-top: 2px;
}
.meetings-connect-button:disabled {
opacity: .58;
cursor: not-allowed;
filter: saturate(.72);
}
.meetings-provider-note {
margin: -8px 0 0;
color: #8da0b8;
font-size: 12px;
line-height: 1.45;
}
.meetings-info-card {
display: flex;
flex-direction: column;
}
.meeting-flow {
flex: 1 1 auto;
gap: 16px;
margin-top: 26px;
}
.meeting-flow > div {
min-height: 38px;
}
.meeting-flow strong {
width: 36px;
height: 36px;
flex-basis: 36px;
}
.meeting-flow span {
min-width: 0;
}
.meetings-history {
margin-top: 24px;
padding: 28px;
}
.meetings-history .team-empty {
min-height: 130px;
margin-top: 20px;
padding: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #d6e2ec;
border-radius: 16px;
background: #fbfdfe;
text-align: center;
line-height: 1.5;
}
@media (max-width: 1100px) {
.meetings-intro {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.meetings-page .admin-dashboard__top {
gap: 22px;
}
.meetings-create-card,
.meetings-info-card,
.meetings-history {
padding: 22px;
}
.meetings-page .admin-panel__header {
flex-wrap: wrap;
}
.meetings-badge,
.meetings-history-count {
max-width: 100%;
}
}
@media (max-width: 520px) {
.meeting-type-preview > div {
grid-template-columns: 1fr 1fr;
}
.meetings-create-card,
.meetings-info-card,
.meetings-history {
padding: 18px;
}
.meetings-history .team-empty {
min-height: 100px;
padding: 22px 16px;
}
}
/* ===== MEETINGS FUNCTIONAL UI V1 ===== */
.meetings-form-preview textarea {
width: 100%;
box-sizing: border-box;
min-height: 104px;
resize: vertical;
border: 1px solid #d9e6ef;
border-radius: 12px;
padding: 12px 14px;
background: #f8fbfd;
color: #36506f;
font: inherit;
line-height: 1.45;
}
.meetings-form-preview textarea:focus {
outline: 0;
border-color: #31cbe2;
box-shadow: 0 0 0 3px rgba(49,203,226,.1);
}
.meeting-type-selector {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.meeting-type-option {
position: relative;
display: inline-flex;
cursor: pointer;
}
.meeting-type-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.meeting-type-option span {
min-width: 78px;
height: 40px;
padding: 0 15px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d6e2ec;
border-radius: 11px;
background: #fff;
color: #6254d8;
font-size: 13px;
transition: .15s ease;
}
.meeting-type-option input:checked + span {
border-color: #6254d8;
background: #6254d8;
color: #fff;
box-shadow: 0 4px 12px rgba(98,84,216,.14);
}
.meeting-history-list {
display: grid;
gap: 14px;
margin-top: 20px;
}
.meeting-history-card {
border: 1px solid #e0e9f0;
border-radius: 16px;
padding: 20px;
background: #fff;
}
.meeting-history-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.meeting-history-card__top > div {
min-width: 0;
}
.meeting-history-card h3 {
margin: 8px 0 0;
color: #173b60;
font-size: 18px;
font-weight: 600;
}
.meeting-history-card__meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.meeting-history-card__meta span {
padding: 4px 8px;
border-radius: 999px;
background: #f4f8fb;
color: #8295ad;
font-size: 10px;
font-weight: 600;
}
.meeting-history-card__participants {
margin: 14px 0;
color: #647c97;
line-height: 1.45;
}
.meeting-history-card__link {
display: grid;
gap: 5px;
min-width: 0;
}
.meeting-history-card__link > span {
color: #98a8bb;
font-size: 10px;
text-transform: uppercase;
letter-spacing: .05em;
}
.meeting-history-card__link a {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #23aeca;
text-decoration: none;
}
.meeting-history-card__link a:hover {
text-decoration: underline;
}
.meeting-status {
flex: 0 0 auto;
white-space: nowrap;
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 5px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
.meeting-status--draft {
background: #f1f4f8;
color: #71849c;
}
.meeting-status--ready {
background: #eaf8fb;
color: #159eb6;
}
.meeting-status--joining,
.meeting-status--processing {
background: #fff8e7;
color: #bd8420;
}
.meeting-status--in_progress {
background: #eef0ff;
color: #6254d8;
}
.meeting-status--done {
background: #eaf9f1;
color: #268c5d;
}
.meeting-status--error,
.meeting-status--cancelled {
background: #fff0f0;
color: #c95757;
}
@media (max-width: 620px) {
.meeting-history-card__top {
flex-direction: column;
}
.meeting-status {
align-self: flex-start;
}
.meeting-type-selector {
display: grid;
grid-template-columns: 1fr 1fr;
}
.meeting-type-option,
.meeting-type-option span {
width: 100%;
}
}
/* ===== MEETING LIFECYCLE UX V1 ===== */
.meeting-status {
gap: 7px;
}
.meeting-status__spinner {
width: 12px;
height: 12px;
flex: 0 0 12px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
opacity: .75;
animation: meeting-status-spin .8s linear infinite;
}
.meeting-status__live {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: currentColor;
animation: meeting-status-live 1.2s ease-in-out infinite;
}
.meeting-status__done {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
font-style: normal;
font-size: 11px;
font-weight: 800;
}
.meeting-history-card__actions {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #edf2f6;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.meeting-history-card__actions span {
color: #91a1b4;
font-size: 11px;
}
.meeting-stop-button {
min-height: 36px;
padding: 0 13px;
border: 1px solid #d9e4ec;
border-radius: 10px;
background: #fff;
color: #6f8095;
font: inherit;
font-size: 12px;
cursor: pointer;
}
.meeting-stop-button:hover {
border-color: #c9d7e2;
background: #f8fafc;
}
.meeting-stop-button:disabled {
opacity: .55;
cursor: wait;
}
@keyframes meeting-status-spin {
to { transform: rotate(360deg); }
}
@keyframes meeting-status-live {
0%,100% {
opacity: .35;
transform: scale(.85);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
@media (prefers-reduced-motion: reduce) {
.meeting-status__spinner,
.meeting-status__live {
animation: none;
}
}
/* ===== MEETING RESULT UI V1 ===== */
.meeting-result-card-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:16px;
padding-top:15px;
border-top:1px solid #edf2f6;
}
.meeting-result-open{
min-height:40px;
}
.meeting-result-page{
padding-bottom:50px;
}
.meeting-result-summary{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,.65fr);
gap:18px;
margin-bottom:18px;
}
.meeting-result-summary__card{
min-width:0;
}
.meeting-result-people{
display:grid;
gap:10px;
margin-top:18px;
}
.meeting-result-person{
display:flex;
align-items:center;
gap:12px;
padding:12px 14px;
border:1px solid #e3ebf1;
border-radius:14px;
background:#fbfdfe;
}
.meeting-result-person__avatar{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
flex:0 0 38px;
border-radius:50%;
background:#eef9fb;
color:#1797aa;
font-size:14px;
font-weight:800;
}
.meeting-result-person strong{
display:block;
color:#254667;
font-size:14px;
}
.meeting-result-person span:not(.meeting-result-person__avatar){
display:block;
margin-top:3px;
color:#8a9bb0;
font-size:11px;
}
.meeting-result-meta{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:18px;
}
.meeting-result-meta>div{
padding:13px;
border-radius:13px;
background:#f7fafc;
}
.meeting-result-meta span{
display:block;
margin-bottom:5px;
color:#8a9bb0;
font-size:11px;
}
.meeting-result-meta strong{
color:#254667;
font-size:14px;
}
.meeting-result-transcript{
min-width:0;
}
.meeting-transcript-list{
display:grid;
gap:12px;
margin-top:18px;
}
.meeting-result-chapter{
margin-top:10px;
padding:10px 0 2px;
color:#173a6b;
font-size:13px;
font-weight:800;
}
.meeting-transcript-segment{
padding:16px 18px;
border:1px solid #e2eaf1;
border-radius:16px;
background:#fbfdfe;
}
.meeting-transcript-segment__meta{
display:flex;
align-items:center;
gap:10px;
margin-bottom:8px;
}
.meeting-transcript-segment__meta time{
display:inline-flex;
align-items:center;
min-height:25px;
padding:0 8px;
border-radius:8px;
background:#edf7fa;
color:#34899a;
font-size:11px;
font-weight:700;
font-variant-numeric:tabular-nums;
}
.meeting-transcript-segment__meta strong{
color:#254667;
font-size:13px;
}
.meeting-transcript-segment p{
margin:0;
color:#526a86;
font-size:14px;
line-height:1.65;
white-space:pre-wrap;
}
.meeting-result-empty{
padding:18px;
border:1px dashed #d8e4ec;
border-radius:14px;
background:#fafcfd;
color:#8396ad;
font-size:13px;
}
.meeting-result-empty--transcript{
text-align:center;
padding:30px 18px;
}
@media(max-width:820px){
.meeting-result-summary{
grid-template-columns:1fr;
}
.meeting-result-meta{
grid-template-columns:1fr;
}
}
@media(max-width:600px){
.meeting-transcript-segment{
padding:14px;
}
.meeting-transcript-segment__meta{
align-items:flex-start;
flex-direction:column;
gap:6px;
}
.meeting-result-card-actions>*{
width:100%;
}
}
/* ===== MEETING RESULT UI POLISH V1 ===== */
.meeting-result-page .admin-dashboard__top{
margin-bottom:24px;
}
.meeting-result-page .admin-dashboard__subtitle{
max-width:900px;
margin-top:8px;
}
.meeting-result-summary{
align-items:stretch;
gap:18px;
margin-bottom:18px;
}
.meeting-result-summary__card{
display:flex;
flex-direction:column;
padding:0;
overflow:hidden;
}
.meeting-result-summary__card .admin-panel__header{
min-height:auto;
padding:18px 20px 14px;
margin:0;
}
.meeting-result-summary__card .admin-panel__title{
margin-top:4px;
}
.meeting-result-summary__card .admin-panel__hint{
margin-left:auto;
padding-left:14px;
}
.meeting-result-people{
margin:0;
padding:0 20px 18px;
}
.meeting-result-person{
min-height:62px;
padding:11px 14px;
}
.meeting-result-meta{
flex:1;
margin:0;
padding:0 20px 18px;
align-content:start;
}
.meeting-result-meta>div{
min-height:62px;
padding:12px 14px;
}
.meeting-result-transcript{
padding:0;
overflow:hidden;
}
.meeting-result-transcript>.admin-panel__header{
min-height:auto;
margin:0;
padding:18px 20px 14px;
}
.meeting-result-transcript>.admin-panel__header .admin-panel__hint{
margin-left:auto;
padding-left:14px;
}
.meeting-transcript-list{
gap:10px;
margin:0;
padding:8px 20px 20px;
}
.meeting-result-chapter{
margin:0;
padding:7px 0 4px;
}
.meeting-transcript-segment{
padding:15px 17px;
}
.meeting-transcript-segment__meta{
margin-bottom:9px;
}
.meeting-transcript-segment p{
max-width:none;
font-size:14px;
line-height:1.55;
}
@media(max-width:820px){
.meeting-result-summary__card .admin-panel__header,
.meeting-result-transcript>.admin-panel__header{
padding:16px;
}
.meeting-result-people,
.meeting-result-meta{
padding-left:16px;
padding-right:16px;
padding-bottom:16px;
}
.meeting-transcript-list{
padding:8px 16px 16px;
}
}
@media(max-width:600px){
.meeting-result-page .admin-dashboard__top{
margin-bottom:18px;
}
.meeting-result-summary{
gap:14px;
margin-bottom:14px;
}
.meeting-transcript-segment{
padding:13px 14px;
}
}
/* ===== MEETING ANALYTICS V1 ===== */
.meeting-ai{
margin-bottom:18px;
}
.meeting-ai-hero{
display:grid;
grid-template-columns:minmax(0,1fr) 220px;
gap:24px;
align-items:center;
margin-bottom:18px;
padding:24px;
border-radius:18px;
background:#fff;
box-shadow:0 8px 28px rgba(28,73,105,.07);
}
.meeting-ai-hero h2{
margin:5px 0 8px;
color:#173a6b;
font-size:22px;
}
.meeting-ai-hero p{
max-width:820px;
margin:0;
color:#667d98;
line-height:1.55;
}
.meeting-ai-score{
padding:18px;
border-radius:16px;
text-align:center;
}
.meeting-ai-score strong{
display:block;
font-size:42px;
line-height:1;
}
.meeting-ai-score span{
display:block;
margin-top:8px;
font-weight:800;
}
.meeting-ai-score small{
display:block;
margin-top:8px;
opacity:.72;
}
.meeting-ai-hero--stable .meeting-ai-score{
background:#eaf8f1;
color:#209463;
}
.meeting-ai-hero--attention .meeting-ai-score{
background:#fff4d9;
color:#c28a17;
}
.meeting-ai-hero--critical .meeting-ai-score{
background:#fde8ed;
color:#d24c67;
}
.meeting-ai-grid{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
gap:18px;
}
.meeting-ai-factors,
.meeting-ai-actions{
padding:20px;
}
.meeting-risk-factors{
display:grid;
gap:17px;
margin-top:18px;
}
.meeting-risk-factor__head{
display:flex;
justify-content:space-between;
gap:15px;
margin-bottom:7px;
}
.meeting-risk-factor__head strong,
.meeting-risk-factor__head b{
color:#254667;
font-size:13px;
}
.meeting-risk-factor__track{
height:7px;
overflow:hidden;
border-radius:100px;
background:#edf2f5;
}
.meeting-risk-factor__fill{
display:block;
height:100%;
border-radius:inherit;
}
.meeting-risk-factor__fill--stable{
background:#3fbc82;
}
.meeting-risk-factor__fill--attention{
background:#e1a529;
}
.meeting-risk-factor__fill--critical{
background:#dd5e70;
}
.meeting-risk-factor p{
margin:7px 0 0;
color:#8595a8;
font-size:11px;
line-height:1.45;
}
.meeting-ai-recommendations{
margin:18px 0;
padding-left:21px;
color:#526a86;
}
.meeting-ai-recommendations li{
margin-bottom:10px;
padding-left:4px;
line-height:1.5;
}
.meeting-ai__intro{
margin:14px 0 18px;
color:#71869e;
}
.meeting-ai__error{
margin:14px 0;
color:#c44d62;
}
.meeting-ai__state{
display:flex;
gap:15px;
align-items:center;
padding:20px;
}
.meeting-ai__state h2{
margin:4px 0;
color:#173a6b;
}
.meeting-ai__state p{
margin:0;
color:#7b8fa5;
}
.meeting-ai-spinner{
width:30px;
height:30px;
flex:0 0 30px;
border:3px solid #dcecf0;
border-top-color:#24a8bb;
border-radius:50%;
animation:meetingAiSpin .8s linear infinite;
}
@keyframes meetingAiSpin{
to{
transform:rotate(360deg);
}
}
.meeting-ai-people{
margin-top:18px;
}
.meeting-ai-people__grid{
display:grid;
grid-template-columns:repeat(
auto-fit,
minmax(240px,1fr)
);
gap:12px;
}
.meeting-ai-person{
padding:16px;
border:1px solid #e2eaf1;
border-radius:14px;
background:#fff;
}
.meeting-ai-person>div{
display:flex;
flex-direction:column;
}
.meeting-ai-person strong{
color:#254667;
}
.meeting-ai-person span{
margin-top:3px;
color:#8496aa;
font-size:11px;
}
.meeting-ai-person>b{
display:block;
margin:12px 0 7px;
color:#173a6b;
font-size:24px;
}
.meeting-ai-person p{
margin:0;
color:#667d98;
font-size:12px;
line-height:1.5;
}
.meeting-participant-edit{
margin-left:auto;
padding:7px 10px;
border:1px solid #d8e5ec;
border-radius:9px;
background:#fff;
color:#66809b;
cursor:pointer;
font-size:11px;
}
.meeting-participant-edit:hover{
border-color:#8bd1db;
color:#168da0;
}
@media(max-width:900px){
.meeting-ai-grid{
grid-template-columns:1fr;
}
.meeting-ai-hero{
grid-template-columns:1fr;
}
.meeting-ai-score{
max-width:240px;
}
}
@media(max-width:600px){
.meeting-ai-hero{
padding:18px;
}
.meeting-ai-hero h2{
font-size:19px;
}
.meeting-ai-score{
max-width:none;
}
}
/* ===== MEETING ANALYTICS POLISH V2 ===== */
.meeting-result-page > .team-recommendation{
padding:20px 22px;
margin-bottom:18px;
}
.meeting-result-page > .team-recommendation .admin-panel__header{
margin-bottom:8px;
}
.meeting-result-page > .team-recommendation .team-recommendation__text{
max-width:900px;
margin:8px 0 16px;
}
.meeting-result-page > .team-recommendation > .admin-dashboard__report{
width:auto;
min-width:190px;
display:inline-flex;
justify-content:center;
align-items:center;
}
.meeting-result-page .team-risk-panel{
margin-bottom:18px;
}
.meeting-result-page .team-analytics-grid{
margin-bottom:18px;
}
.meeting-result-page .team-risk-subtitle{
max-width:900px;
}
@media(max-width:600px){
.meeting-result-page > .team-recommendation > .admin-dashboard__report{
width:100%;
}
}
/* ===== MEETING ANALYTICS POLISH V3 ===== */
.meeting-result-page .team-risk-panel{
padding:20px;
}
.meeting-result-page .team-risk-chart{
height:230px;
min-height:230px;
}
.meeting-result-page .team-risk-svg{
height:100%;
}
.meeting-result-page .team-analytics-grid{
align-items:stretch;
gap:18px;
}
.meeting-result-page .team-analytics-grid > .admin-panel{
min-height:0;
}
.meeting-result-page .team-signals{
margin-top:14px;
}
.meeting-result-page .team-recommendation{
display:flex;
flex-direction:column;
}
.meeting-result-page .team-recommendation
.admin-dashboard__report{
margin-top:auto;
}
.meeting-participant-risks{
margin-top:18px;
margin-bottom:18px;
}
.meeting-participant-risks
.team-history-item > div:first-child{
min-width:0;
}
.meeting-participant-risks
.team-history-item > div:first-child > span:last-child{
display:block;
max-width:900px;
margin-top:5px;
white-space:normal;
line-height:1.45;
}
@media(max-width:700px){
.meeting-result-page .team-risk-chart{
height:190px;
min-height:190px;
}
}
/* ===== MEETING ANALYTICS FINAL POLISH V4 ===== */
.meeting-result-page .team-analytics-grid{
grid-template-columns:
minmax(0,1.15fr)
minmax(360px,.85fr);
gap:18px;
align-items:stretch;
}
.meeting-result-page .team-analytics-grid > .admin-panel{
padding:20px;
border-radius:16px;
}
.meeting-result-page .team-analytics-grid
.admin-panel__header{
margin-bottom:14px;
}
.meeting-result-page .team-signals{
display:grid;
gap:16px;
margin-top:8px;
}
.meeting-result-page .team-signal{
padding-bottom:4px;
}
.meeting-result-page .team-signal__head{
align-items:flex-start;
margin-bottom:7px;
}
.meeting-result-page .team-signal__head > div{
min-width:0;
padding-right:14px;
}
.meeting-result-page .team-signal__head strong{
display:block;
margin-bottom:4px;
font-size:13px;
line-height:1.25;
}
.meeting-result-page .team-signal__head span{
display:block;
max-width:95%;
color:#8b9aad;
font-size:11px;
line-height:1.4;
}
.meeting-result-page .team-signal__head b{
flex:0 0 auto;
padding-top:1px;
font-size:13px;
}
.meeting-result-page .team-signal__track{
height:8px;
}
.meeting-result-page .team-recommendation{
min-height:100%;
padding:20px;
}
.meeting-result-page .team-recommendation
.admin-panel__header{
margin-bottom:12px;
}
.meeting-result-page .team-recommendation__text{
margin:0 0 18px;
color:#536a86;
font-size:13px;
line-height:1.6;
}
.meeting-result-page .team-dominant{
margin-top:auto;
padding:14px 16px;
border-radius:13px;
}
.meeting-result-page .team-dominant span{
display:block;
margin-bottom:5px;
font-size:10px;
letter-spacing:.08em;
text-transform:uppercase;
}
.meeting-result-page .team-dominant strong{
font-size:13px;
}
.meeting-result-page .team-method-note{
margin:12px 0 14px;
color:#93a1b4;
font-size:10px;
line-height:1.4;
}
.meeting-result-page .team-recommendation
.admin-dashboard__report{
width:100%;
min-height:40px;
margin-top:0;
}
@media(max-width:980px){
.meeting-result-page .team-analytics-grid{
grid-template-columns:1fr;
}
.meeting-result-page .team-recommendation{
min-height:auto;
}
}
@media(max-width:600px){
.meeting-result-page .team-analytics-grid > .admin-panel,
.meeting-result-page .team-recommendation{
padding:16px;
}
.meeting-result-page .team-signals{
gap:14px;
}
.meeting-result-page .team-signal__head span{
max-width:100%;
}
}
/* ===== MEETING PASSWORD FIELD V2 ===== */
.meeting-password-field{
position:relative;
}
.meeting-password-field input{
width:100%;
}
.meeting-field-hint{
display:block;
margin-top:6px;
color:#8d9caf;
font-size:11px;
line-height:1.35;
}
/* ===== MEETING ANALYTICS ONLY V5 FIXED ===== */
.meeting-analysis-loading{
display:flex;
align-items:center;
justify-content:center;
min-height:320px;
}
.meeting-participant-risks .team-history-item{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:24px;
align-items:center;
}
.meeting-participant-risks
.team-history-item > div:first-child{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:5px;
min-width:0;
}
.meeting-person-risk{
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
justify-content:center;
gap:4px !important;
min-width:170px;
text-align:right;
}
.meeting-person-risk b{
display:block;
font-size:24px !important;
line-height:1.05 !important;
white-space:nowrap;
}
.meeting-person-risk em{
display:block;
font-size:12px !important;
line-height:1.25 !important;
font-style:normal;
font-weight:600;
white-space:nowrap;
}
.meeting-person-risk--green b,
.meeting-person-risk--green em{
color:#16865b !important;
}
.meeting-person-risk--yellow b,
.meeting-person-risk--yellow em{
color:#c58a18 !important;
}
.meeting-person-risk--red b,
.meeting-person-risk--red em{
color:#d94b5b !important;
}
.meeting-result-page [data-meeting-analyze],
.meeting-result-page [data-meeting-reanalyze]{
display:none !important;
}
.meeting-result-page .team-recommendation{
justify-content:flex-start;
}
.meeting-result-page .team-method-note{
margin-top:auto;
padding-top:16px;
}
@media(max-width:700px){
.meeting-participant-risks .team-history-item{
grid-template-columns:1fr;
gap:14px;
}
.meeting-person-risk{
align-items:flex-start !important;
min-width:0;
text-align:left;
}
}
/* ===== MEETING RISK NUMBERS POLISH ===== */
.meeting-result-page .team-risk-kpi strong{
font-size:30px;
line-height:1.15;
font-weight:700;
letter-spacing:-0.02em;
font-variant-numeric:tabular-nums;
}
.meeting-person-risk b{
font-size:22px !important;
line-height:1.2 !important;
font-weight:700;
letter-spacing:-0.01em;
font-variant-numeric:tabular-nums;
}
.meeting-person-risk em{
margin-top:2px;
line-height:1.35 !important;
}
/* MEETINGS_LIST_COLLAPSE_V1 */
.meeting-history-toggle{
display:flex;
justify-content:center;
margin-top:18px;
}
.meeting-history-toggle button{
min-width:190px;
}
/* MEETINGS_LIST_COLLAPSE_V1 */
.meeting-history-toggle{
display:flex;
justify-content:center;
margin-top:18px;
}
.meeting-history-toggle button{
min-width:190px;
}
/* HR_INTERVIEW_SCORE_COLORS_V1 */
.interview-score strong{
transition:color .15s ease;
}
.interview-score.green strong{
color:#258b69 !important;
}
.interview-score.yellow strong{
color:#b7811f !important;
}
.interview-score.red strong{
color:#c4515d !important;
}
.interview-score.green{
border-color:#d9eee5;
background:#f4fbf8;
}
.interview-score.yellow{
border-color:#f1e3bd;
background:#fffaf0;
}
.interview-score.red{
border-color:#f1d4d8;
background:#fff6f7;
}
.interview-hr-recommendations{
border-left:4px solid #31bfd5;
}
.interview-hr-recommendations h3{
color:#173a6b;
}
.interview-hr-recommendations li{
margin-bottom:7px;
}
/* BEUP SPEECH MARKERS V1 */
.speech-markers {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 7px;
width: 100%;
}
.speech-markers span {
display: block;
font-size: 11px;
line-height: 1.35;
font-weight: 500;
opacity: .76;
overflow-wrap: anywhere;
}
.speech-theme-panel {
margin-top: 18px;
}
.speech-theme-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.speech-theme-list span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(44, 139, 154, .08);
border: 1px solid rgba(44, 139, 154, .16);
font-size: 12px;
line-height: 1.35;
color: inherit;
}
@media (max-width: 720px) {
.speech-markers span {
font-size: 10px;
}
.speech-theme-list {
gap: 6px;
}
}
/* ===== MEETING RISK GRAPH — unified with Teams / HR interviews ===== */
.meeting-risk-chart {
height: auto !important;
min-height: 300px !important;
max-height: none !important;
overflow: visible !important;
}
.meeting-risk-chart svg {
width: 100% !important;
height: auto !important;
min-height: 300px;
max-height: none !important;
display: block;
overflow: visible;
}
@media (max-width: 760px) {
.meeting-risk-chart {
min-height: 260px !important;
overflow-x: auto !important;
overflow-y: visible !important;
}
.meeting-risk-chart svg {
min-width: 720px;
min-height: 260px;
}
}
/* ===== HR INTERVIEW RECOMMENDATION — visual alignment ===== */
.interview-result-panel .team-recommendation {
padding: 22px 24px 20px;
border-radius: 16px;
box-sizing: border-box;
}
.interview-result-panel .team-recommendation .admin-panel__header {
margin: 0 0 16px;
padding: 0;
}
.interview-result-panel .team-recommendation .team-eyebrow {
display: block;
margin-bottom: 7px;
}
.interview-result-panel .team-recommendation .admin-panel__title {
margin: 0;
line-height: 1.25;
}
.interview-result-panel .team-recommendation__text {
margin: 0 0 20px;
max-width: 880px;
line-height: 1.55;
}
.interview-result-panel .team-dominant {
margin: 0;
padding: 15px 16px;
border-radius: 12px;
}
.interview-result-panel .team-dominant span {
display: block;
margin-bottom: 5px;
}
.interview-result-panel .team-dominant strong {
display: block;
line-height: 1.3;
}
@media (max-width: 760px) {
.interview-result-panel .team-recommendation {
padding: 18px 16px;
}
.interview-result-panel .team-recommendation__text {
margin-bottom: 16px;
}
.interview-result-panel .team-dominant {
padding: 13px 14px;
}
}
/* UNIFIED_CHECKUP_HISTORY_V1 */
.team-history-results{
grid-column:1/-1;
display:flex;
flex-direction:column;
gap:6px;
width:100%;
margin-top:8px;
padding-top:8px;
border-top:1px solid rgba(61,91,136,.10);
}
.team-history-result{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:4px 0;
font-size:13px;
color:#7086aa;
}
.team-history-result span{
font-weight:600;
color:#17345f;
}
.team-history-result time{
white-space:nowrap;
color:#8398bb;
}
/* MEETING_SUBJECTS_V1 */
.meeting-subject-create{
margin-bottom:20px;
}
.meeting-subject-grid{
display:grid;
grid-template-columns:
repeat(
auto-fill,
minmax(260px,1fr)
);
gap:14px;
}
.meeting-subject-card{
display:flex;
flex-direction:column;
gap:15px;
width:100%;
padding:18px;
border:1px solid rgba(42,75,125,.12);
border-radius:16px;
background:#fff;
text-align:left;
cursor:pointer;
}
.meeting-subject-card:hover{
border-color:rgba(42,75,125,.25);
}
.meeting-subject-card__top{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
}
.meeting-subject-card__top strong{
color:#17345f;
font-size:16px;
}
.meeting-subject-card__top span{
color:#8295b8;
font-size:12px;
}
.meeting-subject-card__meta{
display:flex;
gap:14px;
flex-wrap:wrap;
color:#8295b8;
font-size:12px;
}
.meeting-subject-card__risk{
display:flex;
align-items:baseline;
gap:10px;
}
.meeting-subject-card__risk b{
color:#17345f;
font-size:24px;
}
.meeting-subject-card__risk em{
color:#8295b8;
font-size:12px;
font-style:normal;
}
/* MEETING_SUBJECTS_STYLE_POLISH_V2 */
/* Та же общая ширина/воздух, что у HR-интервью */
.meetings-page{
width:min(100% - 48px,1180px);
margin:0 auto;
padding-top:30px;
padding-bottom:48px;
}
/* ===== Создание карточки ===== */
.meeting-subject-create{
margin:22px 0 26px;
padding:24px;
border-radius:22px;
}
.meeting-subject-create .admin-panel__header{
margin-bottom:18px;
}
/* На десктопе форма не должна превращаться
в огромную вертикальную простыню */
.meeting-subject-create .meetings-form-preview{
display:grid;
grid-template-columns:
minmax(0,1fr)
250px
220px;
gap:16px;
align-items:end;
}
.meeting-subject-create .company-form__field{
margin:0;
}
.meeting-subject-create .company-form__field label,
.meeting-subject-create .meeting-type-preview > span{
display:block;
margin-bottom:8px;
color:#506a8d;
font-size:12px;
font-weight:600;
}
.meeting-subject-create input{
width:100%;
min-height:46px;
padding:0 14px;
border:1px solid #dce7ef;
border-radius:12px;
background:#fff;
color:#173a6b;
font:inherit;
box-sizing:border-box;
}
/* ===== Переключатель 1:1 / Групповая ===== */
.meeting-subject-create .meeting-type-preview{
margin:0;
}
.meeting-subject-create .meeting-type-selector{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.meeting-subject-create .meeting-type-option{
margin:0;
}
.meeting-subject-create .meeting-type-option span{
display:flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 14px;
border:1px solid #dce7ef;
border-radius:11px;
background:#fff;
color:#5d7392;
font-size:13px;
font-weight:600;
cursor:pointer;
}
.meeting-subject-create .meeting-type-option input:checked + span{
border-color:#6552d7;
background:#6552d7;
color:#fff;
}
/* ===== Кнопка ===== */
/* Убираем огромную бирюзовую полосу */
.meeting-subject-create .company-form__submit{
width:220px;
min-height:46px;
margin:0;
padding:0 20px;
border-radius:11px;
justify-self:end;
}
/* ===== Список карточек ===== */
.meeting-subject-grid{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:20px;
}
.meeting-subject-card{
min-height:160px;
padding:24px;
border:1px solid #dfe9f1;
border-radius:20px;
background:#fff;
box-shadow:
0 8px 24px rgba(38,67,103,.05);
transition:
border-color .15s ease,
box-shadow .15s ease,
transform .15s ease;
}
.meeting-subject-card:hover{
border-color:#c9dce8;
box-shadow:
0 11px 28px rgba(38,67,103,.08);
transform:translateY(-1px);
}
.meeting-subject-card__top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}
.meeting-subject-card__top strong{
color:#173a6b;
font-size:20px;
line-height:1.25;
}
.meeting-subject-card__top span{
flex:0 0 auto;
padding:5px 9px;
border-radius:999px;
background:#f0f4f8;
color:#7185a0;
font-size:11px;
font-weight:600;
}
.meeting-subject-card__meta{
display:flex;
flex-wrap:wrap;
gap:10px 18px;
margin-top:18px;
color:#8295af;
font-size:12px;
}
/* Риск — отдельным аккуратным KPI,
как в остальных разделах */
.meeting-subject-card__risk{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:auto;
padding-top:18px;
border-top:1px solid #edf2f5;
}
.meeting-subject-card__risk b{
color:#173a6b;
font-size:24px;
line-height:1;
}
.meeting-subject-card__risk em{
padding:6px 10px;
border-radius:999px;
background:#eef8f4;
color:#258b69;
font-size:11px;
font-weight:700;
font-style:normal;
}
/* ===== Адаптив ===== */
@media(max-width:980px){
.meetings-page{
width:min(100% - 28px,900px);
padding-top:24px;
}
.meeting-subject-create .meetings-form-preview{
grid-template-columns:
minmax(0,1fr)
220px;
}
.meeting-subject-create .company-form__submit{
grid-column:1/-1;
justify-self:start;
}
}
@media(max-width:700px){
.meetings-page{
width:calc(100% - 20px);
padding-top:18px;
}
.meeting-subject-create{
padding:18px;
}
.meeting-subject-create .meetings-form-preview{
grid-template-columns:1fr;
}
.meeting-subject-create .company-form__submit{
width:100%;
grid-column:auto;
}
.meeting-subject-grid{
grid-template-columns:1fr;
gap:14px;
}
.meeting-subject-card{
min-height:0;
padding:18px;
}
}
/* MEETING_CARDS_LAYOUT_FIX_V1 */
.meeting-subject-list {
padding: 24px;
border: 1px solid #e1ebf2;
border-radius: 22px;
background: #fff;
}
.meeting-subject-list > .admin-panel__header {
margin-bottom: 22px;
padding: 0;
}
.meeting-subject-list .interview-subject-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
.meeting-subject-list .interview-subject-card {
box-sizing: border-box;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 174px;
padding: 22px;
border: 1px solid #dfe9f1;
border-radius: 18px;
background: #fff;
}
.meeting-subject-list .interview-subject-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
min-width: 0;
}
.meeting-subject-list .interview-subject-card__top > div:first-child {
flex: 1 1 auto;
min-width: 0;
}
.meeting-subject-list .interview-subject-card h3 {
margin: 0;
line-height: 1.35;
overflow-wrap: anywhere;
}
.meeting-subject-list .interview-subject-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin: 12px 0 18px;
line-height: 1.5;
}
.meeting-subject-list .interview-subject-risk {
flex: 0 0 auto;
box-sizing: border-box;
min-width: 84px;
}
.meeting-subject-list .interview-subject-risk.unknown {
background: #edf1f5;
color: #62758a;
}
.meeting-subject-list .interview-subject-card__actions {
display: flex;
align-items: center;
margin-top: auto;
padding-top: 4px;
}
.meeting-subject-list .interview-subject-card__actions button {
max-width: 100%;
min-height: 38px;
cursor: pointer;
}
@media (max-width: 980px) {
.meeting-subject-list .interview-subject-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.meeting-subject-list {
padding: 18px;
}
.meeting-subject-list .interview-subject-card {
min-height: 0;
padding: 18px;
}
.meeting-subject-list .interview-subject-card__top {
flex-direction: row;
align-items: flex-start;
}
.meeting-subject-list .interview-subject-risk {
width: auto;
min-width: 76px;
}
}
/* MEETING_SUBJECT_DETAIL_UI_V2 */
/* Main layout */
.meeting-subject-detail {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 22px;
min-width: 0;
}
.meeting-subject-detail > .admin-dashboard__top {
margin-bottom: 0;
}
.meeting-subject-detail > section.admin-panel {
box-sizing: border-box;
min-width: 0;
margin: 0;
padding: 26px 28px;
border: 1px solid #e0eaf1;
border-radius: 22px;
background: #fff;
box-shadow: 0 8px 26px rgba(38,67,103,.04);
}
.meeting-subject-detail > section.admin-panel > .admin-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin: 0 0 22px;
padding: 0;
}
.meeting-subject-detail .admin-panel__title {
line-height: 1.35;
}
.meeting-subject-detail .team-eyebrow {
display: block;
margin-bottom: 6px;
}
/* Connection form */
.meeting-subject-detail .meetings-form-preview {
display: grid;
grid-template-columns: minmax(0,1fr);
gap: 20px;
width: 100%;
min-width: 0;
margin: 0;
}
.meeting-subject-detail .meetings-form-preview .company-form__field {
display: flex;
flex-direction: column;
gap: 9px;
min-width: 0;
margin: 0;
}
.meeting-subject-detail .meetings-form-preview label {
display: block;
margin: 0;
color: #405a7a;
font-size: 13px;
font-weight: 600;
}
.meeting-subject-detail .meetings-form-preview input,
.meeting-subject-detail .meetings-form-preview textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
border: 1px solid #dce7ef;
border-radius: 12px;
background: #f9fbfd;
color: #173a6b;
font: inherit;
font-size: 14px;
outline: none;
}
.meeting-subject-detail .meetings-form-preview input {
min-height: 46px;
padding: 11px 14px;
}
.meeting-subject-detail .meetings-form-preview textarea {
min-height: 110px;
padding: 13px 14px;
line-height: 1.55;
resize: vertical;
}
.meeting-subject-detail .meetings-form-preview input:focus,
.meeting-subject-detail .meetings-form-preview textarea:focus {
border-color: #2abfd2;
box-shadow: 0 0 0 3px rgba(42,191,210,.12);
}
.meeting-subject-detail .meetings-connect-button {
box-sizing: border-box;
width: 100%;
min-height: 46px;
margin: 0;
border-radius: 12px;
font-weight: 600;
}
.meeting-subject-detail .meetings-optional {
color: #91a2b8;
font-weight: 400;
}
/* Dynamics chart */
.meeting-subject-detail > .team-risk-panel .interview-dynamics {
box-sizing: border-box;
width: 100%;
min-width: 0;
margin: 0;
padding: 16px;
overflow: hidden;
border: 1px solid #e6edf3;
border-radius: 16px;
background: #fbfdfe;
}
.meeting-subject-detail > .team-risk-panel .interview-dynamics svg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 210px;
}
.meeting-subject-detail > .team-risk-panel .team-risk-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 22px;
margin: 16px 0 0;
padding: 0;
}
.meeting-subject-detail > .team-risk-panel .team-risk-legend span {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: normal;
}
/* Meeting history */
.meeting-subject-detail .meeting-history-list {
display: grid;
grid-template-columns: minmax(0,1fr);
gap: 14px;
min-width: 0;
margin: 0;
}
.meeting-subject-detail .meeting-history-card {
box-sizing: border-box;
min-width: 0;
margin: 0;
padding: 20px;
border: 1px solid #e1eaf1;
border-radius: 16px;
background: #fbfdff;
}
.meeting-subject-detail .meeting-history-card__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
min-width: 0;
}
.meeting-subject-detail .meeting-history-card__top > div {
min-width: 0;
}
.meeting-subject-detail .meeting-history-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
min-width: 0;
}
.meeting-subject-detail .meeting-history-card__participants,
.meeting-subject-detail .meeting-history-card__link {
overflow-wrap: anywhere;
word-break: normal;
}
.meeting-subject-detail .meeting-history-card__link a {
overflow-wrap: anywhere;
}
.meeting-subject-detail .meeting-history-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 16px;
}
.meeting-subject-detail .meeting-history-card__actions button {
min-height: 38px;
padding: 9px 16px;
border-radius: 10px;
cursor: pointer;
}
/* Responsive */
@media (max-width: 760px) {
.meeting-subject-detail {
gap: 16px;
}
.meeting-subject-detail > section.admin-panel {
padding: 20px;
border-radius: 18px;
}
.meeting-subject-detail .meeting-history-card {
padding: 16px;
}
.meeting-subject-detail > .team-risk-panel .interview-dynamics {
padding: 8px;
}
}
@media (max-width: 480px) {
.meeting-subject-detail > section.admin-panel {
padding: 16px;
}
.meeting-subject-detail .meeting-history-card__top {
flex-direction: column;
align-items: stretch;
}
.meeting-subject-detail .meeting-history-card__actions button {
width: 100%;
}
.meeting-subject-detail .team-risk-legend {
gap: 10px;
}
}