/* Dev Tools CSS - Styles for development features */

/* ============================================================================
   TOP BAR DEBUG BORDERS (not_Using_Top_Bar)
   ============================================================================ */
/* Show colored borders for top bar elements when enabled via body.dev-tools-topbar-debug */
body.dev-tools-topbar-debug .lesson-title {
  border: 3px solid #ff0000 !important;
}

body.dev-tools-topbar-debug .top-bar {
  border: 3px solid #e6e6fa !important;
}

body.dev-tools-topbar-debug .top-bar .lesson-title,
body.dev-tools-topbar-debug .lesson-title {
  border: 3px solid #ff0000 !important;
}

body.dev-tools-topbar-debug .top-bar .logo,
body.dev-tools-topbar-debug .logo {
  border: 3px solid #0000ff !important;
}

body.dev-tools-topbar-debug .logo {
  border: 3px solid #0000ff !important;
}

body.dev-tools-topbar-debug .top-bar-middle {
  border: 3px solid #4169E1 !important;
}

body.dev-tools-topbar-debug .tbmg {
  border: 2px solid #FF8C00 !important;
}

body.dev-tools-topbar-debug body .top-bar {
  border: 3px solid #e6e6fa !important;
}

/* ============================================================================
   UNDER-DEV LESSON TITLE HIGHLIGHTING (highlight_UnderDev)
   ============================================================================ */
body.dev-tools-highlight-banner-debug .debug-bg-underdev {
  background-color: #ff8c0028 !important;
  border: 2px solid #ea580c;
}

/* not_Using_Bg_Scheme show-only — app NOT in backgroundColorConfig */
body.dev-tools-highlight-banner-debug .debug-bg-random {
  background-color: #15803d !important;
  color: #fff !important;
}

/* not_Using_Master_Layout show-only — app NOT entire-page + top-bar */
body.dev-tools-highlight-banner-debug .debug-bg-masterlayout {
  background-color: #0d9488 !important;
  color: #fff !important;
}

/* not_Using_Top_Bar show-only — app has NO top-bar in index.html */
body.dev-tools-highlight-banner-debug .debug-bg-notopbar {
  background-color: #b45309 !important;
  color: #fff !important;
}

/* show_App_Names — card title: app / lesson file / titleEn */
.lesson-card-title.lesson-card-show-app-name,
.lesson-cluster-card-title.lesson-card-show-app-name {
  white-space: pre-line;
  flex-direction: column;
  gap: 4px;
  line-height: 1.42 !important;
}

.lesson-card-title.lesson-card-show-app-name .lesson-card-app-name,
.lesson-cluster-card-title.lesson-card-show-app-name .lesson-card-app-name {
  display: inline-block !important;
  padding: 7px 10px !important;
  border-radius: 4px;
  border: none !important;
  color: #fff;
  box-sizing: border-box;
  line-height: 1.32;
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.025rem;
  font-family: Arial, sans-serif;
  text-shadow: 1px 1px 0 #000;
}

.lesson-card-title.lesson-card-show-app-name .lesson-card-lesson-file,
.lesson-cluster-card-title.lesson-card-show-app-name .lesson-card-lesson-file {
  display: block;
  color: #333;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-all;
}

.lesson-card-title.lesson-card-show-app-name .lesson-card-lesson-title,
.lesson-cluster-card-title.lesson-card-show-app-name .lesson-card-lesson-title {
  font-style: normal;
  color: #000;
  line-height: 1.42;
  cursor: pointer;
}

body.dev-hide-app-names .lesson-card-title.lesson-card-show-app-name .lesson-card-app-name,
body.dev-hide-app-names .lesson-cluster-card-title.lesson-card-show-app-name .lesson-card-app-name,
body.dev-hide-app-names .lesson-card-title.lesson-card-show-app-name .lesson-card-lesson-file,
body.dev-hide-app-names .lesson-cluster-card-title.lesson-card-show-app-name .lesson-card-lesson-file {
  display: none !important;
}

.lesson-card-title.lesson-card-show-app-name .lesson-card-lesson-title-same,
.lesson-cluster-card-title.lesson-card-show-app-name .lesson-card-lesson-title-same {
  font-weight: 700;
}

/* Dev Tools CSS - Styles for development features */

/* ============================================================================
   TOP BAR DEBUG BORDERS (not_Using_Top_Bar)
   ============================================================================ */
/* Show colored borders for top bar elements when enabled via body.dev-tools-topbar-debug */
body.dev-tools-topbar-debug .lesson-title {
  border: 3px solid #ff0000 !important;
}

body.dev-tools-topbar-debug .top-bar {
  border: 3px solid #e6e6fa !important;
}

body.dev-tools-topbar-debug .top-bar .lesson-title,
body.dev-tools-topbar-debug .lesson-title {
  border: 3px solid #ff0000 !important;
}

body.dev-tools-topbar-debug .top-bar .logo,
body.dev-tools-topbar-debug .logo {
  border: 3px solid #0000ff !important;
}

body.dev-tools-topbar-debug .logo {
  border: 3px solid #0000ff !important;
}

body.dev-tools-topbar-debug .top-bar-middle {
  border: 3px solid #4169E1 !important;
}

body.dev-tools-topbar-debug .tbmg {
  border: 2px solid #FF8C00 !important;
}

body.dev-tools-topbar-debug body .top-bar {
  border: 3px solid #e6e6fa !important;
}

/* ============================================================================
   UNDER-DEV LESSON TITLE HIGHLIGHTING (highlight_UnderDev)
   ============================================================================ */
body.dev-tools-highlight-banner-debug .debug-bg-underdev {
  background-color: #ff8c0028 !important;
  border: 2px solid #ea580c;
}

/* not_Using_Bg_Scheme show-only — app NOT in backgroundColorConfig */
body.dev-tools-highlight-banner-debug .debug-bg-random {
  background-color: #15803d !important;
  color: #fff !important;
}

/* not_Using_Master_Layout show-only — app NOT entire-page + top-bar */
body.dev-tools-highlight-banner-debug .debug-bg-masterlayout {
  background-color: #0d9488 !important;
  color: #fff !important;
}

/* not_Using_Top_Bar show-only — app has NO top-bar in index.html */
body.dev-tools-highlight-banner-debug .debug-bg-notopbar {
  background-color: #b45309 !important;
  color: #fff !important;
}