/* ================================================================
   FRONTEND POLISH — only for already implemented items from the
   design notes. No new backend behaviour is introduced here.
   ================================================================ */

/* ---------- Shared page headers / back buttons ---------- */
.ui-page-title {
    color: #fff !important;
    font-size: clamp(30px, 3.2vw, 42px) !important;
    line-height: 1.12;
    font-weight: 700 !important;
    margin: 0;
}
.ui-page-subtitle {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,.62) !important;
    font-size: clamp(14px, 1.35vw, 17px) !important;
    line-height: 1.45;
    font-style: italic;
}
.ui-header-stack { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.ui-header-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.ui-header-edit {
    display:inline-flex !important; align-items:center; gap:8px;
    padding:9px 16px !important; border-radius:10px !important;
    background:rgba(255,255,255,.13) !important;
    color:#fff !important; border:1px solid rgba(255,255,255,.14);
    text-decoration:none !important; font-size:14px !important; font-weight:600;
    transition:background .2s, transform .2s, border-color .2s;
}
.ui-header-edit:hover { background:rgba(255,255,255,.21) !important; transform:translateY(-1px); border-color:rgba(255,255,255,.25); }
.ui-back-link {
    display:inline-flex !important; align-items:center; gap:8px;
    width:max-content; max-width:100%;
    padding:8px 15px 8px 11px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.10) !important;
    color:rgba(255,255,255,.92) !important;
    border-radius:10px !important;
    text-decoration:none !important; font-size:13.5px !important; font-weight:600;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
    transition:background .2s, transform .2s, border-color .2s;
}
.ui-back-link:hover { background:rgba(255,255,255,.18) !important; border-color:rgba(255,255,255,.28) !important; transform:translateX(-2px); }

/* ---------- Profile / personal account ---------- */
.profile-header-block-flex { gap:36px !important; }
.profile-header-identity { gap:50px !important; align-items:center !important; display:flex; }
.profile-header-name-block { min-width:0; }
.profile-header-actions { max-width:none; justify-content:flex-end; align-items:center; }
.profile-header-action-btn {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:10px 18px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:10px !important;
    box-shadow:0 5px 15px rgba(0,0,0,.12);
    line-height:1;
    box-sizing:border-box;
    text-decoration: none;
    color: #193D50;
}
.profile-header-action-btn img { width:18px; height:18px; object-fit:contain; filter:brightness(0) invert(1); opacity:.95;}
.profile-header-action-btn-primary {
    min-width:188px;
    background:#FFFFFF !important;
    border-color:#FFFFFF !important;
    padding-inline:20px !important;
    box-shadow:0 8px 20px rgba(234, 234, 234, 0.2);
    color: #193D50;
}
.profile-header-action-btn-primary:hover { background: #bdbdbd !important; border-color: #bdbdbd !important; transform:translateY(-1px); }

/* ---------- Profile / personal account: old flat information layout ---------- */
.page-content > .info-grid > div {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.page-content > .info-grid {
    gap: 25px 60px !important;
}
.page-content > .info-grid h4 { margin-bottom: 4px; }
.page-content > .info-grid p { margin: 0; }

/* ---------- News ---------- */
.news-wrap { padding-top:40px !important; }
.news-card { box-shadow:0 3px 14px rgba(25,61,80,.045); }
.news-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(25,61,80,.11); }
.card-edit-btn { top:14px !important; right:14px !important; width:38px !important; height:38px !important; border-radius:11px !important; box-shadow:0 5px 15px rgba(0,0,0,.16); }
.news-card-body h3 { line-height:1.35; }
.news-edit-btn { box-shadow:0 4px 14px rgba(0,0,0,.1); }

/* ---------- Lesson/material cards and forms ---------- */
.lessons-wrap, .materials-wrap { padding-top:40px !important; }
.lesson-card, .material-card { box-shadow:0 3px 14px rgba(25,61,80,.045); }
.lesson-card:hover, .material-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(25,61,80,.11); }
.material-card-actions { margin-top:auto; }
.material-card-btn, .material-card-btn-delete { min-height:40px; }

.lesson-form-wrap { padding-top:34px !important; }
.lesson-form-card { box-shadow:0 5px 22px rgba(25,61,80,.055); border-color:#e2e8eb; }
.lesson-form-card h3 { line-height:1.3; }
.lesson-form-card input, .lesson-form-card textarea { background:#fff; }
.lesson-form-card input:focus, .lesson-form-card textarea:focus { box-shadow:0 0 0 3px rgba(25,61,80,.07); }
.lesson-form-submit { box-shadow:0 6px 16px rgba(25,61,80,.13); transition:background .2s, transform .2s, box-shadow .2s; }
.lesson-form-submit:hover { transform:translateY(-1px); box-shadow:0 9px 20px rgba(25,61,80,.17); }
.lesson-form-secondary-btn { border:1px solid #d8e0e4; box-shadow:0 2px 8px rgba(25,61,80,.04); }

/* Material form: no giant empty feeling, clearer hierarchy. */
.material-file-drop { min-height:140px; border-radius:14px; }

/* ---------- Lesson page / test area ---------- */
.lesson-page-wrap { padding-top:32px !important; }
.lesson-video-container { box-shadow:0 14px 35px rgba(0,0,0,.13); }
.lesson-info-card, .lesson-test-card { box-shadow:0 5px 22px rgba(25,61,80,.05); }
.lesson-test-card { padding:28px !important; }
.yandex-form-widget { min-height:560px !important; border:1px solid #e6eaed; box-shadow:inset 0 0 0 1px rgba(25,61,80,.025); }
.yandex-form-widget iframe { min-height:560px; }
.lesson-test-actions { justify-content:center !important; }
.lesson-sync-btn { min-width:210px; box-shadow:0 5px 14px rgba(25,61,80,.12); }
.lesson-test-open-link { display:block; text-align:center; margin-top:12px; }

/* ---------- News detail ---------- */
.news-page-wrap { padding-top:32px !important; gap:32px !important; }
.news-main-image-wrap { border-radius:16px !important; box-shadow:0 8px 25px rgba(25,61,80,.08); }
.news-thumbnail { width:70px; height:58px; border-radius:9px; }
.news-block { background:#fff; border:1px solid #e5eaed; border-radius:16px; padding:22px 24px; box-shadow:0 5px 20px rgba(25,61,80,.045); }
.news-block + .news-block { margin-top:0; }

/* ---------- Admin ---------- */
.admin-wrap { max-width:1400px; margin:0 auto; padding:34px 48px 70px !important; }
.admin-actions { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important; gap:12px !important; margin-bottom:38px !important; }
.admin-action-btn { min-height:54px; padding:14px 16px !important; border:1px solid rgba(255,255,255,.05); box-shadow:0 5px 15px rgba(25,61,80,.10); }
.admin-section { margin-bottom:38px !important; }
.admin-section-title { display:flex; align-items:center; gap:12px; font-size:24px !important; margin-bottom:14px !important; }
.admin-section-title::after { content:""; height:1px; background:#dfe6e9; flex:1; }
.admin-row-card { gap:14px !important; padding:13px 16px !important; border-radius:13px !important; box-shadow:0 2px 10px rgba(25,61,80,.025); }
.admin-row-card:hover { transform:translateY(-1px); }
.admin-row-name { font-size:15px !important; }
.admin-row-meta { font-size:12.5px !important; }
.admin-role-select { min-height:38px; padding-top:8px !important; padding-bottom:8px !important; }
.admin-save-btn { min-height:36px; display:inline-flex; align-items:center; justify-content:center; }
.admin-icon-btn { width:38px !important; height:38px !important; }
.admin-search-wrap { max-width:520px !important; margin-bottom:14px !important; }
.admin-search-input { min-height:42px; }

/* ---------- Registration / authorization ---------- */
.reg { padding:42px clamp(24px,4vw,70px) !important; }
.reg h1 { font-size:clamp(30px,3.2vw,44px) !important; margin-bottom:28px !important; }
.reg form { width:min(100%,900px) !important; }
.form-columns { gap:clamp(24px,4vw,64px) !important; }
.reg label { font-size:15px !important; font-weight:500 !important; margin-bottom:7px !important; }
.reg input, .reg select { min-height:46px; padding:11px 13px !important; border:1px solid #cfd7dc !important; margin-bottom:16px !important; font-size:15px !important; }
.reg input:focus, .reg select:focus { border-color:#193D50 !important; box-shadow:0 0 0 3px rgba(25,61,80,.09); }
.reg-btn { min-height:46px; border-radius:11px !important; box-shadow:0 6px 18px rgba(0,0,0,.14); }
.drop-area { border-radius:14px !important; border-color:rgba(255,255,255,.65) !important; }
.school-dropdown { border-radius:13px !important; box-shadow:0 14px 30px rgba(0,0,0,.18) !important; }
.school-dropdown-item { padding:11px 13px !important; }
.inline-fields-row { gap:14px !important; align-items:flex-start; }
.inline-field { min-width:0; }
.reg-back-button { top:18px !important; left:20px !important; background:rgba(25,61,80,.96) !important; border:1px solid rgba(255,255,255,.12); }
.error-message { width:min(100%,900px) !important; border-radius:11px !important; margin-bottom:18px !important; }

/* Privacy / generic modal visual cleanup. */
.privacy-modal { width:min(760px,calc(100vw - 32px)) !important; max-height:calc(100vh - 32px) !important; border-radius:18px !important; box-shadow:0 24px 70px rgba(0,0,0,.3) !important; }
.privacy-modal-body { max-height:min(62vh,620px) !important; }
.confirm-modal-content { width:min(520px,calc(100vw - 32px)) !important; padding:30px !important; }
.confirm-buttons { justify-content:flex-end; flex-wrap:wrap; }

@media (max-width: 1000px) {
    .admin-wrap { padding-inline:24px !important; }
    .profile-header-identity { gap:32px !important; }
    .news-page-wrap { flex-direction:column; }
    .news-gallery-col, .news-details-col { width:100% !important; }
    .news-gallery-col { position:static; }
}
@media (max-width: 768px) {
    .admin-wrap { padding:24px 16px 55px !important; }
    .admin-row-card { flex-wrap:wrap !important; }
    .admin-row-info { flex:1 1 220px; }
    .admin-role-form { width:100%; }
    .admin-role-form .admin-role-select { flex:1; }
    .profile-header-actions { width:auto; justify-content:flex-end; }
    .profile-header-action-btn { flex:0 0 auto; text-align:center; }
    .page-content > .info-grid > div { min-width:min(100%,220px); flex:1 1 220px; }
    .lesson-form-wrap { padding-inline:16px !important; }
    .lesson-form-card { padding:22px !important; }
    .lesson-test-card { padding:20px !important; }
    .yandex-form-widget, .yandex-form-widget iframe { min-height:520px !important; }
    .news-block { padding:18px; }
}
@media (max-width: 560px) {
    .admin-actions { grid-template-columns:1fr !important; }
    .admin-row-card { align-items:flex-start !important; }
    .admin-row-avatar { margin-top:2px; }
    .admin-role-form { flex-wrap:wrap; }
    .admin-role-form .admin-role-select, .admin-role-form .admin-save-btn { width:100%; }
    .form-columns { flex-direction:column; }
    .inline-fields-row { flex-direction:row !important; }
    .inline-field { width:50%; }
    .news-import-row { flex-direction:column; }
    .news-import-btn { width:100%; }
    .ui-back-link { font-size:13px !important; }
}

.auth-secondary-link { text-align:center; }
.auth-secondary-link a { color:#fff !important; text-decoration:none !important; transition:opacity .2s, text-decoration-color .2s; }
.auth-secondary-link a:hover { opacity:.82; text-decoration:underline !important; text-underline-offset:3px; }
.auth-forgot-link { margin-top:12px; font-size:13.5px; }
.auth-register-link { margin-top:18px; font-size:14.5px; }
.ui-lesson-form-header .ui-page-title { margin-top:0 !important; }
.ui-lesson-form-header { align-items:flex-start !important; }
.ui-lesson-form-header .lesson-form-delete-btn { margin-top:2px; }
@media (max-width:768px) { .ui-lesson-form-header .lesson-form-delete-btn { width:100%; margin-top:4px; } }


/* ===== Управляющие кнопки в стиле кнопки удаления урока, но в светлом варианте ===== */
.quiz-management-action {
    margin-top: 14px;
}

.quiz-management-btn,
.account-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 42px;
    padding: 10px 20px;
    background: #fff;
    color: #193D50 !important;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.quiz-management-btn:hover,
.account-admin-btn:hover {
    background: #f5f7f8;
    color: #193D50 !important;
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(0,0,0,.16);
}

.quiz-management-btn:active,
.account-admin-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .quiz-management-action {
        width: 100%;
    }

    .quiz-management-btn,
    .account-admin-btn {
        min-height: 44px;
        padding-inline: 18px;
    }
}


/* ---------- Profile/account final polish ---------- */
.account-admin-btn {
    min-height: 42px;
    padding: 10px 18px;
    background: #28a745 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 5px 16px rgba(40,167,69,.22);
}
.account-admin-btn:hover {
    background: #23923d !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(40,167,69,.28);
}
.profile-lesson-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
    color: #193D50;
    text-decoration: none;
    border: 1px solid #e0e6e9;
    border-radius: 12px;
    background: #fff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.profile-lesson-progress-row:hover {
    transform: translateY(-2px);
    border-color: #cbd9df;
    background: #fafdfe;
    box-shadow: 0 8px 18px rgba(25,61,80,.06);
}
.profile-lesson-progress-main {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.profile-lesson-progress-title {
    font-size: 17px;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.profile-lesson-progress-category {
    color: #87959e;
    font-size: 13px;
}
.profile-lesson-progress-status {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.profile-lesson-progress-status.is-complete { color: #18AA1F; }
.profile-lesson-progress-status.is-pending { color: #AA1818; }

@media (max-width: 700px) {
    .profile-lesson-progress-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .profile-lesson-progress-status {
        white-space: normal;
    }
}


/* ===== Финальный адаптив профиля / шапки действий ===== */
@media (max-width: 900px) {
    .profile-header-block-flex {
        align-items: flex-start !important;
    }
    .profile-header-actions {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .profile-header-block-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 22px !important;
    }
    .profile-header-identity {
        gap: 24px !important;
        align-items: center !important;
        text-align: left !important;
    }
    .profile-header-actions {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }
    .profile-header-action-btn {
        width: 100%;
        flex: 1 1 100%;
    }
    .profile-header-action-btn-primary {
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .profile-header-identity {
        gap: 16px !important;
    }
    .profile-header-block .avatar-img-lg,
    .profile-header-block .avatar-placeholder-lg {
        width: 92px !important;
        height: 92px !important;
    }
    .profile-name {
        font-size: clamp(22px, 7vw, 31px) !important;
    }
    .profile-role {
        font-size: 14px !important;
    }
}