/* ============================================================
   Sitewide dark theme — minimal OLED style
   Loaded after main.css; converts every public page to the
   dark minimal design introduced on the homepage.
   ============================================================ */

:root {
    /* Flip the shared palette: pages use these vars for text colors */
    --dark-blue: #f4f5f6;
    --grey: #a2a8ad;
    --light-grey-blue: #63686d;
}

html { scrollbar-color: #2a2c2e #0a0a0b; }

body {
    background: #050505;
    color: #a2a8ad;
}

h1, h2, h3, h4, h5, h6 { color: #f4f5f6; }

::selection { background: rgba(84, 168, 199, .85); color: #04141c; }

a:focus-visible, button:focus-visible {
    outline: 2px solid #54a8c7;
    outline-offset: 3px;
    border-radius: 8px;
}

/* ---------- Loader ---------- */
#loader-wrapper { background-color: #050505; }

/* ---------- Global button: white pill ---------- */
body .btn-default {
    background-color: #f4f5f6;
    color: #0a0a0b;
    border-radius: 999px;
    padding: 11px 26px;
    transition: background .4s cubic-bezier(0.32, 0.72, 0, 1), transform .4s cubic-bezier(0.32, 0.72, 0, 1);
}
body .btn-default:hover { background-color: #ffffff; }
body .btn-default:active { transform: scale(.98); }

/* ---------- Section headers ---------- */
body .section-subtitle { color: #54a8c7; font-size: .72rem; letter-spacing: .22em; font-weight: 600; }
body .section-subtitle::before { background-color: #54a8c7; }
body .section-header h2 { color: #f4f5f6; font-weight: 600; letter-spacing: -.02em; }

/* ---------- Light bands -> subtle dark panels ---------- */
body .news-page__intro,
body .article-content__background,
body .shop-info {
    background-color: rgba(255, 255, 255, .03);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* ---------- Forms ---------- */
body .form-label { color: #a2a8ad; font-size: .85rem; font-weight: 600; }
body .form-control, body .form-select {
    background-color: #0b0b0c;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: #f4f5f6;
    padding: .65rem .9rem;
    transition: border-color .3s, box-shadow .3s, background .3s;
}
body .form-control::placeholder { color: #63686d; }
body .form-control:focus, body .form-select:focus {
    background-color: rgba(84, 168, 199, .07);
    border-color: #54a8c7;
    box-shadow: 0 0 0 4px rgba(84, 168, 199, .16);
    color: #f4f5f6;
}
body .form-check-input { accent-color: #54a8c7; }

/* ---------- News cards (news page + anywhere) ---------- */
body .news-item {
    background: #0b0b0c;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    overflow: hidden;
    padding-bottom: 1rem;
    transition: transform .6s cubic-bezier(0.32, 0.72, 0, 1), border-color .6s cubic-bezier(0.32, 0.72, 0, 1);
}
body .news-item:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, .14); }
body .news-item__image { margin-bottom: 0 !important; }
body .news-item__image img { height: 200px; filter: saturate(.78); transition: filter .6s, transform .5s; }
body .news-item:hover .news-item__image img { filter: saturate(1); }
body .news-item__title { color: #f4f5f6; padding: 1rem 1.15rem .1rem; font-weight: 600; }
body .news-item__title:hover { color: #54a8c7; }
body .news-item__description { color: #a2a8ad; padding: 0 1.15rem; height: auto; }
body .news-item__footer { color: #63686d; padding: 0 1.15rem; }

/* ---------- Single news article ---------- */
body .news-details .news-short__description { border-left-color: #54a8c7; }
body .news-content { color: #b8bdc2; }

/* ---------- Contact block ---------- */
body .contact-item i { color: #54a8c7; }
body .contact-item a { color: #f4f5f6; }
body .contact-item a:hover { color: #54a8c7; }
body .contact-description { color: #a2a8ad; }

/* ---------- Modals / dropdowns ---------- */
body .modal-content {
    background: #0e0e10;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 18px;
    color: #d5d9dc;
}
body .modal-header, body .modal-footer { border-color: rgba(255, 255, 255, .08); }

/* ---------- Pagination ---------- */
body .pagination .page-link {
    background: #0b0b0c;
    border-color: rgba(255, 255, 255, .1);
    color: #a2a8ad;
}
body .pagination .page-link:hover { background: rgba(255, 255, 255, .06); color: #f4f5f6; }
body .pagination .page-item.active .page-link {
    background: #f4f5f6;
    border-color: #f4f5f6;
    color: #0a0a0b;
}

/* ---------- Profile area ---------- */
body .profile-page { background: #050505; }
body .profile-card {
    background: #0b0b0c;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: none;
    border-radius: 20px;
}
body .canvas-map { background-color: #0f0f11; }

/* Sidebar menu (.pm) — token override */
body .pm {
    --pm-ink: #f4f5f6;
    --pm-muted: #a2a8ad;
    --pm-accent: #54a8c7;
    --pm-accent-soft: rgba(84, 168, 199, .13);
    --pm-line: rgba(255, 255, 255, .08);
    --pm-surface: rgba(255, 255, 255, .05);
}
body .pm-avatar { background: linear-gradient(135deg, #54a8c7, #2e6e86); box-shadow: 0 12px 28px -12px rgba(84, 168, 199, .45); }
body .pm-avatar img { border-color: #0b0b0c; }
body .pm-badge { border-color: #0b0b0c; }
body .pm-logout { color: #e5786f; }
body .pm-logout i { color: #e5786f; }
body .pm-logout:hover { background: rgba(229, 86, 75, .12); color: #ff9d95; }
body .pm-logout:hover i { color: #ff9d95; }

/* Profile content (.pf-wrap) & work cabinet (.wk-wrap) — token override */
body .pf-wrap, body .wk-wrap {
    --pf-ink: #f4f5f6;
    --pf-muted: #a2a8ad;
    --pf-soft: #7c8288;
    --pf-accent: #54a8c7;
    --pf-accent-2: #7cc9e2;
    --pf-accent-soft: rgba(84, 168, 199, .13);
    --pf-line: rgba(255, 255, 255, .16);
    --pf-surface: rgba(255, 255, 255, .05);
    --pf-divider: rgba(255, 255, 255, .08);
}
body .pf-asset-ico, body .wk-asset-ico { background: rgba(255, 255, 255, .09); }
body .pf-asset:hover { box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .85); }
body .pf-val.pf-yes { color: #4ec98a; }
body .pf-val.pf-no { color: #ff8d85; }
body .wk-branch-leader { background: rgba(255, 255, 255, .07); }

/* Settings tabs */
body .st-tabs { background: rgba(255, 255, 255, .06); }
body .st-tab { color: #a2a8ad; }
body .st-tab:hover { color: #f4f5f6; }
body .st-tab.active { background: rgba(255, 255, 255, .13); color: #f4f5f6; box-shadow: none; }
body .ga-lead { color: #a2a8ad; }
/* .ga-qr stays white — QR codes must keep a light background to scan */

/* ---------- Legacy join band (about page) ---------- */
body .join-us a { color: #0a0a0b; border-radius: 999px; }
body .join-us span::before { background-color: #54a8c7; }

/* ---------- Bootstrap text utility tune ---------- */
body .text-muted { color: #7c8288 !important; }
body .text-primary-emphasis { color: #7c8288 !important; }