/* Application fonts:
   - Kalpurush            -> default for English/Latin AND Bengali text
   - Nikosh               -> Bengali fallback (loaded from public/fonts/)
   - ArabicWeb (Arabic.ttf) -> Arabic
   Kalpurush covers both Latin and Bengali glyphs, so it is the site-wide
   default; Arabic still uses ArabicWeb since Kalpurush has no Arabic. */
@font-face {
    font-family: 'Kalpurush';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/kalpurush.ttf') format('truetype');
}
@font-face {
    font-family: 'SolaimanLipi';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/SolaimanLipi.ttf') format('truetype');
}
@font-face {
    font-family: 'SolaimanLipi';
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/SolaimanLipi.ttf') format('truetype');
}
@font-face {
    font-family: 'Kalpurush';
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/kalpurush.ttf') format('truetype');
}
@font-face {
    font-family: 'Nikosh';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/Nikosh.ttf') format('truetype');
}
@font-face {
    font-family: 'Nikosh';
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/Nikosh.ttf') format('truetype');
}
@font-face {
    font-family: 'ArabicWeb';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/Arabic.ttf') format('truetype');
}
@font-face {
    font-family: 'ArabicWeb';
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/Arabic.ttf') format('truetype');
}

:root {
    --sidebar-width: 260px;
    --primary-green: #0f5132;
    --saudi-green: #006c35;
    --ink: #1a2332;
    --ink-soft: #5b6677;
    --surface: #ffffff;
    --surface-muted: #f6f8fa;
    --border-soft: #ecf0f3;

    --stat-green: #0d8a4f;
    --stat-green-soft: #e6f6ee;
    --stat-amber: #d97a06;
    --stat-amber-soft: #fdf1e1;
    --stat-blue: #2563eb;
    --stat-blue-soft: #e7eefd;
    --stat-rose: #d93a5c;
    --stat-rose-soft: #fcebef;
    --stat-teal: #0891a8;
    --stat-teal-soft: #e2f4f7;
    --stat-violet: #7c4fd1;
    --stat-violet-soft: #f1ebfb;
}

body {
    /* Override Bootstrap's font variable so every Bootstrap component
       (sidebar .nav-link, navbar, buttons, etc.) inherits the same
       system-ui-first stack the public site uses for English, while
       Bengali/Arabic glyphs still fall back to SolaimanLipi/ArabicWeb. */
    --bs-body-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'SolaimanLipi', 'Kalpurush', 'Nikosh', 'ArabicWeb', sans-serif;
    font-family: var(--bs-body-font-family);
    background-color: var(--surface-muted);
    overflow-x: hidden;
    color: var(--ink);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Bengali/Indic conjunct shaping is done automatically by the browser's
   text engine (HarfBuzz). We must NOT force OpenType features via
   font-feature-settings -- doing so overrides the script-aware default
   shaping and breaks certain conjuncts (notably য-ফলা / ্য). We only keep
   text-rendering:optimizeLegibility, which is safe and helps kerning. */
* {
    text-rendering: optimizeLegibility;
}

/* Kalpurush is the default for both English and Bengali. Arabic still uses
   ArabicWeb (Kalpurush has no Arabic glyphs); Nikosh stays as a Bengali
   fallback in case Kalpurush fails to load. */
html:lang(bn) body { --bs-body-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'SolaimanLipi', 'Kalpurush', 'Nikosh', 'ArabicWeb', sans-serif; font-family: var(--bs-body-font-family); }
html:lang(ar) body { --bs-body-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'ArabicWeb', 'SolaimanLipi', 'Kalpurush', 'Nikosh', sans-serif; font-family: var(--bs-body-font-family); }

/* Form controls (inputs, selects, buttons, textareas) and dropdown options
   don't inherit the body font by default, so set it explicitly. This makes
   <select> menus and their <option> lists use the same ArabicWeb Latin
   glyphs as the rest of the UI. */
input, select, textarea, button, optgroup, option,
.form-control, .form-select {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'SolaimanLipi', 'Kalpurush', 'Nikosh', 'ArabicWeb', sans-serif;
}

#app-wrapper {
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    z-index: 1030;
    flex-shrink: 0;
    background: linear-gradient(195deg, #0b3b22 0%, #102a1c 65%, #0a1f15 100%) !important;
}

.sidebar .sidebar-brand {
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Slim, subtle sidebar scrollbar for a cleaner look */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar .nav-link {
    border-radius: 9px;
    padding: 0.62rem 0.9rem;
    opacity: 0.78;
    font-size: 0.91rem;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

.sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--saudi-green), #04532a);
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ---- Grouped sidebar ---- */
.sidebar .sidebar-link { color: #fff; text-decoration: none; }
.sidebar .sidebar-group-toggle {
    color: #fff; text-decoration: none; border-radius: 9px;
    padding: 0.62rem 0.9rem; opacity: 0.62; font-size: 0.78rem;
    font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    cursor: pointer; transition: opacity .15s ease, background-color .15s ease;
}
.sidebar .sidebar-group-toggle:hover { opacity: 0.95; background-color: rgba(255,255,255,0.06); }
.sidebar .sidebar-group-toggle.open { opacity: 0.95; }
.sidebar .sidebar-group-toggle .chev { font-size: 0.7rem; transition: transform .2s ease; transform: rotate(0deg); }
.sidebar .sidebar-group-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sidebar .sidebar-group-toggle.collapsed .chev { transform: rotate(0deg); }

.sidebar .sidebar-subnav { margin: 2px 0 6px; padding-left: 8px; border-left: 2px solid rgba(255,255,255,0.08); margin-left: 14px; }
.sidebar .sidebar-link.sub {
    border-radius: 8px; padding: 0.5rem 0.8rem; opacity: 0.72;
    font-size: 0.88rem; display: flex; align-items: center; gap: 8px;
    transition: background-color .15s ease, opacity .15s ease;
}
.sidebar .sidebar-link.sub:hover { background-color: rgba(255,255,255,0.08); opacity: 1; }
.sidebar .sidebar-link.sub:focus,
.sidebar .sidebar-link.sub:active {
    background-color: transparent; opacity: 0.72; outline: none;
}
.sidebar .sidebar-link.sub:focus:hover {
    background-color: rgba(255,255,255,0.08); opacity: 1;
}
.sidebar .sidebar-link.sub.active,
.sidebar .sidebar-link.sub.active:focus {
    background: linear-gradient(135deg, var(--saudi-green), #04532a);
    opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.sidebar .sidebar-link.sub i { font-size: 0.95rem; width: 18px; text-align: center; }
.sidebar .sidebar-subheading {
    list-style: none;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.45);
    padding: 0.7rem 0.8rem 0.3rem;
    margin-top: 2px;
}
.sidebar .sidebar-subnav > .sidebar-subheading:first-child { margin-top: 0; padding-top: 0.3rem; }

.main-content {
    min-width: 0;
    background:
        radial-gradient(1200px 400px at 100% -5%, rgba(0,108,53,0.04), transparent 60%),
        radial-gradient(900px 360px at -10% 0%, rgba(13,138,79,0.045), transparent 55%),
        var(--surface-muted);
}

.main-content > .navbar {
    background-color: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-soft) !important;
    box-shadow: 0 1px 3px rgba(16,24,40,0.04);
}

.whatsapp-float {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    z-index: 1040;
    text-decoration: none;
}

.whatsapp-float:hover {
    color: #fff;
    transform: scale(1.05);
}

/* ---------- Dashboard stat cards ---------- */

/* ============================================================
   DASHBOARD WIDGETS — colorful, animated, unique
   ============================================================ */
@keyframes cardRise {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes iconPop {
    0% { transform: scale(.6) rotate(-8deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes sheen {
    0% { transform: translateX(-120%) skewX(-18deg); }
    100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes floatBlob {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(6px,-6px) scale(1.12); }
}
.card-stat {
    border: none; border-radius: 18px; background: var(--surface);
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 18px rgba(16,24,40,0.06);
    transition: box-shadow .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
    position: relative; overflow: hidden; animation: cardRise .5s both;
}
.row > [class*="col-"]:nth-child(1) .card-stat { animation-delay: .04s; }
.row > [class*="col-"]:nth-child(2) .card-stat { animation-delay: .10s; }
.row > [class*="col-"]:nth-child(3) .card-stat { animation-delay: .16s; }
.row > [class*="col-"]:nth-child(4) .card-stat { animation-delay: .22s; }
.card-stat::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--stat-green), var(--stat-teal), var(--stat-violet));
    transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.card-stat::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    opacity: 0; pointer-events: none;
}
.card-stat:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(16,24,40,0.16); }
.card-stat:hover::before { transform: scaleX(1); }
.card-stat:hover::after { opacity: 1; animation: sheen .9s ease; }
.stat-icon-badge {
    width: 50px; height: 50px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0; color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    animation: iconPop .5s both .2s;
}
.card-stat:hover .stat-icon-badge { transform: scale(1.12) rotate(-6deg); }
.stat-icon-badge.tone-green  { background: linear-gradient(145deg, #12b76a, #067647); box-shadow: 0 8px 20px rgba(6,118,71,.35); }
.stat-icon-badge.tone-amber  { background: linear-gradient(145deg, #f79009, #b54708); box-shadow: 0 8px 20px rgba(181,71,8,.32); }
.stat-icon-badge.tone-blue   { background: linear-gradient(145deg, #2e90fa, #1849a9); box-shadow: 0 8px 20px rgba(24,73,169,.32); }
.stat-icon-badge.tone-rose   { background: linear-gradient(145deg, #f63d68, #a11043); box-shadow: 0 8px 20px rgba(161,16,67,.32); }
.stat-icon-badge.tone-teal   { background: linear-gradient(145deg, #15b6cf, #0e7090); box-shadow: 0 8px 20px rgba(14,112,144,.32); }
.stat-icon-badge.tone-violet { background: linear-gradient(145deg, #9b6ade, #5925b8); box-shadow: 0 8px 20px rgba(89,37,184,.32); }
.stat-label { font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-size: 1.85rem; font-weight: 800; color: var(--ink); line-height: 1.12; letter-spacing: -.02em; }
.stat-sub { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }
.stat-sub.tone-green { color: #067647; }
.stat-sub.tone-amber { color: #b54708; }
.stat-sub.tone-rose  { color: #a11043; }
.cms-widget-head { margin-top: 6px; animation: cardRise .5s both .1s; }
.cms-head-icon {
    width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff;
    background: linear-gradient(145deg, #12b76a, #0a5c36);
    box-shadow: 0 10px 24px rgba(10,92,54,0.32);
    position: relative; overflow: hidden;
}
.cms-head-icon::after {
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 60%);
}
.card-cms-stat {
    border: none; border-radius: 18px; background: var(--surface);
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 6px 18px rgba(16,24,40,0.06);
    transition: box-shadow .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
    position: relative; overflow: hidden; animation: cardRise .5s both;
}
.row > [class*="col-"]:nth-child(1) .card-cms-stat { animation-delay: .05s; }
.row > [class*="col-"]:nth-child(2) .card-cms-stat { animation-delay: .10s; }
.row > [class*="col-"]:nth-child(3) .card-cms-stat { animation-delay: .15s; }
.row > [class*="col-"]:nth-child(4) .card-cms-stat { animation-delay: .20s; }
.row > [class*="col-"]:nth-child(5) .card-cms-stat { animation-delay: .25s; }
.row > [class*="col-"]:nth-child(6) .card-cms-stat { animation-delay: .30s; }
.row > [class*="col-"]:nth-child(7) .card-cms-stat { animation-delay: .35s; }
.row > [class*="col-"]:nth-child(8) .card-cms-stat { animation-delay: .40s; }
.card-cms-stat::after {
    content: ""; position: absolute; right: -24px; top: -24px;
    width: 92px; height: 92px; border-radius: 50%; opacity: 0.14;
}
.card-cms-stat::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.card-cms-stat:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(16,24,40,0.16); }
.card-cms-stat:hover::after { animation: floatBlob 2.4s ease-in-out infinite; opacity: .2; }
.card-cms-stat:hover::before { transform: scaleX(1); }
.card-cms-stat .card-body { padding: 1.2rem 1.2rem; position: relative; z-index: 1; }
.cms-stat-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; margin-bottom: 0.7rem; color: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
    transition: transform .3s cubic-bezier(.2,.8,.2,1); animation: iconPop .5s both .25s;
}
.card-cms-stat:hover .cms-stat-icon { transform: scale(1.12) rotate(-6deg); }
.cms-stat-value { font-size: 1.85rem; font-weight: 800; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; }
.cms-stat-label { font-size: 0.84rem; font-weight: 700; color: var(--ink-soft); }
.card-cms-stat.tone-green  .cms-stat-icon { background: linear-gradient(145deg, #12b76a, #067647); }
.card-cms-stat.tone-green::after  { background: #12b76a; }
.card-cms-stat.tone-green::before { background: linear-gradient(90deg,#12b76a,#067647); }
.card-cms-stat.tone-teal   .cms-stat-icon { background: linear-gradient(145deg, #15b6cf, #0e7090); }
.card-cms-stat.tone-teal::after   { background: #15b6cf; }
.card-cms-stat.tone-teal::before  { background: linear-gradient(90deg,#15b6cf,#0e7090); }
.card-cms-stat.tone-amber  .cms-stat-icon { background: linear-gradient(145deg, #f79009, #b54708); }
.card-cms-stat.tone-amber::after  { background: #f79009; }
.card-cms-stat.tone-amber::before { background: linear-gradient(90deg,#f79009,#b54708); }
.card-cms-stat.tone-rose   .cms-stat-icon { background: linear-gradient(145deg, #f63d68, #a11043); }
.card-cms-stat.tone-rose::after   { background: #f63d68; }
.card-cms-stat.tone-rose::before  { background: linear-gradient(90deg,#f63d68,#a11043); }
.card-cms-stat.tone-indigo .cms-stat-icon { background: linear-gradient(145deg, #9b6ade, #5925b8); }
.card-cms-stat.tone-indigo::after { background: #9b6ade; }
.card-cms-stat.tone-indigo::before{ background: linear-gradient(90deg,#9b6ade,#5925b8); }
@media (prefers-reduced-motion: reduce) {
    .card-stat, .card-cms-stat, .stat-icon-badge, .cms-stat-icon, .cms-widget-head { animation: none; }
    .card-stat:hover::after, .card-cms-stat:hover::after { animation: none; }
}

.section-card {
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,0.03), 0 6px 18px rgba(16,24,40,0.05);
    background: var(--surface);
}

.section-card .card-title {
    font-weight: 700;
    color: var(--ink);
}

.quick-action-btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-width: 1.5px;
}

.activity-feed-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}

.activity-feed-item:last-child {
    border-bottom: none;
}

.activity-feed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stat-green);
    flex-shrink: 0;
    margin-top: 6px;
}

.table-actions a, .table-actions button {
    margin-inline-end: 4px;
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.25s ease-in-out;
    }
    .sidebar.show {
        transform: translateX(0);
    }
    [dir="rtl"] .sidebar {
        transform: translateX(100%);
    }
    [dir="rtl"] .sidebar.show {
        transform: translateX(0);
    }
}

.brand-stamp-preview, .brand-logo-preview {
    max-height: 90px;
    max-width: 180px;
    object-fit: contain;
    border: 1px dashed #ccc;
    padding: 6px;
    border-radius: 8px;
}

.letterhead-preview {
    border: 1px dashed #ccc;
    border-radius: 8px;
    padding: 8px;
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f3f3f3 10px, #f3f3f3 20px);
}

.letterhead-preview img {
    width: 100%;
    display: block;
}

/* ---------------------------------------------------------------------------
   Focus styling for form controls and Tom Select dropdowns.
   By default Bootstrap (and the Tom Select bootstrap5 theme) paint a wide blue
   glow around a control on focus -- on <select> boxes this reads as a "box
   around the whole thing" when clicked. We replace that with a soft focus ring
   in the app's green so it looks intentional and on-brand, and drop the harsh
   default outline.
--------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--saudi-green, #006c35);
    box-shadow: 0 0 0 0.18rem rgba(0, 108, 53, 0.18);
    outline: none;
}

/* Tom Select renders its own .ts-control box in place of the native <select>.
   Match the same soft green focus ring and remove the default blue shadow. */
.ts-wrapper.form-select,
.ts-wrapper.form-control {
    padding: 0;
}
.ts-control {
    border-color: #dee2e6;
    box-shadow: none;
}
.ts-wrapper.focus .ts-control,
.ts-control:focus,
.ts-control input:focus {
    border-color: var(--saudi-green, #006c35) !important;
    box-shadow: 0 0 0 0.18rem rgba(0, 108, 53, 0.18) !important;
    outline: none !important;
}
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
    outline: none;
}
/* The open dropdown panel: subtle shadow, no heavy outline. Because
   dropdownParent is 'body', the panel is positioned against the page and needs
   a high z-index to sit above cards, tables, sidebars and modals. */
.ts-dropdown {
    border: 1px solid #e3e8ee;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10);
    z-index: 3000;
}
/* Show the full option list instead of a short scrolling box. Tom Select
   defaults to a 200px scroll area; we raise the cap to most of the viewport so
   normal lists appear in full with no inner scrollbar, and only very long lists
   (dozens of options) scroll -- and even then never hide behind a container. */
.ts-dropdown .ts-dropdown-content {
    max-height: 500px;
    overflow-y: auto;
}
.ts-dropdown .active {
    background-color: rgba(0, 108, 53, 0.10);
    color: inherit;
}

/* Bootstrap dropdown menus: same treatment -- cap the height at 500px with an
   internal scroll for very long menus, and lift them above other content so
   they are never hidden inside a container. */
.dropdown-menu {
    max-height: 500px;
    overflow-y: auto;
    z-index: 3000;
}

/* flatpickr calendar: keep it above everything and never clipped. With
   static:true the calendar renders in-flow, so its container must allow
   overflow while it is open. High z-index keeps it over cards and tables. */
.flatpickr-calendar {
    z-index: 3050 !important;
}
.flatpickr-calendar.static {
    position: absolute;
}
.table-responsive:has(.flatpickr-calendar.open),
.card:has(.flatpickr-calendar.open),
.card-body:has(.flatpickr-calendar.open) {
    overflow: visible !important;
}

/* Safety net: a table (or any scroll box) with an OPEN dropdown inside should
   not clip it. When a dropdown is shown, let the wrapper overflow so the menu
   is fully visible even if fixed positioning is unavailable. Combined with
   Popper's fixed strategy (set in JS), this keeps every dropdown from being cut
   off or triggering an inner scrollbar. */
.table-responsive:has(.dropdown-menu.show),
.table-responsive:has(.ts-dropdown),
.card:has(.dropdown-menu.show) {
    overflow: visible;
}

/* Dropdown trigger buttons (e.g. the unit / rate-label pickers on invoice
   rows) also get a blue Bootstrap focus glow by default. Soften it to the
   same subtle green ring so clicking a dropdown doesn't flash a blue box. */
.btn:focus,
.btn:focus-visible,
.dropdown-toggle:focus,
.btn-check:focus + .btn {
    box-shadow: 0 0 0 0.18rem rgba(0, 108, 53, 0.18);
    outline: none;
}
/* Icon-only / subtle buttons: no ring at all, just a gentle background. */
.btn-outline-secondary:focus,
.btn-light:focus,
.btn-sm.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.16rem rgba(0, 108, 53, 0.14);
}


/* Sidebar menu font: match the public site's English font (system-ui first,
   Bengali/Arabic fall back automatically). */
.sidebar, .sidebar-menu, .sidebar-brand,
.sidebar .nav-link,
.sidebar .sidebar-link,
.sidebar .sidebar-group-toggle,
.sidebar .sidebar-group-toggle span,
.sidebar .sidebar-nav,
.sidebar .sidebar-subnav,
.sidebar-nav li, .sidebar-nav a, .sidebar-nav span {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'SolaimanLipi', 'Kalpurush', 'Nikosh', 'ArabicWeb', sans-serif !important;
}