/* K12 PD Tracker Custom CSS*/

/* =============================================
   K12 DESIGN SYSTEM — CSS Variables
   Centralised brand tokens. All new components
   should reference these instead of raw hex.
   ============================================= */
:root {
  --k12-purple: #6e3dae;
  --k12-purple-dark: #4d1979;
  --k12-purple-light: #f3eeff;
  --k12-near-black: #221f20;
  --k12-gray: #a3a9ac;
  --k12-gray-light: #f5f6f7;
  --k12-white: #ffffff;
}

/* Page background
   ================================================== */
body {
  background-color: #f5f5f7;
}

/* App navbar
   ================================================== */
.k12-navbar {
  background: linear-gradient(
    135deg,
    var(--k12-purple-dark) 0%,
    var(--k12-purple) 100%
  );
}

/* Typography
   ================================================== */
a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}

a,
a:hover {
  color: #6e3dae;
  text-decoration: none;
}

a:focus {
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #6e3dae;
}
/* Button  
   ================================================== */
#btn-back-to-top {
  position: fixed;
  bottom: 80px;
  right: 20px;
  display: none;
}

/* YouTube Embed to be responsive 
   ================================================== */
.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
/* Breadcrumb 
   ================================================== */
.breadcrumb {
  background-color: #dedfe0;
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  border-radius: 4px;
}

/* Button  
   ================================================== */
#btn-back-to-top {
  position: fixed;
  bottom: 80px;
  right: 20px;
  display: none;
}

.btn-quickAdd {
  float: right;
}
.card {
  border-radius: 0.75rem;
}

/* forces card to be 100% of availalbe height */
.h100 {
  height: 100%;
}
/* forces car to be a minimum of 300px in height */
.min-h-200 {
  min-height: 200px;
}

.min-h-300 {
  min-height: 300px;
}

.card-header {
  background-color: #6e3dae;
  color: #ffffff;
  height: auto;
}

.hr-title:after {
  display: block;
  width: 60%;
  height: 2px;
  margin-top: 12px;
  content: "";
  background-color: #6e3dae;
}
/* ================================================== */
/* DropDown Item */
/* ================================================== */
.actionMenu .dropdown-toggle {
  /*color:#6e3dae;*/
}

.dropdown-item {
  color: #6e3dae;
}
.dropdown-menu a:hover {
  color: #6e3dae;
  background: #dddddd;
  text-decoration: none;
  border-radius: 5px;
}

.portfolio-table-responsive {
  overflow-x: auto;
  overflow-y: visible;
}

.portfolio-table-responsive .dropdown-menu {
  z-index: 1080;
}

/* Stacking fix for the action-menu dropdown on user cards.
       .subscription-card:hover applies a translateY transform, which creates
       a stacking context that traps the open dropdown menu under the next
       row of cards. Cancel the hover transform while the dropdown is open,
       and ensure the open menu sits above any sibling card. */
.subscription-card:has(.dropdown.show):hover {
  -webkit-transform: none;
  transform: none;
}
.subscription-card .dropdown-menu.show {
  z-index: 1080;
}

/* ================================================== */
/* Offcanvas nav */
/* ================================================== */
#ltAppNav {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(var(--k12-purple-dark)),
    to(var(--k12-purple))
  );
  background: linear-gradient(
    180deg,
    var(--k12-purple-dark) 0%,
    var(--k12-purple) 100%
  );
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-border-color: #ffffff;
}

#ltAppNav a.nav-link {
  color: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}
#ltAppNav a.nav-link.active {
  color: var(--k12-purple);
  background: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  border-radius: 6px;
}
#ltAppNav a:hover {
  color: #fff;
  background: var(--k12-purple);
  text-decoration: none;
  border-radius: 6px;
}

.offcanvas-bottom {
  --bs-offcanvas-height: 40vh;
}
/* Forms  
   ================================================== */
label {
  color: #6e3dae;
  font-weight: bold;
  font-size: 14px;
}
.login-card {
  border-radius: 0.75rem;
}
.form-control {
  background-color: #fff;
  font-size: 14px;
  height: 34px;
}
.input-group-text {
  height: 34px;
}
/* Hide Checkbox on pub forms */
#chk_hpTerms {
  display: none;
  visibility: hidden;
}

.modal-title {
  color: #6e3dae;
}

/* Google Places Autocomplete predictions dropdown is appended to <body> with a
   default z-index (~1000), so inside a Bootstrap modal (z-index 1055) the
   suggestions render BEHIND the modal and look like "nothing happens" on type.
   Lift it above modals, tooltips (1080) and everything else. This replaces the
   older keypress-on-#inp_address1 hack in custom.js (which only covered one input
   and never fired for the section editor's #venue_autocomplete). */
.pac-container {
  z-index: 2000 !important;
}
.col-form-label {
  color: #6e3dae;
  font-weight: bold;
}

textarea,
textarea.form-control {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: true;
}

.pagination {
  z-index: 2;
}
.action-menu {
  z-index: 1020;
}

/* Bootstrap Toggle Button
   ================================================== */
.slow .toggle-group {
  transition: left 0.7s;
  -webkit-transition: left 0.7s;
}
.fast .toggle-group {
  transition: left 0.1s;
  -webkit-transition: left 0.1s;
}
.quick .toggle-group {
  transition: none;
  -webkit-transition: none;
}

.btn-default {
  background-color: #ffffff;
}
/* TABLES
   ================================================== */
th {
  color: #6e3dae;
}
/* overflow-x visible makes drop down menus appear over other elements since the are served within the table row */
table {
  overflow-x: visible;
}
.table-responsive {
  overflow-x: visible;
}

/* RIBBON
   ================================================== */
.ribbon {
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 93px;
  height: 93px;
  text-align: right;
}
.ribbon span {
  font-size: 0.8rem;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 32px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 125px;
  display: block;
  background: #6e3dae;
  /* light from light to dark*/
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#7267f0),
    to(#6e3dae)
  );
  background: linear-gradient(#7267f0 0%, #6e3dae 100%);
  -webkit-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 17px; /*change this, if no border*/
  right: -29px; /*change this, if no border*/
}

.ribbon span::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1; /* darker of gradient colors */
  border-color: #6e3dae transparent transparent #6e3dae;
  border-style: solid;
  border-width: 3px; /* darker of gradient colors */
}
.ribbon span::after {
  content: "";
  position: absolute;
  right: 0%;
  top: 100%;
  z-index: -1; /* darker of gradient colors */
  border-color: #6e3dae #6e3dae transparent transparent;
  border-style: solid;
  border-width: 3px; /* darker of gradient colors */
}

.success span {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#20c997),
    to(#198754)
  );
  background: linear-gradient(#20c997 0%, #198754 100%);
}
.success span::before {
  border-left-color: #198754;
  border-top-color: #198754;
}
.success span::after {
  border-right-color: #198754;
  border-top-color: #198754;
}

.danger span {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#f70505),
    to(#8f0808)
  );
  background: linear-gradient(#f70505 0%, #8f0808 100%);
}
.danger span::before {
  border-left-color: #8f0808;
  border-top-color: #8f0808;
}
.danger span::after {
  border-right-color: #8f0808;
  border-top-color: #8f0808;
}

.info span {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#6edff6),
    to(#0dcaf0)
  );
  background: linear-gradient(#6edff6 0%, #0dcaf0 100%);
}
.info span::before {
  border-left-color: #0dcaf0;
  border-top-color: #0dcaf0;
}
.info span::after {
  border-right-color: #0dcaf0;
  border-top-color: #0dcaf0;
}

.warning span {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffda6a),
    to(#ffc107)
  );
  background: linear-gradient(#ffda6a 0%, #ffc107 100%);
  color: #000000;
}
.warning span::before {
  border-left-color: #ffc107;
  border-top-color: #ffc107;
}
.warning span::after {
  border-right-color: #ffc107;
  border-top-color: #ffc107;
}

.blue span {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#2989d8),
    to(#1e5799)
  );
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
}
.blue span::before {
  border-left-color: #1e5799;
  border-top-color: #1e5799;
}
.blue span::after {
  border-right-color: #1e5799;
  border-top-color: #1e5799;
}

/* CALL ID IN TABLE TO PREVENT ACTION MENU FROM BEING COVERED BY PARENT CONTAINER*/
#actionTable {
  overflow-x: visible !important;
  overflow-y: visible !important;
}
main {
  padding-bottom: 5rem;
}
/* Footer  
   ================================================== */
.footer-copyright {
  /*border-top: 1px solid rgba(0, 0, 0, 0.05);*/
  text-align: center;
  margin-bottom: -5px;
  padding-top: 15px;
  padding-bottom: 15px;
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.05);*/
}

.k12-footer-section {
  background: linear-gradient(
    135deg,
    var(--k12-purple-dark) 0%,
    var(--k12-purple) 100%
  );
  border-radius: 0.75rem;
  margin: 1.5rem 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.k12-footer-section::before {
  content: "";
  position: absolute;
  top: -35px;
  right: -15px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.k12-footer-section::after {
  content: "";
  position: absolute;
  bottom: -45px;
  left: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}
.k12-footer-social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}
.k12-footer-social a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}
.k12-footer-social a:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/*-Footer Menu-*/
#footer-bar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 98;
  background-color: rgba(249, 249, 249, 0.98);
  -webkit-box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.06);
  min-height: 60px;
  height: calc(62px + constant(safe-area-inset-bottom) * 1.1);
  height: calc(62px + env(safe-area-inset-bottom) * 1.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
}
#footer-bar a {
  color: #6e3dae;
  padding-top: 12px;
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
#footer-bar a span {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 0px;
  opacity: 0.7;
}
#footer-bar a i {
  font-size: 18px;
  position: relative;
  z-index: 2;
}
#footer-bar .badge {
  font-style: normal;
  z-index: 5;
  top: 0px;
  position: absolute;
  margin-left: 3px;
  color: #fff !important;
  width: 18px;
  text-align: center;
  line-height: 18px;
  padding: 0px;
  padding-left: 0px !important;
  border-radius: 18px;
  margin-top: 7px;
  font-size: 11px;
}

/* Footer bar nav colors */
#footer-bar .nav-home {
  color: #6e3dae;
}
#footer-bar .nav-pd {
  color: #2e86ab;
}
#footer-bar .nav-ipdp {
  color: #e76f51;
}
#footer-bar .nav-courses {
  color: #2a9d8f;
}
#footer-bar .nav-settings {
  color: #a3a9ac;
}

/*CSS kicks in when the device width is 768px and above*/
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  body {
    padding-left: 10px;
    padding-right: 10px;
  }
}

button.btn-close {
  color: ffffff;
}
.style1 {
}
.style2 {
  margin-top: 1px;
}
.style3 {
  padding-top: 0px;
}
.style4 {
  position: relative;
}
.style5 {
  margin-top: -80px;
}
.style6 {
  margin-top: -80px;
}
.card-header.userCardHeader {
  height: 120px;
  background-image: url("../assets/backgrounds/card-headerBkg.png");
  background-size: cover;
  border-top-right-radius: 0.75rem;
  border-top-left-radius: 0.75rem;
}

/* Accent border on left of card */
.card.card-accent-left {
  border-left: 5px solid #6e3dae;
  /* Accent width and color */
  -webkit-box-shadow: 0 2px 8px rgba(110, 61, 174, 0.07);
  box-shadow: 0 2px 8px rgba(110, 61, 174, 0.07);
}

.wappler-temp {
}

/* =============================================
   K12 UI SYSTEM — Shared page components
   Used across all app pages. Do not embed these
   in individual page <style> blocks.
   =============================================

   Components:
     .page-header-bar     — purple gradient page header with floating circle accents
     .k12-panel           — borderless card with brand shadow
     .k12-panel-header    — dark purple gradient panel header (replaces .card-header on k12-panels)
     .k12-section-header  — plain section heading on the white page background (NOT on a panel)
     .btn-header-action   — white pill button for use ON dark panel/page headers
     .k12-table           — branded data table with purple thead and hover states
     .badge-rate          — light purple pill for numeric values (base rate, counts, etc.)
     .btn-link-ceu        — solid purple pill action button (row-level "add" actions)
     .btn-unlink-ceu      — ghost pill action button (row-level "remove" actions)
     .k12-empty-state     — centered empty state block with icon + message
     .caution-box         — amber left-border warning panel
   ============================================= */

/* Page header bar
   ------------------------------------------- */
.page-header-bar {
  background: linear-gradient(
    135deg,
    var(--k12-purple-dark) 0%,
    var(--k12-purple) 100%
  );
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: visible;
  /* The bar is dark, so white is the correct default for anything inside it.
     Without this only the elements with an explicit rule below were readable;
     unclassed text fell back to the dark body colour. */
  color: var(--k12-white);
}
/* Bootstrap's quiet-text utilities are dark by design and carry !important, so a
   subtitle written as <p class="text-muted"> renders near-black on the gradient.
   Re-point them at a translucent white: still visually quieter than the heading,
   but 5.2:1 against the light end of the gradient instead of the 1.2:1 it was.
   The :not() guard leaves badges alone, e.g. <span class="badge bg-light text-dark">,
   which carry their own light background and must keep dark text. */
.page-header-bar .text-muted:not([class*="bg-"]),
.page-header-bar .text-secondary:not([class*="bg-"]),
.page-header-bar .text-body:not([class*="bg-"]) {
  color: rgba(255, 255, 255, 0.8) !important;
}
/* Large circle accent — top right */
.page-header-bar::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
/* Smaller circle accent — bottom right, offset inward */
.page-header-bar::after {
  content: "";
  position: absolute;
  bottom: -50px;
  right: 80px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.page-header-bar h1 {
  color: var(--k12-white);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 0.2rem;
}
.page-header-bar .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
}
.page-header-bar .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.page-header-bar .breadcrumb-item a:hover {
  color: var(--k12-white);
}
.page-header-bar .breadcrumb-item.active,
.page-header-bar .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.5);
}

/* k12-panel (borderless card)
   ------------------------------------------- */
.k12-panel {
  border: none;
  border-radius: 0.75rem;
  -webkit-box-shadow: 0 2px 12px rgba(110, 61, 174, 0.09);
  box-shadow: 0 2px 12px rgba(110, 61, 174, 0.09);
  background: var(--k12-white);
  overflow: visible;
}

/* k12-panel-header (replaces .card-header on k12-panels)
   ------------------------------------------- */
.k12-panel-header {
  background: linear-gradient(
    135deg,
    var(--k12-purple-dark) 0%,
    var(--k12-purple) 100%
  );
  padding: 0.8rem 1.1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.6rem;
  border-top-right-radius: 0.75rem;
  border-top-left-radius: 0.75rem;
}

/* k12-panel-header nav tabs
   Keep tab labels readable on the purple header.
   Default: white text. Active/clicked: black text.
   ------------------------------------------- */
.nav-tabs.k12-panel-header .nav-link {
  color: var(--k12-white);
}
.nav-tabs.k12-panel-header .nav-link:hover,
.nav-tabs.k12-panel-header .nav-link:focus {
  color: var(--k12-white);
}
.nav-tabs.k12-panel-header .nav-link.active,
.nav-tabs.k12-panel-header .nav-item.show .nav-link,
.nav-tabs.k12-panel-header .nav-link:active {
  color: var(--k12-near-black);
}
.nav-tabs.k12-panel-header .nav-link.active i,
.nav-tabs.k12-panel-header .nav-link:active i {
  color: var(--k12-near-black);
}

.k12-panel-header h6 {
  color: var(--k12-white);
  font-weight: 700;
  font-size: 0.88rem;
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
}

/* k12-section-header
   Plain section heading for a block that sits directly on the white page
   background rather than on a k12-panel: report sections, repeat-group headings.
   Same layout as .k12-panel-header with no gradient, which is why the text is
   dark purple instead of white. Pages used to reach for
   <div class="k12-panel-header" style="background:none"> for this, which stripped
   the gradient but kept the white text, leaving the heading invisible.
   ------------------------------------------- */
.k12-section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0 0 4px 0;
}
.k12-section-header h6 {
  color: var(--k12-purple-dark);
  font-weight: 700;
  font-size: 0.88rem;
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
}

/* btn-header-action
   White pill for buttons placed ON dark purple headers.
   Solid grey/purple buttons disappear against the gradient.
   ------------------------------------------- */
.btn-header-action {
  background: var(--k12-white);
  color: var(--k12-purple-dark);
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 2rem;
  white-space: nowrap;
  -webkit-transition:
    background 0.15s,
    -webkit-box-shadow 0.15s;
  transition:
    background 0.15s,
    -webkit-box-shadow 0.15s;
  transition:
    background 0.15s,
    box-shadow 0.15s;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    -webkit-box-shadow 0.15s;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.btn-header-action:hover {
  background: var(--k12-purple-light);
  color: var(--k12-purple-dark);
  -webkit-box-shadow: 0 2px 10px rgba(77, 25, 121, 0.22);
  box-shadow: 0 2px 10px rgba(77, 25, 121, 0.22);
}

/* btn-header-action state modifiers
   Header pills carry three states.
     default        — solid white; a primary action (Add, Export, Upload).
     .is-inactive   — translucent; a secondary control that should recede
                      (filter dropdowns, the unchosen half of a toggle pair).
     .is-active     — purple fill inside a white ring; the chosen option in a
                      toggle group. The ring is what separates it from the
                      header gradient, whose dark end is the same purple.
   `.active` is styled alongside `.is-active` because Bootstrap and
   `dmx-class:active` both emit the bare class.

   Order matters: these rules follow both `:hover` and `.is-inactive` at equal
   specificity, so an element carrying `is-inactive` plus a toggled-on `active`
   resolves to active, and an active pill keeps its fill while hovered.
   ------------------------------------------- */
.btn-header-action.is-inactive {
  background: rgba(255, 255, 255, 0.16);
  color: var(--k12-white);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-header-action.is-inactive:hover {
  background: rgba(255, 255, 255, 0.3);
  color: var(--k12-white);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-header-action.is-active,
.btn-header-action.active {
  background: var(--k12-purple-dark);
  color: var(--k12-white);
  -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.btn-header-action.is-active:hover,
.btn-header-action.active:hover {
  background: var(--k12-purple-dark);
  color: var(--k12-white);
  -webkit-box-shadow: 0 0 0 2px var(--k12-white);
  box-shadow: 0 0 0 2px var(--k12-white);
}

/* k12-table
   ------------------------------------------- */
.k12-table {
  font-size: 0.875rem;
  margin-bottom: 0;
}
.k12-table thead th {
  background: var(--k12-purple-light);
  color: var(--k12-purple-dark);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid #d6c7f0;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.k12-table thead th:hover {
  background: #e8dcf8;
}
.k12-table tbody tr {
  -webkit-transition: background 0.1s;
  transition: background 0.1s;
}
.k12-table tbody tr:hover {
  background: var(--k12-purple-light) !important;
}
.k12-table tbody td {
  padding: 0.55rem 0.85rem;
  vertical-align: middle;
  border-color: #f0ecfa;
  color: var(--k12-near-black);
}
.k12-table tbody tr:nth-child(odd) {
  background: #faf9fe;
}
.k12-table tbody tr:nth-child(even) {
  background: var(--k12-white);
}
/* Sorting state indicators */
.k12-table thead th.sorting::after {
  content: " ⇅";
  opacity: 0.3;
  font-size: 0.75em;
}
.k12-table thead th.sorting_asc::after {
  content: " ↑";
  opacity: 1;
  color: var(--k12-purple);
}
.k12-table thead th.sorting_desc::after {
  content: " ↓";
  opacity: 1;
  color: var(--k12-purple);
}

/* badge-rate — numeric value pill
   ------------------------------------------- */
.badge-rate {
  display: inline-block;
  background: var(--k12-purple-light);
  color: var(--k12-purple-dark);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.18em 0.6em;
  border-radius: 2em;
  font-variant-numeric: tabular-nums;
}

/* badge-xchg — exchange-hours credit tag (outlined purple pill, distinct
   from the filled .badge-rate hours pill it sits beside)
   ------------------------------------------- */
.badge-xchg {
  display: inline-block;
  background: var(--k12-white);
  color: var(--k12-purple-dark);
  border: 1px solid var(--k12-purple);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.16em 0.6em;
  border-radius: 2em;
  white-space: nowrap;
}

/* btn-link-ceu — solid action pill (e.g. "Link", "Add")
   ------------------------------------------- */
.btn-link-ceu {
  background: var(--k12-purple);
  color: var(--k12-white);
  border: none;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.22rem 0.65rem;
  border-radius: 2rem;
  white-space: nowrap;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
  line-height: 1.4;
  cursor: pointer;
}
.btn-link-ceu:hover {
  background: var(--k12-purple-dark);
  color: var(--k12-white);
}
.btn-link-ceu:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* btn-unlink-ceu — ghost action pill (e.g. "Unlink", "Remove")
   ------------------------------------------- */
.btn-unlink-ceu {
  background: transparent;
  color: var(--k12-gray);
  border: 1px solid #e0d6f5;
  font-size: 0.75rem;
  padding: 0.22rem 0.6rem;
  border-radius: 2rem;
  white-space: nowrap;
  -webkit-transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  line-height: 1.4;
  cursor: pointer;
}
.btn-unlink-ceu:hover {
  background: #fdecea;
  color: #b91c1c;
  border-color: #f5c6c6;
}

/* k12-empty-state
   ------------------------------------------- */
.k12-empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--k12-gray);
}
.k12-empty-state i {
  font-size: 2rem;
  margin-bottom: 0.6rem;
  display: block;
  opacity: 0.45;
}
.k12-empty-state p {
  font-size: 0.85rem;
  margin: 0;
}

/* caution-box — amber left-border warning panel
   ------------------------------------------- */
.caution-box {
  background: #fff8f0;
  border-left: 4px solid #e67e22;
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  color: #7a4500;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.caution-box a {
  color: var(--k12-purple);
  font-weight: 600;
}

/* btn-k12-primary
   General-purpose primary action button. Works on both dark (page-header-bar)
   and light (modal) backgrounds. White with transparent border on dark bg;
   add `style="background:var(--k12-purple);color:#fff"` to invert on white bg.
   ------------------------------------------- */
.btn-k12-primary {
  background: var(--k12-white);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: var(--k12-purple-dark);
  border-radius: 2rem;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.38rem 1rem;
  letter-spacing: 0.02em;
  -webkit-transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    -webkit-box-shadow 0.18s;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    -webkit-box-shadow 0.18s;
  transition:
    background 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    border-color 0.18s;
  transition:
    background 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    border-color 0.18s,
    -webkit-box-shadow 0.18s;
  white-space: nowrap;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.btn-k12-primary:hover {
  background: var(--k12-purple-dark);
  color: var(--k12-white);
  border-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.btn-k12-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* k12-search-row — search bar strip inside a k12-panel
   ------------------------------------------- */
.k12-search-row {
  background: var(--k12-gray-light);
  border-bottom: 1px solid #ece8f5;
  padding: 0.65rem 1.1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.75rem;
}
.k12-search-row .form-control {
  border: 1px solid #ddd;
  border-radius: 2rem;
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.k12-search-row .form-control:focus {
  border-color: var(--k12-purple);
  -webkit-box-shadow: 0 0 0 3px rgba(110, 61, 174, 0.12);
  box-shadow: 0 0 0 3px rgba(110, 61, 174, 0.12);
}

/* k12-search-field — binds the magnifier to its input so the pair travels as one
   flex item. Without this the icon is a sibling of the input on a wrapping row and
   can wrap onto its own line, leaving the icon stranded above the search box.
   ------------------------------------------- */
.k12-search-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.6rem;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 220px;
  flex: 1 1 220px;
  min-width: 200px;
}
.k12-search-field > i {
  -ms-flex: none;
  flex: none;
}

/* k12-filter-menu — the catalog filters, inline on wide screens and folded behind
   a "More filters" button below lg. The SAME select elements serve both layouts:
   the dropdown menu is re-laid-out by CSS rather than duplicated, so there is no
   second source of truth, no duplicate ids, and no second set of handlers to keep
   in sync. Above lg the toggle is hidden and the menu is forced static and open.
   ------------------------------------------- */
.k12-filter-count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
  border-radius: 2rem;
  background: var(--k12-purple);
  color: var(--k12-white);
  font-size: 0.65rem;
  font-weight: 700;
}
@media (min-width: 992px) {
  .k12-filter-toggle {
    display: none;
  }
  .k12-filter-menu {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    position: static !important;
    inset: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
@media (max-width: 991.98px) {
  .k12-filter-menu {
    min-width: 250px;
    padding: 0.85rem 1rem;
  }
  .k12-filter-menu .k12-filter-field + .k12-filter-field {
    margin-top: 0.7rem;
  }
}

/* k12-filter-field — a labeled control sitting inside k12-search-row.
   Filter selects belong on the light strip beside search, not on the purple
   panel header: a form control on the gradient can't hold a legible border,
   and splitting search from filters splits one task across two zones.
   The micro-label replaces placeholder-only meaning ("All sources").
   ------------------------------------------- */
.k12-filter-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.15rem;
}
.k12-filter-field > label {
  margin: 0;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k12-gray);
  line-height: 1.2;
}
.k12-filter-field .form-select {
  font-size: 0.8rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* k12-chip-row — echoes the active filters back beneath the search strip so a
   short result count is always explainable, and each filter is one click to
   drop. Only rendered when at least one filter is set.
   ------------------------------------------- */
.k12-chip-row {
  background: var(--k12-white);
  border-bottom: 1px solid #ece8f5;
  padding: 0.5rem 1.1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.k12-chip-row-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k12-gray);
}
.k12-filter-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.3rem 0.75rem;
  border-radius: 2rem;
  background: var(--k12-purple);
  border: 1px solid var(--k12-purple);
  color: var(--k12-white);
  cursor: pointer;
  -webkit-transition: background 0.15s, border-color 0.15s;
  transition: background 0.15s, border-color 0.15s;
}
.k12-filter-chip:hover {
  background: var(--k12-purple-dark);
  border-color: var(--k12-purple-dark);
  color: var(--k12-white);
}
.k12-filter-chip-clear {
  background: transparent;
  border: 1px dashed var(--k12-gray);
  color: var(--k12-gray);
  font-weight: 500;
}
.k12-filter-chip-clear:hover {
  background: transparent;
  border-color: var(--k12-purple);
  color: var(--k12-purple);
}

/* header-icon — icon inside k12-panel-header
   ------------------------------------------- */
.k12-panel-header .header-icon {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
}

/* member-count-link — pill link showing member/record counts
   ------------------------------------------- */
.member-count-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.65rem;
  background: var(--k12-purple-light);
  color: var(--k12-purple-dark);
  border-radius: 2rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
  padding: 0 0.55rem;
  -webkit-transition:
    background 0.15s,
    color 0.15s;
  transition:
    background 0.15s,
    color 0.15s;
}
.member-count-link:hover {
  background: var(--k12-purple);
  color: var(--k12-white);
}

/* badge-active / badge-inactive — status indicator pills
   ------------------------------------------- */
.badge-active {
  background: #e6f9f0;
  color: #1a7a4a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28em 0.7em;
  border-radius: 2rem;
  border: 1px solid #b2e8cf;
}
.badge-inactive {
  background: #fdecea;
  color: #b91c1c;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28em 0.7em;
  border-radius: 2rem;
  border: 1px solid #f5c6c6;
}

/* k12-action-btn — dropdown toggle for row actions
   ------------------------------------------- */
.k12-action-btn {
  border: 1px solid #d6c7f0;
  background: var(--k12-white);
  color: var(--k12-purple);
  border-radius: 0.4rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.8rem;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
  cursor: pointer;
  overflow: visible;
}
.k12-action-btn:hover {
  background: var(--k12-purple-light);
  border-color: var(--k12-purple);
  color: var(--k12-purple-dark);
}

/* delete-member-icon — inline trash icon for row removal
   ------------------------------------------- */
.delete-member-icon {
  color: var(--k12-gray);
  cursor: pointer;
  font-size: 0.9rem;
  -webkit-transition: color 0.15s;
  transition: color 0.15s;
}
.delete-member-icon:hover {
  color: #dc2626;
}

/* =============================================
   DASHBOARD — page-specific components
   ============================================= */

/* Stat number — large count displayed in queue/metric cards */
.dashboard-stat-number {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--k12-purple);
  font-variant-numeric: tabular-nums;
}

.dashboard-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--k12-gray);
  margin-top: 0.3rem;
}

/* Progress bar row — label left, percentage right */
.dashboard-progress-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  margin-bottom: 0.35rem;
}
.dashboard-progress-meta small {
  font-size: 0.78rem;
}
.dashboard-progress-title {
  font-size: 0.88rem;
  color: var(--k12-near-black);
  margin-bottom: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

/* License compliance legend */
.compliance-legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.2rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 0.65rem;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.compliance-legend-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--k12-near-black);
}
.compliance-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* PD Feed items */
.feed-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid #f0ecfa;
}
.feed-item:last-child {
  border-bottom: none;
}
.feed-item-avatar {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}
.feed-item-body {
  min-width: 0;
}
.feed-item-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--k12-near-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-item-message {
  font-size: 0.78rem;
  color: var(--k12-gray);
  margin-top: 0.1rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.feed-item-meta {
  font-size: 0.7rem;
  color: var(--k12-gray);
  margin-top: 0.2rem;
}

/* modal-header-k12 — dark purple gradient modal header
   modal-header-danger — red gradient modal header
   ------------------------------------------- */
.modal-header-k12 {
  background: linear-gradient(
    135deg,
    var(--k12-purple-dark) 0%,
    var(--k12-purple) 100%
  );
  color: var(--k12-white);
  padding: 1rem 1.25rem;
  border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}
.modal-header-k12 .modal-title {
  color: var(--k12-white);
  font-weight: 700;
  font-size: 0.95rem;
}
.modal-header-danger {
  background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);
  color: var(--k12-white);
  padding: 1rem 1.25rem;
  border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}
.modal-header-danger .modal-title {
  color: var(--k12-white);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Modal refinements (global)
   ------------------------------------------- */
.modal-content {
  border: none;
  border-radius: 0.65rem;
  -webkit-box-shadow: 0 8px 32px rgba(110, 61, 174, 0.18);
  box-shadow: 0 8px 32px rgba(110, 61, 174, 0.18);
}
.modal-header {
  border-bottom: 1px solid #e8dff5;
  padding: 1rem 1.25rem;
}

/* Pagination — brand colours
   ------------------------------------------- */
.pagination .page-link {
  color: var(--k12-purple);
  border-color: #ece8f5;
  font-size: 0.82rem;
}
.pagination .page-item.active .page-link {
  background: var(--k12-purple);
  border-color: var(--k12-purple);
  color: var(--k12-white);
}
.pagination .page-item.disabled .page-link {
  color: var(--k12-gray);
}
.pagination .page-link:hover {
  background: var(--k12-purple-light);
  color: var(--k12-purple-dark);
}

/* =============================================
   SUBSCRIPTION MANAGER PAGE
   Page-specific components for /views/subscriptions/index.ejs.
   Uses brand tokens (var(--k12-purple)*) so colors stay in lockstep
   with the rest of the K12 design system.
   ============================================= */

/* Count pill in the page-header-bar h1 */
.subscription-count-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  color: var(--k12-white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.7rem;
  border-radius: 2rem;
  margin-left: 0.55rem;
  vertical-align: middle;
  text-transform: uppercase;
}

/* Card grid container — sits inside the .k12-panel body */
.subscription-grid {
  padding: 1rem 1rem 0.5rem;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(var(--k12-white)),
    to(#faf9fe)
  );
  background: linear-gradient(180deg, var(--k12-white) 0%, #faf9fe 100%);
}

/* Card shell */
.subscription-card {
  position: relative;
  background: var(--k12-white);
  border: 1px solid rgba(110, 61, 174, 0.12);
  border-top: 3px solid var(--k12-purple);
  border-radius: 0.75rem;
  -webkit-box-shadow: 0 1px 4px rgba(110, 61, 174, 0.06);
  box-shadow: 0 1px 4px rgba(110, 61, 174, 0.06);
  -webkit-transition:
    -webkit-box-shadow 0.18s ease,
    -webkit-transform 0.18s ease;
  transition:
    -webkit-box-shadow 0.18s ease,
    -webkit-transform 0.18s ease;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease,
    -webkit-box-shadow 0.18s ease,
    -webkit-transform 0.18s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  overflow: visible;
}
.subscription-card:hover {
  -webkit-box-shadow: 0 6px 20px rgba(110, 61, 174, 0.16);
  box-shadow: 0 6px 20px rgba(110, 61, 174, 0.16);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

/* Billing-status top-border colors (driven by billing_id) */
.subscription-card--billing-1 {
  border-top-color: #0dcaf0;
} /* Pending */
.subscription-card--billing-2 {
  border-top-color: #198754;
} /* Paid */
.subscription-card--billing-3,
.subscription-card--billing-5 {
  border-top-color: #dc3545;
} /* Past Due / Suspended */
.subscription-card--billing-6 {
  border-top-color: #ffc107;
} /* Trial */

.subscription-card--inactive {
  opacity: 0.78;
}

/* Stacking fix: the card uses transform on hover (creates a stacking
   context), so an open dropdown menu was being painted under the next
   row's card. Elevate the card AND its column whenever the dropdown is
   open. */
.col:has(.subscription-card .dropdown.show),
.subscription-card:has(.dropdown.show) {
  position: relative;
  z-index: 1050;
}
.subscription-card .dropdown.show {
  position: relative;
  z-index: 1051;
}
.subscription-card .dropdown-menu.show {
  z-index: 1052;
}

/* Card header (district / partner / status badges) */
.subscription-card__header {
  background: linear-gradient(135deg, #faf8ff 0%, var(--k12-purple-light) 100%);
  border-bottom: 1px solid rgba(110, 61, 174, 0.08);
  border-radius: 0.75rem 0.75rem 0 0;
  padding: 0.85rem 1rem;
}
.subscription-card__district {
  color: var(--k12-purple-dark);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.005em;
  margin: 0;
}
.subscription-card__partner {
  color: var(--k12-gray);
  font-style: italic;
  font-size: 0.78rem;
  margin-top: 2px;
}

/* Billing status pill (mirrors the top-border color) */
.subscription-billing-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.28em 0.7em;
  border-radius: 2em;
}
.subscription-billing-badge--1 {
  background: #cff4fc;
  color: #055160;
}
.subscription-billing-badge--2 {
  background: #d1e7dd;
  color: #0a3622;
}
.subscription-billing-badge--3,
.subscription-billing-badge--5 {
  background: #f8d7da;
  color: #58151c;
}
.subscription-billing-badge--6 {
  background: #fff3cd;
  color: #664d03;
}

/* Active / Inactive status pill */
.subscription-status-pill {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18em 0.55em;
  border-radius: 0.3rem;
  border: 1px solid transparent;
}
.subscription-status-pill--active {
  background: #e8f5ee;
  color: #0a6b3a;
  border-color: #bfe0cd;
}
.subscription-status-pill--inactive {
  background: #fbeaec;
  color: #a52936;
  border-color: #f0c2c8;
}

/* Card body data rows */
.subscription-card__body {
  padding: 0.7rem 1rem;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.subscription-data-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  border-bottom: 1px dashed #efeaf7;
}
.subscription-data-row:last-of-type {
  border-bottom: none;
}
.subscription-data-icon {
  width: 1.4rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  text-align: center;
  color: var(--k12-purple);
  padding-top: 0.15rem;
}
.subscription-data-icon--danger {
  color: #dc3545;
}
/* Avatar slot for the contact row. The .avatar() formatter renders a
   48px (xs) inline-block that sizes itself; this wrapper just reserves
   the column and removes baseline whitespace. */
.subscription-data-avatar {
  width: 48px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  line-height: 0;
  cursor: pointer;
  border-radius: 50%;
  -webkit-transition: -webkit-box-shadow 0.15s ease;
  transition: -webkit-box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease;
  transition:
    box-shadow 0.15s ease,
    -webkit-box-shadow 0.15s ease;
  transition:
    box-shadow 0.15s ease,
    -webkit-box-shadow 0.15s ease;
  transition:
    box-shadow 0.15s ease,
    -webkit-box-shadow 0.15s ease;
  transition:
    box-shadow 0.15s ease,
    -webkit-box-shadow 0.15s ease;
  transition:
    box-shadow 0.15s ease,
    -webkit-box-shadow 0.15s ease;
}
.subscription-data-avatar:hover {
  -webkit-box-shadow: 0 0 0 3px rgba(110, 61, 174, 0.2);
  box-shadow: 0 0 0 3px rgba(110, 61, 174, 0.2);
}
.subscription-data-value {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}
.subscription-data-meta {
  color: var(--k12-gray);
  font-size: 0.75rem;
}

.subscription-contact-link {
  cursor: pointer;
  color: var(--k12-purple-dark);
  font-weight: 600;
  text-decoration: none;
}
.subscription-contact-link:hover {
  text-decoration: underline;
}

.subscription-plan-line {
  font-weight: 600;
  color: var(--k12-near-black);
}
.subscription-plan-price {
  color: var(--k12-purple);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}

/* Seats progress bar */
.subscription-seats-row {
  padding-top: 0.55rem;
  margin-top: 0.4rem;
  border-top: 1px solid #efeaf7;
}
.subscription-seats-bar {
  height: 6px;
  background: var(--k12-purple-light);
  border-radius: 3px;
  overflow: hidden;
}
.subscription-seats-bar > .subscription-seats-bar__fill {
  height: 100%;
  background: var(--k12-purple);
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
.subscription-seats-bar--over > .subscription-seats-bar__fill {
  background: #dc3545;
}
.subscription-seats-count {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.subscription-seats-count--ok {
  color: #0a6b3a;
}
.subscription-seats-count--over {
  color: #dc3545;
}

/* Inline trial activation button */
.subscription-trial-activate {
  background: #198754;
  color: var(--k12-white);
  border: none;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 2rem;
  cursor: pointer;
  margin-top: 0.35rem;
}
.subscription-trial-activate:hover {
  background: #0a6b3a;
  color: var(--k12-white);
}
.subscription-trial-activate:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Card footer (timestamp + action menu) */
.subscription-card__footer {
  background: var(--k12-gray-light);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding: 0.5rem 0.85rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 0.72rem;
}
.subscription-action-btn {
  background: var(--k12-white);
  border: 1px solid #e0d6f5;
  color: var(--k12-purple-dark);
  border-radius: 0.4rem;
  padding: 0.22rem 0.55rem;
  font-size: 0.78rem;
  cursor: pointer;
}
.subscription-action-btn:hover {
  background: var(--k12-purple-light);
  border-color: var(--k12-purple);
}

/* Pagination footer (mirrors portfolio's pattern) */
.subscription-pagination-bar {
  background: var(--k12-gray-light);
  border-top: 1px solid #ece8f5;
  border-radius: 0 0 0.75rem 0.75rem;
  padding: 0.75rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.82rem;
}
.subscription-pagination-bar .pagination .page-link {
  color: var(--k12-purple);
}
.subscription-pagination-bar .pagination .page-item.active .page-link {
  background: var(--k12-purple);
  border-color: var(--k12-purple);
  color: var(--k12-white);
}

/* =============================================
   PORTFOLIO PAGE
   Page-specific components for /views/portfolio/index.ejs
   ============================================= */

/* File type icon: colored square with document icon */
.portfolio-file-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 0.95rem;
  color: #fff;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  background: var(--k12-gray); /* default fallback for "other" */
}
.portfolio-file-icon--pdf {
  background: #d9342b;
}
.portfolio-file-icon--word {
  background: #2b579a;
}
.portfolio-file-icon--excel {
  background: #217346;
}
.portfolio-file-icon--ppt {
  background: #d24726;
}
.portfolio-file-icon--image {
  background: #0097a7;
}
.portfolio-file-icon--text {
  background: #6c757d;
}

/* Filename cell: icon + name + summary stacked */
.portfolio-filename-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.7rem;
}
.portfolio-filename-main {
  font-weight: 600;
  color: var(--k12-near-black);
  line-height: 1.15;
}
.portfolio-filename-summary {
  font-size: 0.72rem;
  color: var(--k12-gray);
  line-height: 1.2;
  margin-top: 2px;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Category badge with color variations per category_id */
.portfolio-cat-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.22em 0.75em;
  border-radius: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: #eceff2;
  color: #4a5560;
}
.portfolio-cat-badge--1 {
  background: #fff4d6;
  color: #8a6100;
} /* Certificate (gold) */
.portfolio-cat-badge--2 {
  background: #e0eefb;
  color: #19487a;
} /* Transcript (blue) */
.portfolio-cat-badge--3 {
  background: var(--k12-purple-light);
  color: var(--k12-purple-dark);
} /* License/Credential (purple) */
.portfolio-cat-badge--4 {
  background: #dff4f0;
  color: #0f6b5e;
} /* Attendance Record (teal) */
.portfolio-cat-badge--5 {
  background: #ffe7d1;
  color: #8a3a00;
} /* Course Material (orange) */
.portfolio-cat-badge--6 {
  background: #eceff2;
  color: #4a5560;
} /* Other (grey) */

/* File size visualization: thin bar showing size relative to 20MB max */
.portfolio-size-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2px;
  min-width: 72px;
}
.portfolio-size-label {
  font-size: 0.78rem;
  color: var(--k12-near-black);
  font-variant-numeric: tabular-nums;
}
.portfolio-size-track {
  height: 3px;
  background: #ece8f5;
  border-radius: 2px;
  overflow: hidden;
}
.portfolio-size-fill {
  height: 100%;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(var(--k12-purple)),
    to(var(--k12-purple-dark))
  );
  background: linear-gradient(
    90deg,
    var(--k12-purple) 0%,
    var(--k12-purple-dark) 100%
  );
  border-radius: 2px;
}

/* Link count pill */
.portfolio-link-count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--k12-purple-dark);
  font-weight: 600;
}
.portfolio-link-count i {
  opacity: 0.6;
}
.portfolio-link-count--zero {
  color: var(--k12-gray);
  font-weight: 500;
}

/* Row hover elevation (enhanced over default .k12-table hover) */
.k12-table.portfolio-table tbody tr {
  -webkit-transition:
    background 0.15s,
    -webkit-box-shadow 0.15s,
    -webkit-transform 0.15s;
  transition:
    background 0.15s,
    -webkit-box-shadow 0.15s,
    -webkit-transform 0.15s;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    transform 0.15s,
    -webkit-box-shadow 0.15s,
    -webkit-transform 0.15s;
}
.k12-table.portfolio-table tbody tr:hover {
  -webkit-box-shadow: 0 4px 14px rgba(110, 61, 174, 0.12);
  box-shadow: 0 4px 14px rgba(110, 61, 174, 0.12);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  position: relative;
  z-index: 1;
}

/* Action button: icon-only, circular */
.portfolio-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e0d6f5;
  background: var(--k12-white);
  color: var(--k12-purple);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.portfolio-action-btn:hover {
  background: var(--k12-purple-light);
  border-color: var(--k12-purple);
  color: var(--k12-purple-dark);
}
.portfolio-action-btn::after {
  display: none;
}

/* Count pill in the page header (shows "12 documents") */
.portfolio-count-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  color: var(--k12-white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.7rem;
  border-radius: 2rem;
  margin-left: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ============================================================
   PERMISSIONS REGISTRY — page-scoped styles
   ------------------------------------------------------------
   Used by views/permissions/index.ejs (System Admin only).
   Visual language pushes the K12 design system toward an
   "operator console" feel: monospace identifiers, color-coded
   role gravity, status chips, live stats panel.
   The page itself uses the standard .page-header-bar for the
   title chrome — these classes cover the stats panel, toolbar,
   table, modals, and access-denied panel only.
   ============================================================ */
.perm-shell {
  --perm-gold: #c89724;
  --perm-gold-light: #fdf6e3;
  --perm-blue: #2a6db4;
  --perm-blue-light: #e8f1fb;
  --perm-teal: #1e8a7a;
  --perm-teal-light: #e3f5f1;
  --perm-amber: #b8651e;
  --perm-amber-light: #fbeede;
  position: relative;
}

/* Stats grid lives INSIDE .page-header-bar (dark gradient bg).
   Tiles are semi-transparent on white so they read as one chrome surface
   with the header. Color-coded top accent communicates the metric type. */
.page-header-bar .perm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1.1rem;
}
.page-header-bar .perm-stat {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.page-header-bar .perm-stat::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}
.page-header-bar .perm-stat-F::before {
  background: #f6c373;
}
.page-header-bar .perm-stat-AO::before {
  background: #6fd6c4;
}
.page-header-bar .perm-stat-resources::before {
  background: #8db8e8;
}
.page-header-bar .perm-stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.4rem;
}
.page-header-bar .perm-stat-value {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  gap: 0.4rem;
}
.page-header-bar .perm-stat-value small {
  font-weight: 400;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0;
}

/* Eyebrow tag — used by access-denied panel */
.perm-eyebrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;

  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 100px;
}
.perm-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  -webkit-box-shadow: 0 0 0 3px currentColor;
  box-shadow: 0 0 0 3px currentColor;
  opacity: 0.6;
  -webkit-animation: perm-pulse 2.4s ease-in-out infinite;
  animation: perm-pulse 2.4s ease-in-out infinite;
}
@-webkit-keyframes perm-pulse {
  50% {
    opacity: 0.25;
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
  }
}
@keyframes perm-pulse {
  50% {
    opacity: 0.25;
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
  }
}

/* TOOLBAR -------------------------------------------------------- */
.perm-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.85rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: var(--k12-white);
  border: 1px solid rgba(110, 61, 174, 0.12);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  -webkit-box-shadow: 0 1px 0 rgba(110, 61, 174, 0.04);
  box-shadow: 0 1px 0 rgba(110, 61, 174, 0.04);
}
.perm-search {
  position: relative;
}
.perm-search input {
  width: 100%;
  border: 1px solid var(--k12-gray);
  background: var(--k12-gray-light);
  border-radius: 8px;
  padding: 0.55rem 2.5rem 0.55rem 2.4rem;
  font-size: 0.95rem;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
}
.perm-search input:focus {
  outline: none;
  border-color: var(--k12-purple);
  background: #fff;
  -webkit-box-shadow: 0 0 0 3px rgba(110, 61, 174, 0.12);
  box-shadow: 0 0 0 3px rgba(110, 61, 174, 0.12);
}
.perm-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: var(--k12-gray);
  pointer-events: none;
}
.perm-search-kbd {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--k12-gray);
  background: #fff;
  border: 1px solid var(--k12-gray);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
}
.perm-chips {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: var(--k12-gray-light);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.perm-chip {
  border: none;
  background: transparent;
  color: var(--k12-near-black);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: all 0.12s ease;
  transition: all 0.12s ease;
  letter-spacing: 0.02em;
}
.perm-chip:hover {
  background: rgba(110, 61, 174, 0.08);
}
.perm-chip.is-active {
  background: var(--k12-purple);
  color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(77, 25, 121, 0.25);
  box-shadow: 0 1px 2px rgba(77, 25, 121, 0.25);
}
.perm-add-btn {
  background: var(--k12-purple);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
  -webkit-box-shadow: 0 1px 2px rgba(77, 25, 121, 0.18);
  box-shadow: 0 1px 2px rgba(77, 25, 121, 0.18);
}
.perm-add-btn:hover {
  background: var(--k12-purple-dark);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 10px -2px rgba(77, 25, 121, 0.32);
  box-shadow: 0 4px 10px -2px rgba(77, 25, 121, 0.32);
  color: #fff;
}

/* TABLE ---------------------------------------------------------- */
.perm-table-wrap {
  background: #fff;
  border: 1px solid rgba(110, 61, 174, 0.12);
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 0 1px 0 rgba(110, 61, 174, 0.04);
  box-shadow: 0 1px 0 rgba(110, 61, 174, 0.04);
}
.perm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.perm-table thead th {
  background: #fafafd;
  border-bottom: 1px solid rgba(110, 61, 174, 0.1);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--k12-purple-dark);
  padding: 0.85rem 1rem;
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: background 0.12s ease;
  transition: background 0.12s ease;
}
.perm-table thead th:hover {
  background: var(--k12-purple-light);
}
.perm-table thead th.sorting::after {
  content: " ⇅";
  opacity: 0.35;
  font-size: 0.85em;
}
.perm-table thead th.sorting_asc::after {
  content: " ↑";
  opacity: 1;
}
.perm-table thead th.sorting_desc::after {
  content: " ↓";
  opacity: 1;
}
.perm-table thead th.no-sort {
  cursor: default;
}
.perm-table thead th.no-sort:hover {
  background: #fafafd;
}
.perm-table tbody tr {
  border-bottom: 1px solid #f1eef9;
  -webkit-transition: background 0.1s ease;
  transition: background 0.1s ease;
}
.perm-table tbody tr:hover {
  background: #fbfaff;
}
.perm-table tbody tr:last-child {
  border-bottom: none;
}
.perm-table tbody td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  font-size: 0.92rem;
  color: var(--k12-near-black);
}
.perm-id-cell {
  min-width: 200px;
}
.perm-resource {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--k12-gray);
  margin-bottom: 0.15rem;
  font-weight: 500;
}
.perm-name {
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--k12-purple-dark);
  background: var(--k12-purple-light);
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  border: 1px solid rgba(110, 61, 174, 0.15);
}
.perm-desc {
  color: #555;
  font-size: 0.88rem;
  line-height: 1.4;
  max-width: 480px;
}
.perm-status {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  letter-spacing: 0.06em;
}
.perm-status-F {
  background: var(--perm-amber-light);
  color: var(--perm-amber);
  border: 1px solid rgba(184, 101, 30, 0.18);
}
.perm-status-AO {
  background: var(--perm-teal-light);
  color: var(--perm-teal);
  border: 1px solid rgba(30, 138, 122, 0.18);
}
.perm-role {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}
.perm-role::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.perm-role-1 {
  background: #f7f0e0;
  color: var(--perm-gold);
}
.perm-role-2 {
  background: var(--perm-blue-light);
  color: var(--perm-blue);
}
.perm-role-3 {
  background: var(--perm-teal-light);
  color: var(--perm-teal);
}
.perm-role-4 {
  background: var(--k12-gray-light);
  color: #6c757d;
}
.perm-action-trigger {
  background: transparent;
  border: 1px solid transparent;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--k12-purple);
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.12s ease;
  transition: all 0.12s ease;
}
.perm-action-trigger:hover {
  background: var(--k12-purple-light);
  border-color: rgba(110, 61, 174, 0.2);
}
.perm-action-menu {
  border: 1px solid rgba(110, 61, 174, 0.15);
  border-radius: 8px;
  -webkit-box-shadow:
    0 12px 32px -8px rgba(77, 25, 121, 0.18),
    0 4px 8px -4px rgba(0, 0, 0, 0.06);
  box-shadow:
    0 12px 32px -8px rgba(77, 25, 121, 0.18),
    0 4px 8px -4px rgba(0, 0, 0, 0.06);
  padding: 0.35rem;
  min-width: 140px;
}
.perm-action-menu .dropdown-item {
  border-radius: 5px;
  padding: 0.45rem 0.65rem;
  font-size: 0.88rem;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
}
.perm-action-menu .dropdown-item:hover {
  background: var(--k12-purple-light);
  color: var(--k12-purple-dark);
}
.perm-action-menu .dropdown-item.is-destructive:hover {
  background: #fdecec;
  color: #b3261e;
}
.perm-table-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(110, 61, 174, 0.1);
  background: #fafafd;
  font-size: 0.8rem;
  color: var(--k12-near-black);
}
.perm-table-foot .form-select {
  width: auto;
  border-color: rgba(110, 61, 174, 0.2);

  font-size: 0.8rem;
  padding: 0.3rem 1.8rem 0.3rem 0.55rem;
}
.perm-table-foot .pagination {
  margin: 0;
  gap: 2px;
}
.perm-table-foot .page-link {
  border: 1px solid rgba(110, 61, 174, 0.15);
  color: var(--k12-purple-dark);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;

  font-size: 0.82rem;
}
.perm-table-foot .page-item.active .page-link {
  background: var(--k12-purple);
  border-color: var(--k12-purple);
  color: #fff;
}
.perm-table-foot .page-item.disabled .page-link {
  opacity: 0.4;
  cursor: not-allowed;
}
.perm-row-count {
  color: var(--k12-gray);
  text-align: right;
}
.perm-row-count strong {
  color: var(--k12-purple-dark);
  font-weight: 600;
}
.perm-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--k12-gray);
}
.perm-empty i {
  font-size: 2.5rem;
  color: var(--k12-purple);
  opacity: 0.3;
  margin-bottom: 1rem;
}

/* MODAL refinements --------------------------------------------- */
.perm-modal .modal-content {
  border: none;
  border-radius: 12px;
  -webkit-box-shadow: 0 24px 60px -12px rgba(77, 25, 121, 0.35);
  box-shadow: 0 24px 60px -12px rgba(77, 25, 121, 0.35);
  overflow: hidden;
}
.perm-modal .modal-header {
  background: linear-gradient(
    135deg,
    var(--k12-purple-dark) 0%,
    var(--k12-purple) 100%
  );
  color: #fff;
  border-bottom: none;
  padding: 1.1rem 1.4rem;
}
.perm-modal .modal-header.is-destructive {
  background: linear-gradient(135deg, #8a1c14 0%, #b3261e 100%);
}
.perm-modal .modal-title {
  font-family: "Open Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.55rem;
}
.perm-modal .btn-close {
  -webkit-filter: invert(1) brightness(2);
  filter: invert(1) brightness(2);
  opacity: 0.85;
}
.perm-modal .modal-body {
  padding: 1.5rem 1.4rem;
}
.perm-modal label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--k12-purple-dark);
  margin-bottom: 0.35rem;
}
.perm-modal .form-control,
.perm-modal .form-select {
  border-color: rgba(110, 61, 174, 0.18);
  border-radius: 7px;
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem;
}
.perm-modal .form-control:focus,
.perm-modal .form-select:focus {
  border-color: var(--k12-purple);
  -webkit-box-shadow: 0 0 0 3px rgba(110, 61, 174, 0.12);
  box-shadow: 0 0 0 3px rgba(110, 61, 174, 0.12);
}
.perm-modal #inp_permission_name {
  font-weight: 500;
  color: var(--k12-purple-dark);
}
.perm-modal .modal-footer {
  border-top: 1px solid #f1eef9;
  padding: 1rem 1.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 0.5rem;
}
.perm-modal .modal-footer .btn-primary {
  background: var(--k12-purple);
  border-color: var(--k12-purple);
  padding: 0.5rem 1.2rem;
  font-weight: 600;
}
.perm-modal .modal-footer .btn-primary:hover {
  background: var(--k12-purple-dark);
  border-color: var(--k12-purple-dark);
}
.perm-delete-warning {
  background: #fdf3f3;
  border: 1px solid #f1c8c5;
  border-radius: 8px;
  padding: 1rem;
  color: #6b1f18;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.perm-delete-warning i {
  color: #b3261e;
  font-size: 1.25rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* Access-denied panel */
.perm-denied {
  background: #fff;
  border: 1px solid rgba(110, 61, 174, 0.12);
  border-radius: 12px;
  padding: 3rem 2rem;
  -webkit-box-shadow: 0 8px 32px -12px rgba(77, 25, 121, 0.2);
  box-shadow: 0 8px 32px -12px rgba(77, 25, 121, 0.2);
  text-align: center;
  max-width: 500px;
  margin: 5rem auto;
}
.perm-denied .perm-eyebrow {
  color: #b3261e;
  border: 1px solid rgba(179, 38, 30, 0.3);
  background: #fdf3f3;
  margin-bottom: 1rem;
}
.perm-denied h2 {
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--k12-near-black);
  font-size: 1.6rem;
  margin: 0.5rem 0;
}

/* Responsive */
@media (max-width: 900px) {
  .perm-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .perm-toolbar {
    grid-template-columns: 1fr;
  }
  .perm-chips {
    overflow-x: auto;
  }
}
@media (max-width: 640px) {
  .perm-table thead {
    display: none;
  }
  .perm-table tbody td {
    display: block;
    padding: 0.5rem 1rem;
  }
  .perm-table tbody tr {
    padding: 0.75rem 0;
  }
}

/* ============================================================
   IPDP Activity timeline (.ipdp-timeline)
   Used by the Activity tab on the IPDP detail page. Each entry is a
   flex row: an avatar "node" at top of the rail + a connector line that
   fills the remaining height down to the next entry's avatar.
   ============================================================ */
.ipdp-timeline .tl-node {
  border-radius: 50%;
  line-height: 0;
  -webkit-box-shadow: 0 0 0 3px #fff;
  box-shadow: 0 0 0 3px #fff;
}
.ipdp-timeline .tl-node-danger {
  -webkit-box-shadow:
    0 0 0 2px #dc3545,
    0 0 0 4px #fff;
  box-shadow:
    0 0 0 2px #dc3545,
    0 0 0 4px #fff;
}
.ipdp-timeline .tl-node-warning {
  -webkit-box-shadow:
    0 0 0 2px #ffc107,
    0 0 0 4px #fff;
  box-shadow:
    0 0 0 2px #ffc107,
    0 0 0 4px #fff;
}
.ipdp-timeline .tl-node-info {
  -webkit-box-shadow:
    0 0 0 2px #0dcaf0,
    0 0 0 4px #fff;
  box-shadow:
    0 0 0 2px #0dcaf0,
    0 0 0 4px #fff;
}
.ipdp-timeline .tl-node-success {
  -webkit-box-shadow:
    0 0 0 2px #198754,
    0 0 0 4px #fff;
  box-shadow:
    0 0 0 2px #198754,
    0 0 0 4px #fff;
}
.ipdp-timeline .tl-line {
  width: 2px;
  background: #e3ddf0;
  margin-top: 0.35rem;
}
.ipdp-timeline .tl-item:last-child .tl-line {
  display: none;
}

/* ===================================================================
   PERMISSION ASSIGNMENT MODAL (.pm-*)
   Shared by modal_updatePermissions (users) and modal_groupPermissions
   (groups). Independent from the .perm-* registry namespace by design.
   =================================================================== */

/* --- section labels --- */
.pm-assign-label,
.pm-add-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--k12-gray);
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pm-assign-count {
  background: var(--k12-purple-light);
  color: var(--k12-purple-dark);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.66rem;
}

/* --- assigned permission rows --- */
.pm-assign-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.1rem; }
.pm-assign-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid rgba(110, 61, 174, 0.14);
  border-radius: 0.7rem;
  padding: 0.7rem 0.75rem;
  background: var(--k12-white);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pm-assign-row:hover {
  border-color: rgba(110, 61, 174, 0.32);
  box-shadow: 0 3px 10px rgba(110, 61, 174, 0.07);
}
.pm-assign-main { min-width: 0; flex: 1; }
.pm-assign-idline { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
.pm-res-chip {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--k12-purple-light);
  color: var(--k12-purple-dark);
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
}
.pm-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--k12-purple-dark);
  word-break: break-word;
}
.pm-desc { font-size: 0.8rem; color: var(--k12-gray); line-height: 1.45; }
.pm-rm-btn {
  flex: 0 0 auto;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--k12-gray);
  width: 30px;
  height: 30px;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  transition: 0.15s;
}
.pm-rm-btn:hover { background: #fdecec; color: #b3261e; border-color: rgba(179, 38, 30, 0.25); }

.pm-empty {
  text-align: center;
  color: var(--k12-gray);
  padding: 1.6rem 1rem;
  border: 1px dashed rgba(110, 61, 174, 0.2);
  border-radius: 0.7rem;
}
.pm-empty i { font-size: 1.6rem; color: var(--k12-purple); opacity: 0.5; }
.pm-empty p { margin: 0.4rem 0 0; font-size: 0.85rem; }

/* --- add block --- */
.pm-add-wrap {
  background: var(--k12-gray-light);
  border: 1px solid rgba(110, 61, 174, 0.14);
  border-radius: 0.75rem;
  padding: 0.9rem;
}
.pm-picker-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--k12-white);
  border: 1px solid rgba(110, 61, 174, 0.22);
  border-radius: 0.6rem;
  padding: 0.4rem 0.65rem;
  margin-bottom: 0.6rem;
}
.pm-picker-search i { color: var(--k12-gray); font-size: 0.8rem; }
.pm-picker-search input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 0.85rem;
  background: transparent;
  color: var(--k12-near-black);
}
.pm-picker {
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid rgba(110, 61, 174, 0.22);
  border-radius: 0.6rem;
  background: var(--k12-white);
}
.pm-pick {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(110, 61, 174, 0.12);
  transition: background 0.12s;
}
.pm-pick:last-child { border-bottom: none; }
.pm-pick:hover { background: var(--k12-purple-light); }
.pm-pick.sel { background: var(--k12-purple-light); }
.pm-pick-radio {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(110, 61, 174, 0.3);
  margin-top: 2px;
  display: grid;
  place-items: center;
  transition: 0.12s;
}
.pm-pick.sel .pm-pick-radio { border-color: var(--k12-purple); }
.pm-pick.sel .pm-pick-radio::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--k12-purple);
}
.pm-pick-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--k12-purple-dark);
}
.pm-pick-desc { font-size: 0.78rem; color: var(--k12-gray); line-height: 1.4; margin-top: 0.15rem; }
.pm-pick-empty { padding: 1rem; text-align: center; color: var(--k12-gray); font-size: 0.8rem; font-style: italic; }

.pm-add-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.pm-add-btn {
  background: linear-gradient(135deg, var(--k12-purple-dark) 0%, var(--k12-purple) 100%);
  color: var(--k12-white);
  border: none;
  border-radius: 0.55rem;
  padding: 0.5rem 1.25rem;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 3px 9px rgba(110, 61, 174, 0.28);
}
.pm-add-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }