/* =====================================================================
   Bakulan.ID — Desktop App Frame
   ---------------------------------------------------------------------
   Presents the desktop / tablet view as an enlarged mobile application:
   the whole UI is centred on the screen and capped at 480px, exactly
   like the phone layout.

   Everything here lives inside `@media (min-width: 481px)`, so the real
   mobile rendering (<= 480px) is untouched.

   The goal is that a PC renders the page exactly as a browser window
   resized to 480px would. Media queries key off the window, not off
   this column, so every width-based query in the front-end CSS and in
   the views' inline <style> blocks has been rewritten to evaluate as
   it would at 480px:
     - a query a 480px viewport matches also matches >= 481px
       (`, (min-width: 481px)` appended);
     - a query a 480px viewport does not match never matches
       (` and (max-width: 480px)` appended).
   That covers bootstrap.min.css, style.css, summernote-lite.css,
   dataTables.bootstrap5.min.css and the views. This file only holds
   what that rewrite cannot express: the frame itself, the fixed
   chrome, and stylesheets shared with the admin panel.

   Loaded last in <head> so it wins over style.css / bootstrap.
   ===================================================================== */

@media (min-width: 481px) {

  /* --- 1. Backdrop and the centred 480px column --------------------- */

  html {
    background-color: #bed2e6 !important;
  }

  /* `:root.x` outranks the theme's `html.x { ... !important }` rules */
  :root.dark-mode,
  :root[data-theme="dark"] {
    background-color: #05070f !important;
  }

  body {
    width: 100%;
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 100vh;
    position: relative;               /* keeps absolute children in frame */
    background-color: #e1f0ff;
    box-shadow: 0 0 0 1px rgba(15, 15, 15, .08),
                0 0 30px rgba(15, 15, 15, .22);
  }

  :root[data-theme="dark"] body,
  :root.dark-mode body {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07),
                0 0 30px rgba(0, 0, 0, .65);
  }

  /* --- 2. Fixed chrome, re-anchored to the frame -------------------- */
  /* `margin-left` is used instead of `transform` so that elements which
     animate with a transform keep working. */

  .header-area,
  .footer-nav-area,
  .internet-connection-status,
  .type-text-form,
  .attachment-panel,
  .initial-preview[data-v-666] {
    width: 480px !important;
    max-width: 480px !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -240px !important;
  }

  /* Full-screen dimmers become frame-screen dimmers */
  #preloader,
  #overlay,
  #overdiv,
  .sidenav-black-overlay,
  .custom-confirm-overlay,
  .escalation-modal-overlay,
  .chat-modal-overlay {
    width: 480px !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -240px !important;
  }

  /* `100vw` inside the mobile rules would escape the frame */
  .chat-modal-container {
    width: 480px !important;
  }

  .custom-alert {
    width: 448px !important;        /* 480 - 32 */
    max-width: 440px !important;    /* 480 - 40 */
  }

  .custom-alert-content {
    max-width: 360px !important;    /* 480 - 120 */
  }

  /* --- 3. Side navigation (slides in from the frame edge) ----------- */
  /* The theme parks it at `left: -250px`, off the left of the window.
     Off the frame is still on the window here, so it is pinned to the
     frame edge and slid out with a negative margin instead — `transform`
     would make the panel a containing block and stop its first child's
     margin collapsing, shifting the contents 2px. `visibility` inherits
     the theme's 500ms transition, so the panel stays painted for the
     whole slide-out and only then disappears from the backdrop. */

  .suha-sidenav-wrapper {
    left: calc(50% - 240px) !important;
    margin-left: -240px;
    visibility: hidden;
  }

  .suha-sidenav-wrapper.nav-active {
    margin-left: 0;
    visibility: visible;
  }

  .suha-sidenav-wrapper .go-home-btn {
    left: calc(50% - 70px) !important;   /* -240 frame edge + 170 */
    right: auto !important;
  }

  /* --- 4. Elements pinned to the right edge ------------------------- */

  .pwa-install-alert {
    right: calc(50% - 228px) !important;   /* -240 frame edge + 12 */
  }

  .go-back-btn {
    right: calc(50% - 210px) !important;   /* -240 frame edge + 30 */
  }

  /* --- 5. Stylesheets shared with the admin panel ------------------- */
  /* asset/uploadfile.css is also loaded by /administrator and
     /jegulo89, so it is not rewritten. Its `min-width: 992px` block
     (the shipment-tracking timeline) is undone here instead — a 480px
     viewport never sees it. */

  .tracking-item {
    margin-left: 3rem !important;
  }

  .tracking-item .tracking-date {
    position: static !important;
    left: auto !important;
    width: auto !important;
    text-align: left !important;
  }

  .tracking-item .tracking-date span {
    display: inline !important;
  }

  .tracking-item .tracking-content {
    padding: .5rem .8rem !important;
    background-color: #f4f4f4 !important;
  }

  /* --- 6. `vw` units --------------------------------------------- */
  /* `vw` is the window, not the column, so bootstrap's responsive font
     sizes grow on a wide screen. Restated with 1vw resolved at 480px
     (= 4.8px), which is what a 480px window computes. */

  .h1, h1 { font-size: calc(1.375rem + 7.2px); }
  .h2, h2 { font-size: calc(1.325rem + 4.32px); }
  .h3, h3 { font-size: calc(1.3rem + 2.88px); }
  .h4, h4 { font-size: calc(1.275rem + 1.44px); }
  legend  { font-size: calc(1.275rem + 1.44px); }

  .display-1 { font-size: calc(1.625rem + 21.6px); }
  .display-2 { font-size: calc(1.575rem + 18.72px); }
  .display-3 { font-size: calc(1.525rem + 15.84px); }
  .display-4 { font-size: calc(1.475rem + 12.96px); }
  .display-5 { font-size: calc(1.425rem + 10.08px); }
  .display-6 { font-size: calc(1.375rem + 7.2px); }

  .fs-1 { font-size: calc(1.375rem + 7.2px) !important; }
  .fs-2 { font-size: calc(1.325rem + 4.32px) !important; }
  .fs-3 { font-size: calc(1.3rem + 2.88px) !important; }
  .fs-4 { font-size: calc(1.275rem + 1.44px) !important; }

  .vw-100     { width: 480px !important; }
  .min-vw-100 { min-width: 480px !important; }

  .modal-backdrop,
  .modal-fullscreen,
  .modal-fullscreen-sm-down,
  .modal-fullscreen-md-down,
  .modal-fullscreen-lg-down,
  .modal-fullscreen-xl-down,
  .modal-fullscreen-xxl-down {
    width: 480px !important;
  }

  .modal-backdrop {
    left: 50% !important;
    right: auto !important;
    margin-left: -240px !important;
  }

}
