/* ==========================================================================
idbg — модул „account“: новите правила на модула (docs/UI_STANDARD.md §11)
Всеки селектор започва с [data-module="account"] — layout слага data-module
на (App\Services\UiModule::forView()) и зарежда само файла на
текущия модул, така че правило оттук не може да засегне чужда страница
(php bin/ui-lint.php, правило 10).
Литерали (hex цвят, font-size в px, box-shadow) не се пишат — само
токените от brand-tokens.css (§1, правило 11). Общото за няколко модула
е компонент в design-components.css (заявка в systest/ui/requests.md).
========================================================================== */
/* == Настройки: рамката (SideNav + съдържание, §3.5) ==
Формата на подстраницата не е втора карта около картите си — картите са
.form-section (FormCard), а лентата „Запази промените“ лепне долу. Ширината
е за четене (§2.5: форми до 960px), подравнена вляво до менюто. */
/* Тежестта (0,4,1) е над общата `body.is-app .app-page form.app-form` (0,3,2),
която прави формата карта — без !important. Видът е като формите на
другите модули (.app-page--list > .container > .app-form): картите са
.form-section една под друга, лентата с бутона — своя карта, лепне долу. */
[data-module="account"] .settings-main > form.app-form.settings-form {
display: flex;
flex-direction: column;
gap: var(--space-4);
width: 100%;
max-width: 960px;
margin: 0;
padding: 0;
overflow: visible;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
[data-module="account"] .settings-main > form.app-form.settings-form > .form-section {
margin: 0;
padding: var(--space-6);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
/* FormActionBar на настройките — обхватът в :where(), за да важи телефонният
вид на лентата от design-components.css (една лента за всички форми, §3.4). */
[data-module="account"] :where(.settings-main > form.app-form.settings-form) > .form-actions {
margin: 0;
padding: var(--space-3) var(--space-5);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
justify-content: flex-end;
}
/* Картата без форма (само преглед, „Твоите данни“) — същият вид. */
[data-module="account"] .settings-main > .form-section {
margin: 0;
padding: var(--space-6);
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
@media (max-width: 560px) {
[data-module="account"] .settings-main > form.app-form.settings-form > .form-section,
[data-module="account"] .settings-main > .form-section { padding: var(--space-4); }
}
/* Една ширина за всичко в рамката на Настройки (§2.5 — до 960px): формите,
списъците и съобщението „само преглед“ свършват на един десен ръб. Досега
списъците бяха на цялата колона, а формите и Alert-ът — до 960px, и при
смяна на подстраница съдържанието скачаше. */
[data-module="account"] .settings-main { max-width: 960px; min-width: 0; }
/* Зоната за съобщения над рамката („Провери 1 поле“, грешка от действие) —
до същия десен ръб: менюто (220) + разстоянието + 960. Досега стигаше до
края на екрана, на 136px вдясно от формата. */
@media (min-width: 1001px) {
[data-module="account"] .settings-page > .page-messages > * { max-width: calc(220px + var(--space-8) + 960px); }
}
[data-module="account"] .settings-main > .card + .card,
[data-module="account"] .settings-main > .app-form + .card,
[data-module="account"] .settings-main > .form-section + .form-section,
[data-module="account"] .settings-main > .form-section + .card { margin-top: var(--space-4); }
/* Една глава на карта (§5.5): иконата 20 без кръгче, заглавието 16/700, без
линия отдолу — еднакво за .card и за .form-section (картата с