/**
 * (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;
}