{{--
    The application shell, rebuilt on wireframe v12's own markup (CR-2, spec §12).

    Structure is docs/wireframes-v12/index.html verbatim in shape:

        <aside class="sidebar">     260px, dark, fixed
        <header class="main-header"> 64px, fixed, offset by the sidebar
        <main class="main-content">  offset by both
          <div class="content-wrapper">

    The wireframe is the visual authority now, so assets/css/nrems-wireframe.css
    loads LAST and its class names (.card, .btn, .form-control, .badge…) win
    wherever they collide with Bootstrap or Metronic.

    Three earlier stylesheets are still linked, on purpose:

      * plugins.bundle.css  FontAwesome 6.6 Free, select2 and the plugin CSS.
                            FontAwesome comes from here — the wireframe pages
                            pull it off a CDN, we already ship the same 6.x
                            Free build with its fonts, so no CDN link is added.
      * style.bundle.css    **Bootstrap 5 itself**, with Metronic's theme on
                            top of it in the same file. An earlier version of
                            this comment called it "the Metronic theme" and
                            credited Bootstrap to the line above; CR-2c
                            measured it and that was backwards. `.row`,
                            `.col-md-6`, `.d-none`, `.modal-backdrop` and
                            `.modal-dialog` are declared here and in no
                            other stylesheet we ship — each re-grepped after
                            the CR-2c review caught `.visually-hidden` in
                            this list, which both bundles declare and which
                            therefore proved nothing. So this file is a
                            dependency and not a skin: without it `.d-none`
                            stops hiding, and the Bootstrap grid, the modal
                            plumbing, DataTables' bootstrap5 integration and
                            select2's bootstrap5 theme all go with it.
      * theme-a.css         the previous skin, kept for its Metronic
                            *bridging* half. CR-2c attempted to drop it now
                            that phases B and C are done — the condition the
                            earlier version of this comment set — and could
                            not: with style.bundle.css staying, its component
                            rules keep beating the wireframe's on specificity,
                            and this file is what answers them. Twenty-seven
                            computed properties move without it, each measured
                            and listed in block 19b of the app-additions tail
                            of nrems-wireframe.css. Its !important rules
                            outrank nrems-wireframe.css even though that file
                            loads later; the tail names every place that
                            matters and answers in kind.

    What this shell no longer has, and why:

      * No kt_app_* wrappers, no data-kt-app-* body attributes. The wireframe
        has no equivalent, and the Metronic layout controller (KTAppSidebar,
        KTLayoutToolbar) is a no-op without them — each of its initialisers is
        guarded by a querySelector for an element that is now gone.
      * No desktop sidebar-minimize. v12 draws a burger and a drawer and
        nothing else; the collapse toggle and its localStorage persistence went
        with the Metronic markup that carried them. NREMS.Sidebar now does what
        docs/wireframes-v12/js/app.js does.
      * No @yield('subtitle') in the header. The wireframe's .header-left is
        page title + breadcrumb, full stop. Views still declare the section;
        phase B/C decides per screen whether that sentence belongs in the title
        or in the page body.

    Login and the other guest screens are deliberately untouched — v12 draws no
    authentication page, so there is nothing to be faithful to (spec §12).
--}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <title>@yield('title') - {{ __('layout.app_name') }}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="@yield('meta_description', __('layout.meta_description'))" />
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <link rel="shortcut icon" href="{{ asset('assets/media/logos/nrems-icon.svg') }}" />

    <!-- Performance: preconnect to Google Fonts (TTFB savings ~150-300ms) -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- Inter — the wireframe's own face and weights -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;450;500;600;700&display=swap" />

    <!-- Plugins (FontAwesome 6.6 Free + its fonts, select2, plugin CSS) -->
    <link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
    <!-- Bootstrap 5 + the Metronic theme over it (see the comment above) -->
    <link href="{{ asset('assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
    <!-- Theme A: the Metronic bridging layer (CR-2c: it cannot go yet) -->
    <link href="{{ asset('assets/css/theme-a.css') }}" rel="stylesheet" type="text/css" />
    <!-- Wireframe v12 — visual authority, loads last -->
    <link href="{{ asset('assets/css/nrems-wireframe.css') }}" rel="stylesheet" type="text/css" />

    @stack('styles')
</head>

<body class="nrems-app">

    <!-- Skip-link for keyboard / screen-reader users -->
    <a href="#nrems_content" class="skip-link">{{ __('layout.skip_to_content') }}</a>

    <script>
        // Bootstrap 5 reads this to pick its colour mode. The wireframe has one
        // mode, so it is pinned here rather than restored from storage.
        document.documentElement.setAttribute('data-bs-theme', 'light');
    </script>

    <!--begin::Sidebar-->
    <aside class="sidebar" id="nrems_sidebar">
        @include('layouts.partials.sidebar')
    </aside>
    <!--end::Sidebar-->

    {{-- Drawer dismiss target. Inert above 768px (see nrems-wireframe.css). --}}
    <div class="sidebar-backdrop" id="nrems_sidebar_backdrop" hidden></div>

    <!--begin::Header-->
    <header class="main-header" role="banner">
        @include('layouts.partials.topbar')
    </header>
    <!--end::Header-->

    <!--begin::Content-->
    <main class="main-content" id="nrems_content" role="main" tabindex="-1">
        <div class="content-wrapper">
            @include('layouts.partials.flash')
            @yield('content')
        </div>

        <footer class="app-footer" role="contentinfo">
            @include('layouts.partials.footer')
        </footer>
    </main>
    <!--end::Content-->

    {{--
     Scripts (load order is mandatory):
       1. plugins.bundle.js   — Bootstrap, jQuery, select2, plugin libs, ApexCharts
       2. scripts.bundle.js   — Metronic controllers. Only KTComponents matters
                                now (it is what upgrades [data-control="select2"]);
                                the layout controllers no-op without the Metronic
                                shell ids this layout no longer emits.
       3. widgets.bundle.js   — Metronic widgets (datatables helpers)
       4. nrems-custom.js     — NREMS behaviour (sidebar drawer, user menu,
                                charts, DataTables auto-init, select2 fallback)

     A Blade comment, not an HTML one: DashboardTest forbids a Metronic shell id
     anywhere in the response, and AppShellTest forbids the kt_app_ prefix.
    --}}
    <script>var hostUrl = "{{ asset('assets') }}/";</script>
    <script src="{{ asset('assets/plugins/global/plugins.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/scripts.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/widgets.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/nrems-custom.js') }}" defer></script>

    @stack('scripts')

</body>
</html>