/* ==========================================================================
   Dynamics 365 Business Central — Teal theme
   Design tokens + base elements + app shell (topbar/sidenav/content) +
   reusable content patterns (KPI strip, cue tiles, bc-list grid, banner,
   modal, toast, empty state). Adapted from the reference D365 teal theme
   (K:\KENN\investor public/css/{theme,layout,components}.css) for Konnekt
   ISP Billing. Menu/topbar icons use Material Symbols (already loaded via
   the Google Fonts link) instead of the SVG icon sprite the reference
   project uses, since this app's menu data already stores Material Symbols
   icon names per module.
   ========================================================================== */

:root {
    /* Chrome */
    --d365-header: #161b21;

    /* Teal accent (the ONLY strong color) */
    --d365-teal: #0e8476;
    --d365-teal-hover: #0b6b60;
    --d365-teal-press: #085048;
    --d365-teal-tile: #009b8f;
    --d365-banner: #c6ece9;
    --d365-selected: #d7f1ee;
    --d365-tint: #eff9f8;

    /* Neutrals */
    --d365-text: #333333;
    --d365-text-soft: #605e5c;
    --d365-text-faint: #8f8d8b;
    --d365-border: #d6d4d2;
    --d365-border-light: #ebeae9;
    --d365-hover: #f5f5f4;
    --d365-page: #ffffff;
    --d365-page-alt: #f8f8f7;

    /* Semantic */
    --d365-pos: #0e8476;
    --d365-neg: #a4262c;
    --d365-warning-bg: #fff4ce;
    --d365-warning-text: #8a6100;
    --d365-error-bg: #fde7e9;

    --d365-font:
        "Segoe UI", "Segoe UI Web", -apple-system, BlinkMacSystemFont, Roboto,
        Helvetica, Arial, sans-serif;
    --d365-radius: 2px;
    --d365-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --d365-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.16);

    --bs-body-font-family: var(--d365-font);
    --bs-body-font-size: 0.875rem;
    --bs-body-color: var(--d365-text);
    --bs-body-bg: var(--d365-page);
    --bs-border-color: var(--d365-border-light);
}

html, body {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}
button, a { -webkit-tap-highlight-color: transparent; }

body {
    font-family: var(--d365-font);
    font-size: 14px;
    color: var(--d365-text);
    background: var(--d365-page-alt);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--d365-text); }
a { text-decoration: none; }

/* ---------- Material Symbols icon font ---------- */
/* Material Symbols is a ligature font: the element's text content IS the icon
   name (e.g. "store"). While the webfont is still downloading, font-display:block
   eventually falls back to a system font that has no ligature mapping, so the raw
   name renders as plain visible text for a moment. Hiding icons by default and only
   revealing them once the font is confirmed loaded (see the inline script in
   layouts/main.blade.php and layouts/auth.blade.php) avoids that flash of raw text
   entirely — worst case the icon is briefly blank instead of showing "store". */
html:not(.icons-ready) .material-symbols-outlined { visibility: hidden; }

.material-symbols-outlined {
    font-family: "Material Symbols Outlined" !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    vertical-align: middle;
}

/* Generic spin utility — used across many views for refresh-icon animations */
.spin { animation: d365-spin 0.8s linear infinite; }

/* Small text/spacing utilities carried over from the previous theme, still used in a few views */
.ms-text-center { text-align: center; }
.ms-text-muted { color: var(--d365-text-soft); }
.ms-text-sm { font-size: 13px; }
.ms-mt-8 { margin-top: 8px; }
.ms-mt-16 { margin-top: 16px; }
.ms-mt-24 { margin-top: 24px; }
.ms-mb-8 { margin-bottom: 8px; }
.ms-mb-16 { margin-bottom: 16px; }
.ms-mb-24 { margin-bottom: 24px; }
.ms-mono { font-family: "Cascadia Code", "Consolas", "Courier New", monospace; font-weight: 600; letter-spacing: 1px; }

/* Info box (instructions/tips — used on the 2FA setup auth page) */
.ms-info-box { background: var(--d365-page-alt); border: 1px solid var(--d365-border-light); border-radius: var(--d365-radius); padding: 12px 14px; font-size: 12px; color: var(--d365-text); margin-top: 12px; }
.ms-info-box .ms-info-title { font-weight: 700; margin-bottom: 6px; color: var(--d365-teal-press); font-size: 12px; }
.ms-info-box ul { margin: 0 0 6px 0; padding-left: 18px; }
.ms-info-box ul li { margin-bottom: 3px; }
.ms-info-box .ms-info-note { color: var(--d365-text-soft); font-size: 11px; }

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--d365-font);
    font-size: 14px;
    font-weight: 600;
    height: 32px;
    padding: 0 16px;
    border-radius: var(--d365-radius);
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    color: var(--d365-text);
    line-height: 1;
}
.btn:focus, .btn:focus-visible { box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--d365-text); outline-offset: 1px; }
.btn-sm { height: 28px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 15px; }
.btn-xs { height: 22px; padding: 0 8px; font-size: 11px; min-width: 0; }
.card-no-border { border-bottom: none !important; }

.btn-primary { background: var(--d365-teal); border-color: var(--d365-teal); color: #fff; }
.btn-primary:hover { background: var(--d365-teal-hover); border-color: var(--d365-teal-hover); color: #fff; }
.btn-primary:active { background: var(--d365-teal-press); border-color: var(--d365-teal-press); }

.btn-standard {
    background: var(--d365-page);
    color: var(--d365-text);
    border-color: var(--d365-border);
    font-weight: 400;
}
.btn-standard:hover { background: var(--d365-hover); color: var(--d365-text); }

.btn-link { background: transparent; color: var(--d365-teal); font-weight: 400; }
.btn-link:hover { color: var(--d365-teal-press); text-decoration: underline; }

.btn:disabled { background: var(--d365-hover); color: var(--d365-text-faint); border-color: transparent; cursor: not-allowed; }
.btn i, .btn .material-symbols-outlined { color: inherit; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Flat quiet action button (action-bar style) */
.act {
    height: 32px;
    padding: 0 10px;
    background: transparent;
    border: none;
    font-family: var(--d365-font);
    font-size: 14px;
    color: var(--d365-text);
    cursor: pointer;
    border-radius: var(--d365-radius);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.act .material-symbols-outlined { color: var(--d365-teal); font-size: 18px; }
.act:hover { background: var(--d365-hover); }
.act.quiet { color: var(--d365-text-soft); }
.act-divider { width: 1px; height: 18px; background: var(--d365-border); margin: 0 8px; }

/* ---------- Badges ---------- */
.d365-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 10px;
    line-height: 1.5;
}
.d365-badge-success { background: var(--d365-tint); color: var(--d365-teal-press); }
.d365-badge-info { background: var(--d365-tint); color: var(--d365-teal-press); }
.d365-badge-warning { background: var(--d365-warning-bg); color: var(--d365-warning-text); }
.d365-badge-danger { background: var(--d365-error-bg); color: var(--d365-neg); }
.d365-badge-neutral { background: var(--d365-hover); color: var(--d365-text-soft); }

/* ---------------- Big rounded checkbox (permission grants, Roles/Modules access) ----------------
   Exact port of the reference theme's .perm-check-lg — native checkbox is visually
   hidden (kept for accessibility/keyboard), the adjacent .box is the visible control.
   No box-shadow/blur "glow" on focus, just a clean teal ring. */
.perm-check-lg {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 6px;
    border-radius: 5px;
    transition: background 0.12s;
    user-select: none;
}
.perm-check-lg:hover { background: var(--d365-tint); }
.perm-check-lg input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}
.perm-check-lg .box {
    flex: none;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    border: 2px solid var(--d365-border);
    background: var(--d365-page);
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.perm-check-lg input:checked + .box {
    background: var(--d365-teal);
    border-color: var(--d365-teal);
}
.perm-check-lg .box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.12s ease;
}
.perm-check-lg input:checked + .box::after { transform: rotate(45deg) scale(1); }
.perm-check-lg input:indeterminate + .box { background: var(--d365-teal-tile); border-color: var(--d365-teal-tile); }
.perm-check-lg input:indeterminate + .box::after {
    border-width: 0 0 2px 0;
    transform: scale(1) translateY(2px);
    left: 4px;
    top: 2px;
    width: 8px;
    height: 0;
}
.perm-check-lg input:focus-visible + .box { box-shadow: 0 0 0 3px var(--d365-tint); }
.perm-check-lg .label-text { font-size: 13px; color: var(--d365-text); }
/* Read-only variant — for display-only checkboxes (e.g. detail pages), no hover/pointer affordance */
.perm-check-lg:has(input:disabled) { cursor: default; }
.perm-check-lg:has(input:disabled):hover { background: transparent; }
.perm-check-lg input:disabled + .box { opacity: 0.7; }

/* ---------- Cards ---------- */
.d365-card {
    background: var(--d365-page);
    border: 1px solid var(--d365-border-light);
    border-radius: var(--d365-radius);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--d365-border); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   APP SHELL — topbar + sidenav + content grid
   ========================================================================== */
.app-shell {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 44px 1fr;
    grid-template-areas:
        "topbar topbar"
        "sidenav content";
    height: 100vh;
}

.d365-topbar {
    grid-area: topbar;
    height: 44px;
    background: var(--d365-header);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.topbar-icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: var(--d365-radius);
    opacity: 0.9;
    flex: none;
}
.topbar-icon-btn:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
.topbar-icon-btn .material-symbols-outlined { font-size: 22px; color: #fff; }

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    color: #fff;
}
.topbar-brand .material-symbols-outlined { font-size: 20px; }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }

.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--d365-teal-tile);
    color: #fff;
    border: none;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-family: var(--d365-font);
    font-weight: 600;
    cursor: pointer;
    flex: none;
    padding: 0;
}

/* ---------------- User menu (avatar dropdown) ---------------- */
.user-menu { position: relative; }
.user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 230px;
    background: var(--d365-page);
    border: 1px solid var(--d365-border);
    border-radius: 6px;
    box-shadow: var(--d365-shadow-md);
    display: none;
    overflow: hidden;
    z-index: 1050;
}
.user-menu-panel.show { display: block; }
.user-menu-header { padding: 12px 14px; border-bottom: 1px solid var(--d365-border-light); }
.user-menu-name { font-size: 13.5px; font-weight: 600; color: var(--d365-text); }
.user-menu-email { font-size: 12px; color: var(--d365-text-soft); margin-top: 1px; }
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--d365-text);
}
.user-menu-item:hover { background: var(--d365-tint); }
.user-menu-item .material-symbols-outlined { font-size: 18px; color: var(--d365-text-soft); flex: none; }
.user-menu-item.danger { color: var(--d365-neg); }
.user-menu-item.danger .material-symbols-outlined { color: var(--d365-neg); }
.user-menu-divider { height: 1px; background: var(--d365-border-light); margin: 4px 0; }

/* ---------------- Side navigation ---------------- */
.d365-sidenav {
    grid-area: sidenav;
    width: 224px;
    background: var(--d365-page);
    border-right: 1px solid var(--d365-border-light);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.15s ease-in-out;
    padding: 4px 0;
}
.d365-sidenav.collapsed { width: 44px; }

/* Scoped to .d365-sidenav — "nav-item"/"nav-label"/"nav-icon" etc. are
   deliberately plain names for the sidenav markup, but Bootstrap's own
   .nav-item (li wrapper around .nav-tabs/.nav-pills buttons) is used
   throughout the app's existing views, so every rule here MUST stay
   scoped under .d365-sidenav or it silently breaks every Bootstrap tab
   strip in the app (only the first tab remains visible). */
.d365-sidenav .nav-search { padding: 6px 10px 8px; }

.d365-sidenav .nav-section + .nav-section { border-top: 1px solid var(--d365-border-light); margin-top: 4px; padding-top: 4px; }
.d365-sidenav .nav-section-title {
    padding: 8px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--d365-text-faint);
}

.d365-sidenav .nav-item, .d365-sidenav .nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 7px 12px;
    font-size: 13px;
    color: var(--d365-text);
    white-space: nowrap;
    position: relative;
    font-family: var(--d365-font);
}
.d365-sidenav .nav-item:hover, .d365-sidenav .nav-group-toggle:hover { background: var(--d365-tint); color: var(--d365-text); }
.d365-sidenav .nav-item.active { background: var(--d365-selected); color: var(--d365-teal-press); font-weight: 600; }
.d365-sidenav .nav-item.active::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--d365-teal);
}
.d365-sidenav .nav-group-toggle.active-group { color: var(--d365-teal-press); font-weight: 600; }

.d365-sidenav .nav-icon { flex: none; color: var(--d365-text-soft); font-size: 19px; }
.d365-sidenav .nav-item.active .nav-icon, .d365-sidenav .nav-group-toggle.active-group .nav-icon { color: var(--d365-teal); }

.d365-sidenav .nav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.d365-sidenav .nav-caret { flex: none; color: var(--d365-text-faint); font-size: 18px; transition: transform 0.15s ease-in-out; }
.d365-sidenav .nav-group-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.d365-sidenav .nav-group-items { overflow: hidden; max-height: 0; transition: max-height 0.18s ease-in-out; }
.d365-sidenav .nav-group-items.expanded { max-height: 800px; }
.d365-sidenav .nav-group-items .nav-item { padding-left: 2.15rem; font-size: 12.5px; }

/* Collapsed (icon-only) rail */
.d365-sidenav.collapsed .nav-label,
.d365-sidenav.collapsed .nav-caret,
.d365-sidenav.collapsed .nav-group-items,
.d365-sidenav.collapsed .nav-search,
.d365-sidenav.collapsed .nav-section-title { display: none; }
.d365-sidenav.collapsed .nav-item,
.d365-sidenav.collapsed .nav-group-toggle { justify-content: center; padding: 8px 0; }

/* ---------------- Content area ---------------- */
.content-area { grid-area: content; min-width: 0; overflow-x: auto; overflow-y: auto; padding-bottom: 2.5rem; display: flex; flex-direction: column; }

.page-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px 6px; flex-wrap: wrap; }
.back-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--d365-page-alt);
    border: 1px solid var(--d365-border-light);
    display: grid; place-items: center;
    cursor: pointer; color: var(--d365-text); flex: none;
}
.back-btn:hover { background: var(--d365-hover); }
.breadcrumb-d365 { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--d365-text-soft); }
.breadcrumb-d365 a { color: var(--d365-text-soft); }
.breadcrumb-d365 a:hover { color: var(--d365-teal-press); }
.page-caption { font-size: 18px; font-weight: 400; color: var(--d365-text); margin: 0; }
.page-head-titles { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.page-head .tools { margin-left: auto; display: flex; gap: 2px; }
.page-head .tools button {
    width: 34px; height: 34px; display: grid; place-items: center;
    background: transparent; border: none; color: var(--d365-teal);
    cursor: pointer; border-radius: var(--d365-radius);
}
.page-head .tools button:hover { background: var(--d365-tint); }

.action-bar {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 20px;
    background: var(--d365-page-alt);
    border-top: 1px solid var(--d365-border-light);
    border-bottom: 1px solid var(--d365-border-light);
    flex-wrap: wrap;
}
.action-bar .end { margin-left: auto; }

.page-body { padding: 10px 20px 0; max-width: 1400px; width: 100%; }
.part-title {
    font-size: 17px; font-weight: 600; color: var(--d365-text);
    padding: 18px 0 10px;
    border-bottom: 1px solid var(--d365-border-light);
    margin-bottom: 0;
}

/* ---------------- Mobile behavior ---------------- */
@media (max-width: 991.98px) {
    .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; }
    .d365-sidenav {
        position: fixed; top: 44px; left: 0; bottom: 0; z-index: 1040;
        transform: translateX(-100%);
        box-shadow: var(--d365-shadow-md);
        width: 280px;
    }
    .d365-sidenav.mobile-open { transform: translateX(0); }
    .d365-sidenav.collapsed { width: 280px; }
    .d365-sidenav.collapsed .nav-label,
    .d365-sidenav.collapsed .nav-caret,
    .d365-sidenav.collapsed .nav-search,
    .d365-sidenav.collapsed .nav-section-title,
    .d365-sidenav.collapsed .nav-group-items.expanded { display: revert; }
    .sidenav-backdrop { display: none; position: fixed; inset: 44px 0 0 0; background: rgba(0, 0, 0, 0.35); z-index: 1035; }
    .sidenav-backdrop.show { display: block; }
}

/* ==========================================================================
   REUSABLE CONTENT PATTERNS
   ========================================================================== */

/* ---------------- KPI strip ---------------- */
.kpis { display: flex; flex-wrap: wrap; gap: 40px; padding: 16px 0; }
.kpi .kpi-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--d365-text-soft); }
.kpi .kpi-value { font-size: 30px; font-weight: 300; padding: 2px 0 6px; color: var(--d365-text); }
.kpi .kpi-bar { height: 3px; width: 100%; min-width: 120px; background: var(--d365-teal-tile); }
.kpi .kpi-bar.red { background: var(--d365-neg); }
.kpi a { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--d365-teal); }
.kpi a:hover { text-decoration: underline; }
.kpi .kpi-sub { display: block; margin-top: 6px; font-size: 11.5px; color: var(--d365-text-faint); }

/* ---------------- Cue tiles ---------------- */
.cue-group { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 0; }
.cue {
    width: 130px; min-height: 88px; background: var(--d365-teal-tile); color: #fff;
    cursor: pointer; padding: 8px 10px; display: flex; flex-direction: column;
    border-radius: var(--d365-radius); transition: filter 0.1s;
}
.cue:hover { filter: brightness(1.07); }
.cue .cue-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.25; }
.cue .cue-value { font-size: 26px; font-weight: 300; margin-top: auto; line-height: 1; }
.cue .cue-sub { font-size: 10px; opacity: 0.85; margin-top: 2px; }
.cue .cue-foot { height: 4px; margin: 8px -10px -8px; background: rgba(255, 255, 255, 0.25); }
.cue.flat { background: var(--d365-page-alt); color: var(--d365-text); border: 1px solid var(--d365-border-light); }
.cue.flat .cue-label { color: var(--d365-text-soft); }
.cue.flat .cue-value { color: var(--d365-text); }

/* ---------------- BC list / data grid ---------------- */
.list-wrap { overflow-x: auto; position: relative; }
table.bc-list { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--d365-page); }
.bc-list thead th {
    position: sticky; top: 0; background: var(--d365-page);
    text-align: left; font-size: 12.5px; font-weight: 400; color: var(--d365-text-soft);
    padding: 0 12px; height: 40px; border-bottom: 1px solid var(--d365-border);
    white-space: nowrap;
}
.bc-list thead th.num, .bc-list td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bc-list tbody td { padding: 8px 12px; min-height: 40px; border-bottom: 1px solid var(--d365-border-light); color: var(--d365-text); }
.bc-list tbody tr:hover { background: var(--d365-tint); }
.bc-list tbody tr.selected { background: var(--d365-selected); }
.bc-list a.rec { color: var(--d365-teal); text-decoration: none; cursor: pointer; }
.bc-list a.rec:hover { color: var(--d365-teal-press); text-decoration: underline; }
.bc-list .pos { color: var(--d365-pos); }
.bc-list .neg { color: var(--d365-neg); }
.bc-list input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--d365-teal); cursor: pointer; }

.list-footer { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 12.5px; color: var(--d365-text-soft); border-top: 1px solid var(--d365-border-light); }

/* ---------------- Table toolbar (search / filter above a grid) ---------------- */
.table-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--d365-border-light); flex-wrap: wrap; }
.search-mini {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid transparent; border-bottom-color: var(--d365-border);
    padding: 4px 6px; flex: 1 1 220px; max-width: 280px;
}
.search-mini:hover { border-bottom-color: var(--d365-text-soft); background: var(--d365-page-alt); }
.search-mini .material-symbols-outlined { color: var(--d365-text-soft); font-size: 17px; }
.search-mini input { border: none; background: transparent; outline: none; font-family: var(--d365-font); font-size: 13.5px; width: 100%; color: var(--d365-text); }

/* ---------------- Notification banner ---------------- */
.banner {
    background: var(--d365-banner); color: var(--d365-text);
    display: flex; align-items: center; gap: 12px; padding: 8px 14px;
    font-size: 13.5px; border-radius: var(--d365-radius); margin: 0 20px 12px;
}
.banner .dismiss { cursor: pointer; color: var(--d365-text-soft); display: grid; place-items: center; }
.banner .actions { display: flex; gap: 0; align-items: center; margin-left: 16px; }
.banner .actions a { color: var(--d365-teal-press); font-weight: 600; }
.banner .actions a:hover { text-decoration: underline; }
.banner .actions .sep { color: var(--d365-text-faint); margin: 0 10px; }
.banner .chev { margin-left: auto; color: var(--d365-text-soft); cursor: pointer; }

/* ---------------- Empty state ---------------- */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.5rem; gap: 0.75rem; }
.empty-state .material-symbols-outlined { font-size: 44px; color: var(--d365-border); }
.empty-state h2 { font-size: 1.1rem; margin: 0; font-weight: 600; }
.empty-state p { color: var(--d365-text-soft); max-width: 420px; margin: 0; font-size: 13.5px; }

/* ---------------- Toasts (native d365 toast, kept for parity; app mostly uses Toastr — see d365-compat.css) ---------------- */
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 1090; display: flex; flex-direction: column; gap: 8px; }
.d365-toast {
    background: var(--d365-header); color: #fff; padding: 10px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 600; box-shadow: var(--d365-shadow-md);
    display: flex; align-items: center; gap: 8px; min-width: 220px;
    opacity: 0; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s;
}
.d365-toast.show { opacity: 1; transform: translateY(0); }
.d365-toast.success { background: var(--d365-teal-press); }
.d365-toast.error { background: var(--d365-neg); }

/* ---------------- Inline spinners (loading buttons / async cells) ---------------- */
.table-spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid var(--d365-border); border-top-color: var(--d365-teal);
    border-radius: 50%; margin-right: 8px; vertical-align: -3px;
    animation: d365-spin 0.7s linear infinite;
}
.btn-spinner {
    display: inline-block; width: 13px; height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
    border-radius: 50%; margin-right: 7px; vertical-align: -2px;
    animation: d365-spin 0.6s linear infinite;
}
@keyframes d365-spin { to { transform: rotate(360deg); } }
.btn.is-loading { cursor: wait; opacity: 0.9; }

/* ---------------- Small inline icon-button (e.g. refresh, inside a .kpi label) ---------------- */
.metric-action {
    background: transparent; border: none; cursor: pointer;
    color: var(--d365-text-soft); border-radius: var(--d365-radius); padding: 3px;
    display: inline-grid; place-items: center;
}
.metric-action:hover { background: var(--d365-hover); color: var(--d365-teal-press); }
.metric-action .material-symbols-outlined { font-size: 17px; }

@media (max-width: 760px) {
    .page-body { padding: 8px 12px 0; }
    .page-head { padding: 10px 12px 6px; }
    .action-bar { padding: 6px 12px; }
}