/* ===== Stage 5 polish — targeted fixes and visual improvements ===== */

/* --- ContentEditable inputs in dark mode --- */
[data-theme="dark"] [contenteditable] {
    color: var(--text);
    background-color: var(--surface-alt);
}

/* back-cells uses a light checkered gradient; replace it with solid surface in dark mode */
[data-theme="dark"] .back-cells {
    background: var(--surface-alt);
}

/* Date/number/text inputs inherit dark background from wrapper */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="time"] {
    color-scheme: dark;
    background-color: var(--surface-alt);
    color: var(--text);
    border: none;
    outline: none;
}

/* Select elements */
[data-theme="dark"] select,
[data-theme="dark"] datalist {
    background-color: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

/* --- Form label captions --- */
[data-theme="dark"] .caption-line,
[data-theme="dark"] .caption-line-left,
[data-theme="dark"] .caption-line-left-15,
[data-theme="dark"] .caption-line-left-full,
[data-theme="dark"] .caption-line-half,
[data-theme="dark"] .caption-line-gen,
[data-theme="dark"] .caption-line-half-70px,
[data-theme="dark"] .caption-line-simple-28,
[data-theme="dark"] .caption-line-bold,
[data-theme="dark"] .caption-line-bold-left,
[data-theme="dark"] .caption-line-bold-right,
[data-theme="dark"] .caption-head {
    color: var(--text-muted);
}

/* --- Rollup accordion in dark mode --- */
[data-theme="dark"] .hide + label {
    color: var(--primary);
}

[data-theme="dark"] .hide + label:before {
    background-color: var(--primary);
    color: #fff;
}

[data-theme="dark"] .hide:checked + label {
    color: var(--text-muted);
}

/* --- Window caption bar refinement --- */
.window-caption,
.window-caption-2em,
.window-caption-full {
    font-size: 1em;
    letter-spacing: 0.02em;
}

/* window-caption-2em has height:2em which clips floated content and creates
   a scrollbar via overflow-x:hidden on .window; use overflow:hidden to clip cleanly */
.window-caption-2em {
    overflow: hidden;
    height: 2.3em;
    min-height: unset;
}

.caption-text,
.caption-text-new {
    font-size: 1.05em;
    letter-spacing: 0.01em;
}

/* --- Submenu tabs --- */
.btn-submenu {
    font-size: 0.97em;
    letter-spacing: 0.01em;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.btn-submenu.btn-active {
    font-weight: 600;
    background-color: rgba(30, 95, 168, 0.14);
}

[data-theme="dark"] .btn-submenu.btn-active {
    background-color: rgba(30, 95, 168, 0.22);
}

.btn-submenu-interactive:hover {
    background-color: rgba(30, 95, 168, 0.07);
}

[data-theme="dark"] .btn-submenu-interactive:hover {
    background-color: rgba(30, 95, 168, 0.12);
}

/* --- Modal close button refinement --- */
.caption-close,
.caption-close-new {
    transition: color 0.15s ease, opacity 0.15s ease;
}

.caption-close:hover,
.caption-close-new:hover {
    opacity: 0.7;
}

/* --- Login / signup page improvements --- */
.site-login,
.site-signup {
    max-width: 700px;
}

/* Override Bootstrap col-lg-5 (~41%) — give the form column more room */
.site-login .col-lg-5,
.site-signup .col-lg-5 {
    width: 100%;
    max-width: 560px;
}

.site-login h1,
.site-signup h1 {
    margin-bottom: 0.3em;
    color: var(--text);
}

.site-login p,
.site-signup p {
    color: var(--text-muted);
    margin-bottom: 1.2em;
}

.site-login .form-group label,
.site-signup .form-group label {
    color: var(--text);
    font-weight: 500;
}

.site-login .form-control,
.site-signup .form-control {
    font-family: var(--font-base);
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-login .form-control:focus,
.site-signup .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(30, 95, 168, 0.2);
    outline: none;
}

[data-theme="dark"] .site-login .form-control,
[data-theme="dark"] .site-signup .form-control {
    background-color: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .site-login .form-control:focus,
[data-theme="dark"] .site-signup .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(30, 95, 168, 0.25);
}

/* TOTP code input */
#totp-code,
#totp-setup-code,
#totp-disable-code {
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#totp-code:focus,
#totp-setup-code:focus,
#totp-disable-code:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(30, 95, 168, 0.2);
    outline: none;
}

[data-theme="dark"] #totp-code,
[data-theme="dark"] #totp-setup-code,
[data-theme="dark"] #totp-disable-code {
    background-color: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

/* --- Breadcrumbs dark text --- */
[data-theme="dark"] .breadcrumb > li,
[data-theme="dark"] .breadcrumb > li > a,
[data-theme="dark"] .breadcrumb > li.active {
    color: var(--text-muted);
}

[data-theme="dark"] .breadcrumb > li + li::before {
    color: var(--text-muted);
}

/* --- Glyphicon icons in dark mode --- */
[data-theme="dark"] .glyphicon {
    color: var(--text-muted);
}

[data-theme="dark"] .glyphicon:hover {
    color: var(--text);
}

/* --- unactive / muted text --- */
[data-theme="dark"] .unactive {
    color: var(--text-muted);
}

/* --- HR line refinement --- */
[data-theme="dark"] hr.line,
[data-theme="dark"] .line {
    border-top-color: var(--border);
}

/* --- Error / red-comment text --- */
[data-theme="dark"] .red-comment {
    color: #ff6b6b;
}

[data-theme="dark"] .text-color-red {
    color: #ff7070;
}

[data-theme="dark"] .text-color-green {
    color: #5ecb5e;
}

/* --- Tooltip dark --- */
[data-theme="dark"] .ac-last-activity:hover::after {
    background: rgba(40, 35, 30, 0.95);
    color: var(--text);
    border-color: var(--border);
}

/* --- Window button active state --- */
.window-button-in-panel:active,
.window-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- Amount totals row (brown-back) refinement --- */
.brown-back .message-text-line {
    font-weight: 600;
}

.fin-acc-amount.brown-back .message-text-line,
.fin-reg-amount.brown-back .message-text-line {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* --- Date column: opaque deadline colors, independent from row sphere background ---
   Default deadline classes use rgba (semi-transparent) which mixes with the row's
   sphere gradient. colNameDate overrides with solid colors so the deadline is clear. */

.colNameDate.deadline-fail   { background: hsl(0,   55%, 58%) !important; color: #111 !important; }
.colNameDate.deadline-today  { background: hsl(22,  55%, 54%) !important; color: #111 !important; }
.colNameDate.deadline-1      { background: hsl(22,  55%, 54%) !important; color: #111 !important; }
.colNameDate.deadline-3      { background: hsl(36,  55%, 58%) !important; color: #111 !important; }
.colNameDate.deadline-7      { background: hsl(50,  50%, 62%) !important; color: #111 !important; }
.colNameDate.deadline-15     { background: hsl(203, 42%, 58%) !important; color: #111 !important; }
.colNameDate.deadline-30     { background: hsl(200, 38%, 64%) !important; color: #111 !important; }
.colNameDate.deadline-60     { background: hsl(0,   0%,  78%) !important; color: #111 !important; }
.colNameDate.deadline-100    { background: hsl(0,   0%,  82%) !important; color: #111 !important; }
.colNameDate.deadline-done   { background: hsl(140, 42%, 56%) !important; color: #111 !important; }

/* Dark theme: shift lightness down so muted colors stay visible */
[data-theme="dark"] .colNameDate.deadline-fail   { background: hsl(0,   45%, 42%) !important; color: #eee !important; }
[data-theme="dark"] .colNameDate.deadline-today  { background: hsl(22,  45%, 40%) !important; color: #eee !important; }
[data-theme="dark"] .colNameDate.deadline-1      { background: hsl(22,  45%, 40%) !important; color: #eee !important; }
[data-theme="dark"] .colNameDate.deadline-3      { background: hsl(36,  45%, 42%) !important; color: #eee !important; }
[data-theme="dark"] .colNameDate.deadline-7      { background: hsl(50,  42%, 44%) !important; color: #eee !important; }
[data-theme="dark"] .colNameDate.deadline-15     { background: hsl(203, 38%, 42%) !important; color: #eee !important; }
[data-theme="dark"] .colNameDate.deadline-30     { background: hsl(200, 34%, 48%) !important; color: #eee !important; }
[data-theme="dark"] .colNameDate.deadline-60     { background: hsl(0,   0%,  38%) !important; color: #ccc !important; }
[data-theme="dark"] .colNameDate.deadline-100    { background: hsl(0,   0%,  32%) !important; color: #bbb !important; }
[data-theme="dark"] .colNameDate.deadline-done   { background: hsl(140, 36%, 40%) !important; color: #eee !important; }

/* --- Financial container scroll fix --- */
.fin-container-wrap {
    min-width: 0;
}

/* --- Footer dark theme border --- */
[data-theme="dark"] .footer {
    border-top-color: #2a2a2a;
}

/* --- Active filter buttons in dark mode --- */
[data-theme="dark"] .btn-active {
    color: var(--primary);
}

[data-theme="dark"] .btn-active-profit {
    color: #5ecb5e;
}

[data-theme="dark"] .btn-active-expense {
    color: #ff7070;
}

[data-theme="dark"] .btn-active-replacement {
    color: #7ba3ff;
}

/* --- Button redesign: Graphite style ---
   Overrides the hardcoded brown gradient in index49.css for both modes */

.window-button-in-panel,
.window-button-in-panel-percent,
.window-button {
    background: linear-gradient(to bottom, var(--btn-bg) 0%, var(--btn-bg-end) 100%);
    color: var(--btn-text);
    border-color: var(--btn-border);
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 6px;
}

.window-button-in-panel:hover,
.window-button-in-panel-percent:hover,
.window-button:hover {
    background: linear-gradient(to bottom, var(--btn-hover-bg) 0%, var(--btn-hover-bg-end) 100%);
    color: var(--btn-hover-text);
    border-color: var(--btn-hover-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Dark mode hover uses the same token vars — already defined in tokens.css */
[data-theme="dark"] .window-button-in-panel:hover,
[data-theme="dark"] .window-button-in-panel-percent:hover,
[data-theme="dark"] .window-button:hover {
    background: linear-gradient(to bottom, var(--btn-hover-bg) 0%, var(--btn-hover-bg-end) 100%);
    color: var(--btn-hover-text);
    border-color: var(--btn-hover-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* --- Smooth page load: prevent invisible text during font load --- */
html {
    font-display: swap;
}

/* --- Remove unwanted scrollbars on fixed-height window containers ---
   grid-template-rows: 40px forces overflow on the button panel row;
   fixed heights on caption/button bars clip content after font-size bumps */

.container-foto-wrap {
    grid-template-rows: auto auto;
}

.window-h-35 {
    height: auto;
    min-height: 35px;
}

.window-h-50 {
    height: auto;
    min-height: 50px;
}


.h-40px {
    height: auto;
    min-height: 40px;
}

.h-46px {
    height: auto;
    min-height: 46px;
}

.h-68px {
    height: auto;
    min-height: 68px;
}

/* --- Dark mode: wrapper backgrounds for size22.css variants not covered
   by the index49.css dark overrides (those only cover the base class names) */
[data-theme="dark"] .message-wrap-line,
[data-theme="dark"] .message-wrapper-line-date,
[data-theme="dark"] .message-wrapper-line-date-2,
[data-theme="dark"] .message-wrapper-line-datetime-px,
[data-theme="dark"] .message-wrapper-line-number999-px,
[data-theme="dark"] .message-wrapper-line-10,
[data-theme="dark"] .message-wrapper-line-46px,
[data-theme="dark"] .message-wrapper-line-88 {
    background-color: var(--surface-alt);
}

/* --- Priority/gradebook: widen Срок column so dd.mm.yyyy fits without clipping ---
   Uses sibling selector since colNameDeadline is unique to the priority page layout */
.colNameDeadline {
    width: 21%;
    white-space: nowrap;
}
.colNameDeadline ~ .colNameDream,
.colNameDeadline ~ .colNameDreams {
    width: 41%;
}

/* ===== Blue accent — replace all hardcoded brown throughout the app ===== */

/* Window caption tint (index49.css uses hardcoded rgba(84,66,58,0.2)) */
.window-caption,
.window-caption-2em,
.window-caption-full {
    background-color: rgba(30, 95, 168, 0.1) !important;
}
[data-theme="dark"] .window-caption,
[data-theme="dark"] .window-caption-2em,
[data-theme="dark"] .window-caption-full {
    background-color: rgba(30, 95, 168, 0.18) !important;
}

/* Interactive row hover (index49.css line 469) */
.interactive:hover,
.interactive-only:hover {
    background-color: rgba(30, 95, 168, 0.05) !important;
}
[data-theme="dark"] .interactive:hover,
[data-theme="dark"] .interactive-only:hover {
    background-color: rgba(30, 95, 168, 0.1) !important;
}

/* Radio button group — normal state matches button tokens */
.radio-container .radio-btn label {
    background: linear-gradient(to bottom, var(--btn-bg) 0%, var(--btn-bg-end) 100%);
    color: var(--btn-text);
    border-color: var(--btn-border);
}

/* Radio button group — checked/active state */
.radio-container .radio-btn input:checked + label {
    background: linear-gradient(to bottom, var(--btn-hover-bg) 0%, var(--btn-hover-bg-end) 100%);
    color: var(--btn-hover-text);
    border-color: var(--btn-hover-border);
}

/* Accordion (Rollup) — light mode */
.hide + label {
    color: var(--primary);
}
.hide + label:before {
    background-color: var(--primary);
    color: #fff;
}

/* Active submenu tab — light mode */
.btn-active {
    color: var(--primary);
}

/* Accordion open state — both modes */
.hide:checked + label {
    color: var(--text-muted);
}

/* Context menu hover */
.context-menu__item:hover {
    background: linear-gradient(to bottom, var(--btn-hover-bg) 0%, var(--btn-hover-bg-end) 100%);
    color: var(--btn-hover-text);
}

/* Window focus glow (.window-colored used for error/alert highlight) */
.window-colored {
    box-shadow: 0 0 10px 8px var(--primary-dark);
}

/* Custom checkbox checked state */
.custom-checkbox:checked + label::before {
    border-color: var(--primary);
    background-color: var(--primary);
}
.custom-checkbox:focus + label::before {
    box-shadow: 0 0 0 0.2rem rgba(30, 95, 168, 0.25);
}

/* ahref links — light mode (color35.css uses hardcoded #463232) */
.ahref a {
    color: var(--link);
}
.ahref a:hover {
    color: var(--link-hover);
}

/* General link colors unified through tokens */
a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:active  { color: var(--link); }
a:focus   { color: var(--link); }
.dialog-button       { color: var(--link); }
.dialog-button:hover { color: var(--link-hover); }

/* Table row links: entire rows are wrapped in <a> — text should follow
   the row's natural color (sphere background, status tint), not the link color */
.fin-acc-row a,
.fin-acc-row a:visited,
.fin-acc-row a:hover,
.fin-acc-row a:active,
.fin-acc-row a:focus {
    color: inherit;
}

/* Note cards and foto items: <a> wraps the entire card, text should be dark
   against the sphere gradient background, not blue link color */
.foto-item a,
.foto-item a:visited,
.foto-item a:hover,
.foto-item a:active,
.foto-item a:focus {
    color: inherit;
}

/* prompt-form border (index49.css line 740) */
#prompt-form {
    border-color: var(--primary);
}

/* Grid view row hover (tables.css uses hardcoded rgba(84,66,58,..)) */
.grid-view tr:hover td {
    background-color: rgba(30, 95, 168, 0.04);
}
[data-theme="dark"] .grid-view tr:hover td {
    background-color: rgba(30, 95, 168, 0.08);
}

/* url-window-right tint (url4.css line 50) */
.url-window-right {
    background-color: rgba(30, 95, 168, 0.07);
}

/* Profile tab active (acEdit12.css line 56) */
.tabs > label {
    background-color: rgba(30, 95, 168, 0.12);
}

/* Active filter buttons — dark mode already uses --primary via polish.css above;
   light mode now also uses --primary (btn-active rule above), so these are
   only needed for profit/expense/replacement which have their own semantic colors */
[data-theme="dark"] .btn-active {
    color: var(--primary);
}
[data-theme="dark"] .btn-active-profit {
    color: #5ecb5e;
}
[data-theme="dark"] .btn-active-expense {
    color: #ff7070;
}
[data-theme="dark"] .btn-active-replacement {
    color: #7ba3ff;
}