/* -------------------------------------------------------------------------
   Black Music Scholar Academy — Canvas theme overrides
   Loaded on every Canvas page via the account brand config.
   Match the marketing landing page: Fraunces + Inter, cream, orange primary.
   ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bms-page: #FAF6EE;
  --bms-ink: #1A1614;
  --bms-ink-muted: #6B5F52;
  --bms-primary: #E3611D;
  --bms-primary-dark: #CB531A;
  --bms-gold: #B08935;
  --bms-hairline: rgba(26, 22, 20, 0.08);
}

/* Global — Inter as the default UI font */
html, body,
.ic-app, .ic-Login,
.ic-app-header, .ic-app-course-menu, .ic-app-course-nav {
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif !important;
  color: var(--bms-ink);
}

h1, h2, h3, h4, h5, h6,
.ic-Login h1, .ic-Login h2, .ic-Login h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

/* -------- Login page --------------------------------------------------- */

/* Full-viewport backdrop — desktop collage image, cream fallback for mobile */
body.ic-Login-Body,
body.ic-Login-confirmation,
.ic-Login {
  min-height: 100vh !important;
  background-color: var(--bms-page) !important;
  background-image: url('https://blackmusicscholar.com/img/login-bg.jpg') !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Phones use a portrait-oriented variant of the same collage */
@media (max-width: 640px) {
  body.ic-Login-Body,
  body.ic-Login-confirmation,
  .ic-Login {
    background-image: url('https://blackmusicscholar.com/img/login-bg-mobile.jpg') !important;
  }
  /* Card capped at 70vw so more of the collage stays visible around it */
  .ic-Login__container {
    width: 70vw !important;
    max-width: 70vw !important;
    padding: 2rem 1.5rem !important;
  }
}

/* Hide every Canvas/Instructure mark on login — footer link + inline SVG. */
.ic-Login-footer,
.ic-Login-footer__logo-link,
.ic-Login-footer__logo-link svg,
.ic-Login-footer__links,
.ic-Instructure-Logo,
svg.ic-Instructure-Logo,
svg[viewBox="25 265 743 80"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Force readable text colors on the login card (browser cache + brand-var
   race can leave labels/links looking white on cream). */
.ic-Login,
.ic-Login label,
.ic-Login .ic-Label,
.ic-Login .ic-Form-control label,
.ic-Login .ic-Login__actions,
.ic-Login .ic-Login__actions--left,
.ic-Login .ic-Login__actions-timeout,
.ic-Login p, .ic-Login span, .ic-Login strong {
  color: var(--bms-ink) !important;
}
.ic-Login a,
.ic-Login .ic-Login__link,
.ic-Login a.forgot_password_link {
  color: var(--bms-primary) !important;
}
.ic-Login a:hover { color: var(--bms-gold) !important; }

/* Center card at 70vh — liquid glass */
.ic-Login__container {
  position: relative !important;
  width: min(92vw, 420px) !important;
  height: 70vh !important;
  min-height: 560px !important;
  max-height: 760px !important;
  margin: 0 !important;
  padding: 2.5rem 2.75rem !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 246, 232, 0.6) 100%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  border-radius: 22px !important;
  box-shadow:
    0 24px 60px rgba(26, 22, 20, 0.18),
    0 4px 20px rgba(26, 22, 20, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(26, 22, 20, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow-y: auto !important;
}

/* A subtle highlight sheen along the top edge — sells the "glass" curvature */
.ic-Login__container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 12%);
  pointer-events: none;
  z-index: 0;
}
.ic-Login__container > * {
  position: relative;
  z-index: 1;
}

.ic-Login__body,
.ic-Login__content,
.ic-Login__innerContent {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Every form control fills the card width — kill Canvas' default fixed widths */
.ic-Login__container form,
.ic-Login__container fieldset,
.ic-Login__container .ic-Form-control,
.ic-Login__container .ic-Form-control--login,
.ic-Login__container .ic-Login__actions {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Logo — center + moderate size, tight to form */
.ic-Login-header,
.ic-Login-header__logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 0 1.5rem 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
}
.ic-Login-header__logo img,
.ic-Login-header img {
  max-height: 110px !important;
  max-width: 110px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Field labels */
.ic-Label,
.ic-Form-control label,
label[for] {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--bms-ink) !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

/* Inputs */
.ic-Input,
input[type="text"],
input[type="email"],
input[type="password"] {
  height: 48px !important;
  padding: 0.6rem 1rem !important;
  border: 1px solid var(--bms-hairline) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--bms-ink) !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.ic-Input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border-color: var(--bms-primary) !important;
  box-shadow: 0 0 0 3px rgba(227, 97, 29, 0.15) !important;
  outline: none !important;
}

/* Form field spacing */
.ic-Form-control,
.ic-Form-control--login {
  margin-bottom: 1.25rem !important;
}

/* Primary "Log In" button */
.Button.Button--login,
button[type="submit"].Button--login {
  background-color: var(--bms-primary) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  height: 48px !important;
  padding: 0 1.75rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}
.Button.Button--login:hover,
.Button.Button--login:focus {
  background-color: var(--bms-primary-dark) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(227, 97, 29, 0.15) !important;
}

/* "Stay signed in" checkbox row + Forgot Password link */
.ic-Login__actions,
.ic-Login__actions--left {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-top: 1.25rem !important;
}

.ic-Login__forgot,
.ic-Login__forgot-text,
.ic-Login a.forgot_password_link,
.ic-Login__link {
  color: var(--bms-primary) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
}
.ic-Login__link:hover,
.ic-Login a.forgot_password_link:hover {
  color: var(--bms-gold) !important;
  border-bottom-color: var(--bms-gold) !important;
}

/* Checkbox tint */
input[type="checkbox"] {
  accent-color: var(--bms-primary);
}

/* Session-timeout message */
.ic-Login__actions-timeout {
  color: var(--bms-ink-muted) !important;
  font-size: 13px !important;
}

/* Help link at bottom */
.ic-Login__link.login_link,
.ic-Login__actions--left a {
  color: var(--bms-primary) !important;
}

/* =========================================================================
   Global Canvas surfaces — dashboard, courses, inbox, calendar, syllabus
   ========================================================================= */

/* -------- App shell: main + right-hand tray backgrounds --------- */
body.ic-app,
#application, #wrapper, #main, #content-wrapper, #content {
  background-color: var(--bms-page) !important;
  color: var(--bms-ink);
}

/* -------- Global left sidebar (Account, Admin, Dashboard, Courses, …) ----- */

/* Cream circular halo behind the round seal so it doesn't get swallowed
   by the dark sidebar background. */
.ic-app-header__logomark-container,
.ReactModalPortal .ic-app-header__logomark-container {
  background: var(--bms-page) !important;
  border-radius: 50% !important;
  padding: 6px !important;
  width: 56px !important;
  height: 56px !important;
  margin: 12px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.ic-app-header__logomark {
  width: 44px !important;
  height: 44px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Sidebar menu items — Inter, gentle hover */
.ic-app-header__menu-list-item .menu-item__text,
.ic-app-header__menu-list-item {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.02em;
}
.ic-app-header__menu-list-item:hover,
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active {
  background-color: rgba(227, 97, 29, 0.12) !important;
}

/* -------- Dashboard header ("Dashboard" title + kebab) ------------------- */

.ic-Dashboard-header__layout,
.ic-Dashboard-header {
  background: transparent !important;
  border: none !important;
  padding: 32px 0 !important;
}
.ic-Dashboard-header__title,
.ic-Dashboard-header h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  font-size: 44px !important;
  color: var(--bms-ink) !important;
}
.ic-Dashboard-header__actions .ic-Dashboard-header__button-layout {
  color: var(--bms-ink-muted) !important;
}

/* Published / Unpublished section headers on dashboard */
#dashboard_published_courses h2,
#dashboard_unpublished_courses h2,
.unpublished_courses_redesign h2,
.ic-DashboardCard__box__header {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  font-size: 28px !important;
  color: var(--bms-ink) !important;
  border-bottom: 1px solid var(--bms-hairline) !important;
  padding-bottom: 12px !important;
  margin-bottom: 28px !important;
}

/* -------- Course cards on the dashboard ---------------------------------- */

.ic-DashboardCard {
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--bms-card, #FFFFFF) !important;
  border: 1px solid var(--bms-hairline) !important;
  box-shadow: 0 2px 12px rgba(26, 22, 20, 0.05) !important;
  transition: box-shadow 0.18s, transform 0.18s !important;
}
.ic-DashboardCard:hover {
  box-shadow: 0 12px 32px rgba(26, 22, 20, 0.14) !important;
  transform: translateY(-3px) !important;
}
.ic-DashboardCard__header_hero,
.ic-DashboardCard__header {
  border-radius: 0 !important;
}
.ic-DashboardCard__header-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: var(--bms-ink) !important;
  letter-spacing: -0.005em !important;
}
.ic-DashboardCard__header-title a {
  color: var(--bms-ink) !important;
  text-decoration: none !important;
}
.ic-DashboardCard__header-title a:hover {
  color: var(--bms-primary) !important;
}
.ic-DashboardCard__header-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--bms-ink-muted) !important;
  margin-top: 4px !important;
}
.ic-DashboardCard__header__button,
.ic-DashboardCard__header__publish {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--bms-ink) !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
/* Canvas positions the action-icon row absolutely inside the card. Force it
   back into normal flow so the icons stay under the title/code, not over. */
.ic-DashboardCard__action-container {
  position: static !important;
  display: flex !important;
  gap: 8px !important;
  background: transparent !important;
  border-top: 1px solid var(--bms-hairline) !important;
  padding: 10px 14px !important;
}
.ic-DashboardCard__action-badge,
.ic-DashboardCard__action-layout,
.ic-DashboardCard__action-container * {
  position: static !important;
}
.ic-DashboardCard__action-container a {
  color: var(--bms-ink-muted) !important;
}
.ic-DashboardCard__action-container a:hover {
  color: var(--bms-primary) !important;
}

/* -------- Buttons everywhere (not just login) ---------------------------- */

.Button, .btn, button.ui-button {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0 !important;
  border-radius: 8px !important;
}
.Button--primary, .btn-primary,
.ui-button.ui-button-primary {
  background: var(--bms-primary) !important;
  background-image: none !important;
  border-color: var(--bms-primary) !important;
  color: #FFFFFF !important;
}
.Button--primary:hover, .btn-primary:hover,
.ui-button.ui-button-primary:hover {
  background: var(--bms-primary-dark) !important;
  border-color: var(--bms-primary-dark) !important;
}
.Button--secondary, .btn-secondary {
  background: var(--bms-page) !important;
  color: var(--bms-ink) !important;
  border: 1px solid var(--bms-hairline) !important;
}

/* -------- Course pages: title, tabs, sidebar --------------------------- */

.ic-app-course-menu {
  background: var(--bms-page) !important;
  border-right: 1px solid var(--bms-hairline) !important;
}
.ic-app-course-nav__body a {
  font-family: 'Inter', sans-serif !important;
  color: var(--bms-ink) !important;
  border-left: 3px solid transparent !important;
  padding: 10px 16px !important;
}
.ic-app-course-nav__body a:hover {
  background-color: rgba(227, 97, 29, 0.08) !important;
  color: var(--bms-primary) !important;
}
.ic-app-course-nav__body a.active {
  color: var(--bms-primary) !important;
  border-left-color: var(--bms-primary) !important;
  background-color: rgba(227, 97, 29, 0.05) !important;
  font-weight: 600 !important;
}

/* Breadcrumbs */
#breadcrumbs {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}
#breadcrumbs a { color: var(--bms-primary) !important; }
#breadcrumbs li:last-child { color: var(--bms-ink) !important; }

/* Course home + module list */
.context_module,
.module_editor,
.item-group-condensed {
  background: #FFFFFF !important;
  border: 1px solid var(--bms-hairline) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(26, 22, 20, 0.04) !important;
  margin-bottom: 16px !important;
}
.context_module .header,
.ig-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--bms-hairline) !important;
  padding: 14px 20px !important;
}
.context_module .header .name,
.ig-header .name {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  color: var(--bms-ink) !important;
}

/* Assignment / quiz / discussion rows */
.ig-row {
  background: #FFFFFF !important;
  border-top: 1px solid var(--bms-hairline) !important;
  padding: 12px 16px !important;
}
.ig-row:hover {
  background: rgba(227, 97, 29, 0.03) !important;
}
.ig-row .ig-title {
  font-family: 'Inter', sans-serif !important;
  color: var(--bms-ink) !important;
  font-weight: 500 !important;
}
.ig-row .ig-title:hover { color: var(--bms-primary) !important; }

/* -------- Inbox --------------------------------------------------------- */

#conversations,
.conversations .messages-view,
.conversation-thread {
  background: #FFFFFF !important;
  border: 1px solid var(--bms-hairline) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}
.conversation .conversation-row,
.conversations-inbox .conversation {
  border-bottom: 1px solid var(--bms-hairline) !important;
  padding: 12px !important;
  border-radius: 8px !important;
  transition: background-color 0.12s;
}
.conversation.active,
.conversations-inbox .conversation.selected {
  background: rgba(227, 97, 29, 0.06) !important;
}
.conversation:hover { background: rgba(26, 22, 20, 0.03) !important; }

/* -------- Calendar ------------------------------------------------------ */

.calendar,
.fc, .fc-view-container {
  background: var(--bms-page) !important;
  border: none !important;
}
.fc-header-toolbar, .fc-toolbar {
  padding: 12px 16px !important;
}
.fc-toolbar-title,
.fc-header-title h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  color: var(--bms-ink) !important;
}
.fc-day-header, .fc-col-header-cell {
  font-family: 'Inter', sans-serif !important;
  color: var(--bms-ink-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 11px !important;
}
.fc-event, .fc-timeline-event {
  border-radius: 6px !important;
  border: none !important;
  padding: 3px 8px !important;
  font-family: 'Inter', sans-serif !important;
}
.fc-day-today,
.fc-day.fc-day-today {
  background: rgba(227, 97, 29, 0.06) !important;
}

/* -------- Gradebook ---------------------------------------------------- */

.gradebook,
#gradebook_wrapper,
.roster {
  background: var(--bms-page) !important;
}
.gradebook_toolbar,
.gradebook-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--bms-hairline) !important;
  padding: 12px 16px !important;
}

/* -------- Forms + inputs across Canvas --------------------------------- */

.ic-Input,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], textarea, select {
  border-radius: 8px !important;
  border: 1px solid var(--bms-hairline) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  background: #FFFFFF !important;
}
.ic-Input:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--bms-primary) !important;
  box-shadow: 0 0 0 3px rgba(227, 97, 29, 0.14) !important;
  outline: none !important;
}

/* -------- Tables (gradebook, roster, generic) ------------------------- */

table.roster, table.ic-Table, .ic-Table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #FFFFFF !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid var(--bms-hairline) !important;
}
table.ic-Table th, table.roster th {
  background: rgba(26, 22, 20, 0.03) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--bms-ink-muted) !important;
  border-bottom: 1px solid var(--bms-hairline) !important;
}
table.ic-Table td { border-top: 1px solid var(--bms-hairline) !important; }

/* -------- Announcements / discussions on the dashboard right rail ----- */

#right-side-wrapper {
  background: transparent !important;
}
#right-side .todo,
#right-side .events_list,
#right-side .recent-feedback {
  background: #FFFFFF !important;
  border: 1px solid var(--bms-hairline) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
}
#right-side h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: var(--bms-ink) !important;
}

/* -------- Links throughout ---------------------------------------------- */

a { color: var(--bms-primary); }
a:hover { color: var(--bms-primary-dark); }

/* -------- Alert / flash banners --------------------------------------- */

.ic-flash-error, .ic-flash-info, .ic-flash-success, .ic-flash-warning {
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  padding: 12px 16px !important;
}