/* Night mode (v2.1, user 8 Nov): dark background, light text.
   Everything here applies only under <html data-theme="dark"> (static/js/theme.js), so day mode
   is exactly the existing public.css / post-form.css / account.css / help.css look.
   Loaded by base.html after the page styles; the [data-theme] prefix also outranks them.
   When a light-mode colour is added elsewhere, add its night version here.
   (Old v1 registration / recovery / password styles are dead and not covered.) */

/* ----- Palette: public.css variables ----- */

[data-theme="dark"] {
    color-scheme: dark; /* native controls, scrollbars and date pickers go dark too */
    --notice-navy: #0b1620;
    --notice-navy-light: #22394a;
    --notice-ink: #e3eaee;
    --notice-muted: #9aaab5;
    --notice-line: #2e3f4b;
    --notice-paper: #182530;
    --notice-ground: #0f1a23;
    --notice-bubble: #213140;
    --notice-danger: #f0675b;

    /* Night-only helpers */
    --night-field: #121e28;
    --night-field-line: #3a4c58;
    --night-raised: #22323e;
    --night-raised-hover: #2b3d4a;
    --night-heading: #f1f5f7;
    --night-text: #cfd9df;
    --night-soft-text: #b4c3cc;
    --night-shadow: rgb(0 0 0 / 35%);
}

[data-theme="dark"] body.public-page.noticeboard-page {
    --notice-ground: #0c151d;
}

/* Category colours, a little brighter so they read on dark */
[data-theme="dark"] .public-page .cat-all { --cat: #5b9be0; }
[data-theme="dark"] .public-page .cat-mine { --cat: #2bb3b5; }
[data-theme="dark"] .public-page .cat-event { --cat: #b583d6; }
[data-theme="dark"] .public-page .cat-service { --cat: #93a6b5; }
[data-theme="dark"] .public-page .cat-sell { --cat: #4cc083; }
[data-theme="dark"] .public-page .cat-free { --cat: #f06292; }
[data-theme="dark"] .public-page .cat-lost { --cat: #f0675b; }
[data-theme="dark"] .public-page .cat-announce { --cat: #f0954f; }

/* ----- Header, chips, filters (public.css) ----- */

[data-theme="dark"] .public-page .topbar {
    border-bottom: 1px solid var(--notice-line);
}

[data-theme="dark"] .public-page .icon-button:hover {
    background: rgb(255 255 255 / 8%);
}

[data-theme="dark"] .public-page .feed-sticky-header {
    box-shadow: 0 5px 14px var(--night-shadow);
}

[data-theme="dark"] .public-page .chip {
    border-color: var(--night-field-line);
    background: var(--notice-paper);
    color: var(--cat, var(--night-soft-text));
}

[data-theme="dark"] .public-page .chip:hover {
    background: color-mix(in srgb, var(--cat, #e77d32) 14%, var(--notice-paper));
}

[data-theme="dark"] .public-page .chip.active {
    background: color-mix(in srgb, var(--cat, #e77d32) 24%, var(--notice-paper));
}

[data-theme="dark"] .public-page .search-bar input,
[data-theme="dark"] .public-page .search-bar select,
[data-theme="dark"] .public-page .comment-form textarea,
[data-theme="dark"] .public-page .comment-edit-form textarea {
    border-color: var(--night-field-line);
    background: var(--night-field);
    color: var(--notice-ink);
}

[data-theme="dark"] .public-page .filter-select {
    color: var(--night-soft-text);
}

[data-theme="dark"] .public-page .reset-button,
[data-theme="dark"] .public-page .load-more-button {
    border-color: var(--night-field-line);
    background: var(--notice-paper);
    color: var(--night-soft-text);
}

/* ----- Buttons ----- */

[data-theme="dark"] .public-page .post-button {
    border-color: var(--night-field-line);
    background: var(--night-raised);
    color: var(--night-text);
}

[data-theme="dark"] .public-page .post-button:hover {
    border-color: #536673;
    background: var(--night-raised-hover);
}

/* ----- Feed, cards, comments ----- */

[data-theme="dark"] .public-page .post {
    box-shadow: 0 4px 14px var(--night-shadow);
}

[data-theme="dark"] .public-page .post-title {
    color: var(--night-heading);
}

[data-theme="dark"] .public-page .post-body {
    color: var(--night-text);
}

[data-theme="dark"] .public-page .rich-text a,
[data-theme="dark"] .public-page .comment-body a {
    color: #8cc4ff;
}

[data-theme="dark"] .public-page .favourite-button {
    color: #7d8d98;
}

[data-theme="dark"] .public-page .favourite-button.is-favourite {
    color: var(--notice-star);
}

[data-theme="dark"] .public-page .post-footer {
    color: #a3b3bd;
}

[data-theme="dark"] .public-page .flag-button {
    color: #8696a1;
}

[data-theme="dark"] .public-page .flag-button.is-flagged {
    color: var(--notice-danger);
}

[data-theme="dark"] .public-page .flag-reason {
    border-color: var(--night-field-line);
    background: var(--notice-paper);
    color: var(--notice-ink);
}

[data-theme="dark"] .public-page .flag-reason:hover,
[data-theme="dark"] .public-page .flag-reason:focus-visible {
    border-color: var(--notice-danger);
    color: var(--notice-danger);
}

[data-theme="dark"] .public-page .comment-form .ai-suggestion,
[data-theme="dark"] .post-form-page .ai-suggestion {
    border-color: #8a5a33;
    background: #33261b;
}

[data-theme="dark"] .post-form-page .ai-suggestion-text {
    color: var(--notice-ink);
}

/* ----- Form pages: post form, sign-in, messages, help, privacy (post-form.css) ----- */

[data-theme="dark"] .post-form-page .form-page-heading h2 {
    color: var(--night-heading);
}

[data-theme="dark"] .post-form-page .form-error,
[data-theme="dark"] .post-form-page .form-message--error {
    border-color: #6b3530;
    background: #3a1f1d;
    color: #f4b4ac;
}

[data-theme="dark"] .post-form-page .post-editor {
    border-color: var(--notice-line);
    background: var(--notice-paper);
    box-shadow: 0 4px 14px var(--night-shadow);
}

[data-theme="dark"] .post-form-page .form-field > label,
[data-theme="dark"] .post-form-page .form-field-label,
[data-theme="dark"] .post-form-page .form-checkbox label,
[data-theme="dark"] .post-form-page .signin-note {
    color: var(--night-text);
}

[data-theme="dark"] .post-form-page .form-field input[type="text"],
[data-theme="dark"] .post-form-page .form-field input[type="password"],
[data-theme="dark"] .post-form-page .form-field select,
[data-theme="dark"] .post-form-page .form-field textarea {
    border-color: var(--night-field-line);
    background: var(--night-field);
    color: var(--notice-ink);
}

[data-theme="dark"] .post-form-page .form-display-value,
[data-theme="dark"] .post-form-page .form-message {
    border-color: var(--night-field-line);
    background: var(--night-raised);
    color: var(--night-soft-text);
}

[data-theme="dark"] .post-form-page .form-message--error {
    border-color: #6b3530;
    background: #3a1f1d;
    color: #f4b4ac;
}

[data-theme="dark"] .post-form-page .form-checkbox {
    border-color: var(--notice-line);
    background: var(--night-raised);
}

[data-theme="dark"] .post-form-page .form-actions {
    border-top-color: var(--notice-line);
}

[data-theme="dark"] .post-form-page .form-actions .primary-action {
    border-color: #e77d32;
    background: #e77d32;
    color: #fff;
}

[data-theme="dark"] .post-form-page .form-actions .primary-action:hover {
    border-color: #c96320;
    background: #c96320;
}

[data-theme="dark"] .post-form-page .form-actions .cancel-action {
    color: var(--night-soft-text);
}

[data-theme="dark"] .post-form-page .icon-action--save svg {
    stroke: #3ccf7b;
}

[data-theme="dark"] .post-form-page .icon-action--cancel svg {
    stroke: #f0675b;
}

[data-theme="dark"] .post-form-page .image-message {
    color: #f0675b;
}

[data-theme="dark"] .post-form-page .icon-action:hover,
[data-theme="dark"] .post-form-page .image-action:hover {
    background: var(--night-raised);
}

[data-theme="dark"] .post-form-page .login-links a {
    color: #8fc0dd;
}

[data-theme="dark"] .post-form-page .image-box {
    border-color: var(--night-field-line);
    background: var(--night-field);
}

[data-theme="dark"] .post-form-page .image-placeholder {
    color: var(--notice-muted);
}

[data-theme="dark"] .post-form-page .image-action {
    color: var(--notice-ink);
}

[data-theme="dark"] .post-form-page .image-action--danger {
    color: #f0675b;
}

/* Google's own dark button style */
[data-theme="dark"] .post-form-page .google-signin-button {
    border-color: #8e918f;
    background: #131314;
    color: #e3e3e3;
}

[data-theme="dark"] .post-form-page .google-signin-button:hover,
[data-theme="dark"] .post-form-page .google-signin-button:focus-visible {
    background: #2a2a2c;
}

/* ----- Description editor (Quill snow theme) ----- */

[data-theme="dark"] .post-form-page .ql-toolbar.ql-snow {
    border-color: var(--night-field-line);
    background: var(--night-raised);
}

[data-theme="dark"] .post-form-page .ql-container.ql-snow {
    border-color: var(--night-field-line);
    background: var(--night-field);
}

[data-theme="dark"] .post-form-page .ql-editor {
    color: var(--notice-ink);
}

[data-theme="dark"] .post-form-page .ql-editor.ql-blank::before {
    color: #7d8d98;
}

[data-theme="dark"] .post-form-page .ql-snow .ql-stroke {
    stroke: #c5d1d8;
}

[data-theme="dark"] .post-form-page .ql-snow .ql-fill {
    fill: #c5d1d8;
}

[data-theme="dark"] .post-form-page .ql-snow .ql-picker {
    color: #c5d1d8;
}

[data-theme="dark"] .post-form-page .ql-snow button:hover .ql-stroke,
[data-theme="dark"] .post-form-page .ql-snow button.ql-active .ql-stroke {
    stroke: #f0954f;
}

[data-theme="dark"] .post-form-page .ql-snow button:hover .ql-fill,
[data-theme="dark"] .post-form-page .ql-snow button.ql-active .ql-fill {
    fill: #f0954f;
}

/* ----- My Account (account.css) ----- */

[data-theme="dark"] .account-page .account-heading h2,
[data-theme="dark"] .account-page .account-section-heading h3 {
    color: var(--night-heading);
}

[data-theme="dark"] .account-page .account-summary {
    border-color: var(--notice-line);
    background: var(--notice-paper);
    box-shadow: 0 4px 14px var(--night-shadow);
}

[data-theme="dark"] .account-page .account-summary-item + .account-summary-item {
    border-color: var(--notice-line);
}

[data-theme="dark"] .account-page .account-summary-item dt {
    color: var(--notice-muted);
}

[data-theme="dark"] .account-page .account-summary-item dd {
    color: var(--notice-ink);
}

[data-theme="dark"] .account-page .section-note {
    color: var(--night-soft-text);
}

[data-theme="dark"] .account-page .account-message {
    border-color: #6b3530;
    background: #3a1f1d;
    color: #f4b4ac;
}

[data-theme="dark"] .account-page .account-message--success {
    border-color: #2c5a3d;
    background: #16301f;
    color: #8fd4a9;
}

[data-theme="dark"] .account-page .account-location-form select {
    border-color: var(--night-field-line);
    background: var(--night-field);
    color: var(--notice-ink);
}