/* =============================================================
   Pell Grant Approvals — Custom UI
   Application ID: 104
   ============================================================= */
:root {
  --pell-navy: #0f2744;
  --pell-navy-2: #1a3a5c;
  --pell-blue: #1a5fb4;
  --pell-blue-light: #3584e4;
  --pell-blue-bg: #e8f0fd;
  --pell-teal: #0d7377;
  --pell-amber: #d68910;
  --pell-amber-bg: #fdf6e3;
  --pell-green: #1e8449;
  --pell-green-bg: #eafaf1;
  --pell-red: #c0392b;
  --pell-red-bg: #fdf2f2;
  --pell-purple: #5c2d91;
  --pell-purple-bg: #f0ebff;
  --pell-slate: #f4f6f9;
  --pell-border: rgba(15, 39, 68, 0.12);
  --pell-text: #0f2744;
  --pell-text-2: #4a6080;
  --pell-text-3: #7a94b0;
  --pell-radius: 10px;
  --pell-radius-sm: 7px;
  --pell-shadow: 0 2px 12px rgba(53, 132, 228, 0.08);
  --pell-transition: all 0.15s ease;
}


body.t-Body {
  background: var(--pell-slate) !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


.t-Body--nav .t-Body-nav {
  background: var(--pell-navy) !important;
  border-right: none;
}

.t-TreeNav .a-TreeView-label,
.t-TreeNav a {
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 400;
  transition: var(--pell-transition);
}

.t-TreeNav .a-TreeView-label:hover,
.t-TreeNav a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px;
}

.t-TreeNav .a-TreeView-node--current .a-TreeView-label,
.t-TreeNav .is-current a {
  color: #7ec8f7 !important;
  background: rgba(53, 132, 228, 0.25) !important;
  border-radius: 8px;
  font-weight: 500;
}

.t-TreeNav .a-TreeView-row .a-TreeView-toggle::before {
  color: rgba(255, 255, 255, 0.4) !important;
}


.t-Header-logo,
.t-Header-logo-link {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}


.t-Header {
  background: #ffffff !important;
  border-bottom: 0.5px solid var(--pell-border) !important;
  box-shadow: none !important;
}

.t-Header-controls .t-Button--header {
  color: var(--pell-text-2) !important;
}


.t-Region {
  border: 0.5px solid var(--pell-border) !important;
  border-radius: var(--pell-radius) !important;
  box-shadow: none !important;
  transition: var(--pell-transition);
  overflow: hidden;
}

.t-Region-header {
  background: #ffffff !important;
  border-bottom: 0.5px solid var(--pell-border) !important;
  padding: 14px 18px !important;
}

.t-Region-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pell-text) !important;
}

.t-Region-body {
  padding: 16px 18px !important;
}


.t-BadgeList-item {
  background: #ffffff !important;
  border: 0.5px solid var(--pell-border) !important;
  border-radius: var(--pell-radius) !important;
  padding: 16px 18px !important;
  position: relative;
  overflow: hidden;
  transition: var(--pell-transition);
  cursor: pointer;
}

.t-BadgeList-item:hover {
  border-color: rgba(53, 132, 228, 0.4) !important;
  transform: translateY(-1px);
  box-shadow: var(--pell-shadow);
}

.t-BadgeList-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--pell-blue-light);
}


.t-BadgeList-item:nth-child(1)::before { background: var(--pell-blue-light); }
.t-BadgeList-item:nth-child(2)::before { background: var(--pell-amber); }
.t-BadgeList-item:nth-child(3)::before { background: var(--pell-green); }
.t-BadgeList-item:nth-child(4)::before { background: var(--pell-red); }

.t-BadgeList-value {
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--pell-text) !important;
  line-height: 1 !important;
}

.t-BadgeList-label {
  font-size: 10px !important;
  color: var(--pell-text-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 500;
  margin-bottom: 6px;
}


.t-Button {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: var(--pell-radius-sm) !important;
  transition: var(--pell-transition);
  border: 0.5px solid var(--pell-border) !important;
  padding: 7px 14px !important;
  box-shadow: none !important;
}

.t-Button:hover {
  background: var(--pell-slate) !important;
  border-color: rgba(53, 132, 228, 0.4) !important;
}

.t-Button--hot,
.t-Button--primary {
  background: var(--pell-blue) !important;
  border-color: var(--pell-blue) !important;
  color: #ffffff !important;
}

.t-Button--hot:hover,
.t-Button--primary:hover {
  background: var(--pell-blue-light) !important;
  border-color: var(--pell-blue-light) !important;
  color: #ffffff !important;
}

.t-Button--danger {
  background: var(--pell-red) !important;
  border-color: var(--pell-red) !important;
  color: #ffffff !important;
}

.t-Button--success {
  background: var(--pell-green) !important;
  border-color: var(--pell-green) !important;
  color: #ffffff !important;
}


.a-IG,
.a-IRR-container {
  border: 0.5px solid var(--pell-border) !important;
  border-radius: var(--pell-radius) !important;
  overflow: hidden;
}

.a-IG-toolbar,
.a-IRR-toolbar {
  background: #ffffff !important;
  border-bottom: 0.5px solid var(--pell-border) !important;
  padding: 8px 12px !important;
}

.a-GV-header,
.a-IRR-header th {
  background: var(--pell-slate) !important;
  color: var(--pell-text-2) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 0.5px solid var(--pell-border) !important;
  padding: 10px 12px !important;
}

.a-GV-cell,
.a-IRR-table td {
  font-size: 13px !important;
  color: var(--pell-text) !important;
  padding: 10px 12px !important;
  border-bottom: 0.5px solid var(--pell-border) !important;
}

.a-GV-row:hover,
.a-IRR-table tr:hover {
  background: var(--pell-blue-bg) !important;
}


.pell-status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pell-status-new,
.pell-status-NEW { background: var(--pell-blue-bg); color: var(--pell-blue); }

.pell-status-nshe,
.pell-status-pending-nshe,
.pell-status-PENDING_NSHE_REVIEW { background: var(--pell-amber-bg); color: #b87500; }

.pell-status-owinn,
.pell-status-pending-owinn,
.pell-status-PENDING_OWINN_REVIEW { background: var(--pell-purple-bg); color: #7f77dd; }

.pell-status-final,
.pell-status-pending-final,
.pell-status-PENDING_FINAL_DECISION { background: var(--pell-purple-bg); color: var(--pell-purple); }

.pell-status-ed,
.pell-status-pending-ed,
.pell-status-PENDING_ED_LETTER { background: var(--pell-amber-bg); color: #d85a30;; }

.pell-status-approved,
.pell-status-APPROVED { background: var(--pell-green-bg); color: #1a6b3a; }

.pell-status-denied,
.pell-status-DENIED { background: var(--pell-red-bg); color: #922b21; }


.apex-item-text,
.apex-item-textarea,
.apex-item-select,
.apex-item-date-picker,
.apex-item-popup-lov {
  border: 0.5px solid var(--pell-border) !important;
  border-radius: var(--pell-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--pell-text) !important;
  background: #ffffff !important;
  transition: var(--pell-transition);
  box-shadow: none !important;
}

.apex-item-text:focus,
.apex-item-textarea:focus,
.apex-item-select:focus {
  border-color: var(--pell-blue-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(53, 132, 228, 0.15) !important;
}

.t-Form-label,
.t-Form-labelContainer label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--pell-text-2) !important;
  margin-bottom: 4px !important;
}


.apex-item-grid-radio .apex-item-option {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 14px !important;
  border: 0.5px solid var(--pell-border);
  border-radius: 6px;
  background: #ffffff;
  margin-right: 6px !important;
  font-size: 12px;
  font-weight: 500;
  color: var(--pell-text-2);
  cursor: pointer;
  transition: var(--pell-transition);
}

.apex-item-grid-radio .apex-item-option:hover {
  border-color: rgba(53, 132, 228, 0.4);
}


.t-TabsRegion-items {
  border-bottom: 0.5px solid var(--pell-border) !important;
  background: transparent !important;
}

.t-TabsRegion-item a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pell-text-3) !important;
  padding: 10px 16px !important;
  border-bottom: 2px solid transparent !important;
  transition: var(--pell-transition);
}

.t-TabsRegion-item a:hover {
  color: var(--pell-text) !important;
}

.t-TabsRegion-item.is-active a {
  color: var(--pell-blue) !important;
  border-bottom-color: var(--pell-blue) !important;
  background: transparent !important;
}


.t-Breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
}

.t-Breadcrumb-item {
  font-size: 12px !important;
  color: var(--pell-text-3) !important;
}

.t-Breadcrumb-item.is-active {
  color: var(--pell-text) !important;
  font-weight: 500 !important;
}


.t-Cards-item {
  border: 0.5px solid var(--pell-border) !important;
  border-radius: var(--pell-radius) !important;
  box-shadow: none !important;
  transition: var(--pell-transition);
}

.t-Cards-item:hover {
  border-color: var(--pell-blue-light) !important;
  transform: translateY(-1px);
  box-shadow: var(--pell-shadow);
}

.t-Card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pell-text) !important;
}

.t-Card-desc {
  font-size: 12px !important;
  color: var(--pell-text-3) !important;
}


.ui-dialog {
  border-radius: var(--pell-radius) !important;
  border: 0.5px solid var(--pell-border) !important;
  box-shadow: 0 8px 32px rgba(15, 39, 68, 0.12) !important;
  overflow: hidden;
}

.ui-dialog-titlebar {
  background: #ffffff !important;
  border-bottom: 0.5px solid var(--pell-border) !important;
  padding: 14px 18px !important;
}

.ui-dialog-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--pell-text) !important;
}

/* =============================================================
   ALERTS / NOTIFICATIONS
   ============================================================= */
.t-Alert {
  border-radius: var(--pell-radius) !important;
  border: 0.5px solid var(--pell-border) !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}

.t-Alert--success {
  background: var(--pell-green-bg) !important;
  border-color: var(--pell-green) !important;
  color: #1a6b3a !important;
}

.t-Alert--warning {
  background: var(--pell-amber-bg) !important;
  border-color: var(--pell-amber) !important;
  color: #b87500 !important;
}

.t-Alert--danger {
  background: var(--pell-red-bg) !important;
  border-color: var(--pell-red) !important;
  color: #922b21 !important;
}

.t-Alert--info {
  background: var(--pell-blue-bg) !important;
  border-color: var(--pell-blue) !important;
  color: var(--pell-blue) !important;
}

/* =============================================================
   WORKFLOW STAGE TRACKER
   ============================================================= */
.pell-stage-tracker {
  display: flex;
  gap: 0;
  align-items: center;
  padding: 12px 0;
}

.pell-stage {
  position: relative;
  padding: 8px 16px 8px 32px;
  font-size: 12px;
  font-weight: 500;
  background: var(--pell-slate);
  color: var(--pell-text-3);
  border: 0.5px solid var(--pell-border);
  border-right: none;
  flex: 1;
  text-align: center;
}

.pell-stage:first-child { border-top-left-radius: var(--pell-radius-sm); border-bottom-left-radius: var(--pell-radius-sm); padding-left: 16px; }
.pell-stage:last-child { border-right: 0.5px solid var(--pell-border); border-top-right-radius: var(--pell-radius-sm); border-bottom-right-radius: var(--pell-radius-sm); }

.pell-stage::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  background: #ccc;
  vertical-align: middle;
}

.pell-stage.done {
  background: var(--pell-green-bg);
  color: #1a6b3a;
}
.pell-stage.done::before { background: var(--pell-green); }

.pell-stage.active {
  background: var(--pell-blue-bg);
  color: var(--pell-blue);
  font-weight: 600;
}
.pell-stage.active::before {
  background: var(--pell-blue-light);
  box-shadow: 0 0 0 3px rgba(53, 132, 228, 0.2);
}

.pell-stage.pending {
  background: #ffffff;
}

/* =============================================================
   ATTACHMENT CHECKLIST
   ============================================================= */
.pell-att-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  padding: 8px 0;
}

.pell-att {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0.5px solid var(--pell-border);
  border-radius: var(--pell-radius-sm);
  background: var(--pell-slate);
  font-size: 11px;
  color: var(--pell-text-2);
  font-weight: 500;
  cursor: pointer;
  transition: var(--pell-transition);
}

.pell-att:hover {
  border-color: var(--pell-blue-light);
}

.pell-att::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pell-att.uploaded::before { background: var(--pell-green); }
.pell-att.missing::before { background: #ccc; }
.pell-att.missing { color: var(--pell-text-3); }


body.t-Body--login {
  background: linear-gradient(135deg, var(--pell-navy), var(--pell-navy-2)) !important;
}

.t-Login-container {
  background: #ffffff !important;
  border-radius: var(--pell-radius) !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(15, 39, 68, 0.18) !important;
}


@media (max-width: 768px) {
  .t-BadgeList-item { padding: 12px 14px !important; }
  .t-BadgeList-value { font-size: 22px !important; }
  .pell-stage-tracker { flex-direction: column; }
  .pell-stage {
    border-right: 0.5px solid var(--pell-border) !important;
    border-bottom: none !important;
    border-radius: 0 !important;
  }
  .pell-stage:first-child { border-top-left-radius: var(--pell-radius-sm) !important; border-top-right-radius: var(--pell-radius-sm) !important; }
  .pell-stage:last-child { border-bottom-left-radius: var(--pell-radius-sm) !important; border-bottom-right-radius: var(--pell-radius-sm) !important; }
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pell-blue-light) !important;
  outline-offset: 2px;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}