/* ========================================================================
 *  KX-PAY V2 dashboard  ·  00-anti-flash.css
 * -----------------------------------------------------------------------
 *  Loaded FIRST. Pairs with the two inline <script> blocks at the top of
 *  index.html: those read localStorage before the browser paints and
 *  stamp classes on <html>; these rules act on them.
 *
 *  Without the pair, every refresh shows an authenticated user a flash of
 *  the login screen, and brand users briefly see admin-only tabs before
 *  JavaScript hides them.
 *
 *  A stylesheet in <head> is render-blocking, so an external file is as
 *  timely here as inline CSS. The SCRIPTS must stay inline — a module is
 *  deferred by definition and would run after first paint.
 *
 *  From V1 dashboard.html lines 29-34 and 67-145, minus 134-136 (the two
 *  data-tab="pjvidmutasi" selectors — page removed in V2).
 * =======================================================================
 */

  /* When the inline check above found a valid session, hide the login screen
     and override the .hidden default on #app so the app paints in one frame.
     `clearSession()` in 02-api.js removes the html class on logout so these
     rules stop applying. */
  html.kxpay-has-session #login-screen { display: none  !important; }
  /* FLEX, not block. #app is the sidebar + content two-column frame (see
     03-sidebar.css). This override only fires for a user who arrives with a
     live session, so a `block` here would break the layout on refresh and
     on refresh only -- never on a fresh login, which is where you would
     look for it. */
  html.kxpay-has-session #app.hidden   { display: flex  !important; }

  /* When data-initial-tab is set (i.e. last tab was not Transactions),
     hide the default-active Transactions tab and show the saved one.
     We use !important so these rules win against the hardcoded
     class="active" on tab-transactions / nav transactions link. The
     attribute is REMOVED by selectTab() on its first call so these
     rules don't keep forcing the highlight after user navigation. */
  html[data-initial-tab]:not([data-initial-tab="transactions"]) #tab-transactions { display: none !important; }
  html[data-initial-tab]:not([data-initial-tab="transactions"]) #main-nav a[data-tab="transactions"].active {
    background: transparent !important; color: #64748b !important;
    font-weight: 500 !important; box-shadow: none !important;
  }
  html[data-initial-tab="wallet"]       #tab-wallet,
  html[data-initial-tab="brandreport"]  #tab-brandreport,
  html[data-initial-tab="automation"]   #tab-automation,
  html[data-initial-tab="brands"]       #tab-brands,
  html[data-initial-tab="providers"]    #tab-providers,
  html[data-initial-tab="settings"]     #tab-settings,
  html[data-initial-tab="reports"]      #tab-reports,
  html[data-initial-tab="checkname"]    #tab-checkname,
  html[data-initial-tab="activity"]     #tab-activity,
  html[data-initial-tab="users"]        #tab-users,
  html[data-initial-tab="testsupplier"] #tab-testsupplier,
  html[data-initial-tab="deposits"]     #tab-deposits {
    display: block !important;
  }
  html[data-initial-tab="wallet"]       #main-nav a[data-tab="wallet"],
  html[data-initial-tab="brandreport"]  #main-nav a[data-tab="brandreport"],
  html[data-initial-tab="automation"]   #main-nav a[data-tab="automation"],
  html[data-initial-tab="brands"]       #main-nav a[data-tab="brands"],
  html[data-initial-tab="providers"]    #main-nav a[data-tab="providers"],
  html[data-initial-tab="settings"]     #main-nav a[data-tab="settings"],
  html[data-initial-tab="reports"]      #main-nav a[data-tab="reports"],
  html[data-initial-tab="checkname"]    #main-nav a[data-tab="checkname"],
  html[data-initial-tab="activity"]     #main-nav a[data-tab="activity"],
  html[data-initial-tab="users"]        #main-nav a[data-tab="users"],
  html[data-initial-tab="testsupplier"] #main-nav a[data-tab="testsupplier"],
  html[data-initial-tab="deposits"]     #main-nav a[data-tab="deposits"] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important; font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.3) !important;
  }

  /* No-flash role-based nav hiding: when the inline head script sets
     data-role to a brand role, hide the admin-only nav links BEFORE
     the body renders. applyRoleNavVisibility() in 02-api.js sets
     display:none on these same links later, but that runs after first
     paint so brand users were seeing admin tabs briefly on refresh.
     These rules match isTabAllowed()'s logic exactly. */
  html[data-role="brand_admin"]    #main-nav a[data-tab="brands"],
  html[data-role="brand_admin"]    #main-nav a[data-tab="providers"],
  html[data-role="brand_admin"]    #main-nav a[data-tab="settings"],
  html[data-role="brand_admin"]    #main-nav a[data-tab="reports"],
  html[data-role="brand_admin"]    #main-nav a[data-tab="checkname"],
  html[data-role="brand_admin"]    #main-nav a[data-tab="activity"],
  html[data-role="brand_admin"]    #main-nav a[data-tab="testsupplier"],
  html[data-role="brand_admin"]    #main-nav a[data-tab="callbacks"],
  html[data-role="brand_operator"] #main-nav a[data-tab="brands"],
  html[data-role="brand_operator"] #main-nav a[data-tab="providers"],
  html[data-role="brand_operator"] #main-nav a[data-tab="settings"],
  html[data-role="brand_operator"] #main-nav a[data-tab="reports"],
  html[data-role="brand_operator"] #main-nav a[data-tab="checkname"],
  html[data-role="brand_operator"] #main-nav a[data-tab="activity"],
  html[data-role="brand_operator"] #main-nav a[data-tab="testsupplier"],
  html[data-role="brand_operator"] #main-nav a[data-tab="callbacks"],
  html[data-role="brand_operator"] #main-nav a[data-tab="users"],
  html[data-role="brand_admin"]    #main-nav a[data-tab="kxpaybank"],
  html[data-role="brand_operator"] #main-nav a[data-tab="kxpaybank"],

  html[data-role="kx_admin"]       #main-nav a[data-tab="testsupplier"],
  /* Check Name + Activity restricted to super_admin (no kx_admin) */
  html[data-role="kx_admin"]       #main-nav a[data-tab="checkname"],
  html[data-role="kx_admin"]       #main-nav a[data-tab="activity"],
  /* Reports restricted to super_admin (no kx_admin) — 14-Jun-2026,
     internal margin/profit analytics should not be visible to kx_admin */
  html[data-role="kx_admin"]       #main-nav a[data-tab="reports"] {
    display: none !important;
  }

  /* brand_viewer was missing from the list above. It saw every admin link
     for one frame on each refresh and then JavaScript took them away. Its
     allowed set is identical to brand_operator's -- isTabAllowed grants it
     transactions, wallet, brandreport, automation and deposits, nothing
     else -- so it gets brand_operator's rules verbatim. */
  html[data-role="brand_viewer"] #main-nav a[data-tab="brands"],
  html[data-role="brand_viewer"] #main-nav a[data-tab="providers"],
  html[data-role="brand_viewer"] #main-nav a[data-tab="settings"],
  html[data-role="brand_viewer"] #main-nav a[data-tab="reports"],
  html[data-role="brand_viewer"] #main-nav a[data-tab="checkname"],
  html[data-role="brand_viewer"] #main-nav a[data-tab="activity"],
  html[data-role="brand_viewer"] #main-nav a[data-tab="testsupplier"],
  html[data-role="brand_viewer"] #main-nav a[data-tab="callbacks"],
  html[data-role="brand_viewer"] #main-nav a[data-tab="users"],
  html[data-role="brand_viewer"] #main-nav a[data-tab="kxpaybank"] {
    display: none !important;
  }

  /* The KX-Staff Area group, for roles that can reach none of it.
     Hiding every link under a heading would otherwise leave the heading
     behind: a "KX-STAFF AREA" label with a blank space under it.
     syncNavGroups() in core/sidebar.js does this properly once the session is
     known; these rules do it in the first frame, from the role the inline
     head script read out of localStorage.

     In step with isTabAllowed(): the group holds brands, providers,
     kxpaybank, settings, reports, checkname, activity, testsupplier and
     callbacks, and no brand role is granted any of them. The everyday group
     is never empty -- every role gets Transactions -- so it needs no rule. */
  html[data-role="brand_admin"]    #nav-group-staff,
  html[data-role="brand_operator"] #nav-group-staff,
  html[data-role="brand_viewer"]   #nav-group-staff {
    display: none !important;
  }