:root{
  --ignite-sidebar-w: 280px;
  --ignite-bg: #f4f6fb;
  --ignite-panel: #ffffff;
  --ignite-border: rgba(16, 24, 40, .08);
  --ignite-muted: #667085;
  --ignite-text: #101828;
  --ignite-primary: #0b2b63;
  --ignite-primary-2: #173c7a;
  --ignite-shadow: 0 .35rem 1rem rgba(0,0,0,.08);
  --ignite-radius: 1rem;
  --ignite-radius-sm: .85rem;
}

body{
  background: var(--ignite-bg);
  color: var(--ignite-text);
}

.ignite-app{ min-height: 100vh; }

.ignite-sidebar{
  width: var(--ignite-sidebar-w);
  background: linear-gradient(180deg, var(--ignite-primary) 0%, var(--ignite-primary-2) 50%, var(--ignite-primary) 100%);
  color: #fff;
}

.ignite-offcanvas{ --bs-offcanvas-width: var(--ignite-sidebar-w); }


/*@media (min-width: 992px){*/
@media (min-width: 1200px){
  #sidebar.offcanvas{
    position: static;
    transform: none;
    visibility: visible !important;
    height: 100vh;
  }
}

.ignite-brand{
  height: 84px;
  display:flex;
  align-items:center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 1.7rem;
}

.ignite-brand small{
  font-size: 1em;
  opacity: .9;
  font-weight: inherit;
}

.ignite-sidebar .nav-link{
  color: rgba(255,255,255,.9);
  border-radius: var(--ignite-radius-sm);
  padding: .8rem .95rem;
  display:flex;
  align-items:center;
  gap: .75rem;
  font-weight: 700;
}

.ignite-sidebar .nav-link:hover,
.ignite-sidebar .nav-link:focus{
  color: #fff;
  background: rgba(255,255,255,.10);
}

.ignite-sidebar .nav-link.active{
  color:#fff;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.ignite-sidebar hr{
  border-color: rgba(255,255,255,.16);
  margin: .9rem 0;
}

.ignite-main{ min-width: 0; }

.ignite-topbar{
  height: 60px;
  background: #fff;
  border-bottom: 1px solid var(--ignite-border);
}

.ignite-topbar-small {
    height: 40px;
    background: #fff;
    border-bottom: 1px solid var(--ignite-border);
    margin-bottom: 1rem;
}

.ignite-page{
  padding: 1.0rem;
}

/*@media (min-width: 992px){
  .ignite-page{ padding: 1.0rem; }
}
*/
.ignite-card{
  border: 0;
  border-radius: var(--ignite-radius);
  box-shadow: var(--ignite-shadow);
}

.ignite-muted{ color: var(--ignite-muted); }

.metric-card .metric-value {
    font-size: 2.15rem;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ignite-text);
}

.metric-card .metric-label{
  color: var(--ignite-muted);
  font-weight: 800;
  margin-top: .55rem;
}

.metric-danger{
  background: linear-gradient(135deg, #ef5a5a 0%, #cc2e2e 100%);
  color: #fff;
}

.metric-danger .metric-label,
.metric-danger .metric-value{ color: #fff; }

.ring{
  --p: 65;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: conic-gradient(#4caf50 calc(var(--p) * 1%), #f2b01e 0 80%, #2b62d6 0 100%);
  display:grid;
  place-items:center;
  position:relative;
  box-shadow: var(--ignite-shadow);
}

/* When --p is 0, show the ring as fully red */
.ring[style*="--p:0"],
.ring[style*="--p: 0"]{
  background: conic-gradient(#ef4444 0 100%);
}

.ring::before{
  content:"";
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 10px rgba(0,0,0,.03);
}

.ring-text{
  position:absolute;
  text-align:center;
  font-weight: 900;
  line-height: 1.1;
}

.ring-text .pct{ font-size: 1.9rem; }
.ring-text .sub{ font-size: .9rem; color: var(--ignite-muted); }

.status-tile{
  border: 0;
  border-radius: var(--ignite-radius);
  overflow: hidden;
  color: #fff;
  box-shadow: var(--ignite-shadow);
}

.status-tile .tile-body{
  padding: 1.1rem 1.25rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 1rem;
}

.status-tile .big{
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
}

.status-tile .label{
  font-weight: 800;
  opacity: .95;
}

.status-tile .pill-icon{
  width: 36px;
  height: 36px;
  border-radius: .75rem;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.16);
}

.tile-blue{ background: linear-gradient(135deg, #2b62d6 0%, #1f4fbf 100%); }
.tile-orange{ background: linear-gradient(135deg, #f5a043 0%, #e57f12 100%); }
.tile-green{ background: linear-gradient(135deg, #58b76a 0%, #2f8a45 100%); }
.tile-red{ background: linear-gradient(135deg, #ef5a5a 0%, #cc2e2e 100%); }
.tile-purple{ background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }

.ignite-list .list-group-item{
  border: 0;
  border-top: 1px solid rgba(16,24,40,.06);
  padding: .95rem 1rem;
}

.ignite-list .list-group-item:first-child{ border-top: 0; }

.list-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
}

.list-date{
  color: var(--ignite-muted);
  font-weight: 800;
  white-space: nowrap;
  font-size: .95rem;
}

/* Generic page helpers */
.page-title{
  font-size: 1.75rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

.section-title{
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: .75rem;
}

.soft-wrap{
  border: 1px solid var(--ignite-border);
  border-radius: var(--ignite-radius);
  background: #fff;
  box-shadow: var(--ignite-shadow);
  overflow: hidden;
}

.soft-head{
  padding: .95rem 1.1rem;
  border-bottom: 1px solid rgba(16,24,40,.06);
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

/* Qualification */
.qual-title{
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chev-box{
  width: 34px;
  height: 34px;
  border-radius: .7rem;
  display:grid;
  place-items:center;
  background: rgba(16,24,40,.05);
  color: #344054;
  flex: 0 0 auto;
}

.status-pill{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
  border: 1px solid rgba(16,24,40,.06);
  white-space: nowrap;
}

.pill-sat{ background: #d9efe4; color: #1f6b45; }
.pill-prog{ background: #d9e6ff; color: #1f4fbf; }
.pill-pend{ background: #ffe6b8; color: #8a4b00; }
.pill-over{ background: #fde0e0; color: #b42318; }
.pill-returned{ background: #ffe7cc; color: #9a4a00; }

.table-lite > :not(caption) > * > *{
  padding: .85rem 1rem;
  border-color: rgba(16,24,40,.06);
  vertical-align: middle;
}

.table-lite thead th{
  font-size: .9rem;
  color: var(--ignite-muted);
  font-weight: 900;
  background: #fbfcff;
  white-space: nowrap;
}

.unit-code{ font-weight: 900; white-space: nowrap; }
.unit-name{ color: #344054; font-weight: 700; max-width: 520px; }
.due.overdue{ color: #b42318; font-weight: 900; }

/* Cluster pages */
.accordion.ignite-accordion .accordion-item{
  border: 0;
  border-radius: var(--ignite-radius);
  box-shadow: var(--ignite-shadow);
  overflow: hidden;
  margin-bottom: 1rem;
}

.accordion.ignite-accordion .accordion-button{
  font-weight: 900;
  padding: 1rem 1.1rem;
  background: #fff;
}

.accordion.ignite-accordion .accordion-button:not(.collapsed){
  background: #fff;
  box-shadow: none;
}

.badge-count{
  border-radius: .65rem;
  font-size: .8rem;
  font-weight: 800;
  padding: .35rem .55rem;
}

.doc-bullet{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  line-height: 1.2;
  color:#344054;
  font-weight: 700;
}

.doc-dot{ color:#98a2b3; }

.link-assessment,
.link-continue,
.link-comments,
.link-submission{
  font-weight: 800;
  text-decoration: underline;
  white-space: nowrap;
}

.link-assessment{ color: #1d4ed8; }
.link-continue{ color: #15803d; }
.link-comments{ color: #6b7280; }
.link-submission { color: #7c3aed; }

.tree-row{
  padding: .7rem 1rem;
  border-top: 1px solid rgba(16,24,40,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}

.tree-row.child{ padding-left: 2rem; background: #fafbff; }

/* Events + messages */
.event-row,
.message-row,
.resource-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border-top: 1px solid rgba(16,24,40,.06);
}

.event-row:first-child,
.message-row:first-child,
.resource-row:first-child{ border-top: 0; }

.icon-chip{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: #2563eb;
  flex: 0 0 auto;
}

.message-preview{
  color: #475467;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.form-card{
  border: 1px solid var(--ignite-border);
  border-radius: var(--ignite-radius);
  background: #fff;
  box-shadow: var(--ignite-shadow);
}

.form-card .form-control,
.form-card .form-select{
  border-radius: .85rem;
}

/* Calendar */
.calendar-panel{
  border: 1px solid var(--ignite-border);
  border-radius: var(--ignite-radius);
  background: #fff;
  box-shadow: var(--ignite-shadow);
  overflow: hidden;
}

.calendar-top{
  padding: .9rem 1rem;
  background: #fbfcff;
  border-bottom: 1px solid rgba(16,24,40,.06);
}

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
}

.dow{
  padding: .75rem .5rem;
  text-align:center;
  font-weight: 800;
  color: #475467;
  background: #fbfcff;
  border-bottom: 1px solid rgba(16,24,40,.06);
}

.day{
  min-height: 108px;
  padding: .55rem;
  border-right: 1px solid rgba(16,24,40,.06);
  border-bottom: 1px solid rgba(16,24,40,.06);
  position: relative;
  background: #fff;
}

.day:nth-child(7n){ border-right: 0; }

.day-num{
  position:absolute;
  top: .45rem;
  left: .55rem;
  font-size: .9rem;
  font-weight: 800;
  color: #475467;
}

.muted-day .day-num{ color: #98a2b3; }

.cal-event{
  margin-top: 1.8rem;
  border-radius: .6rem;
  padding: .35rem .45rem;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e-red{ background: rgba(220,38,38,.92); }
.e-green{ background: rgba(16,185,129,.92); }
.e-blue{ background: rgba(37,99,235,.92); }
.e-amber{ background: rgba(245,158,11,.92); color: #1f2937; }

@media (max-width: 991.98px){
  .ignite-topbar{ height: auto; padding-block: .9rem; }
  .calendar-panel{ overflow-x: auto; }
  .cal-grid{ min-width: 720px; }
}

.ignite-loading-indicator {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1000;
}

.ignite-loading-spinner {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 0.5rem solid rgba(148, 163, 184, 0.6);
    border-top-color: var(--ignite-primary);
    animation: ignite-spin 0.8s linear infinite;
}

@keyframes ignite-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Wider event comment popover */
.popover.event-comment-popover{
  max-width: 500px;
}