/*
 * BitCure Education Library — _extra.css v2
 * Targets Material UI classes that MediaCMS uses, plus cleanup items.
 */

:root {
  --bitcure-teal:        #30bfa5;
  --bitcure-teal-hover:  #2aa68d;
  --bitcure-teal-soft:   #4dd5bb;
  --bitcure-teal-faint:  rgba(48, 191, 165, 0.15);
  --bitcure-blue:        #072772;
  --bitcure-blue-hover:  #0a3399;
  --bitcure-text-light:  #ffffff;
  --bitcure-text-dim:    #c5c5c5;

  /* Override MediaCMS legacy CSS variables */
  --first-color:         #30bfa5;
  --second-color:        #072772;
  --link-color:          #30bfa5;
  --link-color-hover:    #2aa68d;
  --brand-primary:       #30bfa5;
  --brand-secondary:     #072772;
}

/* ════════════════════════════════════════════════════════════════════
 * Material UI buttons — every variant, every state
 * MediaCMS uses MUI's default green palette (#29b96b) for "primary".
 * We override every selector pattern MUI generates.
 * ════════════════════════════════════════════════════════════════════ */

.MuiButton-containedPrimary,
.MuiButton-root.MuiButton-containedPrimary,
.MuiButtonBase-root.MuiButton-containedPrimary,
button.MuiButton-containedPrimary,
[class*="containedPrimary"],
button[class*="Primary"][class*="contained"] {
  background-color: var(--bitcure-teal) !important;
  color: var(--bitcure-text-light) !important;
}

.MuiButton-containedPrimary:hover,
.MuiButton-root.MuiButton-containedPrimary:hover,
[class*="containedPrimary"]:hover {
  background-color: var(--bitcure-teal-hover) !important;
}

.MuiButton-textPrimary,
.MuiButton-root.MuiButton-textPrimary,
.MuiButton-outlinedPrimary,
.MuiButton-root.MuiButton-outlinedPrimary,
[class*="textPrimary"],
[class*="outlinedPrimary"],
[class*="text"][class*="Primary"] {
  color: var(--bitcure-teal) !important;
}

.MuiButton-outlinedPrimary,
[class*="outlinedPrimary"] {
  border-color: var(--bitcure-teal) !important;
}

.MuiButton-textPrimary:hover,
.MuiButton-outlinedPrimary:hover,
[class*="textPrimary"]:hover {
  background-color: var(--bitcure-teal-faint) !important;
  color: var(--bitcure-teal-hover) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Sign In / Register header buttons — usually MuiButton-text or plain <a>
 * ════════════════════════════════════════════════════════════════════ */

.app-header a,
.app-header button,
.app-header .MuiButton-root,
header .MuiButton-text,
header a[href*="login"],
header a[href*="register"],
header a[href*="signup"],
[class*="sign-in"],
[class*="register"] {
  color: var(--bitcure-teal) !important;
}

.app-header a:hover,
.app-header button:hover {
  color: var(--bitcure-teal-hover) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Sidebar / hamburger menu — active and hover state icon + text
 * MediaCMS uses MuiListItem and svg icons; default active state is green
 * ════════════════════════════════════════════════════════════════════ */

.MuiListItem-root:hover,
.MuiListItem-root.Mui-selected,
.MuiListItem-root.active,
.MuiListItemButton-root:hover,
.MuiListItemButton-root.Mui-selected,
[class*="listItem"]:hover,
[class*="listItem"].active,
.sidebar-link:hover,
.sidebar-link.active,
.nav-link:hover,
.nav-link.active {
  color: var(--bitcure-teal) !important;
  background-color: var(--bitcure-teal-faint) !important;
}

.MuiListItem-root:hover svg,
.MuiListItem-root.Mui-selected svg,
.MuiListItem-root.active svg,
.MuiListItemButton-root:hover svg,
.MuiListItemButton-root.Mui-selected svg,
[class*="listItem"]:hover svg,
[class*="listItem"].active svg,
.sidebar-link:hover svg,
.sidebar-link.active svg,
.nav-link:hover svg,
.nav-link.active svg {
  fill: var(--bitcure-teal) !important;
  color: var(--bitcure-teal) !important;
}

.MuiListItemIcon-root svg {
  color: inherit;
}

/* ════════════════════════════════════════════════════════════════════
 * Hide "Powered by mediacms.io" attribution
 * ════════════════════════════════════════════════════════════════════ */

.powered-by,
.app-footer .powered-by,
footer .powered-by,
.footer-attribution,
[class*="powered-by"],
[class*="poweredBy"],
.footer-credits,
.mediacms-attribution {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Brute-force any footer text containing "mediacms" */
footer a[href*="mediacms"],
footer a[href*="MediaCMS"] {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Form focus state — teal ring instead of default
 * ════════════════════════════════════════════════════════════════════ */

input:focus,
textarea:focus,
select:focus,
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiInput-underline:after,
.MuiFilledInput-root.Mui-focused,
.form-control:focus {
  border-color: var(--bitcure-teal) !important;
  box-shadow: 0 0 0 3px rgba(48, 191, 165, 0.2) !important;
  outline: none !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--bitcure-teal) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Links throughout
 * ════════════════════════════════════════════════════════════════════ */

a, a:link, a:visited {
  color: var(--bitcure-teal);
}
a:hover, a:focus {
  color: var(--bitcure-teal-hover);
}

/* ════════════════════════════════════════════════════════════════════
 * Video player accents
 * ════════════════════════════════════════════════════════════════════ */

.video-js .vjs-play-progress,
.video-js .vjs-volume-level,
.vjs-loading-spinner {
  background-color: var(--bitcure-teal) !important;
}
.video-js .vjs-big-play-button {
  border-color: var(--bitcure-teal) !important;
  color: var(--bitcure-teal) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Tags, badges, chips
 * ════════════════════════════════════════════════════════════════════ */

.MuiChip-root,
.tag, .badge, .chip {
  background-color: var(--bitcure-teal-faint);
  color: var(--bitcure-teal);
  border-color: rgba(48, 191, 165, 0.3);
}

/* ════════════════════════════════════════════════════════════════════
 * Misc UI: progress, switches, selection
 * ════════════════════════════════════════════════════════════════════ */

.MuiSwitch-track,
.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
  background-color: var(--bitcure-teal) !important;
}

::selection {
  background-color: rgba(48, 191, 165, 0.35);
  color: inherit;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(48, 191, 165, 0.4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--bitcure-teal);
}

/* ════════════════════════════════════════════════════════════════════
 * Footer styling (if not hidden entirely)
 * ════════════════════════════════════════════════════════════════════ */

.app-footer,
footer.app-footer,
.site-footer {
  background-color: var(--bitcure-blue);
  color: var(--bitcure-text-dim);
}
.app-footer a,
.site-footer a {
  color: var(--bitcure-text-light);
}