/* ==========================================================================
   Navbar controls (bell, theme switch, language picker) and the dark theme.

   Loaded after the vendor theme stylesheet, so these rules win without needing
   !important except where the theme itself uses it.

   The dark theme is applied by setting data-ba-theme="dark" on <html>. An
   inline script in the page head does that before first paint, reading the
   ba_theme cookie, so the page never flashes white and then go dark.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand logo

   The source image is square (1254x1254). The theme's markup sized it by a
   percentage width, so the navbar's fixed height squashed it out of shape.
   Sizing by height and letting width follow keeps the aspect ratio whatever
   the navbar or sidebar does; object-fit is the belt to that braces, for the
   places the theme forces a width back on.
   -------------------------------------------------------------------------- */

.navbar .navbar-brand-wrapper .navbar-brand.brand-logo .ba-brand-img,
.navbar .navbar-brand-wrapper .navbar-brand img.ba-brand-img {
    height: 42px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini .ba-brand-img-mini,
.navbar .navbar-brand-wrapper .navbar-brand img.ba-brand-img-mini {
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.navbar .navbar-brand-wrapper .navbar-brand {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* The member layout sizes its own logo inline; keep it in proportion too. */
.navbar-brand-wrapper .brand-logo img {
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .navbar .navbar-brand-wrapper .navbar-brand.brand-logo .ba-brand-img { height: 34px; }
}

/* --------------------------------------------------------------------------
   Shared panel used by the bell and the language picker
   -------------------------------------------------------------------------- */

.ba-ui-item .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 42px;
    height: 42px;
    border-radius: 10px;
    color: inherit;
    transition: background-color .15s;
}

.ba-ui-item .nav-link:hover,
.ba-ui-item .nav-link:focus {
    background: rgba(132, 79, 193, .1);
}

.ba-ui-item .nav-link i {
    font-size: 1.35rem;
    line-height: 1;
}

.ba-bell {
    position: relative;
}

.ba-bell-count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e5443b;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/*
  Bootstrap's .navbar-nav .dropdown-menu sets position:static — that is its
  behaviour for a COLLAPSED navbar, normally undone by .navbar-expand-*. This
  theme's navbar carries no navbar-expand class, so every dropdown inside it
  stays static and Popper's transform then places the panel from its position
  in the flow rather than under the bell. The panel opened, but 42px of it sat
  above the top of the window.

  Specificity has to beat .navbar-nav .dropdown-menu (0,2,0), hence the
  three-class selector rather than a bare .ba-panel.
*/
.navbar .ba-panel.dropdown-menu,
.navbar-nav .ba-panel.dropdown-menu {
    position: absolute !important;
}

.ba-panel {
    width: 380px;
    max-width: calc(100vw - 1.5rem);
    padding: 0;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);
    overflow: hidden;
}

/* The theme sets border-radius: 0 on .dropdown-menu with two classes of
   specificity, so the panel rendered with square corners while every other
   surface in the system is rounded. Same fight as the position rule above, and
   the same answer. */
.navbar .ba-panel.dropdown-menu,
.navbar-nav .ba-panel.dropdown-menu {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);
}

.ba-panel-narrow {
    width: 268px;
}

.ba-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1.05rem;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
    font-size: .95rem;
    font-weight: 600;
}

/* The count belongs beside the word, not only on the bell — the panel should
   say how much is waiting without the reader going back to the icon. */
.ba-panel-head .ba-head-count {
    display: inline-block;
    min-width: 20px;
    margin-left: .4rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--ba-primary, #7c3aed);
    color: var(--ba-on-primary, #fff);
    font-size: .68rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
}

.ba-mark-all {
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ba-primary, #7c3aed);
}

.ba-mark-all:hover { text-decoration: underline; }

.ba-panel-body {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;      /* scrolling the list must not scroll the page */
    scrollbar-width: thin;
}

.ba-panel-body::-webkit-scrollbar        { width: 8px; }
.ba-panel-body::-webkit-scrollbar-thumb  { background: #d8dde5; border-radius: 999px; }
.ba-panel-body::-webkit-scrollbar-track  { background: transparent; }

.ba-panel-empty {
    padding: 2.6rem 1rem;
    text-align: center;
    color: #98a2b3;
    font-size: .875rem;
}

.ba-panel-empty-icon {
    font-size: 2rem;
    opacity: .35;
    margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   One notification row
   -------------------------------------------------------------------------- */

.ba-notif {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .85rem 1.05rem .85rem 1.05rem;
    border-bottom: 1px solid #f2f4f7;
    text-decoration: none;
    color: inherit;
    transition: background-color .12s;
}

.ba-notif:last-child { border-bottom: 0; }
.ba-notif:hover      { background: #f7f8fa; color: inherit; }

/* Unread is marked three ways — a bar, a faint wash and a dot — because the
   wash alone was a flat lilac that had nothing to do with the church's colour
   and read as decoration rather than as state. */
.ba-notif.is-unread {
    background: color-mix(in srgb, var(--ba-primary, #7c3aed) 5%, #fff);
}

.ba-notif.is-unread:hover {
    background: color-mix(in srgb, var(--ba-primary, #7c3aed) 9%, #fff);
}

.ba-notif.is-unread::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--ba-primary, #7c3aed);
}

.ba-notif-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The tiles arrived as Bootstrap's bg-success / bg-warning and so on: fully
   saturated blocks of colour that shouted over the words they were labelling
   and had nothing to do with the church's own palette. A tinted tile with a
   coloured glyph carries the same meaning quietly.

   !important because .bg-* is a utility class and would otherwise win. */
.ba-notif-icon.bg-success   { background: #e8f6ee !important; color: #12683f; }
.ba-notif-icon.bg-primary   { background: #eaf0fd !important; color: #1d4ed8; }
.ba-notif-icon.bg-info      { background: #e6f6fa !important; color: #0e7490; }
.ba-notif-icon.bg-warning   { background: #fdf3e3 !important; color: #92400e; }
.ba-notif-icon.bg-danger    { background: #fdecec !important; color: #96201f; }
.ba-notif-icon.bg-secondary { background: #eef1f5 !important; color: #475467; }
.ba-notif-icon.bg-dark      { background: #eaecef !important; color: #1f2937; }

.ba-notif-icon i { font-size: 1.05rem; }

.ba-notif-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .12rem;
}

.ba-notif-title {
    font-size: .855rem;
    font-weight: 600;
    line-height: 1.35;
    color: #101828;
    /* A long title wrapped to three lines and pushed the body out of sight. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.ba-notif-body {
    font-size: .79rem;
    line-height: 1.45;
    color: #475467;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.ba-notif-ago {
    font-size: .7rem;
    font-weight: 500;
    color: #98a2b3;
    margin-top: .15rem;
}

/* An unread row carries a dot on the right, so the state survives being read
   in a screenshot or by somebody who does not see the tint. */
.ba-notif.is-unread .ba-notif-text::after {
    content: "";
    position: absolute;
    top: 1.15rem;
    right: 1.05rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ba-primary, #7c3aed);
}

.ba-notif.is-unread .ba-notif-title,
.ba-notif.is-unread .ba-notif-body { padding-right: 14px; }

/* A footer, so a long list has an end and a way out of it. */
.ba-panel-foot {
    padding: .7rem 1.05rem;
    border-top: 1px solid #eef0f3;
    background: #fbfbfd;
    text-align: center;
}

.ba-panel-foot a {
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ba-primary, #7c3aed);
}

.ba-panel-foot a:hover { text-decoration: underline; }

@media (max-width: 576px) {
    /* On a phone the panel is the width of the screen, and its rows are tap
       targets rather than mouse targets. */
    .ba-panel { width: calc(100vw - 1rem); }
    .ba-notif { padding: 1rem 1.05rem; }
}

/* --------------------------------------------------------------------------
   Theme switch — one icon shows at a time
   -------------------------------------------------------------------------- */

.ba-theme-toggle .ba-icon-dark  { display: none; }
[data-ba-theme="dark"] .ba-theme-toggle .ba-icon-light { display: none; }
[data-ba-theme="dark"] .ba-theme-toggle .ba-icon-dark  { display: inline-block; }

/* --------------------------------------------------------------------------
   Language picker
   -------------------------------------------------------------------------- */

.ba-lang-flag { font-size: 1.05rem; line-height: 1; }

.ba-lang-code {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.ba-lang-option {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1rem;
    text-decoration: none;
    color: inherit;
    font-size: .875rem;
    transition: background-color .12s;
}

.ba-lang-option:hover     { background: #f8f9fb; color: inherit; }
.ba-lang-option.is-active { background: #f5f2fd; font-weight: 600; }

.ba-lang-name       { flex: 1 1 auto; line-height: 1.25; }
.ba-lang-name small { display: block; font-size: .7rem; color: #9ca3af; font-weight: 400; }

/* Marks English as the language everything falls back to. */
.ba-lang-default {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .35rem;
    border-radius: 4px;
    background: #eef2ff;
    color: #6366f1;
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

[data-ba-theme="dark"] .ba-lang-default {
    background: rgba(99, 102, 241, .2);
    color: #a5b4fc;
}

.ba-lang-option .typcn-tick { color: #844fc1; font-size: 1.1rem; }

/* ==========================================================================
   Dark theme
   ==========================================================================
   Scoped to [data-ba-theme="dark"]. The vendor stylesheet hard-codes light
   colours throughout, so this overrides the surfaces that actually show:
   backgrounds, cards, tables, inputs and text. Anything not listed inherits,
   which is why the variables are declared first.
   -------------------------------------------------------------------------- */

[data-ba-theme="dark"] {
    --ba-bg:        #12161f;
    --ba-surface:   #1a1f2b;
    --ba-surface-2: #222836;
    --ba-border:    #2c3444;
    --ba-text:      #e4e7ec;
    --ba-text-dim:  #98a2b3;
    --ba-accent:    #a97ce0;

    color-scheme: dark;
}

[data-ba-theme="dark"] body,
[data-ba-theme="dark"] .container-scroller,
[data-ba-theme="dark"] .main-panel,
[data-ba-theme="dark"] .content-wrapper {
    background: var(--ba-bg);
    color: var(--ba-text);
}

[data-ba-theme="dark"] .navbar,
[data-ba-theme="dark"] .navbar .navbar-menu-wrapper,
[data-ba-theme="dark"] .navbar .navbar-brand-wrapper,
[data-ba-theme="dark"] .navbar-breadcrumb {
    background: var(--ba-surface) !important;
    color: var(--ba-text);
    border-color: var(--ba-border);
}

[data-ba-theme="dark"] .sidebar,
[data-ba-theme="dark"] .sidebar .nav {
    background: var(--ba-surface) !important;
}

[data-ba-theme="dark"] .sidebar .nav .nav-item .nav-link,
[data-ba-theme="dark"] .sidebar .nav .nav-item .nav-link i {
    color: var(--ba-text-dim) !important;
}

[data-ba-theme="dark"] .sidebar .nav .nav-item.active > .nav-link,
[data-ba-theme="dark"] .sidebar .nav .nav-item .nav-link:hover {
    color: var(--ba-text) !important;
    background: var(--ba-surface-2) !important;
}

[data-ba-theme="dark"] .card,
[data-ba-theme="dark"] .stat-card,
[data-ba-theme="dark"] .modal-content,
[data-ba-theme="dark"] .dropdown-menu,
[data-ba-theme="dark"] .list-group-item,
[data-ba-theme="dark"] .accordion-item {
    background: var(--ba-surface);
    color: var(--ba-text);
    border-color: var(--ba-border);
}

[data-ba-theme="dark"] .card-body,
[data-ba-theme="dark"] .card-header,
[data-ba-theme="dark"] .card-footer {
    background: transparent;
    color: inherit;
    border-color: var(--ba-border);
}

[data-ba-theme="dark"] h1, [data-ba-theme="dark"] h2, [data-ba-theme="dark"] h3,
[data-ba-theme="dark"] h4, [data-ba-theme="dark"] h5, [data-ba-theme="dark"] h6,
[data-ba-theme="dark"] .card-title,
[data-ba-theme="dark"] label,
[data-ba-theme="dark"] p {
    color: var(--ba-text);
}

[data-ba-theme="dark"] .text-muted,
[data-ba-theme="dark"] small.text-muted {
    color: var(--ba-text-dim) !important;
}

[data-ba-theme="dark"] .table,
[data-ba-theme="dark"] .table > :not(caption) > * > * {
    color: var(--ba-text);
    background-color: transparent;
    border-color: var(--ba-border);
}

[data-ba-theme="dark"] .table thead th {
    background: var(--ba-surface-2);
    color: var(--ba-text);
    border-color: var(--ba-border);
}

[data-ba-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, .025);
    color: var(--ba-text);
}

[data-ba-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, .05);
    color: var(--ba-text);
}

[data-ba-theme="dark"] .form-control,
[data-ba-theme="dark"] .form-select,
[data-ba-theme="dark"] textarea,
[data-ba-theme="dark"] .input-group-text {
    background: var(--ba-surface-2);
    border-color: var(--ba-border);
    color: var(--ba-text);
}

[data-ba-theme="dark"] .form-control::placeholder { color: #6b7480; }

[data-ba-theme="dark"] .form-control:focus,
[data-ba-theme="dark"] .form-select:focus {
    background: var(--ba-surface-2);
    color: var(--ba-text);
    border-color: var(--ba-accent);
    box-shadow: 0 0 0 .2rem rgba(169, 124, 224, .2);
}

[data-ba-theme="dark"] .btn-outline-secondary {
    color: var(--ba-text-dim);
    border-color: var(--ba-border);
}

[data-ba-theme="dark"] .btn-outline-secondary:hover {
    background: var(--ba-surface-2);
    color: var(--ba-text);
}

[data-ba-theme="dark"] .border,
[data-ba-theme="dark"] .border-top,
[data-ba-theme="dark"] .border-bottom,
[data-ba-theme="dark"] .border-start,
[data-ba-theme="dark"] .border-end,
[data-ba-theme="dark"] hr {
    border-color: var(--ba-border) !important;
}

[data-ba-theme="dark"] .bg-white,
[data-ba-theme="dark"] .bg-light {
    background: var(--ba-surface) !important;
    color: var(--ba-text);
}

/* The navbar panels */
[data-ba-theme="dark"] .ba-panel        { border-color: var(--ba-border); }
[data-ba-theme="dark"] .ba-panel-head   { background: var(--ba-surface-2); border-color: var(--ba-border); }
[data-ba-theme="dark"] .ba-notif        { border-color: var(--ba-border); }
[data-ba-theme="dark"] .ba-notif:hover  { background: var(--ba-surface-2); }
[data-ba-theme="dark"] .ba-notif.is-unread       { background: rgba(169, 124, 224, .12); }
[data-ba-theme="dark"] .ba-notif.is-unread:hover { background: rgba(169, 124, 224, .18); }
[data-ba-theme="dark"] .ba-notif-title  { color: var(--ba-text); }
[data-ba-theme="dark"] .ba-notif-body   { color: var(--ba-text-dim); }
[data-ba-theme="dark"] .ba-lang-option:hover     { background: var(--ba-surface-2); }
[data-ba-theme="dark"] .ba-lang-option.is-active { background: rgba(169, 124, 224, .14); }
[data-ba-theme="dark"] .ba-bell-count   { box-shadow: 0 0 0 2px var(--ba-surface); }

/* The permission picker on roles.php */
[data-ba-theme="dark"] .perm-list  { background: var(--ba-surface); }
[data-ba-theme="dark"] .perm-item  { border-color: var(--ba-border); }
[data-ba-theme="dark"] .perm-item:hover { background: var(--ba-surface-2); border-color: #3a4354; }
[data-ba-theme="dark"] .perm-item:has(.perm-check:checked) {
    background: rgba(169, 124, 224, .14);
    border-color: var(--ba-accent);
}
[data-ba-theme="dark"] .perm-label { color: var(--ba-text); }
[data-ba-theme="dark"] .perm-desc  { color: var(--ba-text-dim); }

/* Charts and images are the two things that look wrong when simply inverted,
   so they are dimmed rather than recoloured. */
[data-ba-theme="dark"] img:not(.ba-keep-bright) { filter: brightness(.92); }

@media (max-width: 767.98px) {
    .ba-panel { width: calc(100vw - 1.5rem); }
    .ba-lang-code { display: none; }
}

/* ==========================================================================
   Right-to-left (Arabic)

   dir="rtl" on <html> already flips text flow, and anything laid out with
   flexbox or grid mirrors on its own. What needs help is the vendor theme,
   which hard-codes `left` and `float: left` in the places that matter: the
   fixed sidebar, the content offset beside it, and the notification badge.
   ========================================================================== */

[dir="rtl"] body { text-align: right; }

/* The sidebar is position:fixed at left:0 in the theme. */
[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
}

/* …and the panel beside it is pushed over with margin-left. */
[dir="rtl"] .main-panel {
    margin-left: 0;
    margin-right: var(--ba-sidebar-width, 255px);
}

@media (max-width: 991.98px) {
    [dir="rtl"] .main-panel { margin-right: 0; }
}

[dir="rtl"] .sidebar .nav .nav-item .nav-link .menu-icon {
    margin-right: 0;
    margin-left: .75rem;
}

/* Chevrons on collapsible menus point the other way. */
[dir="rtl"] .sidebar .nav .nav-item .nav-link .menu-arrow {
    margin-left: 0;
    margin-right: auto;
    transform: scaleX(-1);
}

[dir="rtl"] .navbar .navbar-brand-wrapper { order: 2; }
[dir="rtl"] .navbar .navbar-menu-wrapper { order: 1; }

/* Bootstrap's float-based utilities do not mirror themselves. */
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end   { float: left  !important; }
[dir="rtl"] .text-start  { text-align: right !important; }
[dir="rtl"] .text-end    { text-align: left  !important; }
[dir="rtl"] .me-auto     { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .ms-auto     { margin-left: 0 !important;  margin-right: auto !important; }

/* The unread badge is absolutely positioned against the bell. */
[dir="rtl"] .ba-bell-count {
    right: auto;
    left: 2px;
}

/* Panels hang off the opposite edge of their trigger. */
[dir="rtl"] .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
}

/* Accent bars and left borders read as right borders. */
[dir="rtl"] .scripture-block,
[dir="rtl"] .prayer-block {
    border-left: 0;
    border-right: 4px solid;
}
[dir="rtl"] .scripture-block { border-right-color: var(--ba-secondary, #c9a227); }
[dir="rtl"] .prayer-block    { border-right-color: #0d6efd; }

[dir="rtl"] .member-sidebar .nav-link.active {
    border-left: 0;
    border-right: 3px solid #0d6efd;
}

/* DataTables' search icon is a left-positioned background image. */
[dir="rtl"] .ba-page .dataTables_filter input {
    padding: .48rem 2.1rem .48rem .8rem;
    background-position: right .7rem center;
}

/* Numbers, money and dates stay left-to-right even inside RTL text —
   "GH₵ 1,250.00" must not render as "00.250,1 ₵HG". */
[dir="rtl"] .kpi-value,
[dir="rtl"] .pg-stat-n,
[dir="rtl"] .dash-hero-stat .n,
[dir="rtl"] table.dataTable td {
    unicode-bidi: plaintext;
}