/* =============================================
   TONNEL — кастомные стили (user-menu, cabinet)
   ============================================= */

/* USER MENU — позиционирование справа в шапке */
.user-menu {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    display: flex;
    align-items: center;
}
.user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: 60px;
    padding: 7px 14px 7px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--blue);
    transition: all .2s;
    white-space: nowrap;
}
.user-btn:hover { border-color: var(--gold); background: #fffbf0; }
.user-btn svg { color: var(--blue); flex-shrink: 0; }
#userCaret { opacity: .5; transition: transform .2s; }
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(26,59,92,.14);
    padding: 8px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .2s;
    z-index: 300;
}
.user-menu.open .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu.open #userCaret { transform: rotate(180deg); }
.user-dropdown-header {
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 4px;
}
.ud-name  { display: block; font-weight: 700; font-size: .9rem; color: var(--blue); }
.ud-email { display: block; font-size: .78rem; color: var(--gray-mid); margin-top: 1px; }
.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: .88rem;
    color: var(--gray-dark);
    font-weight: 500;
    transition: background .15s;
}
.user-dropdown a:hover { background: #f8f9fa; color: var(--blue); }
.ud-divider { height: 1px; background: var(--border-light); margin: 4px 8px; }
.ud-logout {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 500;
    color: #e53e3e;
    padding: 9px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: 9px;
}
.ud-logout:hover { background: #fff5f5; }

/* Компенсация для header-actions чтобы не перекрывался с user-menu */
.header-actions { margin-right: 180px; }
@media (max-width: 900px) { .header-actions { margin-right: 150px; } }
@media (max-width: 640px) {
    .user-menu { right: 12px; }
    .header-actions { margin-right: 130px; }
    .user-btn-name { display: none; }
}

/* ── AUTH PAGE ─────────────────────────────── */
.auth-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.auth-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 36px 40px;
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 1.5rem; color: var(--blue); margin-bottom: 6px; }
.auth-card p  { font-size: .9rem; color: var(--gray-mid); margin-bottom: 24px; }
.auth-error {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .88rem;
    color: #e53e3e;
    margin-bottom: 16px;
}
.auth-info {
    background: #fffbf0;
    border: 1px solid var(--gold-light);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .88rem;
    color: var(--blue);
    margin-bottom: 16px;
}
.auth-form-group { margin-bottom: 16px; }
.auth-form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--blue); margin-bottom: 6px; }
.auth-input {
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-family: inherit;
    font-size: .92rem;
    outline: none;
    transition: border-color .2s;
}
.auth-input:focus { border-color: var(--gold); }
.auth-input.is-error { border-color: #fc8181; }
.auth-field-error { display: block; font-size: .8rem; color: #e53e3e; margin-top: 4px; }
.auth-check { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--gray-mid); margin-bottom: 20px; }
.auth-btn {
    width: 100%;
    padding: 13px;
    background: var(--gold);
    color: var(--blue);
    border: none;
    border-radius: 60px;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all .2s;
}
.auth-btn:hover { background: var(--gold-hover); }
.auth-footer { margin-top: 16px; text-align: center; font-size: .85rem; color: var(--gray-mid); }
.auth-footer a { color: var(--blue); font-weight: 600; }

/* ── CABINET COMMON ───────────────────────── */
.cabinet-page { padding: 40px 0 60px; }
.cab-title    { font-size: 1.8rem; color: var(--blue); margin-bottom: 24px; }
.cab-subtitle { font-size: 1.1rem; color: var(--blue); margin: 28px 0 14px; font-weight: 700; }
.cab-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.cab-empty { text-align: center; padding: 40px; color: var(--gray-mid); }
.cab-empty p { margin-bottom: 16px; }
.cab-form-group { margin-bottom: 18px; }
.cab-form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--blue); margin-bottom: 6px; }
.cab-input {
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-family: inherit;
    font-size: .92rem;
    color: var(--gray-dark);
    outline: none;
    transition: border-color .2s;
}
.cab-input:focus  { border-color: var(--gold); }
.cab-input:disabled { background: #f8f9fa; color: var(--gray-mid); cursor: not-allowed; }
.cab-input.is-error { border-color: #fc8181; }
.cab-field-error { display: block; font-size: .8rem; color: #e53e3e; margin-top: 4px; }
.cab-hint { display: block; font-size: .78rem; color: var(--gray-mid); margin-top: 4px; }
.cab-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cab-btn-primary {
    display: inline-block;
    padding: 11px 28px;
    background: var(--gold);
    color: var(--blue);
    border: none;
    border-radius: 60px;
    font-family: inherit;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: all .2s;
}
.cab-btn-primary:hover { background: var(--gold-hover); transform: translateY(-1px); }
.cab-btn-sm {
    display: inline-block;
    padding: 7px 16px;
    background: var(--gold-light);
    color: var(--blue);
    border-radius: 60px;
    font-size: .82rem;
    font-weight: 600;
    transition: all .2s;
}
.cab-btn-sm:hover { background: var(--gold); }
.cab-alert { padding: 12px 18px; border-radius: 10px; font-size: .9rem; margin-bottom: 20px; }
.cab-alert-success { background: #f0fff4; border: 1px solid #9ae6b4; color: #276749; }
.cab-pagination { margin-top: 24px; }

/* ── APPLICATIONS ─────────────────────────── */
.cab-apps-list { display: flex; flex-direction: column; gap: 14px; }
.app-item {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: var(--shadow);
}
.app-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.app-url  { font-size: .92rem; font-weight: 600; color: var(--blue); word-break: break-all; }
.app-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: .75rem; font-weight: 700; background: var(--gold-light); color: var(--blue); }
.badge-new      { background: var(--gold-light); color: var(--blue); }
.badge-work     { background: #bee3f8; color: #2b6cb0; }
.badge-done     { background: #c6f6d5; color: #276749; }
.badge-rejected { background: #fed7d7; color: #9b2c2c; }
.badge-waiting  { background: #e9d8fd; color: #553c9a; }
.app-item-body  { font-size: .85rem; color: var(--gray-mid); display: flex; flex-direction: column; gap: 4px; }
.app-meta strong { color: var(--gray-dark); }
.app-date  { font-size: .8rem; color: #a0aec0; margin-top: 4px; }
.app-comment { font-size: .83rem; color: var(--gray-mid); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); }
.app-comment strong { color: var(--gray-dark); }

/* ── COMPANIES ────────────────────────────── */
.cab-companies-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.company-item {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}
.company-item-info { flex: 1; min-width: 0; }
.company-title  { display: block; font-size: .95rem; font-weight: 700; color: var(--blue); margin-bottom: 3px; }
.company-domain { font-size: .82rem; color: var(--gray-mid); }