/* =========================================================
   Banoon Design System (bn-*)
   Layered on top of Admiro. Uses CSS variables for theming.
   Light tokens on :root, dark overrides on body.dark-only,
   RTL adjustments under html[dir="rtl"].
   ========================================================= */

/* -------- Design tokens (light) -------- */
:root {
    --bn-primary: #048D8C;
    --bn-primary-50:  #e6f4f4;
    --bn-primary-100: #c2e4e3;
    --bn-primary-200: #99d2d1;
    --bn-primary-300: #6fc0bf;
    --bn-primary-400: #46aeac;
    --bn-primary-500: #048D8C;
    --bn-primary-600: #047e7d;
    --bn-primary-700: #036a69;
    --bn-primary-800: #024f4e;
    --bn-primary-900: #012e2d;

    --bn-accent: #F39159;

    --bn-success: #16a34a;
    --bn-warning: #f59e0b;
    --bn-danger:  #dc2626;
    --bn-info:    #0ea5e9;

    --bn-bg:        #f6f7f9;
    --bn-surface:   #ffffff;
    --bn-surface-2: #f1f3f5;

    --bn-border:     #e5e7eb;
    --bn-text:       #1f2937;
    --bn-text-muted: #6b7280;
    --bn-text-soft:  #9ca3af;

    --bn-radius-sm:   6px;
    --bn-radius:      10px;
    --bn-radius-lg:   14px;
    --bn-radius-pill: 999px;

    --bn-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --bn-shadow:    0 4px 12px rgba(15, 23, 42, .07);
    --bn-shadow-lg: 0 12px 32px rgba(15, 23, 42, .10);

    --bn-space-1: 4px;
    --bn-space-2: 8px;
    --bn-space-3: 12px;
    --bn-space-4: 16px;
    --bn-space-5: 20px;
    --bn-space-6: 24px;
    --bn-space-7: 32px;
    --bn-space-8: 40px;

    --bn-font: 'Nunito Sans', system-ui, sans-serif;

    --bn-fs-xs:  12px;
    --bn-fs-sm:  13px;
    --bn-fs-md:  14px;
    --bn-fs-base:16px;
    --bn-fs-lg:  18px;
    --bn-fs-xl:  22px;
    --bn-fs-2xl: 24px;
    --bn-fs-3xl: 28px;

    --bn-duration: 180ms;
    --bn-ease: cubic-bezier(.4, 0, .2, 1);
}

/* -------- Dark theme (Admiro body.dark-only) -------- */
body.dark-only {
    --bn-bg:        #15191c;
    --bn-surface:   #1c2125;
    --bn-surface-2: #2a2c2c;
    --bn-border:    #2a2c2c;
    --bn-text:       #e6e6e6;
    --bn-text-muted: #b6b0b0;
    --bn-text-soft:  #8b8b8b;

    --bn-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --bn-shadow:    0 4px 12px rgba(0, 0, 0, .45);
    --bn-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

/* -------- Header logo -------- */
.bn-header-logo {
    max-height: 44px;
    width: auto;
}

/* -------- Layout helpers -------- */
.bn-stack {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-4);
}

.bn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bn-space-3);
    align-items: center;
}

.bn-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* -------- Page header -------- */
.bn-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bn-space-3);
    margin-bottom: var(--bn-space-6);
    padding-bottom: var(--bn-space-4);
    border-bottom: 1px solid var(--bn-border);
}

.bn-page-title {
    font-family: var(--bn-font);
    font-size: var(--bn-fs-2xl);
    font-weight: 700;
    color: var(--bn-text);
    margin: 0;
}

.bn-page-subtitle {
    font-size: var(--bn-fs-md);
    color: var(--bn-text-muted);
    margin: var(--bn-space-1) 0 0;
}

.bn-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bn-space-2);
    align-items: center;
    font-size: var(--bn-fs-sm);
    color: var(--bn-text-muted);
    margin: 0;
    padding: 0;
    list-style: none;
}
.bn-breadcrumb a {
    color: var(--bn-text-muted);
    text-decoration: none;
    transition: color var(--bn-duration) var(--bn-ease);
}
.bn-breadcrumb a:hover { color: var(--bn-primary); }
.bn-breadcrumb li + li::before {
    content: "/";
    margin-inline-end: var(--bn-space-2);
    color: var(--bn-text-soft);
}

/* -------- Card -------- */
.bn-card {
    background: var(--bn-surface);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    box-shadow: var(--bn-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--bn-duration) var(--bn-ease);
}
.bn-card:hover { box-shadow: var(--bn-shadow); }

.bn-card-header {
    padding: var(--bn-space-4) var(--bn-space-5);
    border-bottom: 1px solid var(--bn-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bn-space-3);
    font-weight: 600;
    color: var(--bn-text);
}

.bn-card-title { font-size: var(--bn-fs-lg); font-weight: 600; color: var(--bn-text); margin: 0; }
.bn-card-subtitle { font-size: var(--bn-fs-sm); color: var(--bn-text-muted); margin: 4px 0 0; }
.bn-card-actions { display:flex; gap: var(--bn-space-2); align-items:center; }

.bn-card-body {
    padding: var(--bn-space-5);
    color: var(--bn-text);
}

.bn-card-footer {
    padding: var(--bn-space-4) var(--bn-space-5);
    border-top: 1px solid var(--bn-border);
    background: var(--bn-surface-2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bn-space-3);
}

.bn-card-section {
    padding: var(--bn-space-4) var(--bn-space-5);
    border-bottom: 1px solid var(--bn-border);
}

/* -------- Buttons -------- */
.bn-btn {
    --bn-btn-bg: var(--bn-surface);
    --bn-btn-fg: var(--bn-text);
    --bn-btn-border: var(--bn-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bn-space-2);
    padding: var(--bn-space-2) var(--bn-space-5);
    min-height: 40px;
    font-family: var(--bn-font);
    font-size: var(--bn-fs-md);
    font-weight: 600;
    line-height: 1.2;
    color: var(--bn-btn-fg);
    background: var(--bn-btn-bg);
    border: 1px solid var(--bn-btn-border);
    border-radius: var(--bn-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--bn-duration) var(--bn-ease),
                color var(--bn-duration) var(--bn-ease),
                border-color var(--bn-duration) var(--bn-ease),
                box-shadow var(--bn-duration) var(--bn-ease),
                transform var(--bn-duration) var(--bn-ease);
}
.bn-btn:hover { box-shadow: var(--bn-shadow-sm); }
.bn-btn:active { transform: translateY(1px); }
.bn-btn:focus-visible {
    outline: 2px solid var(--bn-primary-300);
    outline-offset: 2px;
}
.bn-btn:disabled,
.bn-btn[aria-disabled="true"] {
    opacity: .6;
    cursor: not-allowed;
}

.bn-btn-primary {
    --bn-btn-bg: var(--bn-primary);
    --bn-btn-fg: #ffffff;
    --bn-btn-border: var(--bn-primary);
}
.bn-btn-primary:hover { --bn-btn-bg: var(--bn-primary-600); --bn-btn-border: var(--bn-primary-600); }

.bn-btn-secondary {
    --bn-btn-bg: var(--bn-surface-2);
    --bn-btn-fg: var(--bn-text);
    --bn-btn-border: var(--bn-border);
}
.bn-btn-secondary:hover { --bn-btn-bg: var(--bn-border); }

.bn-btn-outline {
    --bn-btn-bg: transparent;
    --bn-btn-fg: var(--bn-primary);
    --bn-btn-border: var(--bn-primary);
}
.bn-btn-outline:hover {
    --bn-btn-bg: var(--bn-primary-50);
    --bn-btn-fg: var(--bn-primary-700);
}

.bn-btn-ghost {
    --bn-btn-bg: transparent;
    --bn-btn-fg: var(--bn-text);
    --bn-btn-border: transparent;
}
.bn-btn-ghost:hover { --bn-btn-bg: var(--bn-surface-2); }

.bn-btn-danger {
    --bn-btn-bg: var(--bn-danger);
    --bn-btn-fg: #ffffff;
    --bn-btn-border: var(--bn-danger);
}
.bn-btn-danger:hover { filter: brightness(.95); }

.bn-btn-sm {
    padding: var(--bn-space-1) var(--bn-space-3);
    min-height: 32px;
    font-size: var(--bn-fs-sm);
}
.bn-btn-lg {
    padding: var(--bn-space-3) var(--bn-space-6);
    min-height: 48px;
    font-size: var(--bn-fs-lg);
}
.bn-btn-block {
    display: flex;
    width: 100%;
}

/* Loading button: hides text-effect via opacity and shows spinner */
.bn-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.bn-btn-loading::after {
    content: "";
    position: absolute;
    width: 16px; height: 16px;
    top: 50%; left: 50%;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    color: #ffffff;
    animation: bn-spin .7s linear infinite;
}
.bn-btn-outline.bn-btn-loading::after,
.bn-btn-ghost.bn-btn-loading::after,
.bn-btn-secondary.bn-btn-loading::after {
    color: var(--bn-primary);
}

@keyframes bn-spin {
    to { transform: rotate(360deg); }
}

/* -------- Badges -------- */
.bn-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--bn-space-1);
    padding: 2px var(--bn-space-2);
    font-size: var(--bn-fs-xs);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--bn-radius-pill);
    background: var(--bn-surface-2);
    color: var(--bn-text);
    border: 1px solid var(--bn-border);
    white-space: nowrap;
}
.bn-badge-success { background: rgba(22, 163, 74, .12); color: var(--bn-success); border-color: transparent; }
.bn-badge-warning { background: rgba(245, 158, 11, .15); color: var(--bn-warning); border-color: transparent; }
.bn-badge-danger  { background: rgba(220, 38, 38, .12); color: var(--bn-danger);  border-color: transparent; }
.bn-badge-info    { background: rgba(14, 165, 233, .12); color: var(--bn-info);   border-color: transparent; }
.bn-badge-neutral { background: var(--bn-surface-2); color: var(--bn-text-muted); border-color: var(--bn-border); }

/* -------- Form fields -------- */
.bn-field {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-2);
    margin-bottom: var(--bn-space-4);
}

.bn-label {
    font-size: var(--bn-fs-sm);
    font-weight: 600;
    color: var(--bn-text);
}

.bn-required {
    color: var(--bn-danger);
    margin-inline-start: 2px;
}

.bn-input,
.bn-select,
.bn-textarea {
    width: 100%;
    padding: var(--bn-space-3) var(--bn-space-4);
    font-family: var(--bn-font);
    font-size: var(--bn-fs-md);
    color: var(--bn-text);
    background: var(--bn-surface);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius);
    transition: border-color var(--bn-duration) var(--bn-ease),
                box-shadow var(--bn-duration) var(--bn-ease);
}
.bn-input::placeholder,
.bn-textarea::placeholder { color: var(--bn-text-soft); }

.bn-input:focus,
.bn-select:focus,
.bn-textarea:focus {
    outline: none;
    border-color: var(--bn-primary);
    box-shadow: 0 0 0 3px rgba(4, 141, 140, .15);
}

.bn-textarea { min-height: 96px; resize: vertical; }

.bn-field-error {
    font-size: var(--bn-fs-xs);
    color: var(--bn-danger);
}

.bn-field-hint {
    font-size: var(--bn-fs-xs);
    color: var(--bn-text-muted);
}

/* -------- Empty state -------- */
.bn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--bn-space-8) var(--bn-space-5);
    color: var(--bn-text-muted);
}
.bn-empty-icon {
    width: 64px; height: 64px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: var(--bn-surface-2);
    color: var(--bn-text-soft);
    border-radius: var(--bn-radius-pill);
    margin-bottom: var(--bn-space-4);
}
.bn-empty-title {
    font-size: var(--bn-fs-lg);
    font-weight: 700;
    color: var(--bn-text);
    margin: 0 0 var(--bn-space-2);
}
.bn-empty-text {
    font-size: var(--bn-fs-md);
    color: var(--bn-text-muted);
    margin: 0;
    max-width: 420px;
}

/* -------- Flash / Alert messages -------- */
.bn-flash {
    position: relative;
    padding: var(--bn-space-3) var(--bn-space-5);
    border-radius: var(--bn-radius);
    background: var(--bn-surface);
    border: 1px solid var(--bn-border);
    color: var(--bn-text);
    border-inline-start: 4px solid var(--bn-text-muted);
    margin-bottom: var(--bn-space-4);
    font-size: var(--bn-fs-md);
}
.bn-flash-success { border-inline-start-color: var(--bn-success); background: rgba(22, 163, 74, .06); }
.bn-flash-warning { border-inline-start-color: var(--bn-warning); background: rgba(245, 158, 11, .07); }
.bn-flash-danger  { border-inline-start-color: var(--bn-danger);  background: rgba(220, 38, 38, .06); }
.bn-flash-info    { border-inline-start-color: var(--bn-info);    background: rgba(14, 165, 233, .06); }

/* -------- Loading spinner -------- */
.bn-loading {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid var(--bn-primary-200);
    border-top-color: var(--bn-primary);
    border-radius: 50%;
    animation: bn-spin .7s linear infinite;
}

/* -------- Table -------- */
.bn-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bn-surface);
    color: var(--bn-text);
    font-size: var(--bn-fs-md);
}
.bn-table thead th {
    text-align: start;
    padding: var(--bn-space-3) var(--bn-space-4);
    font-weight: 600;
    color: var(--bn-text-muted);
    background: var(--bn-surface-2);
    border-bottom: 1px solid var(--bn-border);
    font-size: var(--bn-fs-sm);
}
.bn-table tbody td {
    padding: var(--bn-space-3) var(--bn-space-4);
    border-bottom: 1px solid var(--bn-border);
    vertical-align: middle;
}
.bn-table tbody tr:last-child td { border-bottom: 0; }
.bn-table tbody tr:hover { background: var(--bn-surface-2); }
.bn-table--zebra tbody tr:nth-child(even) { background: var(--bn-surface-2); }

/* -------- Avatar -------- */
.bn-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--bn-radius-pill);
    overflow: hidden;
    background: var(--bn-surface-2);
    color: var(--bn-text-muted);
    font-weight: 700;
    font-size: var(--bn-fs-sm);
    flex-shrink: 0;
}
.bn-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.bn-avatar-fallback {
    background: var(--bn-primary-100);
    color: var(--bn-primary-700);
}

/* -------- Sidebar active state (overrides Admiro default) -------- */
.sidebar-list.active > .sidebar-link {
    background: rgba(4, 141, 140, .08);
    color: var(--bn-primary);
    border-radius: var(--bn-radius);
}
.sidebar-list.active > .sidebar-link h6 {
    color: var(--bn-primary);
}

/* -------- RTL adjustments -------- */
html[dir="rtl"] .bn-flash {
    border-inline-start: 1px solid var(--bn-border);
    border-inline-end: 4px solid var(--bn-text-muted);
}
html[dir="rtl"] .bn-flash-success { border-inline-end-color: var(--bn-success); border-inline-start-color: var(--bn-border); }
html[dir="rtl"] .bn-flash-warning { border-inline-end-color: var(--bn-warning); border-inline-start-color: var(--bn-border); }
html[dir="rtl"] .bn-flash-danger  { border-inline-end-color: var(--bn-danger);  border-inline-start-color: var(--bn-border); }
html[dir="rtl"] .bn-flash-info    { border-inline-end-color: var(--bn-info);    border-inline-start-color: var(--bn-border); }

html[dir="rtl"] .bn-page-header .bn-breadcrumb {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

html[dir="rtl"] .bn-breadcrumb li + li::before {
    content: "\\";
}

/* -------- Page header actions -------- */
.bn-page-header-actions { display:flex; flex-wrap:wrap; gap: var(--bn-space-2); }

/* -------- Flash close button -------- */
.bn-flash-close { background: transparent; border: 0; color: inherit; opacity:.6; cursor: pointer; padding: 4px 8px; font-size: 16px; line-height:1; }
.bn-flash-close:hover { opacity: 1; }

/* -------- Field error variants -------- */
.bn-input-error, .bn-select-error, .bn-textarea-error { border-color: var(--bn-danger) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

/* -------- Modal -------- */
.bn-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: grid; place-items: center; z-index: 1050; padding: var(--bn-space-4); }
.bn-modal { background: var(--bn-surface); border-radius: var(--bn-radius-lg); box-shadow: var(--bn-shadow-lg); width: 100%; max-width: 480px; overflow: hidden; }
.bn-modal-header { padding: var(--bn-space-5) var(--bn-space-5) var(--bn-space-3); }
.bn-modal-title { margin: 0; font-size: var(--bn-fs-xl); font-weight: 600; color: var(--bn-text); }
.bn-modal-body { padding: 0 var(--bn-space-5) var(--bn-space-5); color: var(--bn-text-muted); }
.bn-modal-footer { display: flex; justify-content: flex-end; gap: var(--bn-space-2); padding: var(--bn-space-4) var(--bn-space-5); background: var(--bn-surface-2); border-top: 1px solid var(--bn-border); }
[x-cloak] { display: none !important; }


/* =========================================================
   COMPAT / BRIDGE LAYER
   Restyles Admiro/Bootstrap 5 classes used across legacy
   pages so they automatically match the new design system,
   without having to migrate every page. Scoped under
   .page-body so it only affects dashboard content area.
   ========================================================= */

.page-body {
    background: var(--bn-bg);
    color: var(--bn-text);
    font-family: var(--bn-font);
    font-size: var(--bn-fs-base);
}

/* -------- Buttons (.btn / .btn-*) -------- */
.page-body .btn,
.login-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bn-space-2);
    font-family: var(--bn-font);
    font-size: var(--bn-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 16px;
    border-radius: var(--bn-radius);
    border: 1px solid transparent;
    transition: background var(--bn-duration) var(--bn-ease),
                border-color var(--bn-duration) var(--bn-ease),
                color var(--bn-duration) var(--bn-ease),
                box-shadow var(--bn-duration) var(--bn-ease),
                transform var(--bn-duration) var(--bn-ease);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.page-body .btn:focus-visible,
.login-card .btn:focus-visible { outline: 2px solid var(--bn-primary); outline-offset: 2px; }

.page-body .btn-sm,
.login-card .btn-sm { font-size: var(--bn-fs-xs); padding: 6px 12px; border-radius: var(--bn-radius-sm); }
.page-body .btn-lg,
.login-card .btn-lg { font-size: var(--bn-fs-base); padding: 12px 22px; }

.page-body .btn-primary,
.login-card .btn-primary {
    background: var(--bn-primary);
    border-color: var(--bn-primary);
    color: #fff;
}
.page-body .btn-primary:hover,
.login-card .btn-primary:hover { background: var(--bn-primary-600); border-color: var(--bn-primary-600); color: #fff; }

.page-body .btn-secondary { background: var(--bn-surface-2); border-color: var(--bn-border); color: var(--bn-text); }
.page-body .btn-secondary:hover { background: var(--bn-border); color: var(--bn-text); }

.page-body .btn-success { background: var(--bn-success); border-color: var(--bn-success); color: #fff; }
.page-body .btn-success:hover { background: #128a3f; border-color: #128a3f; color: #fff; }

.page-body .btn-danger { background: var(--bn-danger); border-color: var(--bn-danger); color: #fff; }
.page-body .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.page-body .btn-warning { background: var(--bn-warning); border-color: var(--bn-warning); color: #fff; }
.page-body .btn-warning:hover { background: #d97706; border-color: #d97706; color: #fff; }

.page-body .btn-info { background: var(--bn-info); border-color: var(--bn-info); color: #fff; }
.page-body .btn-info:hover { background: #0284c7; border-color: #0284c7; color: #fff; }

.page-body .btn-light { background: var(--bn-surface); border-color: var(--bn-border); color: var(--bn-text); }
.page-body .btn-light:hover { background: var(--bn-surface-2); color: var(--bn-text); }

.page-body .btn-outline-primary { background: transparent; border-color: var(--bn-primary); color: var(--bn-primary); }
.page-body .btn-outline-primary:hover { background: var(--bn-primary); color: #fff; }

.page-body .btn-outline-info { background: transparent; border-color: var(--bn-info); color: var(--bn-info); }
.page-body .btn-outline-info:hover { background: var(--bn-info); color: #fff; }

.page-body .btn-outline-danger { background: transparent; border-color: var(--bn-danger); color: var(--bn-danger); }
.page-body .btn-outline-danger:hover { background: var(--bn-danger); color: #fff; }

.page-body .btn-outline-success { background: transparent; border-color: var(--bn-success); color: var(--bn-success); }
.page-body .btn-outline-success:hover { background: var(--bn-success); color: #fff; }

.page-body .btn-outline-warning { background: transparent; border-color: var(--bn-warning); color: var(--bn-warning); }
.page-body .btn-outline-warning:hover { background: var(--bn-warning); color: #fff; }

.page-body .btn-outline-light { background: transparent; border-color: var(--bn-border); color: var(--bn-text-muted); }
.page-body .btn-outline-light:hover { background: var(--bn-surface-2); color: var(--bn-text); }

.page-body .btn-outline-secondary { background: transparent; border-color: var(--bn-border); color: var(--bn-text-muted); }
.page-body .btn-outline-secondary:hover { background: var(--bn-surface-2); color: var(--bn-text); }

.page-body .btn[disabled],
.page-body .btn:disabled { opacity: .55; cursor: not-allowed; }

/* -------- Form inputs (.form-control / .form-select / .form-check) -------- */
.page-body .form-control,
.page-body .form-select,
.login-card .form-control {
    width: 100%;
    font-family: var(--bn-font);
    font-size: var(--bn-fs-base);
    color: var(--bn-text);
    background: var(--bn-surface);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius);
    padding: 10px 14px;
    line-height: 1.4;
    transition: border-color var(--bn-duration) var(--bn-ease),
                box-shadow var(--bn-duration) var(--bn-ease);
    box-shadow: none;
}
.page-body .form-control::placeholder,
.login-card .form-control::placeholder { color: var(--bn-text-soft); }

.page-body .form-control:focus,
.page-body .form-select:focus,
.login-card .form-control:focus {
    border-color: var(--bn-primary);
    box-shadow: 0 0 0 3px rgba(4,141,140,.12);
    outline: none;
}

.page-body .form-control.is-invalid,
.page-body .form-select.is-invalid {
    border-color: var(--bn-danger);
}
.page-body .form-control.is-invalid:focus,
.page-body .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

.page-body .invalid-feedback {
    color: var(--bn-danger);
    font-size: var(--bn-fs-xs);
    margin-top: 6px;
    display: block;
}

.page-body .form-label,
.page-body .col-form-label,
.login-card label.col-form-label,
.login-card label.form-label {
    display: inline-block;
    font-size: var(--bn-fs-sm);
    font-weight: 600;
    color: var(--bn-text);
    margin-bottom: 6px;
}

.page-body .form-text { color: var(--bn-text-muted); font-size: var(--bn-fs-xs); }

.page-body .form-check-input {
    width: 1.05rem; height: 1.05rem;
    border: 1.5px solid var(--bn-border);
    border-radius: var(--bn-radius-sm);
    background-color: var(--bn-surface);
    margin-top: 0.25rem;
}
.page-body .form-check-input:checked {
    background-color: var(--bn-primary);
    border-color: var(--bn-primary);
}
.page-body .form-check-input:focus {
    border-color: var(--bn-primary);
    box-shadow: 0 0 0 3px rgba(4,141,140,.18);
    outline: none;
}
.page-body .form-check-label { font-size: var(--bn-fs-sm); color: var(--bn-text); margin-inline-start: 6px; }

.page-body .input-group-text {
    background: var(--bn-surface-2);
    border: 1px solid var(--bn-border);
    color: var(--bn-text-muted);
    border-radius: var(--bn-radius);
}

/* Required asterisk that appears in form labels */
.page-body label .text-danger,
.login-card label .text-danger { color: var(--bn-danger) !important; font-weight: 700; margin-inline-start: 2px; }

/* -------- Cards (.card / .card-header / .card-body / .card-footer) -------- */
.page-body .card {
    background: var(--bn-surface);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    box-shadow: var(--bn-shadow-sm);
}
.page-body .card-header {
    background: transparent;
    border-bottom: 1px solid var(--bn-border);
    padding: var(--bn-space-4) var(--bn-space-5);
}
.page-body .card-header.card-no-border { border-bottom: 0; padding-bottom: 0; }
.page-body .card-header h3,
.page-body .card-header h4,
.page-body .card-header h5 {
    margin: 0;
    font-size: var(--bn-fs-lg);
    font-weight: 600;
    color: var(--bn-text);
}
.page-body .card-header p { color: var(--bn-text-muted); font-size: var(--bn-fs-sm); }
.page-body .card-body { padding: var(--bn-space-5); }
.page-body .card-footer {
    background: var(--bn-surface-2);
    border-top: 1px solid var(--bn-border);
    padding: var(--bn-space-4) var(--bn-space-5);
}

/* -------- Tables (.table / Bootstrap default) -------- */
.page-body .table {
    --bs-table-bg: transparent;
    width: 100%;
    margin: 0;
    color: var(--bn-text);
    font-size: var(--bn-fs-sm);
}
.page-body .table thead th {
    background: var(--bn-surface-2);
    color: var(--bn-text-muted);
    font-weight: 600;
    font-size: var(--bn-fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 0;
    padding: 12px 16px;
}
.page-body .table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--bn-border);
    color: var(--bn-text);
}
.page-body .table tbody tr:last-child td { border-bottom: 0; }
.page-body .table tbody tr:hover { background: rgba(4,141,140,.03); }

/* -------- Pagination -------- */
.page-body .pagination {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: var(--bn-space-3) 0 0;
    flex-wrap: wrap;
}
.page-body .pagination .page-item .page-link,
.page-body .pagination li a,
.page-body .pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--bn-radius-sm);
    border: 1px solid var(--bn-border);
    background: var(--bn-surface);
    color: var(--bn-text);
    font-size: var(--bn-fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--bn-duration) var(--bn-ease), color var(--bn-duration) var(--bn-ease), border-color var(--bn-duration) var(--bn-ease);
}
.page-body .pagination .page-item .page-link:hover,
.page-body .pagination li a:hover {
    background: var(--bn-surface-2);
    border-color: var(--bn-primary);
    color: var(--bn-primary);
}
.page-body .pagination .page-item.active .page-link,
.page-body .pagination .active span,
.page-body .pagination .active a {
    background: var(--bn-primary);
    border-color: var(--bn-primary);
    color: #fff;
}
.page-body .pagination .page-item.disabled .page-link,
.page-body .pagination .disabled span {
    background: var(--bn-surface);
    border-color: var(--bn-border);
    color: var(--bn-text-soft);
    cursor: not-allowed;
    opacity: .6;
}

/* -------- Alerts (.alert) -------- */
.page-body .alert {
    padding: 12px 16px;
    border-radius: var(--bn-radius);
    border: 1px solid transparent;
    border-inline-start: 4px solid;
    font-size: var(--bn-fs-sm);
    margin-bottom: var(--bn-space-4);
}
.page-body .alert-success { background: #ecfdf5; border-color: #d1fae5; border-inline-start-color: var(--bn-success); color: #065f46; }
.page-body .alert-danger  { background: #fef2f2; border-color: #fee2e2; border-inline-start-color: var(--bn-danger);  color: #7f1d1d; }
.page-body .alert-warning { background: #fffbeb; border-color: #fef3c7; border-inline-start-color: var(--bn-warning); color: #78350f; }
.page-body .alert-info    { background: #eff6ff; border-color: #dbeafe; border-inline-start-color: var(--bn-info);    color: #0c4a6e; }

/* -------- Badges (.badge) -------- */
.page-body .badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    border-radius: var(--bn-radius-pill);
    font-size: var(--bn-fs-xs);
    font-weight: 600;
    line-height: 1.3;
}
.page-body .badge.bg-primary,
.page-body .badge-primary { background: var(--bn-primary) !important; color:#fff; }
.page-body .badge.bg-success,
.page-body .badge-success { background: var(--bn-success) !important; color:#fff; }
.page-body .badge.bg-danger,
.page-body .badge-danger  { background: var(--bn-danger) !important; color:#fff; }
.page-body .badge.bg-warning,
.page-body .badge-warning { background: var(--bn-warning) !important; color:#fff; }
.page-body .badge.bg-info,
.page-body .badge-info    { background: var(--bn-info) !important; color:#fff; }
.page-body .badge.bg-secondary { background: var(--bn-surface-2) !important; color: var(--bn-text-muted); }
.page-body .badge-light-secondary { background: var(--bn-surface-2) !important; color: var(--bn-text-muted); }
.page-body .badge-light-success   { background: #d1fae5 !important; color: #065f46; }
.page-body .badge-light-danger    { background: #fee2e2 !important; color: #7f1d1d; }
.page-body .badge-light-warning   { background: #fef3c7 !important; color: #78350f; }
.page-body .badge-light-info      { background: #dbeafe !important; color: #0c4a6e; }

/* -------- Breadcrumb (.breadcrumb) -------- */
.page-body .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: var(--bn-fs-sm);
}
.page-body .breadcrumb-item a { color: var(--bn-text-muted); text-decoration: none; }
.page-body .breadcrumb-item a:hover { color: var(--bn-primary); }
.page-body .breadcrumb-item.active { color: var(--bn-text); font-weight: 600; }

/* -------- Page title block (legacy pages still use this) -------- */
.page-body .page-title h2 {
    font-size: var(--bn-fs-2xl);
    font-weight: 700;
    color: var(--bn-text);
    margin: 0;
}
.page-body .page-title .text-title-gray { color: var(--bn-text-muted); }

/* -------- Dark mode bridge overrides -------- */
body.dark-only .page-body .card { background: var(--bn-surface); border-color: var(--bn-border); }
body.dark-only .page-body .table thead th { background: var(--bn-surface-2); color: var(--bn-text-muted); }
body.dark-only .page-body .table tbody td { border-bottom-color: var(--bn-border); color: var(--bn-text); }
body.dark-only .page-body .alert-success { background: rgba(22,163,74,.12); color: #a7f3d0; }
body.dark-only .page-body .alert-danger  { background: rgba(220,38,38,.12); color: #fecaca; }
body.dark-only .page-body .alert-warning { background: rgba(245,158,11,.12); color: #fde68a; }
body.dark-only .page-body .alert-info    { background: rgba(14,165,233,.12); color: #bae6fd; }
body.dark-only .page-body .form-control,
body.dark-only .page-body .form-select { background: var(--bn-surface); color: var(--bn-text); border-color: var(--bn-border); }
body.dark-only .page-body .pagination li a,
body.dark-only .page-body .pagination li span { background: var(--bn-surface); color: var(--bn-text); border-color: var(--bn-border); }


/* =========================================================
   SIDEBAR — redesigned look on top of Admiro markup
   Keeps Admiro class hooks (.page-sidebar, .sidebar-menu,
   .sidebar-list, .sidebar-link, .sidebar-submenu) so the
   existing sidebar.js / collapse JS keeps working.
   ========================================================= */

.page-sidebar {
    height: calc(100vh - 77px) !important;
    overflow: hidden;
}

.page-sidebar .main-sidebar {
    height: 100%;
    overflow: hidden;
    padding: var(--bn-space-3) var(--bn-space-2);
}

.page-sidebar .sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 72px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100% !important;
    max-height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

.page-sidebar .sidebar-menu .simplebar-content {
    padding-bottom: 72px !important;
}

@media (max-width: 991.98px) {
    .page-sidebar { height: calc(100vh - 70px) !important; }
}

@media (max-width: 767.98px) {
    .page-sidebar { height: calc(100vh - 67px) !important; }
}

@media (max-width: 680px) {
    .page-sidebar { height: calc(100vh - 65px) !important; }
}

@media (max-width: 575.98px) {
    .page-sidebar { height: calc(100vh - 63px) !important; }
}

/* Group section labels */
.page-sidebar .sidebar-group-label {
    list-style: none;
    padding: var(--bn-space-4) var(--bn-space-3) var(--bn-space-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bn-text-soft);
    user-select: none;
}
.page-sidebar .sidebar-group-label:first-child { padding-top: var(--bn-space-2); }

/* Default item — kill Admiro's borders/clutter */
.page-sidebar .sidebar-list {
    list-style: none;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}

.page-sidebar .sidebar-list > .sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--bn-space-3);
    width: 100%;
    padding: 10px 14px;
    margin: 0 var(--bn-space-2);
    border-radius: var(--bn-radius);
    color: var(--bn-text);
    font-size: var(--bn-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background var(--bn-duration) var(--bn-ease),
                color var(--bn-duration) var(--bn-ease);
    cursor: pointer;
    position: relative;
}

.page-sidebar .sidebar-list > .sidebar-link > svg.stroke-icon,
.page-sidebar .sidebar-list > .sidebar-link > svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    transition: color var(--bn-duration) var(--bn-ease);
}

.page-sidebar .sidebar-list > .sidebar-link > h6 {
    margin: 0;
    font-size: var(--bn-fs-sm);
    font-weight: 500;
    color: inherit;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
    line-height: 1.3;
}

/* Hover */
.page-sidebar .sidebar-list > .sidebar-link:hover {
    background: var(--bn-surface-2);
    color: var(--bn-primary);
}
.page-sidebar .sidebar-list > .sidebar-link:hover svg { color: var(--bn-primary); }

/* Active item — pill background + accent bar on inline-start */
.page-sidebar .sidebar-list.active > .sidebar-link {
    background: rgba(4, 141, 140, .10);
    color: var(--bn-primary);
    font-weight: 600;
}
.page-sidebar .sidebar-list.active > .sidebar-link svg { color: var(--bn-primary); }
.page-sidebar .sidebar-list.active > .sidebar-link::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 var(--bn-radius-sm) var(--bn-radius-sm) 0;
    background: var(--bn-primary);
}
html[dir="rtl"] .page-sidebar .sidebar-list.active > .sidebar-link::before {
    border-radius: var(--bn-radius-sm) 0 0 var(--bn-radius-sm);
}

/* Chevron for collapsible items */
.page-sidebar .sidebar-list .sidebar-chevron {
    width: 16px;
    height: 16px;
    margin-inline-start: auto;
    color: var(--bn-text-soft);
    transition: transform var(--bn-duration) var(--bn-ease);
    flex-shrink: 0;
}
.page-sidebar .sidebar-list.has-submenu.active .sidebar-chevron,
.page-sidebar .sidebar-list.has-submenu.open .sidebar-chevron {
    transform: rotate(180deg);
    color: var(--bn-primary);
}

/* Submenu */
.page-sidebar .sidebar-submenu {
    list-style: none;
    margin: 4px 0 var(--bn-space-2);
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-sidebar .sidebar-submenu::before {
    content: "";
    position: absolute;
    inset-inline-start: 26px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--bn-border);
}
.page-sidebar .sidebar-submenu li {
    list-style: none;
    margin: 0 var(--bn-space-2);
    position: relative;
}
.page-sidebar .sidebar-submenu li > a {
    display: block;
    padding: 8px 12px 8px 38px;
    border-radius: var(--bn-radius);
    font-size: var(--bn-fs-sm);
    font-weight: 500;
    color: var(--bn-text-muted);
    text-decoration: none;
    transition: background var(--bn-duration) var(--bn-ease),
                color var(--bn-duration) var(--bn-ease);
    position: relative;
}
html[dir="rtl"] .page-sidebar .sidebar-submenu li > a {
    padding: 8px 38px 8px 12px;
}

/* Submenu connector dot */
.page-sidebar .sidebar-submenu li > a::before {
    content: "";
    position: absolute;
    inset-inline-start: 23px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bn-border);
    transform: translateY(-50%);
    transition: background var(--bn-duration) var(--bn-ease);
}

.page-sidebar .sidebar-submenu li > a:hover {
    background: var(--bn-surface-2);
    color: var(--bn-primary);
}
.page-sidebar .sidebar-submenu li > a:hover::before { background: var(--bn-primary); }

.page-sidebar .sidebar-submenu li.active > a {
    background: rgba(4, 141, 140, .10);
    color: var(--bn-primary);
    font-weight: 600;
}
.page-sidebar .sidebar-submenu li.active > a::before {
    background: var(--bn-primary);
    box-shadow: 0 0 0 3px rgba(4,141,140,.18);
}

/* Sidebar badges (unread counters) */
.page-sidebar .sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--bn-danger);
    color: #fff;
    border-radius: var(--bn-radius-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    margin-inline-start: auto;
}
.page-sidebar .sidebar-badge.d-none { display: none !important; }
/* When a sidebar-list active is set, push chevron to the end and keep badge next to label */
.page-sidebar .sidebar-list > .sidebar-link > h6 .sidebar-badge { margin-inline-start: 6px; }

/* Focus visible state for keyboard nav */
.page-sidebar .sidebar-list > .sidebar-link:focus-visible,
.page-sidebar .sidebar-submenu li > a:focus-visible {
    outline: 2px solid var(--bn-primary);
    outline-offset: -2px;
}

/* ---- Dark mode ---- */
body.dark-only .page-sidebar .sidebar-list > .sidebar-link { color: #c8cdd1; }
body.dark-only .page-sidebar .sidebar-list > .sidebar-link:hover {
    background: rgba(255,255,255,.04);
    color: var(--bn-primary-300);
}
body.dark-only .page-sidebar .sidebar-list.active > .sidebar-link {
    background: rgba(4,141,140,.18);
    color: var(--bn-primary-200);
}
body.dark-only .page-sidebar .sidebar-list.active > .sidebar-link::before {
    background: var(--bn-primary-300);
}
body.dark-only .page-sidebar .sidebar-list > .sidebar-link svg { color: #9ba2a7; }
body.dark-only .page-sidebar .sidebar-list.active > .sidebar-link svg,
body.dark-only .page-sidebar .sidebar-list > .sidebar-link:hover svg { color: var(--bn-primary-300); }

body.dark-only .page-sidebar .sidebar-group-label { color: #6b7378; }

body.dark-only .page-sidebar .sidebar-submenu::before { background: rgba(255,255,255,.08); }
body.dark-only .page-sidebar .sidebar-submenu li > a { color: #9ba2a7; }
body.dark-only .page-sidebar .sidebar-submenu li > a::before { background: rgba(255,255,255,.15); }
body.dark-only .page-sidebar .sidebar-submenu li > a:hover {
    background: rgba(255,255,255,.04);
    color: var(--bn-primary-300);
}
body.dark-only .page-sidebar .sidebar-submenu li > a:hover::before { background: var(--bn-primary-300); }
body.dark-only .page-sidebar .sidebar-submenu li.active > a {
    background: rgba(4,141,140,.18);
    color: var(--bn-primary-200);
}
body.dark-only .page-sidebar .sidebar-submenu li.active > a::before {
    background: var(--bn-primary-300);
    box-shadow: 0 0 0 3px rgba(4,141,140,.25);
}


/* =========================================================
   HEADER — keep Admiro default placement
   LTR: logo on LEFT, nav items (lang/dark/bell/avatar) on RIGHT
   RTL: mirrored automatically by dir="rtl"
   Kill the Admiro loader-wrapper (was a fixed full-screen white
   panel) which left a thin white strip under the header.
   ========================================================= */

.loader-wrapper { display: none !important; }

.page-header {
    border-bottom: 0 !important;
    box-shadow: var(--bn-shadow-sm);
    background: var(--bn-surface);
}
.page-body-wrapper { border-top: 0 !important; background: var(--bn-bg); }
.page-body-wrapper::before,
.page-body-wrapper::after,
.page-header::after { display: none !important; }

/* Push nav-right to the far edge (right in LTR, left in RTL).
   Admiro's .page-main-header uses justify-content: space-between which
   only worked when a left-side search element existed. We removed the
   search, so we push nav-right explicitly. */
.page-header .nav-right {
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}

body.dark-only .page-header { background: #1c2125; box-shadow: none; }
body.dark-only .page-body-wrapper { background: #15191c; }

/* Kill the thin white line at the top of the sidebar / below the logo.
   Sources: Admiro's box-shadows / borders on .logo-wrapper, .page-sidebar,
   and the horizontal-scroll arrow elements. */
.page-header .logo-wrapper,
.page-header .logo-wrapper * {
    border: 0 !important;
    box-shadow: none !important;
}
.page-header .logo-wrapper::before,
.page-header .logo-wrapper::after { display: none !important; }

.page-sidebar,
.page-sidebar .main-sidebar,
.page-sidebar .left-arrow,
.page-sidebar .right-arrow {
    border: 0 !important;
}
.page-sidebar::before,
.page-sidebar::after,
.page-sidebar .main-sidebar::before,
.page-sidebar .main-sidebar::after { display: none !important; }

body.dark-only .page-sidebar { box-shadow: none; background: #1c2125; }
body.dark-only .page-sidebar .main-sidebar { background: transparent; }

/* Dark-mode body + footer + content area */
body.dark-only { background: #15191c !important; color: #e6e6e6; }
body.dark-only .page-wrapper { background: #15191c; }
body.dark-only .page-body { background: transparent !important; color: #e6e6e6; }
body.dark-only .footer {
    background: #1c2125 !important;
    border-top: 1px solid #2a2c2c;
    color: #b6b0b0;
}
body.dark-only .footer p { color: #b6b0b0 !important; }

/* Page title block in dark mode */
body.dark-only .page-body .page-title h2,
body.dark-only .page-body h1,
body.dark-only .page-body h2,
body.dark-only .page-body h3,
body.dark-only .page-body h4,
body.dark-only .page-body h5,
body.dark-only .page-body h6 { color: #e6e6e6; }
body.dark-only .page-body .text-muted,
body.dark-only .page-body .text-title-gray { color: #9aa1a7 !important; }

/* Dark-mode breadcrumb */
body.dark-only .page-body .breadcrumb-item a { color: #9aa1a7; }
body.dark-only .page-body .breadcrumb-item.active { color: #e6e6e6; }

/* Dark-mode card body text */
body.dark-only .page-body .card { color: #e6e6e6; }
body.dark-only .page-body .card-header h3,
body.dark-only .page-body .card-header h4,
body.dark-only .page-body .card-header h5 { color: #e6e6e6; }
body.dark-only .page-body .card-header p { color: #9aa1a7; }

/* Dark-mode form labels */
body.dark-only .page-body .form-label,
body.dark-only .page-body .col-form-label,
body.dark-only .page-body label { color: #e6e6e6; }
body.dark-only .page-body .form-control::placeholder,
body.dark-only .page-body .form-select::placeholder { color: #6b7378; }
body.dark-only .page-body .form-control:disabled,
body.dark-only .page-body .form-select:disabled { background: #2a2c2c !important; color: #6b7378; }

/* Dark-mode select option text (Chrome/Edge inherit page bg) */
body.dark-only .page-body select option { background: #1c2125; color: #e6e6e6; }

/* Dark-mode tap-top button */
body.dark-only .tap-top { background: var(--bn-primary); color: #fff; border: 0; }

/* The Admiro left/right arrows are horizontal-scroll affordances for the
   horizontal-sidebar layout. We're using compact-wrapper, so they show
   up as empty stubs that can create visual artifacts. Hide them. */
.page-wrapper.compact-wrapper .page-sidebar .left-arrow,
.page-wrapper.compact-wrapper .page-sidebar .right-arrow { display: none !important; }


/* =========================================================
   AUTH PAGES (login / register) — body has class="auth-page"
   Always LIGHT mode: clean white background, teal accents.
   ========================================================= */

body.auth-page {
    /* Force-reset all design tokens to LIGHT values, so even when
       Admiro re-adds .dark-only from localStorage on the login page,
       the auth pages stay light. */
    --bn-bg:         #f6f7f9 !important;
    --bn-surface:    #ffffff !important;
    --bn-surface-2:  #f1f3f5 !important;
    --bn-border:     #e5e7eb !important;
    --bn-text:       #1f2937 !important;
    --bn-text-muted: #6b7280 !important;
    --bn-text-soft:  #9ca3af !important;

    background: #f6f7f9 !important;
    color: #1f2937 !important;
    min-height: 100vh;
}
body.auth-page > .container-fluid { background: #f6f7f9; min-height: 100vh; }

/* Belt & braces: explicit light text on auth pages, even if .dark-only
   class is present, beating any deeper Admiro dark rules. */
body.auth-page.dark-only,
body.auth-page.dark-only .login-card,
body.auth-page.dark-only .login-main { color: #1f2937 !important; }
body.auth-page.dark-only .login-main h2,
body.auth-page.dark-only .login-main label,
body.auth-page.dark-only .login-main .col-form-label { color: #1f2937 !important; }
body.auth-page.dark-only .login-main p,
body.auth-page.dark-only .login-main .text-muted,
body.auth-page.dark-only .login-main .small { color: #6b7280 !important; }

/* Kill Admiro's login-card image + teal tint */
body.auth-page .login-card,
body.auth-page .login-card.login-bg {
    background: transparent !important;
    background-image: none !important;
}
/* Inner card panel ("login-main") = the form area as a clean light card */
body.auth-page .login-card .login-main {
    background: #ffffff !important;
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    box-shadow: 0 12px 32px rgba(15,23,42,.08);
    padding: var(--bn-space-6) !important;
    color: var(--bn-text);
}
body.auth-page .login-card .login-main h2,
body.auth-page .login-card .login-main label,
body.auth-page .login-card .login-main .col-form-label { color: var(--bn-text); }
body.auth-page .login-card .login-main p,
body.auth-page .login-card .login-main .small,
body.auth-page .login-card .login-main .text-muted { color: var(--bn-text-muted) !important; }

/* Form inputs on auth pages */
body.auth-page .form-control,
body.auth-page .form-select {
    background: #ffffff !important;
    color: var(--bn-text) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius);
    padding: 10px 14px;
}
body.auth-page .form-control::placeholder { color: var(--bn-text-soft); }
body.auth-page .form-control:focus,
body.auth-page .form-select:focus {
    border-color: var(--bn-primary) !important;
    box-shadow: 0 0 0 3px rgba(4,141,140,.15) !important;
    outline: none;
}

/* Buttons on auth pages */
body.auth-page .btn-primary {
    background: var(--bn-primary) !important;
    border-color: var(--bn-primary) !important;
    color: #fff !important;
}
body.auth-page .btn-primary:hover {
    background: var(--bn-primary-600) !important;
    border-color: var(--bn-primary-600) !important;
}

/* Checkbox + Remember-password label */
body.auth-page .form-check-input {
    border: 1.5px solid var(--bn-border);
    background-color: #fff;
}
body.auth-page .form-check-input:checked {
    background-color: var(--bn-primary);
    border-color: var(--bn-primary);
}
body.auth-page .form-check-label { color: var(--bn-text); }

/* Links (Forgot password?, Create Account, etc.) */
body.auth-page a.link,
body.auth-page .login-main a:not(.btn) { color: var(--bn-primary); text-decoration: none; }
body.auth-page a.link:hover,
body.auth-page .login-main a:not(.btn):hover { color: var(--bn-primary-700); }

/* Show/Hide password toggle inside password field */
body.auth-page .show-hide span { color: var(--bn-primary); cursor: pointer; }

/* Language switcher at top of login */
.login-language-switch { background: transparent !important; }
.login-language-switch a {
    padding: 4px 8px;
    border-radius: var(--bn-radius-sm);
    text-decoration: none !important;
}
body.auth-page .login-language-switch a { color: var(--bn-text-muted) !important; }
body.auth-page .login-language-switch a:hover { color: var(--bn-primary) !important; background: rgba(4,141,140,.08); }
body.auth-page .login-language-switch a.fw-bold,
body.auth-page .login-language-switch a.text-dark { color: var(--bn-text) !important; }

/* User avatar initials fallback (when no image) */
.page-header .user-img .user-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bn-primary);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}
.page-header .user-img img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}