@import './theme-customizations.css';

/* http://www.labnol.org/internet/light-youtube-embeds/27941/ */

    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }

    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }

    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }

    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }

    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("TxzC70f.png") no-repeat;
        cursor: pointer;
    }

.fa-stack[data-count]:after{
  position:absolute;
  right:0%;
  top:1%;
  content: attr(data-count);
  font-size:30%;
  padding:.6em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  background:rgba(255,0,0,.85);
  text-align:center;
  min-width:2em;
  font-weight:bold;
}

.tsugi_overlay {
    opacity:1.0;
    background-color:#fff;
    position:fixed;
    width:100%;
    height:100%;
    top:100px;
    left:0px;
    z-index:1000;
    text-align: center;
}

/* Adapted from https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp */
/* The Overlay (background) */
.w3schools-overlay {
  height: 100%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 2000; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  text-align: center;
  display: none;
}

/* Position the content inside the overlay */
.w3schools-overlay-content {
  position: relative;
  background-color: var(--background-color);
  top: 40px;
  width: 90%;
  margin: auto;
  z-index: 2001; /* Sit on top */
}

/* Bootstrap theme changes */
html {
    font-size: var(--font-size);
}
body {
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.93rem;
    color: var(--text);
    background-color: var(--background-color);
}
a, .btn-link {
    color: var(--primary);
}
a:active,
a:hover,
a:focus,
.btn-link:active,
.btn-link:hover,
.btn-link:focus {
    color: var(--primary);
    opacity: 0.8;
}
a:active,
a:focus,
a:hover,
.btn-link:active,
.btn-link:focus,
.btn-link:hover {
    text-decoration: none;
}
.btn {
    font-weight: 900;
    font-size: 1.14rem;
    line-height: 1.93rem;
}
.btn-primary {
    color: var(--secondary);
    background-color: var(--primary);
    border-color: var(--primary-border);
}
.btn-primary:focus,
.btn-primary.focus {
    color: var(--secondary);
    background-color: var(--primary-darker);
    border-color: var(--primary-darkest);
}
.btn-primary:hover {
    color: var(--secondary);
    background-color: var(--primary-darker);
    border-color: var(--primary-darkest);
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: var(--secondary);
    background-color: var(--primary-darker);
    background-image: none;
    border-color: var(--primary-darkest);
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    color: var(--secondary);
    background-color: var(--primary-darker);
    border-color: var(--primary-darkest);
}
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
    background-color: var(--primary-darker);
    border-color: var(--primary-darkest);
}
.btn-primary .badge {
    color: var(--primary-darkest);
    background-color: var(--secondary);;
}
.btn-under {
    margin-top: 10px;
}
.checkbox input, .radio input {
    margin-top: 7px;
}
h1, .h1 {
    font-weight: 900;
    font-size: 2.64rem;
    line-height: 4.23rem;
}
h2, .h2 {
    font-weight: 900;
    font-size: 2.07rem;
    line-height: 3.43rem;
}
h3, .h3 {
    font-weight: 900;
    font-size: 1.64rem;
    line-height: 2.86rem;
}
h4, .h4 {
    font-weight: 900;
    font-size: 1.29rem;
    line-height: 1.93rem;
}
h5, .h5 {
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.5rem;
}
h1.inline, .h1.inline,
h2.inline, .h2.inline,
h3.inline, .h3.inline,
h4.inline, .h4.inline,
h5.inline, .h5.inline {
    font-weight: normal;
    line-height: 1.5rem;
    text-decoration: none;
}
h1 > small,
h2 > small,
h3 > small,
h4 > small,
h5 > small {
    font-weight: 900;
    color: var(--text-light);
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
    color: var(--text-light);
}
h1.small-hdr,
h2.small-hdr,
h3.small-hdr,
h4.small-hdr,
h5.small-hdr {
    margin-top: 1rem;
    margin-bottom: 0;
}
h2.sub-hdr,
h3.sub-hdr,
h4.sub-hdr,
h5.sub-hdr {
    margin-top: 0;
}
h1.hdr-notop-mrgn,
h2.hdr-notop-mrgn,
h3.hdr-notop-mrgn,
h4.hdr-notop-mrgn,
h5.hdr-notop-mrgn {
    margin-top: 0;
}
label.h1,
label.h2,
label.h3,
label.h4,
label.h5 {
    margin-top: 0;
}
.navbar {
    margin-bottom: 0;
}
.navbar-header {
    padding-top: 0.23rem;
}
.navbar-inverse {
    background: var(--primary-menu);
    border-color: var(--primary-menu);
}
.navbar-inverse .navbar-brand {
    color: var(--secondary-menu);
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: var(--secondary-menu);
    background-color: transparent;
}
.navbar-inverse .navbar-text {
    color: var(--secondary-menu);
}
.navbar-inverse .navbar-nav > li > a {
    color: var(--secondary-menu);
}
.navbar-inverse .navbar-nav > li > p {
    color: var(--secondary-menu);
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: var(--secondary-menu);
    background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: var(--secondary-menu);
    background: var(--primary-menu);
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
    color: var(--secondary-menu);
    background: transparent;
}
.navbar-inverse .navbar-toggle {
    border-color: var(--secondary-menu);
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background: var(--primary-menu);
}
.navbar-inverse .navbar-toggle .icon-bar {
    background: var(--secondary-menu);
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border-color: var(--secondary-menu);
    background: var(--primary-menu);
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background: var(--primary-menu);
    border-color: var(--secondary-menu);
    color: var(--secondary-menu);
}
@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: var(--secondary-menu);
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > p {
        color: var(--secondary-menu);
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--secondary-menu);
        background: transparent;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: var(--secondary-menu);
        background: var(--primary-menu);
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: var(--secondary-menu);
        background: transparent;
    }
}
.navbar-inverse .navbar-link {
    color: var(--secondary-menu);
}
.navbar-inverse .navbar-link:hover {
    color: var(--secondary-menu);
}
.navbar-inverse {
    border: none;
    border-radius: 0;
}
.navbar-inverse .nav > li {
    font-size: 1.23rem;
    margin-top: 0.43rem;
    margin-bottom: 0.43rem;
    padding: 0 0.43rem;
}
.navbar-inverse .nav > li > a {
    border-bottom: 2px solid transparent;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.43rem;
    margin-left: 1.07rem;
    margin-right: 1.07rem;
    margin-bottom: 0.43rem;
}
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    font-size: 1.64rem;
    opacity: 1;
}
.navbar-inverse .nav > li > a:active,
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > li > a:focus {
    background-color: var(--primary-menu);
    color: var(--secondary-menu);
    opacity: 1;
}
.navbar-inverse .nav > li:hover > a,
.navbar-inverse .nav > li:focus > a,
.navbar-inverse .nav > li.active > a,
.navbar-inverse .nav > li.active:hover > a,
.navbar-inverse .nav > li.active:focus > a {
    border-bottom-color: var(--secondary-menu);
    opacity: 1;
}
.navbar-default {
    background: var(--secondary-menu);
    border-color: var(--primary-menu);
}
.navbar-default .navbar-brand {
    color: var(--primary-menu);
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: var(--primary-menu);
    background-color: transparent;
}
.navbar-default .navbar-text {
    color: var(--primary-menu);
}
.navbar-default .navbar-nav > li > a {
    color: var(--primary-menu);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--primary-menu);
    background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--primary-menu);
    background: var(--secondary-menu);
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
    color: var(--primary-menu);
    background: transparent;
}
.navbar-default .navbar-toggle {
    border-color: var(--primary-menu);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background: var(--secondary-menu);
}
.navbar-default .navbar-toggle .icon-bar {
    background: var(--primary-menu);
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: var(--primary-menu);
    background: var(--secondary-menu);
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background: var(--secondary-menu);
    border-color: var(--primary-menu);
    color: var(--primary-menu);
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: var(--primary-menu);
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: var(--primary-menu);
        background: transparent;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: var(--primary-menu);
        background: var(--secondary-menu);
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: var(--primary-menu);
        background: transparent;
    }
}
.navbar-default .navbar-link {
    color: var(--primary-menu);
}
.navbar-default .navbar-link:hover {
    color: var(--primary-menu);
}
.navbar-default {
    border: none;
    border-radius: 0;
}
.navbar-default .nav > li {
    font-size: 1.23rem;
    margin-top: 0.43rem;
    margin-bottom: 0.43rem;
    padding: 0 0.43rem;
}
.navbar-default .nav > li > a {
    border-bottom: 2px solid transparent;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.43rem;
    margin-left: 1.07rem;
    margin-right: 1.07rem;
    margin-bottom: 0.43rem;
}
.navbar-default .nav > li > p {
    border-bottom: 2px solid transparent;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0.43rem;
    margin-left: 1.07rem;
    margin-right: 1.07rem;
    margin-bottom: 0.43rem;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    font-size: 1.64rem;
    opacity: 1;
}
.navbar-default .nav > li > a:active,
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    background-color: var(--secondary-menu);
    color: var(--primary-menu);
    opacity: 1;
}
.navbar-default .nav > li:hover > a,
.navbar-default .nav > li:focus > a,
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active:hover > a,
.navbar-default .nav > li.active:focus > a {
    border-bottom-color: var(--primary-menu);
    opacity: 1;
}
@media (max-width: 767px) {
    .nav > li:hover > a,
    .nav > li:focus > a,
    .nav > li.active > a,
    .nav > li.active:hover > a,
    .nav > li.active:focus > a {
        border-bottom-color: transparent;
    }
}
.navbar-nav > li > .dropdown-menu {
    margin-top: 0.43rem;
}
.navbar-nav > li.dropdown > a img {
    height: 3.35rem;
}
.navbar-default .nav > li.dropdown > a.dropdown-img,
.navbar-inverse .nav > li.dropdown > a.dropdown-img {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.flx-cntnr {
    display: flex;
    position: relative;
}
.flx-row {
    flex-direction: row;
}
.flx-nowrap {
    flex-wrap: nowrap;
}
.flx-start {
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}
.flx-grow-all {
    flex-grow: 1;
}
.flx-grow-1 {
    flex-grow: 1;
}
.flx-grow-2 {
    flex-grow: 2;
}
#flashmessages {
    position: relative;
}
.alert-banner {
    width: 100%;
    padding-top: 0.71rem;
    padding-bottom: 0.57rem;
    font-size: 1.23rem;
    line-height: 1.93rem;
}
.alert-banner > .container > .close {
    margin-right: 0.57rem;
}
#toolTitle {
    margin-top: 3.23rem;
}
.splash-container {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.splash-content {
    text-align: center;
    color: var(--secondary);
}
h1.splash-header {
    color: var(--secondary);
}
.splash-container {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.splash-content {
    text-align: center;
}

/* https://stackoverflow.com/questions/23001424/how-do-i-get-rid-of-this-blue-halo-around-the-close-dialog-button-with-jqueryui */

.ui-button:focus { outline:none !important }

/* Semantic two-level list for assignments progress (replaces table layout) */
.tsugi-assignments-progress-list,
.tsugi-assignments-progress-list ul,
.tsugi-assignments-items,
.tsugi-assignments-items li,
.tsugi-assignments-module {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}
.tsugi-assignments-progress-list {
  padding: 0;
  margin: 0 0 20px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.tsugi-assignments-module {
  margin: 0;
  padding: 0;
  width: 100%;
}
.tsugi-assignments-module-link {
  display: block;
  width: 100%;
  padding: 10px 15px;
  background-color: #d9edf7;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #31708f;
  text-decoration: none;
  box-sizing: border-box;
}
.tsugi-assignments-module:first-child .tsugi-assignments-module-link {
  border-top: none;
}
.tsugi-assignments-module-link:hover {
  background-color: #bce8f1;
  color: #31708f;
}
.tsugi-assignments-items {
  margin: 0;
  padding: 0;
  padding-left: 1.25rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.tsugi-assignments-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  padding: 8px 15px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
}
.tsugi-assignments-item:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.tsugi-assignments-item:hover {
  background-color: #f5f5f5 !important;
}
.tsugi-assignments-item:last-child {
  border-bottom: none;
}
/* Title + due badge inline; score stays right (Tsugi\UI\Lessons renderAssignments) */
.tsugi-assignments-item .tsugi-assignments-status {
  flex: 0 0 auto;
  padding-right: 8px;
}
.tsugi-assignments-item .tsugi-assignments-title-row {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.tsugi-assignments-item .tsugi-assignments-title {
  vertical-align: baseline;
}
.tsugi-assignments-item .tsugi-assignments-score {
  flex: 0 0 auto;
  text-align: right;
  margin-left: auto;
  min-width: 6.5rem;
  padding-left: 15px;
}

/* --------------------------------------------------------------------------
   Lessons UI — layout, lists, overlays (Tsugi\UI\Lessons; formerly inline in header())
   -------------------------------------------------------------------------- */

/* All-modules cards: Lessons::renderAll() wraps modules in #box > article.card */
#box article.card {
  display: inline-block;
  padding: 0.5em;
  margin: 12px;
  border: 1px solid #000;
  height: 12em;
  overflow-y: hidden;
}
#box article.card > div {
  height: 11em;
  overflow-y: hidden;
  text-overflow: ellipsis;
}
#box article.card .tsugi-card-description {
  margin: 0.2em 0 0 0;
  line-height: 2;
}

/* Full-screen loader (e.g. waterfall / transitions on lessons index) */
#loader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin: 0;
  z-index: 100;
}

/* Indent content lists that follow h2 headers */
h2 ~ ul.tsugi-lessons-content-list,
h2 + ul.tsugi-lessons-content-list {
  margin-left: 1.5em;
  padding-left: 0.5em;
}
div:has(> h2) ul.tsugi-lessons-content-list,
li:has(> h2) ul.tsugi-lessons-content-list {
  margin-left: 1.5em;
  padding-left: 0.5em;
}

.tsugi-lessons-module-title-cardmatch {
  overflow: auto;
}

ul.tsugi-lessons-content-list {
  list-style: none;
  padding-left: 0;
}
ul.tsugi-lessons-content-list li {
  list-style: none;
  padding-left: 0;
}
ul.tsugi-lessons-content-list li i.fa {
  color: #666;
  width: 1.2em;
  text-align: center;
}

/* Close button for video/audio overlay dialogs */
.tsugi-overlay-close {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
}
.tsugi-overlay-close:hover {
  background: rgba(255, 255, 255, 0.3);
}
.w3schools-overlay-content {
  position: relative;
}

/* Button styled as link for video/lecture play triggers */
.tsugi-video-play-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
}

/* Colored item type icons in lesson content */
.tsugi-item-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  font-size: 14px;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Prev / All / Next pager on single-module view */
ul.pager.tsugi-lessons-pager {
  display: flex;
  justify-content: space-between;
  min-width: 200px;
}
ul.pager.tsugi-lessons-pager > li {
  flex: 1;
}
ul.pager.tsugi-lessons-pager > li:first-child {
  text-align: left;
}
ul.pager.tsugi-lessons-pager > li:nth-child(2) {
  text-align: center;
}
ul.pager.tsugi-lessons-pager > li:last-child {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Lessons UI — assignment due badges + module progress (Tsugi\UI\Lessons)
   Covers: assignments tool list, all-modules cards, single-module title, LTI rows.
   -------------------------------------------------------------------------- */
:root {
  --tsugi-lesson-badge-fs: 0.875rem;
  --tsugi-lesson-badge-lh: 1.35;
  --tsugi-lesson-badge-pad-y: 0.25rem;
  --tsugi-lesson-badge-pad-x: 0.6rem;
  --tsugi-lesson-badge-radius: 0.35rem;
  --tsugi-lesson-badge-margin: 0.5rem;
  --tsugi-lesson-due-ok-bg: #d4edda;
  --tsugi-lesson-due-ok-fg: #155724;
  --tsugi-lesson-due-ok-border: #b8dabc;
  --tsugi-lesson-due-progress-bg: #cfe2ff;
  --tsugi-lesson-due-progress-fg: #084298;
  --tsugi-lesson-due-progress-border: #9ec5fe;
  --tsugi-lesson-due-late-bg: #f8d7da;
  --tsugi-lesson-due-late-fg: #721c24;
  --tsugi-lesson-due-late-border: #f1bfc4;
  --tsugi-lesson-due-soon-bg: #fff3cd;
  --tsugi-lesson-due-soon-fg: #856404;
  --tsugi-lesson-due-soon-border: #ffeaa7;
  --tsugi-lesson-due-neutral-bg: #e9ecef;
  --tsugi-lesson-due-neutral-fg: #495057;
  --tsugi-lesson-due-neutral-border: #dee2e6;
  /* Upcoming (due in more than 7 days): subtle grey, not the same green as completed */
  --tsugi-lesson-due-future-bg: #e9ecef;
  --tsugi-lesson-due-future-fg: #212529;
  --tsugi-lesson-due-future-border: #dee2e6;
}

.tsugi-assignments-item .tsugi-assignments-due-badge,
.tsugi-lessons-module-card-link .tsugi-assignments-due-badge,
.tsugi-lessons-module-title-cardmatch .tsugi-assignments-due-badge,
.tsugi-lessons-module-lti .tsugi-assignments-due-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--tsugi-lesson-badge-margin);
  padding: var(--tsugi-lesson-badge-pad-y) var(--tsugi-lesson-badge-pad-x);
  border-radius: var(--tsugi-lesson-badge-radius);
  font-size: var(--tsugi-lesson-badge-fs);
  font-weight: 600;
  line-height: var(--tsugi-lesson-badge-lh);
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* Module percent-complete badges (Tsugi\UI\Lessons::echoModuleAggregateProgressBadge); keep styling here, not inline in PHP. */
.tsugi-lessons-module-card-link .progress-badge,
.tsugi-lessons-module-title-cardmatch .progress-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--tsugi-lesson-badge-margin);
  padding: var(--tsugi-lesson-badge-pad-y) var(--tsugi-lesson-badge-pad-x);
  border-radius: var(--tsugi-lesson-badge-radius);
  font-size: var(--tsugi-lesson-badge-fs);
  font-weight: 600;
  line-height: var(--tsugi-lesson-badge-lh);
  border: 1px solid transparent;
  box-sizing: border-box;
}

.tsugi-lessons-module-card-link .progress-badge-check,
.tsugi-lessons-module-title-cardmatch .progress-badge-check {
  background: var(--tsugi-lesson-due-ok-bg);
  color: var(--tsugi-lesson-due-ok-fg);
  border-color: var(--tsugi-lesson-due-ok-border);
}

.tsugi-lessons-module-card-link .progress-badge-percent,
.tsugi-lessons-module-title-cardmatch .progress-badge-percent {
  background: var(--tsugi-lesson-due-progress-bg);
  color: var(--tsugi-lesson-due-progress-fg);
  border-color: var(--tsugi-lesson-due-progress-border);
}

.tsugi-assignments-item .tsugi-assignments-due-state,
.tsugi-lessons-module-lti .tsugi-assignments-due-state,
.tsugi-lessons-module-card-link .tsugi-assignments-due-state,
.tsugi-lessons-module-title-cardmatch .tsugi-assignments-due-state {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1em;
}

.tsugi-assignments-item .tsugi-assignments-due-detail,
.tsugi-lessons-module-lti .tsugi-assignments-due-detail,
.tsugi-lessons-module-card-link .tsugi-assignments-due-detail,
.tsugi-lessons-module-title-cardmatch .tsugi-assignments-due-detail {
  font-weight: 500;
  font-size: 1em;
}

.tsugi-assignments-item .tsugi-assignments-due-lbl,
.tsugi-lessons-module-lti .tsugi-assignments-due-lbl,
.tsugi-lessons-module-card-link .tsugi-assignments-due-lbl,
.tsugi-lessons-module-title-cardmatch .tsugi-assignments-due-lbl {
  font-weight: 600;
}

.tsugi-assignments-item .tsugi-assignments-due-completed,
.tsugi-lessons-module-lti .tsugi-assignments-due-completed,
.tsugi-lessons-module-card-link .tsugi-assignments-due-completed,
.tsugi-lessons-module-title-cardmatch .tsugi-assignments-due-completed {
  background: var(--tsugi-lesson-due-ok-bg);
  color: var(--tsugi-lesson-due-ok-fg);
  border-color: var(--tsugi-lesson-due-ok-border);
}

.tsugi-assignments-item .tsugi-assignments-due-future,
.tsugi-lessons-module-lti .tsugi-assignments-due-future,
.tsugi-lessons-module-card-link .tsugi-assignments-due-future,
.tsugi-lessons-module-title-cardmatch .tsugi-assignments-due-future {
  background: var(--tsugi-lesson-due-future-bg);
  color: var(--tsugi-lesson-due-future-fg);
  border-color: var(--tsugi-lesson-due-future-border);
}

.tsugi-assignments-item .tsugi-assignments-due-past,
.tsugi-lessons-module-lti .tsugi-assignments-due-past,
.tsugi-lessons-module-card-link .tsugi-assignments-due-past,
.tsugi-lessons-module-title-cardmatch .tsugi-assignments-due-past {
  background: var(--tsugi-lesson-due-late-bg);
  color: var(--tsugi-lesson-due-late-fg);
  border-color: var(--tsugi-lesson-due-late-border);
}

.tsugi-assignments-item .tsugi-assignments-due-soon,
.tsugi-lessons-module-lti .tsugi-assignments-due-soon,
.tsugi-lessons-module-card-link .tsugi-assignments-due-soon,
.tsugi-lessons-module-title-cardmatch .tsugi-assignments-due-soon {
  background: var(--tsugi-lesson-due-soon-bg);
  color: var(--tsugi-lesson-due-soon-fg);
  border-color: var(--tsugi-lesson-due-soon-border);
}

.tsugi-assignments-item .tsugi-assignments-due-neutral,
.tsugi-lessons-module-lti .tsugi-assignments-due-neutral,
.tsugi-lessons-module-card-link .tsugi-assignments-due-neutral,
.tsugi-lessons-module-title-cardmatch .tsugi-assignments-due-neutral {
  background: var(--tsugi-lesson-due-neutral-bg);
  color: var(--tsugi-lesson-due-neutral-fg);
  border-color: var(--tsugi-lesson-due-neutral-border);
}

/* Assignments list: title links to module + in-page #tsugi-rl-… anchor */
.tsugi-assignments-title-link {
  font-weight: 600;
}

li.tsugi-lessons-module-lti[id^="tsugi-rl-"] {
  scroll-margin-top: 1rem;
}

/* Discussions rollup badges (Tsugi\UI\Lessons::renderDiscussions) */
.tsugi-lessons-module-discussion .tsugi-discussion-rollup-badges {
  margin-left: 6px;
}

.tsugi-lessons-module-discussion .tsugi-discussion-badge {
  margin-left: 0;
  display: inline-block !important;
  border-radius: 0.35em !important;
  padding: 0.16em 0.45em !important;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
  font-weight: bold !important;
  min-width: 1.2em !important;
  text-align: center !important;
  vertical-align: middle !important;
  border: 1px solid transparent !important;
}

.tsugi-lessons-module-discussion .tsugi-discussion-badge-personal {
  background: #d9534f !important;
  color: #fff !important;
  border-color: #c94440 !important;
}

.tsugi-lessons-module-discussion .tsugi-discussion-badge-participating {
  background: #fbbf24 !important;
  color: #111 !important;
  border-color: #f59e0b !important;
}

.tsugi-lessons-module-discussion .tsugi-discussion-badge-global {
  background: var(--tsugi-lesson-due-ok-bg) !important;
  color: var(--tsugi-lesson-due-ok-fg) !important;
  border-color: var(--tsugi-lesson-due-ok-border) !important;
}

/* --------------------------------------------------------------------------
   Tdiscus tool styles (moved from tool/tdiscus/static/coursera.css)
   -------------------------------------------------------------------------- */
.tdiscus-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tdiscus-user-name {
    font-weight: bold;
}

.tdiscus-threads-title {
    font-size: 2em;
}

.tdiscus-threads-search-sort {
    padding: 10px;
    width: 100%;
}

.tdiscus-threads-sort {
  display: inline-block;
  vertical-align: middle;
}

.tdiscus-threads-search {
    display: inline-block;
    float: right;
}

.tdiscus-threads-list {
    border: 1px grey solid;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.tdiscus-thread-item {
    padding: 10px;
    border: 1px grey solid;
    display: flex;
}

.tdiscus-thread-item-left {
    flex: 1;
}

.tdiscus-thread-item-right {
    margin-right: 20px;
}

.tdiscus-thread-item-title {
    font-size: 1.5em;
}

.tdiscus-thread-item-title-badge {
  position: relative;
  top: -0.5em;
  font-size: 0.6em;
  line-height: 1.2;
  font-weight: bold;
  padding: 0.12em 0.35em;
  min-width: 0.9em;
  text-align: center;
  border-radius: 0.35em;
  color: #111;
  border: 1px solid transparent;
}

.tdiscus-thread-item-title-badge-personal {
  background: #d9534f;
  color: #fff;
  border-color: #c94440;
}

.tdiscus-thread-item-title-badge-participating {
  background: #fbbf24;
  color: #111;
  border-color: #f59e0b;
}

.tdiscus-thread-item-title-badge-global {
  background: var(--tsugi-lesson-due-ok-bg);
  color: var(--tsugi-lesson-due-ok-fg);
  border-color: var(--tsugi-lesson-due-ok-border);
}

.tdiscus-staff-created {
    color: #8a6219;
    background-color: #ece9e3;
    padding: 2px 8px;
}

.tdiscus-staff-read {
    color: #8a6219;
    background-color: #ece9e3;
    padding: 2px 8px;
}

.tdiscus-staff-answer {
    color: #8a6219;
    background-color: #ece9e3;
    padding: 2px 8px;
}

.tdiscus-thread-owned-menu {
    font-size: 0.66em;
    padding: 10px;
}

.tdiscus-thread-container {
    padding: 10px;
    border: 1px grey solid;
}

.tdiscus-all-threads-link {
    float: right;
}

.tdiscus-add-thread-link {
    float: right;
}

.tdiscus-thread-title {
    font-size: 2em;
    margin: 0.67em 0;
}

.tdiscus-comments-list {
    padding: 10px;
    border: 1px grey solid;
}

.tdiscus-add-comment-container {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px grey solid;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1rem 1.5rem;
    background: var(--primary, #337ab7);
    color: white;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
    top: 0;
}

/* Desktop: keep Bootstrap float layout; only tweak vertical rhythm + right cluster */
@media (min-width: 768px) {
  /* Drop extra li margins so main links sit on the same row as the brand (tsugi2 .nav > li margins) */
  .navbar-inverse .navbar-nav.navbar-main > li {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Center link text in the bar; extra padding-bottom/margin-bottom on .nav > li > a was pulling the label up */
  .navbar-inverse .navbar-nav.navbar-main > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    padding-top: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    box-sizing: border-box;
  }
  .navbar-inverse .navbar-nav.navbar-right {
    display: flex;
    align-items: center;
    float: right;
  }
  .navbar-inverse .navbar-nav.navbar-right > li {
    float: none;
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Tighter horizontal rhythm than default .navbar-nav > li > a (15px) */
  .navbar-inverse .navbar-nav.navbar-right > li > a {
    padding-left: 6px;
    padding-right: 6px;
  }
  .navbar-inverse .navbar-nav.navbar-right > li.navbar-text {
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 0;
    margin-right: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    min-height: 50px;
  }
  .navbar-inverse .navbar-nav.navbar-right > li.tsugi-wc-nav-item {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 50px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1;
    vertical-align: middle;
  }
  .navbar-inverse .navbar-nav.navbar-right > li.tsugi-wc-nav-item > tsugi-notifications,
  .navbar-inverse .navbar-nav.navbar-right > li.tsugi-wc-nav-item > tsugi-calendar-due,
  .navbar-inverse .navbar-nav.navbar-right > li.tsugi-wc-nav-item > tsugi-discussions {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    transform: translateY(2px);
  }
}

/* Assignment due-date calendar (Tsugi\Controllers\Calendar) */
.tsugi-cal-wrap { max-width: 960px; margin: 0 auto 2em; }
.tsugi-cal-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5em; margin-bottom: 1em; }
.tsugi-cal-nav h1 { margin: 0; font-size: 1.5em; }
.tsugi-cal-table { table-layout: fixed; width: 100%; }
.tsugi-cal-table th { text-align: center; width: 14.28%; }
.tsugi-cal-day { vertical-align: top; min-height: 6em; height: 1px; overflow: hidden; }
.tsugi-cal-day-inner {
    min-height: 5.5em;
    max-height: 12em;
    padding: 4px 6px;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
/* Adjacent-month days: strong text/background contrast (WCAG); beat .table td backgrounds */
.table.table-bordered.tsugi-cal-table > tbody > tr > td.tsugi-cal-other {
    background-color: #e9ecef;
    color: #343a40;
}
.tsugi-cal-other .tsugi-cal-day-inner {
    color: #343a40;
}
.tsugi-cal-other .tsugi-cal-daynum {
    color: #212529;
    font-weight: 600;
}
.tsugi-cal-today .tsugi-cal-day-inner { background: #fff8e1; border: 2px solid #f9a825; border-radius: 4px; }
.tsugi-cal-daynum { font-weight: 600; margin-bottom: 4px; flex-shrink: 0; }
.tsugi-cal-events {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85em;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.tsugi-cal-events li { margin-bottom: 3px; line-height: 1.25; overflow: hidden; max-width: 100%; flex-shrink: 0; }
.tsugi-cal-events a {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* Calendar assignment links: same semantics as lessons due badges (grade + due vs now) */
.tsugi-cal-events a.tsugi-cal-event-link {
    font-weight: 600;
}
.tsugi-cal-events a.tsugi-assignments-due-completed {
    color: var(--tsugi-lesson-due-ok-fg);
}
.tsugi-cal-events a.tsugi-assignments-due-future {
    color: var(--tsugi-lesson-due-future-fg);
}
.tsugi-cal-events a.tsugi-assignments-due-past {
    color: var(--tsugi-lesson-due-late-fg);
}
.tsugi-cal-events a.tsugi-assignments-due-soon {
    color: var(--tsugi-lesson-due-soon-fg);
}
.tsugi-cal-events a.tsugi-assignments-due-neutral {
    color: var(--tsugi-lesson-due-neutral-fg);
}

/* --------------------------------------------------------------------------
 * Main site nav (#tsugi_main_nav_bar): collapsed (xs) behavior
 * Flatten profile dropdown; align link typography with stacked .nav items.
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* BS .navbar-nav { margin: 7.5px -15px } pulls items outward; one consistent inset */
    #tsugi_main_nav_bar .navbar-collapse > .navbar-nav {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #tsugi_main_nav_bar .navbar-nav > li.dropdown > a.dropdown-toggle {
        display: none;
    }
    #tsugi_main_nav_bar .navbar-nav > li.dropdown > ul.dropdown-menu {
        display: block !important;
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: inherit;
        line-height: inherit;
    }
    #tsugi_main_nav_bar .navbar-nav > li.dropdown > ul.dropdown-menu > li {
        margin: 0;
        float: none;
    }
    /* Match .nav > li > a (10px 15px); override BS dropdown-menu / open submenu padding */
    #tsugi_main_nav_bar .navbar-nav > li:not(.dropdown) > a,
    #tsugi_main_nav_bar .navbar-nav > li.dropdown > ul.dropdown-menu > li > a {
        padding: 10px 15px !important;
        line-height: 20px;
        font-size: inherit;
        font-weight: normal;
        color: #fff;
        text-indent: 0;
        white-space: normal;
    }
    #tsugi_main_nav_bar .navbar-nav > li.navbar-text {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    #tsugi_main_nav_bar .navbar-nav > li:not(.dropdown) > a:hover,
    #tsugi_main_nav_bar .navbar-nav > li:not(.dropdown) > a:focus,
    #tsugi_main_nav_bar .navbar-nav > li.dropdown > ul.dropdown-menu > li > a:hover,
    #tsugi_main_nav_bar .navbar-nav > li.dropdown > ul.dropdown-menu > li > a:focus {
        color: #fff;
        background-color: transparent;
        text-decoration: none;
    }
    #tsugi_main_nav_bar .navbar-nav > li.dropdown > ul.dropdown-menu > .active > a,
    #tsugi_main_nav_bar .navbar-nav > li.dropdown > ul.dropdown-menu > .active > a:hover,
    #tsugi_main_nav_bar .navbar-nav > li.dropdown > ul.dropdown-menu > .active > a:focus {
        color: #fff;
        background-color: #080808;
    }
}