/* =============================================================
   theme.css - Imperator TV Theme (Single-Source-Of-Truth)
   Merge aus ehemals extern.css (@font-face) + mixins/color.css.

   WICHTIG - Opera Presto Randbedingungen:
   - keine CSS-Variablen (var(--), :root) -> geteilte Selektor-Listen
   - keine :is()/:where()
   - Fonts brauchen zwingend woff (nicht nur woff2)
   - Kommentare NUR ASCII (Non-ASCII bricht den Presto-Parser ab)

   Diese Datei ist das Ziel der projektspezifischen CustomCSS-Overrides
   (wird auf der TV-Seite als letzter inline-<style> geladen und
   ueberschreibt daher jede Regel hier). Der Admin-Editor generiert
   Overrides gegen genau die hier definierten Theme-Hooks.
   ============================================================= */


/* -------------------------------------------------------------
   1) Schriftarten (ehemals extern.css)
   ------------------------------------------------------------- */
@font-face {
  font-family: 'montserratbold';
  src: url("../font/montserrat/montserrat-bold-webfont.woff2") format("woff2"), url("../font/montserrat/montserrat-bold-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'montserratregular';
  src: url("../font/montserrat/montserrat-regular-webfont.woff2") format("woff2"), url("../font/montserrat/montserrat-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'montserratmedium';
  src: url("../font/montserrat/montserrat-medium-webfont.woff2") format("woff2"), url("../font/montserrat/montserrat-medium-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal; }


/* -------------------------------------------------------------
   2) Icon-/Indicator-Hintergruende (ehemals extern.css)
   ------------------------------------------------------------- */
a.button.icon.icon-back {
  background-image: url("../img/icon/remote-control/back@2x.png"); }

.scroll-down-indicator {
  background-image: url("../img/icon/scroll/indicator-down.gif");
}

.scroll-up-indicator {
  background-image: url("../img/icon/scroll/indicator-up.gif");
}


/* -------------------------------------------------------------
   3) Benannte Farb-Utilities (Kachel-Palette)
   ------------------------------------------------------------- */
.colorDarkLavender {
  background-color: #7b4b94; }

.colorGlaucous {
  background-color: #7d82b8; }

.colorEtonBlue {
  background-color: #9bc995; }

.colorLightCarminePink {
  background-color: #e85d75; }

.colorTerraCotta {
  background-color: #e85f5c; }

.colorClaret {
  background-color: #7d1128; }

.colorBistre {
  background-color: #392a16; }

.colorCarrotOrange {
  background-color: #ec9a29; }

.colorFrenchWine {
  background-color: #ab2346; }

.colorOceanGreen {
  background-color: #4fcf91; }

.colorDimGrey {
  background-color: #6a7152; }

.colorLapisLazuli {
  background-color: #2274a5; }

.colorDolphin {
  background-color: #635c8a; }

.colorPlantation {
  background-color: #254344; }

.colorFringyFlower {
  background-color: #aee0c5; }

.colorKimberly {
  background-color: #6f6796; }

.colorLightOrchid {
  background-color: #dea9d7; }

.colorJungleMist {
  background-color: #c2d4d8; }

.colorChatelle {
  background-color: #b0abc3; }

.colorApricotPeach {
  background-color: #fac8bf; }

.colorBlueBayoux {
  background-color: #466675; }

.colorRobinsEggBlue {
  background-color: #00d1cb; }

.colorCopperMetallic {
  background-color: #a57f6c; }

.colorBasaltGray {
    background-color: #4e5754; }


/* =============================================================
   4) THEME-HOOKS - hier docken die CustomCSS-Overrides an.
   Opera Presto kann keine CSS-Variablen, daher gemeinsame
   Selektor-Listen. Wer eine Theme-Farbe aendern will, passt
   hier den rgba-Wert in EINER Regel an. Use rgba everywhere so
   projects can set alpha.
   ============================================================= */

/* --- 4a) FLAECHEN-SCHEMATA (background-color + Textfarbe) --- */

/* PRIMARY - resting selection buttons + neutral panels.
   color = text, background-color = fill.
   Hinweis: Die Regel .primaryColorScheme{...} MUSS als solche
   erhalten bleiben - die Admin-Vorschau liest sie per Regex
   zurueck (template.functions.php getPrimaryColor). */
.primaryColorScheme {
  background-color: rgba(78, 87, 84, 1);    /* #4e5754 neutral grey */
  color: rgba(255, 255, 255, 1);
}

/* PRIMARY ACTIVE/SELECTED/FOCUSED - one shared active colour.
   Reused by the main nav .active toggle, channel tiles, resume-yes button
   and the Roomservice selected pills. Focus intentionally shares this
   colour (focus == selection); the white ring only marks the cursor. */
.primaryColorScheme.active,
.primaryColorScheme.focused,
.rsCardColorScheme.active,
.rsCardColorScheme.focused,
.rs-choice.selected-or,
.rs-choice.selected-and {
  background-color: rgba(210, 9, 16, 1);    /* #d20910 active red */
  color: rgba(255, 255, 255, 1);
}

/* ROOMSERVICE-KACHELN - eigenes Ruhe-Schema (getrennt von der Navigation),
   damit Kachel-Hintergrund und Navigation unabhaengig einfaerbbar sind.
   Der Auswahl-/Fokus-Zustand teilt sich oben das gemeinsame Aktiv-Rot. */
.rsCardColorScheme {
  background-color: rgba(78, 87, 84, 1);    /* #4e5754 neutral grey (wie Navigation-Default) */
  color: rgba(255, 255, 255, 1);
}

/* SECONDARY - info / message / status surfaces (half-transparent). */
.secondaryColorScheme {
  background-color: rgba(121, 121, 121, 0.6);
  color: rgba(255, 255, 255, 1);
}

/* SECONDARY ACTIVE/SELECTED - selected mailbox row that is on the secondary
   (odd) stripe. Keyed on the existing .focusedRow toggle and on .active. */
.secondaryColorScheme.active,
.secondaryColorScheme.focusedRow {
  background-color: rgba(90, 90, 90, 0.85);
  color: rgba(255, 255, 255, 1);
}

/* TERTIARY - mailbox message rows (selectable). color = text, bg = fill. */
.tertiaryColorScheme {
  background-color: rgba(121, 121, 121, 1);   /* #797979 */
  color: rgba(255, 255, 255, 1);
}

/* TERTIARY ACTIVE/SELECTED - the currently focused mailbox row.
   Keyed on the existing .focusedRow toggle (no JS change) and on .active
   for scheme consistency. */
.tertiaryColorScheme.active,
.tertiaryColorScheme.focusedRow {
  background-color: rgba(90, 90, 90, 1);
  color: rgba(255, 255, 255, 1);
}

/* --- 4b) STATUS/AKZENT als FLAECHE (background-color) --- */

/* SUCCESS surface - positive status fills (badge, guest marker). */
.successColorScheme {
  background-color: rgba(102, 187, 106, 0.85);   /* #66bb6a family */
  color: rgba(255, 255, 255, 1);
}

/* DANGER surface - error/remove fills (message badge, remove hover). */
.dangerColorScheme {
  background-color: rgba(239, 83, 80, 0.95);      /* #ef5350 family */
  color: rgba(255, 255, 255, 1);
}

/* ACCENT surface - highlighted controls (blue family). */
.accentColorScheme {
  background-color: rgba(33, 150, 243, 1);   /* #2196F3 */
  color: rgba(255, 255, 255, 1);
}

/* --- 4c) STATUS/AKZENT als TEXT (color) --- */
/* Fuer die vielen color:-Verwendungen (Betraege, Hinweise, Icons). */
.themeSuccessText { color: rgba(102, 187, 106, 1); }   /* #66bb6a */
.themeDangerText  { color: rgba(239, 83, 80, 1); }     /* #ef5350 */
.themeWarningText { color: rgba(255, 180, 50, 0.85); } /* amber   */
.themeAccentText  { color: rgba(33, 150, 243, 1); }    /* #2196F3 */

/* -------------------------------------------------------------
   MAPPING Hook -> konkrete Modul-Selektoren (Single-Source fuer
   den Admin-Editor: dessen Generator emittiert Overrides gegen
   GENAU diese Listen, injiziert als CustomCSS zuletzt -> gewinnt).
   Die Modul-Werte oben/in den Modul-CSS sind bereits auf die
   kanonischen Hues normalisiert; ein Projekt-Override faerbt sie um.

   accent  (background/border) : .accentColorScheme .bookings-item.selected #progressBar #progressDot
   accent  (text)              : .themeAccentText .btn.focused
   success (surface)           : .successColorScheme .bookings-pkg-badge .bookings-item-guest
   success (text)              : .themeSuccessText .bookings-message-success .bookings-success-icon
   danger  (surface)           : .dangerColorScheme #messageIcon .rs-cart-row-remove.focused
   danger  (text)              : .themeDangerText .bookings-message-error .bookings-error-icon .rs-option-label .rs-required .room-verify-error
   warning (text)              : .themeWarningText .bookings-confirm-icon
   ------------------------------------------------------------- */

/* --- 4d) STRUKTUR-TOKENS --- */

/* Hairline-Border - konsistente weisse Trennlinie (Alpha variiert je
   Kontext, der Basiswert hier ist der haeufigste). */
.themeBorder {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Focus-Ring: 3px-Inset-Rahmen in Weiss.
   Cursor-Marker fuer Elemente die einen klar sichtbaren Fokus brauchen
   ohne ihren Hintergrund zu ueberschreiben. Weiss bleibt auf allen
   Hintergruenden gut sichtbar und ist neutral fuer Rot-Gruen-Schwaeche.
   Vergabe via zusaetzlicher Klasse "focusRing" + bestehender ".focused". */
.focusRing.focused {
  -webkit-box-shadow: inset 0 0 0 3px #ffffff;
          box-shadow: inset 0 0 0 3px #ffffff;
}

/* Focus-Glow: weicher weisser Aussen-Glow fuer fokussierte Karten/Buttons
   (Roomservice/Bookings/room_verify teilten dasselbe Muster hartkodiert). */
.themeFocusGlow {
  -webkit-box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 255, 255, 0.12);
          box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 255, 255, 0.12);
}