/**
 * (C) Copyright Mindus SARL, 2026.
 * All rights reserved.
 * 
 * CSS for external pages: the iiziServer's and iiziGo's home and /apps pages (and, as a copy, the support site's
 * downloads/css/default.css).
 *
 * Light and dark (CC-EXTERNAL-PAGES-THEME section 4, the owner's ruling of 2026-10-24): the pages link
 * iz/css/iiziThemes.css and run iz/externalBrowserPages.js, which sets data-iz-scheme and data-iz-mode on the html
 * element as the IIZI client does, so the platform tokens (--iz-*) resolve to the chosen family and mode. This sheet
 * follows the rule of iz/css/iiziComps.css: every colour is a role, written var(--iz-<role>,<IIZI light value>) (the
 * sheet slots var(--izs-...) that kept a literal in the light IIZI theme were converted by CC-THEME-PALETTE-FOLLOWUP,
 * PL-D-5, 2026-10-24). The pages' own brand colours (the magenta band and headings of the 2026-09-27 ruling, the
 * magenta button) are the page tokens --izx-*, each with a light value (today's) and a dark value chosen for contrast
 * on the dark surfaces (the band keeps its colour and its white text in both modes, as ServerAdmin's header does).
 */

/* Open Sans + FontAwesome fonts */
@import '../../common/fonts/open-sans/open-sans.css';
@import '../../common/font-awesome/font-awesome.iizi.css';

/* The page tokens: the brand colours, light (the values of today's literals). */
:root
 {
 --izx-band: #421634;
 --izx-band-fg: #ffffff;
 --izx-h2: #a71381;
 --izx-h3: #841866;
 --izx-h4: #62184c;
 --izx-btn: rgb(138,0,138);
 --izx-btn-h: rgb(83,0,83);
 --izx-btn-fg: #ffffff;
 }

/* The dark set: the brand tokens' dark values (the band and its white text unchanged; the headings and links
   lightened to read on the dark surfaces at 4.5:1 or better, measured in Chrome: h2 #e472c3 on --iz-bg2 #1e1e1e
   5.95:1 and on --iz-bg3 #2a2a2a 5.12:1, the button's white on #b0169a 6.13:1). Selected by the resolved mode the
   script sets. */
:root[data-iz-mode="dark"]
 {
 --izx-h2: #e472c3;
 --izx-h3: #d35db2;
 --izx-h4: #c45fa9;
 --izx-btn: #b0169a;
 --izx-btn-h: #c93fb5;
 }
 
body
 {
 background-color: var(--iz-bg2,#f5f5f5);
 color: var(--iz-fg,#212121);
 font-size: 11pt;
 font-family: "Segoe UI","Open Sans",Sans-Serif;
 font-weight: 400;/*Normal*/
 margin:0;
 padding:0;
 color: var(--iz-fg,#212121);
 }

h1
 {
 color: var(--izx-band-fg,#ffffff);
 font-size: 36pt;
 font-family: "Segoe UI","Open Sans",Sans-Serif;
 font-weight: 300;/*Light*/
 letter-spacing: 0.01em;
 padding:0 0px 0px 15px;
 margin:0;
 background-color: var(--izx-band,#421634);
 min-height:75px;
 }
h1:after
  {
  display: block;
  float:right;
  content: ' ';
  width: 120px;
  height: 42px;
  padding-top:31px;
  margin:0;
  background-image: url("../../images/IIZI-white.svg");
  background-repeat: no-repeat;
  background-size: 120px 42px;
  background-position: right center;
  }
 
h2
 {
 margin:25px 15px 0px 15px;
 color: var(--izx-h2,#a71381);
 font-family: "Segoe UI","Open Sans",Sans-Serif;
 font-weight: bold;
 font-size: 18pt;
 }

h3
 {
 margin:16pt 8pt 8pt 15px;
 color: var(--izx-h3,#841866);
 font-family: "Segoe UI","Open Sans",Sans-Serif;
 font-weight: bold;
 font-size: 13pt;
 }

h4
 {
 margin:15px;
 margin-bottom:0;
 color: var(--izx-h4,#62184c);
 font-family: "Segoe UI","Open Sans",Sans-Serif;
 font-weight: bold;
 font-size: 11pt;
 }

p
 {
 margin:15px;
 margin-bottom:20px;
 color: var(--iz-fg,#212121);
 font-size: 11pt;
 font-weight: normal;
 }
 
/* Tables */
.izTable2, .izTable3
 {
 margin:15px;
 padding:0;
 border:1px solid var(--iz-div,#bdbdbd);
 }

/* TH items */
.izHead
 {
 font-size: 11pt;
 font-weight: 600;/*Semibold*/
 font-family: "Segoe UI","Open Sans",Sans-Serif;
 background-color: var(--iz-bg3,#eeeeee);
 color: var(--izx-h2,#a71381);
 padding: 8pt 8pt;
 text-align:left;
 }

/* TD items */
.izItem, .izOpenItem, .izCantOpenItem
 {
 font-size: 11pt;
 font-weight: normal;
 background-color: var(--iz-bg,#e0e0e0);
 color: var(--iz-fg,#212121);
 padding: 4pt 8pt;
 }
 
.izItemID
 {
 text-align: center;
 }
 
.izCantOpenItem
  {
  color: var(--iz-dis-fg,#757575);
  }

/* The drop-downs of the apps page (CC-EXTERNAL-PAGES-THEME section 2.2, the owner's ruling of 2026-10-24): every
   Language drop-down of the page has ONE width and every Theme drop-down another, whatever each lists. The em is the
   select's own (Chrome's default select font, 13.33px, not the page's 11pt). Measured in Chrome: a select showing "en"
   is 2.8em, "fr-CA" 4.05em, "-" 2.0em; "(same)" 4.8em, "Auto"/"Light"/"Dark" 3.75-3.8em. The widths fit the longest
   text of common use ("fr-CA", a language with a region; "(same)"); a longer code shows whole in the open list. */
select.izLang
  {
  width: calc(4.1em + 6px);
  }
select.izTheme
  {
  width: calc(4.85em + 6px);
  }
/* The owner's request of 2026-10-27: a drop-down is as high as the pill button beside it (.iz-button below) and has
   10px after it. Same box as the button: border-box and a 0.666667px border; a select's text box is 0.67px taller
   than the button's at the same 13.33px font, hence 7.666667px of vertical padding where the button has 8px - both
   measure 32.67px in Chrome. The visible gap is the 6px margin plus the space character the page puts between the
   controls (about 4px at the cell's 11pt): 10px. The 6px of horizontal padding are added to the widths above so that
   their texts keep the room they were measured for. */
select.izLang, select.izTheme
  {
  color: var(--iz-fg,#212121);
  background-color: var(--iz-wbg,#ffffff);
  border: 0.666667px solid var(--iz-bd,#bdbdbd);
  border-radius: var(--iz-r,6px);
  box-sizing: border-box;
  padding: 7.666667px 2px 7.666667px 4px;
  vertical-align: middle;
  margin: 0 6px 0 0;
  }

/* The theme changer (iz/externalBrowserPages.js): the client's theme chooser icon on the heading band, left of the
   logo (h1:after, 120px wide at the right), 16px in the band's text colour. */
.izThemeToggle
  {
  position: absolute;
  top: 22px;
  right: 120px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0 none;
  border-radius: 16px;
  background-color: transparent;
  color: var(--izx-band-fg,#ffffff);
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  }
.izThemeToggle svg
  {
  width: 16px;
  height: 16px;
  display: inline-block;
  }
.izThemeToggle:hover
  {
  background-color: rgba(255,255,255,.15);
  }
.izThemeToggle:focus-visible
  {
  outline: 2px solid var(--izx-band-fg,#ffffff);
  }

/* The icon placeholder of an application without an icon (ExternalBrowserPagesImpl.appendAppIcon). */
.izIconNone
  {
  display: inline-block;
  background-color: var(--iz-dis,#e0e0e0);
  width: 48px;
  height: 48px;
  border-radius: 7px;
  }

/* The application icon of the dark mode on the /apps page (CC-ICONS-DARK-SAMPLES, LK-D-9; the three rules moved here from the two templates' style block by CC-FIX-HEAD-REDS-SIGNIN-GREEN, ID-D-1b): a row whose application has a dark icon holds both, and the resolved mode shows one, with no reload and no script at the changer's switch. */
.izIconDark{display:none}
:root[data-iz-mode="dark"] .izIconLight{display:none}
:root[data-iz-mode="dark"] .izIconDark{display:block}

/* Links */
a,
.izOpen
 {
 color: var(--iz-fg,#212121);
 }

/* Buttons */
.iz-button,
.iz-button:visited {
  font-weight:600;
  color:var(--izx-btn-fg,#ffffff);
  background-color:var(--izx-btn,rgb(138,0,138));
  border-color:var(--izx-btn,rgb(138,0,138));
  background-image:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,0));
  border-radius:32px;
  border-style:solid;
  border-width:0.666667px;
  box-shadow:rgba(255,255,255,.15) 0 1px 0 0 inset,rgba(0,0,0,.075) 0 1px 1px 0;
  box-sizing:border-box;
  cursor:pointer;
  display:inline-block;
  padding:8px 16px;
  text-align:center;
  text-decoration-color:var(--izx-btn-fg,#ffffff);
  text-decoration-line:none;
  text-decoration-style:solid;
  transition-delay:0;
  transition-duration:0.15s;
  transition-property:color,background-color,border-color,box-shadow;
  transition-timing-function:ease-in-out;
  user-select:none;
  vertical-align:middle;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.iz-button:hover {
  background-color:var(--izx-btn-h,rgb(83,0,83));
  border-color:var(--izx-btn-h,rgb(83,0,83));
  text-decoration:none;
}

/* The launch dialog of the iiziRun Launch links (CC-IIZIRUN-QR-LAUNCH, iz/appsIiziRun.js): a dialog element on the
   page's raised surface with the page's tokens, its QR codes always black on white (a scanner wants that contrast,
   whatever the theme), the store codes small beside each other, the link as selectable small text. A Browser
   without the dialog element gets a div shown fixed (the open attribute set by the script). */
.izRunDialog
  {
  background-color: var(--iz-bg2,#f5f5f5);
  color: var(--iz-fg,#212121);
  border: 1px solid var(--iz-div,#bdbdbd);
  border-radius: var(--iz-r,6px);
  box-shadow: rgba(0,0,0,.25) 0 8px 24px;
  padding: 8px 16px 16px 16px;
  max-width: min(92vw,420px);
  box-sizing: border-box;
  font-size: 11pt;
  }
.izRunDialog::backdrop
  {
  background-color: rgba(0,0,0,.5);
  }
div.izRunDialog
  {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1000;
  }
div.izRunDialog[open]
  {
  display: block;
  }
.izRunDialogTitle
  {
  margin: 8px 0 12px 0;
  }
.izRunCodeBox
  {
  display: block;
  width: 260px;
  height: 260px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: var(--iz-r,6px);
  }
.izRunCodeBox svg.izRunCode
  {
  display: block;
  width: 260px;
  height: 260px;
  }
.izRunNoCode
  {
  display: block;
  padding: 16px;
  color: #212121;
  }
.izRunDialog p
  {
  margin: 12px 0 0 0;
  }
.izRunLink
  {
  font-size: 9pt;
  word-break: break-all;
  }
.izRunLink a
  {
  color: var(--izx-h3,#841866);
  }
.izRunStoresHead
  {
  font-weight: 600;
  }
.izRunStores
  {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
  }
.izRunStore
  {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 9pt;
  color: var(--iz-fg,#212121);
  }
.izRunStore svg.izRunStoreCode
  {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 4px auto;
  background-color: #ffffff;
  border-radius: var(--iz-r,6px);
  }
.izRunClose
  {
  text-align: right;
  }