@charset "UTF-8";

/* ===== Кнопка верификации — последняя вкладка в #bottom-tabs ===== */
.verification-btn .verify-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #f77979 center/70% no-repeat url('../img/verification-off.svg');
    transition: box-shadow .2s ease, background-color .2s ease;
}
.verification-btn:active .verify-ico {
    transform: scale(.95);
}
.verification-btn.verified .verify-ico {
    background-image: url('../img/verification-on.svg');
    background-color: #99f9b7;
}
.verification-btn.employ .verify-ico {
    box-shadow: 0 0 0 2px #4ade80, 0 0 8px rgba(74, 222, 128, .5);
}

/* ===== Подложка под verify-dropdown ===== */
.verify-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 900;
    cursor: pointer;
}

/* ===== Панель ввода кода — над #bottom-tabs, поверх затемнения ===== */
.verify-dropdown {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--tabs-h) + 10px);
    /* центрирование через margin, а не transform: translateX(-50%) —
       иначе анимация .verify-shake собьёт позиционирование */
    margin: 0 auto;
    width: min(92vw, var(--content-max));
    z-index: 901;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: #2c2c2f;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    align-items: center;
    flex-wrap: wrap;
}
.verify-channel {
    width: 100%;
    color: #cfd2d6;
    font-size: .9em;
}
#verify-code {
    flex: 1;
    min-width: 100px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #1a1a1d;
    color: #e4e5e5;
    border: 1px solid #3a3a3a;
    font-size: 1em;
    outline: none;
    letter-spacing: 2px;
    text-align: center;
}
#verify-code:focus { border-color: #74c0fc; }
#btn-verify-submit {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #475e73;
    color: #fff;
    cursor: pointer;
    font-size: .95em;
}
#btn-verify-submit:hover { background: #5a7790; }

@keyframes verify-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.verify-shake { animation: verify-shake .35s ease; border: 1px solid #ff6b6b; }

/* ===== Страница кабинета ===== */
#page-cabinet.page-active {
    padding: 12px 14px 100px;
    overflow-y: auto;
}
.cabinet-loading {
    text-align: center;
    color: #888;
    padding: 32px 12px;
}
.cabinet-error {
    background: rgba(255, 107, 107, .12);
    color: #ff9b9b;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.cabinet-view { color: #e4e5e5; }
.cabinet-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cabinet-header h2 { flex: 1; margin: 0; font-size: 1.2em; }

.cabinet-section {
    background: #2c2c2f;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}
.cabinet-section h3 {
    margin: 0 0 10px;
    color: #74c0fc;
    font-size: 1em;
    font-weight: 600;
}

/* === Список визитов === */
.visits-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.visit-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1f1f22;
    color: #e4e5e5;
    font-size: .92em;
}
.visit-date {
    color: #74c0fc;
    font-weight: 600;
    white-space: nowrap;
}
.visit-master,
.visit-service {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.visit-service {
    color: #cfd2d6;
    text-align: right;
}
.visit.past {
    color: #888;
    opacity: .85;
}
.visit.future {
    background: rgba(116, 192, 252, .12);
    font-weight: 500;
}
.visit.today {
    background: rgba(255, 212, 59, .18);
    font-weight: 600;
}
/* Код статуса визита от 1С (перекрывает шрифтовые правила выше) */
.visit-status-assigned { font-weight: 700; }
.visit-status-cancelled { text-decoration: line-through; opacity: .6; }
.visit-status-pending { animation: cabinetBlink 1.2s ease-in-out infinite; }
.visit-status-done { /* завершён — шрифт не меняем */ }
@keyframes cabinetBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* Предстоящие визиты — подсветка и кликабельность */
.visit-upcoming {
    cursor: pointer;
    border-left: 3px solid #74c0fc;
    padding-left: 8px;
    transition: filter .15s ease, background .15s ease;
}
.visit-upcoming:hover { filter: brightness(1.12); }
/* Текущий открытый визит — дополнительное выделение */
.visit-current {
    outline: 2px solid #74c0fc;
    outline-offset: -2px;
    background: rgba(116, 192, 252, .22);
    box-shadow: 0 0 0 1px rgba(116, 192, 252, .35);
}
.visit-current::after {
    content: "открыт";
    grid-column: 1 / -1;
    font-size: .82em;
    color: #74c0fc;
    font-weight: 600;
}

.visits-empty {
    text-align: center;
    color: #888;
    padding: 12px;
}

@media (max-width: 400px) {
    .visit-item { grid-template-columns: auto 1fr; gap: 4px 10px; }
    .visit-service {
        grid-column: 1 / -1;
        text-align: left;
        white-space: normal;
    }
}

/* === Бонусы/скидки/предложения === */
.bonuses-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.bonuses-card, .discounts-card, .offers-card {
    background: #1f1f22;
    border-radius: 8px;
    padding: 10px 12px;
}
.bonuses-card h3,
.discounts-card h3,
.offers-card h3 {
    margin: 0 0 6px;
    color: #74c0fc;
    font-size: .9em;
}
.bonuses {
    font-size: 1.15em;
    color: #ffd43b;
    font-weight: 600;
}
.discounts {
    margin: 0;
    padding: 0;
    list-style: none;
}
.discounts li {
    padding: 6px 8px;
    margin-bottom: 4px;
    background: #2c2c2f;
    border-radius: 6px;
    font-size: .9em;
}
.offers .offer-card {
    background: #2c2c2f;
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
}
.offer-title {
    font-weight: 600;
    color: #e4e5e5;
    margin-bottom: 2px;
}
.offer-text {
    color: #cfd2d6;
    font-size: .88em;
}

/* === Сотрудник === */
.employ-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.employ-fio {
    flex: 1;
    margin: 0;
    color: #e4e5e5;
    font-size: 1.15em;
}
.employ-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .8em;
    color: #cfd2d6;
}
.employ-rating .stars { color: #ffb400; font-size: 1.05em; }
.employ-refresh,
.cabinet-refresh {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(116, 192, 252, .1) center/60% no-repeat
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2374c0fc' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V2L8 6l4 4V7c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.97 20 14.55 20 13c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 8.74C4.46 10.03 4 11.45 4 13c0 4.42 3.58 8 8 8v3l4-4-4-4v3z'/%3E%3C/svg%3E");
}
.employ-refresh:hover,
.cabinet-refresh:hover { background-color: rgba(116, 192, 252, .2); }

.employ-month {
    color: #cfd2d6;
    margin: 6px 0 10px;
    font-size: .95em;
}
.employ-info {
    color: #ffd43b;
    margin-bottom: 10px;
    font-size: .85em;
}
.employ-info:empty { display: none; }

.employ-days {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.day-card {
    background: linear-gradient(45deg, #3b32b0, #7fc1e9);
    border: none;
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .15s ease;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.day-card:hover { box-shadow: 0 4px 12px rgba(127, 193, 233, .35); }
.day-card:active { transform: scale(.97); }
.day-card.active {
    outline: 2px solid #ffd43b;
    outline-offset: 1px;
}
/* Верхняя строка: дата/время слева, количество записей (бейдж) справа на одном уровне. */
.day-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.day-card__head { min-width: 0; }
.day-card .day-date { font-weight: 600; font-size: .95em; }
.day-card .day-time { font-size: .8em; opacity: .85; margin-top: 2px; }
.day-card .day-count {
    flex: 0 0 auto;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    white-space: nowrap;
}
/* Нижняя строка: начисленная з/п за день. */
.day-card .day-zp {
    font-size: .85em;
    font-weight: 600;
    opacity: .95;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, .25);
}

.employ-day-records {
    background: #1f1f22;
    border-radius: 8px;
    padding: 12px;
    margin-top: 4px;
}
.employ-day-title {
    color: #74c0fc;
    font-weight: 600;
    margin-bottom: 8px;
}
.employ-day-list .record {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 8px 6px;
    border-bottom: 1px solid #2a2a2d;
    color: #e4e5e5;
    font-size: .9em;
}
.employ-day-list .record:last-child { border-bottom: none; }
.employ-day-list .record.record-completed { opacity: .55; }
.employ-day-list .record.empty {
    color: #888;
    font-style: italic;
    display: block;
    text-align: center;
}
.employ-day-list .rec-time { color: #ffd43b; font-weight: 500; }
.employ-day-list .rec-client { color: #e4e5e5; }
.employ-day-list .rec-service {
    color: #cfd2d6;
    font-size: .88em;
    text-align: right;
}

/* ===== Адаптив ===== */
@media (min-width: 768px) {
    #page-cabinet.page-active { padding: 20px 24px; }

    .bonuses-section { grid-template-columns: 1fr 1fr 1fr; }

    .employ-days { grid-template-columns: repeat(3, 1fr); }

    .employ-day-list .record {
        grid-template-columns: 100px 1fr 1fr;
        font-size: 1em;
    }
}

@media (min-width: 1024px) {
    .employ-days { grid-template-columns: repeat(5, 1fr); }

    .cabinet-section { padding: 16px; }

    .employ-fio { font-size: 1.3em; }
}

/* ===== Заставка отправки кода авторизации (медленно мигает) ===== */
@keyframes cabinetSlowBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.cabinet-splash {
    animation: cabinetSlowBlink 1.8s ease-in-out infinite;
    text-align: center;
    padding: 28px 24px;
    color: #cfd2d6;
    font-size: 1.05em;
    line-height: 1.5;
}

/* ===== Дружелюбное пустое состояние с меняющимся смайликом ===== */
.cabinet-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    color: #cfd2d6;
    text-align: center;
}
.cabinet-empty__emoji {
    font-size: 44px;
    line-height: 1;
    transition: transform .3s ease, opacity .3s ease;
}