/* ═══════════════════════════════════════════════════════════════════
   ACADEMIC COUNSELLOR — module-specific styles
   Ported with js/counsellor.js + pages/counsellor/*. These classes are
   used only by the counsellor portal and were not present in this
   project's stylesheets.
   ═══════════════════════════════════════════════════════════════════ */

    .sc.sc-col {
      flex-direction: column;
      align-items: stretch;
      gap: 7px;
    }


    /* AC dashboard — two prominent session summary cards */
    .ac-sess-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }

    .ac-sess-card {
      cursor: pointer;
      border: 1.5px solid var(--brd2);
      transition: transform .18s, box-shadow .18s, border-color .18s;
      position: relative;
      overflow: hidden;
    }

    .ac-sess-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--navy);
    }

    .ac-sess-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(0, 48, 135, .14);
      border-color: var(--navy);
    }

    .ac-flash {
      box-shadow: 0 0 0 3px var(--gborder), 0 8px 24px rgba(0, 48, 135, .14) !important;
    }

    /* AC — premium Counsellor Performance card */
    .ac-perf {
      background: linear-gradient(180deg, #ffffff 0%, var(--nlight) 240%);
      border: 1.5px solid var(--brd2);
      box-shadow: 0 4px 16px rgba(0, 48, 135, .06);
    }

    .ac-perf-tile {
      background: #fff;
      border: 1px solid var(--brd);
      border-radius: 11px;
      padding: 11px 8px;
      text-align: center;
    }

    .ac-perf-target {
      background: var(--nlight);
      border: 1.5px solid var(--navy);
    }

    .ac-perf-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 9px;
    }

    @media(max-width:860px) {
      .ac-perf-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* AC quick-filter chips */
    .ac-flag-chip {
      border: 1.5px solid var(--brd2);
      background: #fff;
      color: var(--mut);
      border-radius: 100px;
      padding: 4px 11px;
      font-size: .66rem;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
    }

    .ac-flag-chip:hover {
      border-color: var(--pur);
      color: var(--pur);
    }

    .ac-flag-chip.on {
      background: var(--pur);
      border-color: var(--pur);
      color: #fff;
    }