/* Shell of every page: colour tokens --app-* (light and body.theme-dark), header, footer, cards, fields, buttons,
   chips, bidi text, plaques in the dark theme. Linked by dashboard_base.html (cabinet) and base.html (login, legal, 404)
   at the place of their own <style>, so page and cabinet rules after it keep winning. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* Wide blocks scroll inside their own card (.table-responsive / .overflow-x-auto), the page is not clipped.
   Column layout of .content (chat) lives in custom.css — base.html uses it too. */
.content {
    flex-grow: 1;
    min-width: 0;
    max-width: 100vw;
    padding: 10px;
}
/* In the .content column an auto-margin page wrapper is not stretched and would grow to its widest table;
   full width (capped by its max-w-*) lets that table scroll inside its card instead. */
.content > .mx-auto {
    width: 100%;
}
@media (max-width: 768px) {
    .navbar-nav .nav-link span {
        display: none; /* Скрыть текст */
    }
    .navbar-nav .nav-link i {
        margin-right: 0; /* Убрать отступы между иконками и текстом */
    }
}
@media (max-width: 768px) {
    .back-button span {
        display: none; /* Скрываем текст */
    }
    .back-button i {
        margin-right: 0; /* Убираем отступ */
    }
}
/* Таблицы ведут себя аккуратно и не выпирают */
.content .table-responsive {
max-width: 100%;
overflow-x: auto;          /* если не влезает — скролл внутри, а не у страницы */
}

/* Если внутри .content используем .row без .container — убираем отрицательные отступы */
.content > .row {
margin-left: 0;
margin-right: 0;
}
.content > .row > [class^="col"] {
padding-left: .5rem;
padding-right: .5rem;
}

.footer {
    background: var(--app-surface);
    color: var(--app-muted);
    border-top: 1px solid var(--app-surface-border);
    padding: 10px;
    text-align: center;
    width: 100%;
}
.footer a { color: inherit; }
.footer a:hover { color: var(--app-text); }

:root {
--app-bg: #f8fafc;
--app-text: #0f172a;
--app-muted: #64748b;
--app-nav-bg: #f8fafc;
--app-nav-border: #e2e8f0;
--app-surface: #ffffff;
--app-surface-border: #e2e8f0;
--app-sidebar-bg: #0f172a;
--app-sidebar-hover: rgba(255, 255, 255, 0.06);
--app-link: #0f172a;
--app-link-hover: #111827;
--app-button-hover: rgba(15, 23, 42, 0.06);
--app-dropdown-bg: #ffffff;
--app-dropdown-border: #e2e8f0;
--app-dropdown-hover: #f1f5f9;
--app-dropdown-text: #0f172a;
--app-dropdown-muted: #64748b;
--app-input-bg: #ffffff;
--app-input-border: #e2e8f0;
--app-input-text: #0f172a;
--app-input-placeholder: #94a3b8;
--app-accent: #5f67dd;
--app-button-primary: #5f67dd;
}

body.theme-dark {
--app-bg: #0b1220;
--app-text: #e2e8f0;
--app-muted: #94a3b8;
--app-nav-bg: #0b1220;
--app-nav-border: rgba(30, 41, 59, 0.6);
--app-surface: #0f172a;
--app-surface-border: #1f2a44;
--app-sidebar-bg: #0f172a;
--app-sidebar-hover: rgba(255, 255, 255, 0.06);
--app-link: #cbd5f5;
--app-link-hover: #ffffff;
--app-button-hover: rgba(255, 255, 255, 0.06);
--app-dropdown-bg: rgba(15, 23, 42, 0.98);
--app-dropdown-border: #1f2a44;
--app-dropdown-hover: #1f2a44;
--app-dropdown-text: #e2e8f0;
--app-dropdown-muted: #cbd5f5;
--app-input-bg: #0f172a;
--app-input-border: #1f2a44;
--app-input-text: #e2e8f0;
--app-input-placeholder: #64748b;
--app-accent: #7a85e7;
/* muted indigo (brand-700): white text 6.2:1, no glow on the dark background */
--app-button-primary: #4f53c8;
}

body {
background: var(--app-bg);
color: var(--app-text);
}

a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}

.text-link {
color: var(--app-link);
display: inline-flex;
align-items: center;
gap: .4rem;
}
.text-link:hover {
color: var(--app-link-hover);
}

.text-button {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .35rem .6rem;
border-radius: .5rem;
color: var(--app-link);
background: transparent;
border: none;
}
.text-button:hover {
color: var(--app-link-hover);
background: var(--app-button-hover);
}

.app-nav {
background: var(--app-nav-bg);
border-bottom: 1px solid var(--app-nav-border);
}

.app-brand {
color: var(--app-link);
}
.app-brand:hover {
color: var(--app-link-hover);
}

.app-dropdown {
background: var(--app-dropdown-bg);
border: 1px solid var(--app-dropdown-border);
}
.app-dropdown a {
color: var(--app-dropdown-text);
}
.app-dropdown a span {
color: var(--app-dropdown-text);
}
.app-dropdown a:hover {
background: var(--app-dropdown-hover);
}

.card {
background: var(--app-surface);
border: 1px solid var(--app-surface-border);
border-radius: .85rem;
padding: 1rem;
}

/* Nested block inside a card. Bootstrap .border is !important and ignores Tailwind border colours. */
.subcard {
background: var(--app-surface);
border: 1px solid var(--app-surface-border);
border-radius: .75rem;
padding: .75rem;
}

/* Hebrew / Arabic text inside the LTR layout: put on the text element only, never on layout containers.
   The line keeps the alignment of its parent (left in the LTR layout). */
.bidi-text,
.cs-bidi :is(h1,h2,h3,p,.cs-label,.cs-hint,.cs-ct,.cs-cs,.cs-err,.gt,.gs,[role=status],#csSaveError,.cs-dirty span,textarea,input[type=text],input[type=email],input:not([type])),
.ob-bidi :is(h1,h2,p,label,.ob-q,[role=status],[role=alert]),
.doc-bidi :is(h1,h2,h3,p,li) {
unicode-bidi: plaintext;
text-align: match-parent;
}

.section-title {
color: var(--app-text);
}

.muted-text {
color: var(--app-muted);
}

.input-base {
width: 100%;
background: var(--app-input-bg);
border: 1px solid var(--app-input-border);
color: var(--app-input-text);
border-radius: .75rem;
padding: .65rem .9rem;
}

.input-base::placeholder {
color: var(--app-input-placeholder);
}

.input-base:focus {
outline: none;
border-color: var(--app-accent);
box-shadow: 0 0 0 2px rgba(95, 103, 221, 0.2);
}

.button-primary {
background: var(--app-button-primary);
color: #fff;
border-radius: .75rem;
padding: .65rem 1.1rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
height: 36px;
}

.button-primary:hover {
filter: brightness(1.05);
color: #fff;
}

.button-secondary {
background: var(--app-surface);
color: var(--app-text);
border: 1px solid var(--app-input-border);
border-radius: .75rem;
padding: 0 .9rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
height: 36px;
}

.button-secondary:hover {
background: var(--app-button-hover);
color: var(--app-text);
}

.button-secondary:disabled {
opacity: .6;
cursor: not-allowed;
}

.action-item {
height: 36px;
padding: 0 .75rem;
border-radius: .7rem;
}

.action-danger {
color: #dc2626;
}

.action-danger:hover {
color: #b91c1c;
}

/* Section tabs (hr_section_tabs): chips, touch target >= 32 px */
.tab-chip {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--app-surface-border);
background: var(--app-surface);
color: var(--app-text);
font-size: 13px;
font-weight: 500;
text-decoration: none;
}
.tab-chip:hover {
background: var(--app-button-hover);
color: var(--app-text);
}
.tab-chip[aria-current="page"], .tab-chip[aria-pressed="true"], .tab-chip[aria-selected="true"] {
background: #0f172a;
border-color: #0f172a;
color: #fff;
font-weight: 600;
}
body.theme-dark .tab-chip[aria-current="page"], body.theme-dark .tab-chip[aria-pressed="true"],
body.theme-dark .tab-chip[aria-selected="true"] {
background: #e2e8f0;
border-color: #e2e8f0;
color: #0b1220;
}

/* Plaques (rose / emerald / amber, settings pattern) in the dark theme — soft tints, AA text. */
body.theme-dark .bg-rose-50 { background-color: rgba(244, 63, 94, .12); }
body.theme-dark .bg-emerald-50 { background-color: rgba(16, 185, 129, .12); }
body.theme-dark .bg-amber-50 { background-color: rgba(245, 158, 11, .12); }
body.theme-dark .border-rose-200, body.theme-dark .border-rose-300 { border-color: rgba(244, 63, 94, .35); }
body.theme-dark .border-emerald-200 { border-color: rgba(16, 185, 129, .35); }
body.theme-dark .border-amber-200 { border-color: rgba(245, 158, 11, .35); }
body.theme-dark .text-rose-700, body.theme-dark .text-rose-800 { color: #fda4af; }
body.theme-dark .text-emerald-700, body.theme-dark .text-emerald-800 { color: #6ee7b7; }
body.theme-dark .text-amber-700, body.theme-dark .text-amber-800 { color: #fcd34d; }
body.theme-dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, .12); }
body.theme-dark .bg-brand-50, body.theme-dark .bg-brand-100 { background-color: rgba(95, 103, 221, .18); }
body.theme-dark .text-brand-700, body.theme-dark .text-brand-800 { color: #bdc9f7; }