/* =========================================================================
   FastWin 777 - support desk theme
   -------------------------------------------------------------------------
   The support app ships a light theme (#F7F8FF page, salmon accent) while the
   game is dark navy and cyan. It drives almost everything from CSS custom
   properties with the same names the game uses, so this file re-points those
   tokens instead of restyling components one by one - far less to go wrong,
   and any screen we have not seen follows along on its own.

   Added as a separate stylesheet linked last, so removing the one <link> puts
   the original theme back exactly.
   ========================================================================= */

:root {
  /* Accent. The app hardcodes `color:#fff` on top of --main-color, so this is
     a deeper cyan than the game's headline colour: white on #49D5ED measures
     about 2.2:1, which is unreadable, while on this it clears 5:1. The bright
     cyan is still used below for text and icons, where it sits on dark. */
  --main-color: #17798F;
  --main_gradient-color:  linear-gradient(135deg, #2FB6D2 0%, #17798F 100%);
  --main_gradient-color2: linear-gradient(135deg, #2FB6D2 0%, #17798F 100%);

  --norm_red-color:        #F98A8A;
  --norm_green-color:      #27D6B0;
  --norm_green_color:      #27D6B0;
  --norm_blue_color:       #49D5ED;
  --norm_secondary-color:  #FDAC32;
  --norm_secondary_color:  #FDAC32;

  --text_color_L1: #F5F7FA;   /* headings and body */
  --text_color_L2: #AAB4C3;   /* secondary */
  --text_color_L3: #6E7A8C;   /* hints and placeholders */
  --text_color_L4: #FFFFFF;   /* on the accent - kept light on purpose */
  --textW:         #FFFFFF;

  --bg_color_L1: #07111F;     /* page */
  --bg_color_L2: #13233A;     /* cards, nav bar, cells */
  --bg_color_L3: #1C2533;     /* insets, fields */
  --Dividing-line_color: rgba(255, 255, 255, .08);
  --BoxShadowColor-20: rgba(0, 0, 0, .45);

  /* Vant's own tokens - the component library reads these directly, so the
     dialogs, toasts, fields and tabs follow without touching their classes */
  --van-background:          #07111F;
  --van-background-2:        #13233A;
  --van-text-color:          #F5F7FA;
  --van-text-color-2:        #AAB4C3;
  --van-text-color-3:        #6E7A8C;
  --van-border-color:        rgba(255, 255, 255, .08);
  --van-active-color:        rgba(255, 255, 255, .06);
  --van-cell-background:     #13233A;
  --van-cell-text-color:     #F5F7FA;
  --van-cell-value-color:    #AAB4C3;
  --van-nav-bar-background:  #0B1A2C;
  --van-nav-bar-title-text-color: #F5F7FA;
  --van-nav-bar-icon-color:  #49D5ED;
  --van-field-input-text-color:       #F5F7FA;
  --van-field-placeholder-text-color: #6E7A8C;
  --van-field-label-color:   #AAB4C3;
  --van-popup-background:    #13233A;
  --van-dialog-background:   #13233A;
  --van-dialog-header-font-weight: 700;
  --van-toast-background:    rgba(19, 35, 58, .96);
  --van-search-background:   #13233A;
  --van-search-content-background: #1C2533;
  --van-button-primary-background: #17798F;
  --van-button-primary-border-color: #17798F;
  --van-tabs-default-color:  #49D5ED;
  --van-tab-text-color:      #AAB4C3;
  --van-tab-active-text-color: #F5F7FA;
  --van-uploader-background: #1C2533;
  --van-loading-spinner-color: #49D5ED;
  --van-picker-background:   #13233A;
  --van-picker-option-text-color: #F5F7FA;
  --van-action-sheet-background: #13233A;
  --van-empty-description-color: #6E7A8C;
}

/* The page is capped at 500px and centred, so on a wide screen the area beside
   it is the body - without this it stays white and frames the app in glare.
   It also stops a light band appearing on an iOS overscroll bounce. */
html,
body {
  background-color: #07111F;
  color: #F5F7FA;
}

/* Images the app ships were drawn for a light page; the empty-state art in
   particular is a pale line drawing that disappears on navy. */
.van-empty__image img,
img[src*="empty"] { opacity: .55; }

/* Inputs and textareas do not always read the Vant tokens */
input,
textarea,
select {
  background-color: transparent;
  color: #F5F7FA;
  caret-color: #49D5ED;
}
input::placeholder,
textarea::placeholder { color: #6E7A8C; }

/* Anything the app painted white as a surface would now be a bright block on a
   dark page. These are the two the components use directly. */
.van-cell,
.van-cell-group { background-color: #13233A; }
.van-cell::after { border-color: rgba(255, 255, 255, .08); }
.van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after { border-color: rgba(255, 255, 255, .08); }

/* Tap feedback was designed against white */
.van-cell--clickable:active { background-color: #1C2533; }

/* The self-service list paints itself with `background: var(--text_color_L4)`,
   using the white TEXT token as a surface. That token has to stay light (it is
   the label colour on the accent button), so the surface is corrected here
   instead. The #app prefix is needed to outrank the app's own scoped rule. */
#app .home-main .selfService ul { background: var(--bg_color_L2); }
#app .home-main .selfService ul > li + li { border-top: 1px solid var(--Dividing-line_color); }