/**
* FILE INFO:: 
* Maintenance Styles
* File Version: 1.0.0
* File Date: 2026-06-09
*/
 /* =====================================================================
   COURSE STYLES - INDEX
   ---------------------------------------------------------------------
   MARK: Base Styles and Sizing
   MARK: Maintenance Dashboard
   MARK: Reusable Components
   
===================================================================== */

/* =====================================================================
   MARK: Base Styles and Sizing
===================================================================== */

:root {
   /* Colors */
    --gbm-maint-c1: #2e3141;
    --gbm-maint-c2: #416089;
    --gbm-maint-c3: #408d5b;
    --gbm-maint-c4: #6a271e;
    --gbm-maint-c5: #73524e;

    --maint-main-bg: #eeeeee;
    --maint-sidebar-bg: #2c3142;
    --maint-sidebar-text: #e8e9ec;
    --maint-border-color: #ddd;
    --maint-border-color-dark: rgba(255,255,255,0.10);

    --maint-member-bg: rgba(242, 254, 255, 0.166);
    --maintnav-link-color: #e8e9ec;
    --maintnav-link-hover-bg: rgba(255,255,255,0.08);
    --maintnav-link-active-bg: rgba(236, 248, 250, 0.191);
    --maint-shadow: 0 12px 24px rgba(18, 32, 38, 0.08); 

    /* Typography */
   --maint-h1: 1.6rem;
   --maint-h2: 1.4rem;
   --maint-h3: 1.2rem;
   --maint-h4: 1rem;
   --maint-txt-sm: 0.75rem;
   --maint-txt-md: 0.85rem;
   --maint-txt-lg: 0.95rem;
   --maint-txt-xl: 1.05rem;

   /* Spacing */
   --maint-h-space-xl: 0.6rem;
   --maint-h-space-sm: 0.8rem;
   --maint-h-space-base: 1rem;
   --maint-h-space-lg: 1.2rem;
   --maint-h-space-xl: 1.5rem;
}

/* =====================================================================
   MARK: Maintenance Dashboard
===================================================================== */

.maint-dash h1 {
   margin: var(--dash-h-space-sm) 0;
   font-size: 1.4rem;
   color: var(--gbm-site-primary);
}

.maint-dash h2 {
   margin: var(--dash-h-space-sm) 0 var(--dash-h-space-base);
   color: var(--gbm-maint-c2);
   font-size: 1.3rem;
}

.maint-dash h3 {
   margin: 0.5rem 0rem;
   color: var(--gbm-maint-c3);
   font-size: 1.2rem;
}

.maint-dash,
.maint-dash * {
   box-sizing: border-box;
}

.maint-dash {
   font-family: Arial, sans-serif;
   color: #222;
}

.maint-dash-layout {
   display: grid;
   grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
   gap: 0;
   background: var(--dash-main-bg);
   overflow: hidden;
}

.maint-dash-sidebar {
   background: var(--maint-sidebar-bg);
   border-right: 2px solid #5b6160; 
   color: var(--maint-sidebar-text);
   padding: 1.5rem 1rem;
   min-width: 0;
}

.maint-dash-main {
   padding: 1rem;
   min-width: 0;
}

/* ------------
MARK: Dashnav Menu
------------ */
.maint-dashnav {
  display: grid;
  gap: 0.25rem;
}

.maint-dashnav__link {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  color: #e8e9ec;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.maint-dashnav__link:hover {
  background: rgba(255,255,255,0.08);
}

.maint-dashnav__link.is-active {
  background: rgba(255,255,255,0.14);
  font-weight: 600;
}

.maint-dashnav__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: 0.8;
}


/* ----------------
MARK: Dash Member 
------------------- */

.maint-dashmember {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.9rem 0.85rem;
   margin-bottom: 1rem;

   border-radius: 12px;
   background: var(--dash-member-bg);
   border: 1px solid var(--dash-border-color-dark);
}

.maint-dashmember__name {
   font-size: var(--course-txt-lg);
   font-weight: 600;
   line-height: 1.2;
   color: var(--dash-sidebar-text);
   word-break: break-word;
}

.maint-dashmember__sub {
   margin-top: 0.15rem;
   font-size: var(--course-txt-sm);
   opacity: 0.85;
}

/* =====================================================================
   MARK: Reusable Styles
===================================================================== */

.add-announcement {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.add-announcement p {
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
}

.maint-dash-announce {
   font-size: var(--gbm-text-xl);
   font-weight: 700;
   color: var(--gbm-maint-c2);
}

/* Maint styles */

.maint-header {
  display: flex;
  
  background: #fff;
  border: 1px solid var(--gbm-maint-border-color);
  border-radius: 8px;
  padding: 0.5rem;
  margin: 1rem;
  box-shadow: 0 2px 4px var(--gbm-shadow);

  flex-direction: column;
  align-items: center;
  text-align: center;
}

.maint-header p {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.25rem 0;
  color: var(--gbm-site-primary);
}

.maint-big {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.5rem;
  overflow-wrap: anywhere;
}

.maint-big a > img {
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.maint-dash-panel {
  margin: 1rem;
  border: 1px solid var(--gbm-border-color);
  border-radius: 8px;
  background: #fff;
  padding: 1.5rem;
}

.maint-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 1rem;
}

.maint-options-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gbm-border-color);
  border-radius: 8px;
  background: #fff;
  padding: 1.5rem;
}

.maint-options-panel h2 {
  padding-bottom: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.maint-options-panel p {
  font-size: 1rem;
  margin: 0 0 1rem;
  color: rgba(0, 0, 0, 0.627);
}

.maint-options-panel a {
  margin-top: auto;
}

.students-table th,
.students-table td {
  overflow-wrap: anywhere;
  word-break: normal;
}

.gbm-maint-form{
  padding: 2rem;
  background-color: #fafbfb;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
}

@media (max-width: 768px) {
  .maint-header,
  .maint-dash-panel,
  .maint-options {
    margin: 0.75rem 0;
  }

  .maint-header,
  .maint-dash-panel,
  .maint-options-panel {
    padding: 1rem;
  }

  .maint-big {
    font-size: clamp(1.05rem, 5vw, 1.25rem);
  }
}