/* ============================================================
   Application Review — Style Documentation
   File: /css/application_review.css

   Purpose:
   Centralized styling for the Application Review dashboard.
   These styles support layout structure, visual hierarchy,
   status indicators, action buttons, and the modern multi-
   select filter component.

   Do NOT repurpose these classes for other pages without
   review — several styles are context-specific.
============================================================ */


/* ============================================================
   HEADER & FILTER BAR
============================================================ */

/* Top page header (Application Dashboard bar)
   Used once at the top of application_review.asp */
.mm-header {
    background:#002855;          /* MyMane primary navy */
    color:white;                 /* High-contrast header text */
    padding:18px 30px;           /* Comfortable vertical spacing */
    font-size:1.7rem;            /* Page title prominence */
    font-weight:600;
    width:100%;
    border-bottom:4px solid #FDB913; /* MyMane gold accent */
}

/* Filter toolbar container
   Holds search, dropdowns, multi-select filter, and export buttons */
.filter-row {
    width:100%;
    background:#f1f3f5;          /* Neutral light gray for separation */
    padding:12px 20px;
    border-bottom:1px solid #d8d8d8;
}


/* ============================================================
   BADGE HELPERS
============================================================ */

/* Black badge (used for official EU ID display) */
.badge-black {
    background:#000 !important;  /* Force black regardless of theme */
}

/* Housing badge (distinct color from other status badges) */
.badge-housing {
    background:#6a4c93 !important; /* Purple for housing visibility */
}

.badge-brown {
    background-color: #6f4e37; /* coffee brown */
    color: #ffffff;
}


/* ============================================================
   ACTION BUTTON ENHANCEMENTS
============================================================ */

/* Shared animation wrapper for card action buttons
   Adds subtle lift and depth on hover */
.action-btn-adv {
    transition: all .22s ease;
    border-left: 3px solid transparent;
}

/* Hover state for action buttons
   Provides tactile feedback without color changes */
.action-btn-adv:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    border-left: 3px solid rgba(0,0,0,.15);
}

/* Small status pill displayed inside buttons
   Used for Registrar Review + Student Profile buttons */
.btn-status {
    font-size:.65rem;
    font-weight:600;
    padding:1px 6px;
    border-radius:4px;
    margin-left:6px;
}


/* ============================================================
   MULTI-SELECT FILTER COMPONENT
============================================================ */

/* Root wrapper for the custom multi-select filter */
.multi-filter {
    position: relative;          /* Required for dropdown positioning */
    font-size: .85rem;
}

/* Main clickable filter input box
   Displays selected filter pills and placeholder text */
.multi-filter-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid #ced4da;   /* Matches Bootstrap form borders */
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    min-height: 34px;            /* Aligns with form-control-sm height */
}

/* Hover state to indicate interactivity */
.multi-filter-box:hover {
    border-color: #0d6efd;       /* Bootstrap primary blue */
}

/* Container for selected filter "pills" */
.selected-filters {
    display: flex;
    flex-wrap: wrap;             /* Allows multiple selections */
    gap: 4px;
}

/* Individual selected filter pill */
.selected-filters .pill {
    background: #0d6efd;         /* Primary accent */
    color: #fff;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: .7rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Remove (X) icon inside filter pill */
.selected-filters .pill i {
    cursor: pointer;
    font-size: .65rem;
}

/* Placeholder text when no filters are selected */
.placeholder {
    color: #888;
    white-space: nowrap;
}


/* ============================================================
   MULTI-SELECT DROPDOWN MENU
============================================================ */

/* Dropdown menu containing available filter options */
.multi-filter-menu {
    position: absolute;
    top: 110%;                   /* Slight separation from input box */
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    display: none;               /* Toggled via JavaScript */
    z-index: 1000;               /* Above other UI elements */
}

/* Individual filter option */
.multi-filter-menu div {
    padding: 8px 10px;
    cursor: pointer;
}

/* Hover state for dropdown options */
.multi-filter-menu div:hover {
    background: #f1f3f5;
}

/* ==========================================
   Attendance Cards (Stripe + Badge)
   ========================================== */

.att-card {
    border-left: 4px solid #dee2e6;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.att-card.status-0 { border-left-color: #198754; } /* Present */
.att-card.status-1 { border-left-color: #0dcaf0; } /* Excused */
.att-card.status-2 { border-left-color: #ffc107; } /* Late */
.att-card.status-3 { border-left-color: #dc3545; } /* Absent */
.att-card.status-4 { border-left-color: #6c757d; } /* Makeup */

.att-card:hover {
    background-color: #f8f9fa;
}

.att-meta {
    font-size: .85rem;
    color: #6c757d;
}


/* Compact scan rows */
.att-scan-row {
    padding: .25rem 0;
    border-bottom: 1px dashed #e0e0e0;
}

.att-scan-row:last-child {
    border-bottom: none;
}

.att-scan-row .text-truncate {
    max-width: 100%;
}


.event-counts {
  display: inline-flex;
  gap: .35rem;
  white-space: nowrap;
}

.event-counts .badge {
  font-size: 0.75rem;
  padding: .35em .5em;
}

.attendance-actions .btn,
.attendance-actions .form-check,
.attendance-actions .dropdown > button {
  height: 32px;
  line-height: 30px;
  white-space: nowrap;
}

.attendance-actions .form-check {
  display: flex;
  align-items: center;
}

.attendance-actions .btn {
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  white-space: nowrap;
}

.attendance-actions .form-check {
  height: 32px;
  display: flex;
  align-items: center;
}


.attendance-actions #attSelectedCount {
  height: 32px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}


/* ===============================
   GPA DASHBOARD (FINAL FIXED)
================================ */

.gpa-main{
  background: linear-gradient(135deg,#0d6efd,#4dabf7);
  color:#fff;
  padding:1.75rem;
  border-radius:1rem;
  text-align:center;
}

.gpa-main-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.gpa-main-label{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  opacity:.9;
}

.gpa-main-value{
  font-size:3rem;
  font-weight:700;
  margin-top:.5rem;
}

.gpa-earned-summary{
  margin-top:.75rem;
  font-size:.9rem;
}

.gpa-standing-badge{
  padding:.35rem .75rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:rgba(255,255,255,.2);
}

/* Standing Colors */
.standing-freshman { background:#6c757d !important; }
.standing-sophomore { background:#6610f2 !important; }
.standing-junior { background:#198754 !important; }
.standing-senior { background:#fd7e14 !important; }

.gpa-card{
  border-radius:.6rem;
  padding:1rem;
  border:1px solid #dee2e6;
  background:#f8f9fa;
  transition:.2s ease;
}

.gpa-good{
  background:#e7f5ff;
  border-color:#74c0fc;
}

.gpa-strong{
  background:#e6fcf5;
  border-color:#63e6be;
}

.gpa-warning{
  background:#fff9db;
  border-color:#ffd43b;
}

.gpa-danger{
  background:#ffe3e3;
  border-color:#ff8787;
}

.gpa-none{
  background:#f1f3f5;
  border-color:#dee2e6;
}


.gpa-accent-strong { border-bottom: 4px solid #198754; }
.gpa-accent-good   { border-bottom: 4px solid #0d6efd; }
.gpa-accent-warn   { border-bottom: 4px solid #f59f00; }
.gpa-accent-danger { border-bottom: 4px solid #dc3545; }

/* =========================
   GPA Transcript Styles
========================= */

.gpa-analytics{
  background: linear-gradient(135deg,#0f172a,#1e293b);
  border-radius: 18px;
  padding: 28px 32px;
  color: #f8fafc;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.gpa-analytics-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.gpa-metric{
  display: flex;
  flex-direction: column;
}

.gpa-metric-primary{
  min-width: 180px;
}

.gpa-label{
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 6px;
}

.gpa-value{
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.gpa-subvalue{
  font-size: 1.5rem;
  font-weight: 600;
}

.gpa-divider{
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,.15);
}

.gpa-tier-excellent { background: linear-gradient(135deg,#064e3b,#134e4a); }
.gpa-tier-good      { background: linear-gradient(135deg,#1e3a8a,#1e40af); }
.gpa-tier-warning   { background: linear-gradient(135deg,#78350f,#92400e); }
.gpa-tier-risk      { background: linear-gradient(135deg,#7f1d1d,#991b1b); }

.gpa-sparkline{
  margin-top: .35rem;
  opacity: .7;
}

.tx-actions-col{
  white-space: nowrap;
  min-width: 110px;
}

.tx-actions-col .btn{
  padding: .25rem .45rem;
}


.tx-actions-col{
  white-space: nowrap;
  min-width: 90px;
}

.tx-actions{
  display: inline-flex;
  gap: 4px;
}

.tx-btn{
  border: 1px solid #dee2e6;
  background: #fff;
  padding: 3px 6px;
  font-size: .75rem;
  border-radius: 4px;
  line-height: 1;
  transition: all .15s ease;
}

.tx-btn i{
  font-size: .75rem;
}

.tx-btn:hover{
  background:#f8f9fa;
}

.tx-btn-edit{
  border-color:#cfe2ff;
}

.tx-btn-edit:hover{
  background:#e7f1ff;
}

.tx-btn-delete{
  border-color:#f5c2c7;
}

.tx-btn-delete:hover{
  background:#f8d7da;
}


/* =========================
   Transaction Edit for AR
   ========================= */

.edit-row {
  background:#fffbe6;
  border-left:4px solid #f0ad4e;
}

.edit-highlight {
  animation: flashRow 1.2s ease;
}

@keyframes flashRow {
  0% { background:#d1f7d6; }
  100% { background:inherit; }
}

.inline-error {
  font-size:.85rem;
  color:#dc3545;
  margin-top:4px;
}