:root{
--primary:#1b5e20;            /* Pasco green */
--primary-dark:#0f3d14;
--primary-light:#43a047;
--primary-bg:#f0fdf4;
--accent:#ffd54f;             /* Pasco gold */
--accent-light:#ffec99;
--bg:#f8fafc;
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--border:#e2e8f0;
--border-light:#f1f5f9;
--table-stripe:#f8fafc;
--radius-sm:6px; --radius:10px; --radius-lg:14px; --radius-xl:18px; --radius-full:9999px;
--shadow-sm:0 1px 2px rgb(0 0 0 / 0.05);
--shadow:0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md:0 4px 6px rgb(0 0 0 / 0.1), 0 2px 4px rgb(0 0 0 / 0.06);
--shadow-lg:0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05);
--transition:all .2s ease;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
background:linear-gradient(135deg, var(--primary-bg) 0%, var(--bg) 100%);
color:var(--text);
line-height:1.55;
}
/* Header */
.header{
position:sticky; top:0; z-index:20;
background:rgba(255,255,255,.95); backdrop-filter: blur(14px);
border-bottom:1px solid var(--border-light);
box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.nav{max-width:1200px;margin:0 auto; padding:14px 18px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:42px;height:42px;border-radius:14px;object-fit:cover;border:2px solid var(--primary-bg);box-shadow:var(--shadow-md);transition:var(--transition)}
.brand:hover .brand-logo{transform:scale(1.05)}
.brand .title{font-weight:800; letter-spacing:-.3px; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.links a{color:#0f172a;text-decoration:none;font-weight:600; font-size:14px; margin-left:12px; padding:8px 12px; border-radius:10px; transition:var(--transition)}
.links a:hover{background:var(--border-light); color:var(--primary)}
/* Layout */
.wrap{max-width:1200px;margin:22px auto;padding:0 18px}
.grid{display:grid;grid-template-columns:1fr;gap:14px}
/* Cards */
.card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius-xl);
padding:16px;
box-shadow:var(--shadow);
position:relative; overflow:hidden; transition:var(--transition);
}
.card.soft{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.75))}
.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-2px)}
.card::before{
content:""; position:absolute; inset:0 0 auto 0; height:3px;
background:linear-gradient(90deg,var(--primary),var(--accent)); opacity:.0; transition:var(--transition)
}
.card:hover::before{opacity:1}
/* Headings */
h1{font-family:"Plus Jakarta Sans", Inter, sans-serif; font-size:22px; margin:0 0 8px}
h2{font-size:18px;margin:0 0 10px}
h3{font-size:16px;margin:0 0 8px}
.muted{color:var(--muted)} .mini{font-size:12px}
.auth-card{max-width:420px;margin:0 auto}
/* Forms */
label{font-size:13px;color:var(--muted); display:block; margin-bottom:6px; font-weight:600}
input,select,textarea{
width:100%; padding:11px 12px; border:2px solid var(--border);
border-radius:12px; background:#fff; color:var(--text); transition:var(--transition)
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(27,94,32,.12)}
textarea{min-height:96px; resize:vertical}
input::file-selector-button{padding:8px 10px;border:0;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:10px;margin-right:10px}
/* Buttons */
.btn{
display:inline-flex; align-items:center; gap:8px; padding:11px 16px;
border-radius:12px; border:0; background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff; text-decoration:none; cursor:pointer; box-shadow:var(--shadow-md); font-weight:700; transition:var(--transition); position:relative; overflow:hidden
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.btn.secondary{background:#fff; color:var(--primary); border:2px solid var(--primary)}
.btn.success{background:linear-gradient(135deg,var(--primary-light),#2e7d32)}
.btn.warn{background:linear-gradient(135deg,#f59e0b,#d97706)}
.btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626)}
.btn.mini{padding:6px 10px; font-weight:600}
/* Toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
/* Chips/Badges */
.chip{
display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px;
background:#eef6ee; color:#14532d; border:1px solid rgba(20,83,45,.15); font-weight:700
}
.chip.pending{background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border-color:#fbbf24}
.chip.active{background:linear-gradient(135deg,#d1fae5,#a7f3d0); color:#065f46; border-color:#34d399}
.chip.lapsed{background:linear-gradient(135deg,#fee2e2,#fecaca); color:#991b1b; border-color:#f87171}
.badge{display:inline-block;font-size:11px;background:#e6f5e7;color:#185c1c;border:1px solid #cbe8cd;padding:2px 8px;border-radius:999px}
/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px}
thead th{
background:var(--bg); text-align:left; padding:12px; font-size:12px; color:#1b441c;
text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--border)
}
tbody td{padding:12px; border-bottom:1px dashed rgba(0,0,0,.06)}
tbody tr:nth-child(even){background:var(--table-stripe)}
tbody tr:hover{background:#f0f7f1}
/* Messages */
.msg{border:1px solid var(--border);border-radius:14px;padding:12px;margin:8px 0;background:#fff}
.msg.me{border-left:4px solid var(--primary)} .msg.them{border-left:4px solid var(--accent)}
.msg .meta{font-size:12px;color:var(--muted);margin-bottom:4px}
/* Empty state */
.empty{padding:16px;border:1px dashed var(--border);border-radius:14px;color:var(--muted);text-align:center}
/* Footer */
.footer{
padding:28px 0; margin-top:36px; color:var(--muted); font-size:12px; text-align:center;
border-top:1px solid var(--border-light);
background:linear-gradient(180deg,transparent,var(--bg))
}
/* Utilities */
.small{max-width:760px;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.stat .k{font-size:20px;font-weight:800;color:var(--primary)}
.inlineform{display:inline-grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.feedback-list{display:grid;gap:10px}
.feedback-item{background:#fff;border:1px solid var(--border);border-left:4px solid var(--primary);padding:12px;border-radius:14px}
/* Responsive */
@media (max-width: 768px){
body{font-size:15px;}
.nav{
    padding:10px 14px;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}
.brand .title{font-size:18px;}
.links{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:flex-start;
}
.links a{
    margin-left:0;
    padding:6px 10px;
    font-size:13px;
}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.wrap{padding:0 12px}
.layout{grid-template-columns:1fr}
.sidebar{
    position:relative;
    top:auto;
    max-height:none;
}
.footer{padding:22px 0}
}

.toolbar{
    flex-wrap: wrap;
}

.toolbar .btn{
    white-space: nowrap;
}


/* === Modern LMS Layout Additions === */
.layout{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
.sidebar{
position:sticky; top:76px;
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius-xl);
box-shadow:var(--shadow);
padding:14px;
max-height: calc(100vh - 100px);
overflow:auto;
}
.sidebar .role{font-weight:800; font-size:14px; margin-bottom:6px}
.sidebar .user{font-size:13px;color:var(--muted); margin-bottom:12px}
.side-links{display:grid;gap:8px;margin:8px 0 14px}
.side-links a{
display:block; text-decoration:none; padding:10px 12px;
border:1px solid var(--border); border-radius:12px; font-weight:600;
color:var(--text); background:#fff; transition:var(--transition);
position:relative; z-index:2; pointer-events:auto; cursor:pointer;
}
.side-links a:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm); border-color:var(--primary)}
.stats-mini{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.stats-mini .s{
background:#fff; border:1px solid var(--border);
border-radius:12px; padding:10px; box-shadow:var(--shadow-sm)
}
.stats-mini .s .k{font-size:18px; font-weight:800; color:var(--primary)}
.stats-mini .s .t{font-size:11px; color:var(--muted)}
.announce{background:#fffaf0; border:1px solid #fde68a; padding:12px; border-radius:12px; margin-bottom:12px}
.announce h3{margin:0 0 6px; font-size:14px}

/* Hash navigation highlight */
.flash-highlight{animation: flashBorder 2.8s ease-in-out; box-shadow: 0 0 0 4px rgba(255,215,0,.25); position: relative;}
@keyframes flashBorder{
0%{box-shadow: 0 0 0 0 rgba(255,215,0,.0)}
10%{box-shadow: 0 0 0 4px rgba(255,215,0,.35)}
55%{box-shadow: 0 0 0 4px rgba(46,125,50,.35)}
100%{box-shadow: 0 0 0 0 rgba(46,125,50,.0)}
}
.flash-highlight::before{
content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
background: linear-gradient(135deg,#ffd54f,#2e7d32);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.side-links a.active{ outline:2px solid #2e7d32; background:#f0fff4; }

/* Keep current Admin/Student/Tutor sidebar destination visibly active. */
.side-links a[aria-current="page"]{
outline:2px solid #2e7d32;
background:#f0fff4;
border-color:#2e7d32;
}

/* === EBTA wide-mode & sidebar collapse enhancements (kept INSIDE <style>) === */
:root { --page-max: 1280px; }
.wrap, .container, .shell, .page, .content-wrap, main.page { max-width: var(--page-max); }
.admin-shell, .two-col, .layout-admin, .admin-grid { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
body.sidebar-collapsed .admin-shell,
body.sidebar-collapsed .two-col,
body.sidebar-collapsed .layout-admin,
body.sidebar-collapsed .admin-grid { grid-template-columns: 72px 1fr; }
body.sidebar-collapsed .side-links .label { display: none; }
body.sidebar-collapsed .side-links .item { justify-content: center; }
body.sidebar-collapsed .side-links .icon { margin-right: 0; }
body.wide-mode :root, body.wide-mode .wrap, body.wide-mode .container, body.wide-mode .shell, body.wide-mode .page, body.wide-mode .content-wrap { --page-max: 1440px; }
.card, .panel, .stats .tile { transition: transform .12s ease, box-shadow .12s ease; }
.card:hover, .panel:hover, .stats .tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.btn { transition: transform .08s ease; } .btn:active { transform: scale(.98); }
.ui-controls { position: sticky; top: 8px; display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-bottom: 8px; }
.ui-controls .chip { cursor: pointer; padding: 6px 10px; border: 1px solid #cfd8d3; border-radius: 999px; background: #ffffffcc; backdrop-filter: blur(6px); font-size: 12px; }
.sidebar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sidebar-head .collapse { font-size:12px; border:1px solid #cfd8d3; border-radius:8px; padding:6px 8px; cursor:pointer; background:#fff; }

.scroll-x{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
@media (max-width: 700px){
  .scroll-x table{
    min-width: 100%;
  }
}

.two-col{
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.subject-grid{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr); /* desktop default */
}

.subject-item{
  display: flex;
  align-items: center;          /* vertical lock */
  justify-content: flex-start;
  gap: 12px;

  min-height: 56px;             /* VERY important for iOS */
  width: 100%;

  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
}

.subject-item.hidden{
  display: none;
}
/* Checkbox hard lock */
.subject-item input[type="checkbox"]{
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;

  appearance: auto;
  -webkit-appearance: checkbox;
}

/* Text lock */
.subject-item span{
  flex: 1;
  line-height: 1.3;
  white-space: normal;
}

.payment-confirm{
  margin-top:10px;
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.payment-confirm input{
  flex-shrink:0;
  width:20px;
  height:20px;
  margin-top:2px;
}

/* =========================
   TABLETS & iPad (<=1024px)
   ========================= */
@media (max-width: 1024px){

  /* Force all two-column layouts to stack */
  .two-col{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Generic grid safety */
  .grid[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }

  /* Layout + sidebar */
  .layout{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sidebar{
    position: relative;
    top: auto;
    max-height: none;
    margin-bottom: 14px;
  }

  /* Subject grid: 2 columns on tablet */
  .subject-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  /* Inputs (prevent iOS zoom + spacing issues) */
  input,
  select,
  textarea{
    padding: 14px;
    font-size: 16px;
  }

  /* Stats */
  .stats,
  .stats-mini{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  h1{font-size:20px;}
  h2{font-size:17px;}
}

/* =========================
   PHONES (<=600px)
   ========================= */
@media (max-width: 600px){

  /* Subject grid: single column */
  .subject-grid{
    grid-template-columns: 1fr;
  }

  #fee_summary{
    position: relative;
  }
}

@supports (-webkit-touch-callout: none) {

  /* iOS grid stability */
  .subject-grid{
    align-content: start;
  }

  /* Prevent Safari from reserving phantom space */
  .subject-item{
    max-width: 100%;
  }

  /* iOS checkbox vertical bug */
  .subject-item input[type="checkbox"]{
    align-self: center;
  }

  /* Prevent iOS font zoom shifting layout */
  input,
  select,
  textarea{
    font-size: 16px !important;
  }
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

@media (max-width: 700px) {
  table thead { display: none; }
  table tr { display: block; margin-bottom: 12px; }
  table td {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #eee;
  }
  table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #555;
  }
}

/* ================= CHAT UI ================= */

.chat-layout{
display:grid;
grid-template-columns:280px 1fr;
gap:12px;
height:600px;
border:1px solid var(--border);
border-radius:14px;
overflow:hidden;
background:#fff;
}

/* left conversation list */

.chat-list{
border-right:1px solid var(--border);
overflow-y:auto;
background:#f8fafc;
}

.chat-user{
padding:12px;
border-bottom:1px solid var(--border-light);
cursor:pointer;
transition:.15s;
}

.chat-user:hover{
background:#eef6ee;
}

.chat-user.active{
background:#e8f5e9;
border-left:4px solid var(--primary);
}

/* right chat window */

.chat-window{
display:flex;
flex-direction:column;
height:100%;
}

.chat-messages{
flex:1;
overflow-y:auto;
padding:14px;
display:flex;
flex-direction:column;
gap:8px;
background:#f1f5f9;
}

/* message bubbles */

.bubble{
max-width:70%;
padding:10px 14px;
border-radius:14px;
font-size:14px;
box-shadow:var(--shadow-sm);
}

.bubble.them{
align-self:flex-start;
background:#ffffff;
border:1px solid var(--border);
}

.bubble.me{
align-self:flex-end;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;
}

.bubble .time{
font-size:11px;
opacity:.7;
margin-top:4px;
}

/* input area */

.chat-input{
border-top:1px solid var(--border);
padding:10px;
background:#fff;
}

.chat-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    height: 500px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

/* LEFT SIDE LIST */
.chat-list {
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    background: #f9fafb;
}

/* RIGHT SIDE WINDOW */
.chat-window {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: white;
}

/* THIS IS THE IMPORTANT FIX */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    min-height: 0;
}

/* INPUT STAYS FIXED */
.chat-input {
    border-top: 1px solid #e5e7eb;
    padding: 10px;
    background: white;
}

/* MOBILE FIX */
@media (max-width: 768px) {

    .chat-layout {
        grid-template-columns: 1fr;
        height: 70vh;
    }

    .chat-list {
        max-height: 150px;
    }

}

/* MAIN CHAT CONTAINER */
.chat-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 520px;              /* IMPORTANT: fixed height */
    max-height: 520px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: white;
}

/* LEFT LIST */
.chat-list {
    overflow-y: auto;
    border-right: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* RIGHT SIDE */
.chat-window {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* THIS FIXES YOUR ISSUE */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* SEND AREA ALWAYS VISIBLE */
.chat-input {
    flex-shrink: 0;
    border-top: 1px solid #e5e7eb;
    padding: 10px;
    background: white;
}

/* MOBILE FIX */
@media (max-width: 768px) {

    .chat-layout {
        grid-template-columns: 1fr;
        height: 75vh;
        max-height: 75vh;
    }

    .chat-list {
        max-height: 140px;
    }

}

.chat-list {
    width: 320px;
    max-height: 600px;
    overflow-y: auto;
    border-right: 1px solid #ddd;
    padding: 8px;
}

.chat-section {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    padding: 8px 6px;
    margin-top: 10px;
    border-bottom: 1px solid #eee;
}

.chat-user {
    display: block;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: 4px;
    transition: background 0.15s;
}

.chat-user:hover {
    background: #f1f5f9;
}

.chat-user.active {
    background: #e0f2fe;
}

.chat-name {
    font-weight: 600;
    font-size: 14px;
    color: #0f172a;
}

.chat-role {
    font-size: 12px;
    color: #64748b;
}

.chat-user.tutor .chat-name {
    color: #2563eb;
}

.chat-user.student .chat-name {
    color: #059669;
}

/* ================= FOLLOWUPS TABLE ================= */

.followups-table {
    table-layout: auto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.followups-table th,
.followups-table td{
    min-width:130px;
    vertical-align:top;
    padding:10px;
    white-space:normal;
    word-break:break-word;
}

/* Inputs fill cells properly */
.followups-table input,
.followups-table select,
.followups-table textarea{
    width:100%;
    min-width:130px;
    box-sizing:border-box;
}

/* Notes wider */
.followups-table td:nth-child(11){
    min-width:220px;
}

/* Make notes field taller */
.followups-table input[name="notes"]{
    min-height:38px;
}

/* Row status colours */
.follow-open{
    background:#fff1f1 !important;
}

.follow-paid{
    background:#e9fbe9 !important;
}

.overdue{
    border-left:6px solid #dc2626 !important;
}

/* Make table horizontally scrollable nicely */
.scroll-x{
    overflow-x:auto;
}
.follow-progress {
    background:#fff7e6 !important;
}

.follow-awaiting {
    background:#eef6ff !important;
}

.visible-date-highlight{
    color: var(--primary);
    font-weight: 700;
    background: #e8f5e9;
    padding: 2px 6px;
    border-radius: 6px;
}

.followups-table {
    table-layout: auto;
    width: max-content;   /* KEY: allows table to grow */
    min-width: 100%;
}

.followups-table th,
.followups-table td {
    white-space: nowrap;     /* prevents breaking */
    overflow: visible;       /* no cutting */
    text-overflow: unset;    /* no ellipsis */
}

/* Inputs expand properly */
.followups-table input,
.followups-table select,
.followups-table textarea {
    width: 100%;
    min-width: 140px;
}

/* Give name extra space */
.followups-table th:nth-child(1),
.followups-table td:nth-child(1) {
    min-width: 260px;
}

/* Notes column wider */
.followups-table th:nth-child(11),
.followups-table td:nth-child(11) {
    min-width: 300px;
}

/* Make NAME column wider */
.followups-table th:nth-child(1),
.followups-table td:nth-child(1) {
    width: 220px;   /* increase this if needed */
    min-width: 200px;
}

/* Optional: give notes more space too */
.followups-table th:nth-child(11),
.followups-table td:nth-child(11) {
    width: 260px;
}

/* Prevent inputs from shrinking too much */
.followups-table input {
    width: 100%;
}

.subject-chip {
    display: inline-block;
    background: #e8f5e9;
    color: #1b5e20;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin: 2px;
    border: 1px solid #c8e6c9;
    font-weight: 500;
}

.subject-chip:hover {
    background: #c8e6c9;
    cursor: pointer;
}

/* ===== MATERIALS CLEAN UI ===== */

.materials-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:12px;
}

.material-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    box-shadow:var(--shadow-sm);
    transition:0.2s;
}

.material-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.material-card b{
    font-size:14px;
    display:block;
    margin-bottom:4px;
}

.material-card .mini{
    margin-bottom:8px;
}

.material-card .btn{
    padding:6px 10px;
    font-size:12px;
}

.material-card{
    border-left:4px solid #1b5e20;
}

.btn:hover {
    transform: scale(1.05);
    transition: 0.2s ease;
}

#payment-anchor img {
    transition: transform 0.2s ease;
}

#payment-anchor img:hover {
    transform: scale(1.05);
}

@media (max-width: 700px) {

  .assignments-table thead {
    display: none;
  }

  .assignments-table tr {
    display: block;
    background: #f0fdf4;
    border: 1px solid #dbe7dd;
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 12px;
  }

  .assignments-table td {
    display: block;
    border: none;
    padding: 6px 0;
    text-align: left;
  }

  .assignments-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 3px;
    text-transform: uppercase;
  }

  .assignment-actions {
    display: grid;
    gap: 8px;
  }

  .assignment-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .assignment-upload-row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .assignment-upload-row input[type="file"] {
    max-width: 100% !important;
    width: 100%;
    font-size: 12px;
  }
}

.missed-dates-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
}

.missed-date-chip{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    background:#fff7e6;
    border:1px solid #f5d08a;
    color:#9a6700;
    font-size:12px;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
}


/* =========================================================
   TUTOR PORTAL MOBILE FRIENDLY UPGRADE
   Safe: only affects pages when body has class role-tutor
   ========================================================= */

.role-tutor .dashboard-main{
    min-width:0;
}

.role-tutor .card{
    overflow:visible;
}

.role-tutor .layout{
    align-items:start;
}

/* Desktop tutor sidebar polish */
.role-tutor .sidebar{
    border:1px solid rgba(27,94,32,.18);
    background:
        linear-gradient(180deg,#ffffff 0%,#f8fff9 100%);
}

.role-tutor .sidebar .role{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#1b5e20;
    background:#e8f5e9;
    border:1px solid rgba(27,94,32,.18);
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    margin-bottom:8px;
}

.role-tutor .sidebar .user{
    font-size:15px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:12px;
}

.role-tutor .side-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border:1px solid rgba(27,94,32,.14);
    background:#ffffff;
    color:#0f172a;
}

.role-tutor .side-links a:hover{
    background:#f0fdf4;
    color:#1b5e20;
    border-color:#1b5e20;
}

/* Tutor cards and grids */
.role-tutor .stats,
.role-tutor .stats-mini{
    gap:10px;
}

.role-tutor .stats-mini .s{
    background:linear-gradient(180deg,#ffffff,#f8fff9);
    border:1px solid rgba(27,94,32,.14);
}

.role-tutor .stats-mini .s .k{
    color:#1b5e20;
}

/* Tutor forms */
.role-tutor form{
    max-width:100%;
}

.role-tutor input,
.role-tutor select,
.role-tutor textarea{
    max-width:100%;
}

/* Make tutor action buttons wrap nicely */
.role-tutor .btn,
.role-tutor button,
.role-tutor .links{
    max-width:100%;
}

.role-tutor .toolbar{
    align-items:center;
}

/* Keep tutor tables readable */
.role-tutor .scroll-x{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    width:100%;
}

.role-tutor table{
    width:100%;
}

/* Mobile tutor layout */
@media (max-width: 768px){

    body.role-tutor{
        overflow-x:hidden;
    }

    .role-tutor .wrap{
        margin:12px auto;
        padding:0 10px;
        width:100%;
        max-width:100%;
    }

    .role-tutor .layout{
        display:block;
        width:100%;
    }

    .role-tutor .dashboard-main{
        width:100%;
        min-width:0;
    }

    /* Header */
    .role-tutor .header{
        position:sticky;
        top:0;
        z-index:50;
    }

    .role-tutor .nav{
        padding:10px;
        gap:10px;
    }

    .role-tutor .brand{
        width:100%;
    }

    .role-tutor .brand-logo{
        width:38px;
        height:38px;
        border-radius:12px;
    }

    .role-tutor .brand .title{
        font-size:17px;
    }

    .role-tutor .links{
        width:100%;
        display:flex;
        overflow-x:auto;
        gap:8px;
        padding-bottom:4px;
        -webkit-overflow-scrolling:touch;
    }

    .role-tutor .links a,
    .role-tutor .links button{
        flex:0 0 auto;
        margin-left:0;
        white-space:nowrap;
        font-size:12px;
        padding:7px 10px;
        border-radius:999px;
    }

    /* Sidebar becomes a neat mobile navigation card */
    .role-tutor .sidebar{
        position:relative;
        top:auto;
        max-height:none;
        margin:0 0 12px;
        padding:12px;
        border-radius:18px;
        box-shadow:0 8px 20px rgba(15,23,42,.08);
        background:
            linear-gradient(135deg,rgba(27,94,32,.08),rgba(255,255,255,.96)),
            #ffffff;
    }

    .role-tutor .sidebar .role{
        margin-bottom:6px;
    }

    .role-tutor .sidebar .user{
        font-size:16px;
        margin-bottom:10px;
    }

    /* Mobile tutor nav links as horizontal chips */
    .role-tutor .side-links{
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding:4px 0 10px;
        margin:4px 0 10px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .role-tutor .side-links a{
        flex:0 0 auto;
        min-width:135px;
        justify-content:center;
        text-align:center;
        padding:10px 12px;
        border-radius:999px;
        font-size:13px;
        scroll-snap-align:start;
        box-shadow:0 2px 8px rgba(15,23,42,.05);
    }

    .role-tutor .side-links a[href*="logout"]{
        color:#991b1b;
        border-color:#fecaca;
        background:#fff7f7;
    }

    /* Sidebar stats */
    .role-tutor .stats-mini{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .role-tutor .stats-mini .s{
        padding:10px;
        border-radius:14px;
    }

    .role-tutor .stats-mini .s .k{
        font-size:19px;
    }

    .role-tutor .stats-mini .s .t{
        font-size:11px;
        line-height:1.25;
    }

    /* Cards */
    .role-tutor .card{
        border-radius:18px;
        padding:14px;
        margin-bottom:12px;
        transform:none !important;
        box-shadow:0 4px 14px rgba(15,23,42,.06);
    }

    .role-tutor .card:hover{
        transform:none !important;
    }

    .role-tutor h1{
        font-size:21px;
        line-height:1.2;
    }

    .role-tutor h2{
        font-size:18px;
        line-height:1.25;
    }

    .role-tutor h3{
        font-size:15px;
    }

    .role-tutor .mini{
        font-size:12px;
    }

    /* Main stats on tutor pages */
    .role-tutor .stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .role-tutor .stat{
        padding:12px;
        border-radius:14px;
    }

    .role-tutor .stat .k{
        font-size:18px;
        line-height:1.2;
    }

    /* Forms */
    .role-tutor .toolbar{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .role-tutor .inlineform{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
    }

    .role-tutor label{
        font-size:12px;
    }

    .role-tutor input,
    .role-tutor select,
    .role-tutor textarea{
        font-size:16px;
        padding:13px;
        border-radius:14px;
    }

    .role-tutor textarea{
        min-height:110px;
    }

    .role-tutor .btn,
    .role-tutor button{
        width:100%;
        justify-content:center;
        min-height:42px;
        border-radius:14px;
    }

    .role-tutor .btn.mini,
    .role-tutor button.mini{
        min-height:36px;
        width:auto;
        display:inline-flex;
    }

    /* Tables on tutor pages stay as real tables but scroll horizontally */
    .role-tutor .scroll-x{
        border:1px solid #e2e8f0;
        border-radius:14px;
        background:#fff;
    }

    .role-tutor table{
        min-width:760px;
        border-radius:14px;
    }

    .role-tutor table thead{
        display:table-header-group !important;
    }

    .role-tutor table tr{
        display:table-row !important;
        margin-bottom:0 !important;
    }

    .role-tutor table th,
    .role-tutor table td{
        display:table-cell !important;
        padding:10px !important;
        white-space:normal;
        vertical-align:top;
    }

    .role-tutor table td::before{
        content:none !important;
    }

    .role-tutor table td .btn,
    .role-tutor table td button,
    .role-tutor table td .links{
        width:auto;
        margin:2px 0;
        white-space:nowrap;
    }

    /* Chat/message layout for tutor */
    .role-tutor .chat-layout{
        grid-template-columns:1fr !important;
        height:75vh;
        max-height:75vh;
        border-radius:16px;
    }

    .role-tutor .chat-list{
        width:100% !important;
        max-height:160px;
        border-right:0;
        border-bottom:1px solid #e5e7eb;
    }

    .role-tutor .chat-window{
        min-height:0;
    }

    .role-tutor .chat-messages{
        min-height:0;
    }

    .role-tutor .bubble{
        max-width:88%;
    }

    .role-tutor .chat-input form{
        display:grid;
        gap:8px;
    }

    /* Upload/input areas */
    .role-tutor input[type="file"]{
        padding:10px;
        background:#fff;
    }

    .role-tutor input::file-selector-button{
        width:100%;
        margin:0 0 8px 0;
        padding:10px;
    }
}

/* Small phones */
@media (max-width: 420px){

    .role-tutor .wrap{
        padding:0 8px;
    }

    .role-tutor .stats,
    .role-tutor .stats-mini{
        grid-template-columns:1fr 1fr;
    }

    .role-tutor .side-links a{
        min-width:125px;
        font-size:12px;
        padding:9px 10px;
    }

    .role-tutor .card{
        padding:12px;
    }

    .role-tutor table{
        min-width:700px;
    }
}

/* =========================================================
   TUTOR PORTAL MOBILE FIX 2
   Fixes hidden content, wide grids, wide tables and overflowing forms.
   Safe: only affects tutor portal pages.
   ========================================================= */

body.role-tutor{
    overflow-x:hidden;
}

body.role-tutor *{
    box-sizing:border-box;
}

body.role-tutor .wrap,
body.role-tutor .layout,
body.role-tutor .dashboard-main,
body.role-tutor main,
body.role-tutor section,
body.role-tutor .card,
body.role-tutor .soft{
    max-width:100%;
    min-width:0;
}

body.role-tutor img,
body.role-tutor video,
body.role-tutor iframe,
body.role-tutor canvas{
    max-width:100%;
}

body.role-tutor pre,
body.role-tutor code{
    white-space:pre-wrap;
    word-break:break-word;
}

/* Make sure long text does not push cards off-screen */
body.role-tutor .card,
body.role-tutor .soft,
body.role-tutor td,
body.role-tutor th,
body.role-tutor p,
body.role-tutor div,
body.role-tutor span{
    overflow-wrap:anywhere;
}

/* Fix all tutor grids, including inline grid styles */
@media (max-width: 768px){

    body.role-tutor .wrap{
        width:100%;
        max-width:100%;
        padding-left:10px;
        padding-right:10px;
        margin-left:auto;
        margin-right:auto;
    }

    body.role-tutor .layout{
        display:block !important;
        grid-template-columns:1fr !important;
        width:100%;
        max-width:100%;
    }

    body.role-tutor .dashboard-main{
        display:block;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    body.role-tutor .grid,
    body.role-tutor .stats,
    body.role-tutor .stats-mini{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100% !important;
        max-width:100% !important;
        gap:10px !important;
    }

    body.role-tutor .stats{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    body.role-tutor .stats-mini{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    body.role-tutor .stat,
    body.role-tutor .stats-mini .s{
        min-width:0;
        width:100%;
    }

    /* Cards must not cut content */
    body.role-tutor .card,
    body.role-tutor .soft{
        width:100%;
        max-width:100%;
        overflow:visible;
        padding:14px;
        border-radius:18px;
    }

    /* Forms must stay inside the screen */
    body.role-tutor form,
    body.role-tutor .toolbar,
    body.role-tutor .inlineform{
        width:100%;
        max-width:100%;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
        align-items:stretch !important;
    }

    body.role-tutor label{
        width:100%;
        max-width:100%;
    }

    body.role-tutor input,
    body.role-tutor select,
    body.role-tutor textarea{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        font-size:16px;
    }

    body.role-tutor input[type="file"]{
        width:100%;
        max-width:100%;
        white-space:normal;
    }

    body.role-tutor input::file-selector-button{
        display:block;
        width:100%;
        margin:0 0 8px 0;
        padding:10px;
        border-radius:12px;
    }

    /* Buttons must wrap nicely */
    body.role-tutor .btn,
    body.role-tutor button,
    body.role-tutor input[type="submit"]{
        max-width:100%;
        white-space:normal;
        text-align:center;
        justify-content:center;
    }

    body.role-tutor .card > .btn,
    body.role-tutor .card > button,
    body.role-tutor form .btn,
    body.role-tutor form button{
        width:100%;
    }

    body.role-tutor td .btn,
    body.role-tutor td button{
        width:auto;
        max-width:100%;
        margin:2px 0;
    }

    /* Tables must scroll, not disappear */
    body.role-tutor .scroll-x{
        display:block;
        width:100%;
        max-width:100%;
        overflow-x:auto !important;
        overflow-y:visible;
        -webkit-overflow-scrolling:touch;
        border:1px solid #e5e7eb;
        border-radius:14px;
        background:#fff;
    }

    body.role-tutor .scroll-x table{
        width:max-content;
        min-width:720px;
        max-width:none;
    }

    body.role-tutor table{
        border-collapse:collapse;
    }

    body.role-tutor th,
    body.role-tutor td{
        white-space:normal;
        vertical-align:top;
        padding:10px;
    }

    /* If a table is not inside .scroll-x, still allow screen scrolling */
    body.role-tutor table:not(.no-mobile-scroll){
        display:block;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    body.role-tutor table:not(.no-mobile-scroll) thead,
    body.role-tutor table:not(.no-mobile-scroll) tbody,
    body.role-tutor table:not(.no-mobile-scroll) tr{
        width:100%;
    }

    /* Header fixes */
    body.role-tutor .header{
        width:100%;
        max-width:100%;
    }

    body.role-tutor .nav{
        width:100%;
        max-width:100%;
        padding:10px;
    }

    body.role-tutor .brand{
        min-width:0;
        max-width:100%;
    }

    body.role-tutor .brand .title{
        font-size:16px;
        line-height:1.2;
        overflow-wrap:anywhere;
    }

    body.role-tutor .links{
        width:100%;
        max-width:100%;
        overflow-x:auto;
        display:flex;
        gap:8px;
        padding-bottom:4px;
        -webkit-overflow-scrolling:touch;
    }

    body.role-tutor .links a,
    body.role-tutor .links button{
        flex:0 0 auto;
        width:auto;
        white-space:nowrap;
    }

    /* Sidebar as mobile nav */
    body.role-tutor .sidebar{
        width:100%;
        max-width:100%;
        position:relative;
        top:auto;
        margin-bottom:12px;
        overflow:visible;
    }

    body.role-tutor .side-links{
        width:100%;
        max-width:100%;
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding-bottom:8px;
        -webkit-overflow-scrolling:touch;
    }

    body.role-tutor .side-links a{
        flex:0 0 auto;
        width:auto;
        min-width:125px;
        white-space:nowrap;
        text-align:center;
        justify-content:center;
    }

    /* Charts and visual sections */
    body.role-tutor canvas{
        width:100% !important;
        max-width:100% !important;
    }

    body.role-tutor [style*="height"] canvas{
        max-height:100%;
    }

    /* Chat/message sections */
    body.role-tutor .chat-layout{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:auto !important;
        max-height:none !important;
    }

    body.role-tutor .chat-list,
    body.role-tutor .chat-window,
    body.role-tutor .chat-messages,
    body.role-tutor .chat-input{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    body.role-tutor .chat-list{
        max-height:180px;
        overflow-y:auto;
    }

    body.role-tutor .chat-messages{
        max-height:420px;
        overflow-y:auto;
    }

    body.role-tutor .bubble{
        max-width:90%;
        overflow-wrap:anywhere;
    }

    /* Any inline flex sections must wrap instead of hiding */
    body.role-tutor [style*="display:flex"],
    body.role-tutor [style*="display: flex"]{
        flex-wrap:wrap !important;
        max-width:100% !important;
    }

    body.role-tutor [style*="grid-template-columns"]{
        grid-template-columns:1fr !important;
    }
}

@media (max-width: 420px){

    body.role-tutor .wrap{
        padding-left:8px;
        padding-right:8px;
    }

    body.role-tutor .stats,
    body.role-tutor .stats-mini{
        grid-template-columns:1fr !important;
    }

    body.role-tutor h1{
        font-size:20px;
    }

    body.role-tutor h2{
        font-size:17px;
    }

    body.role-tutor .scroll-x table{
        min-width:680px;
    }

    body.role-tutor .side-links a{
        min-width:115px;
        font-size:12px;
    }
}

/* =========================================================
   STUDENT PORTAL MOBILE FRIENDLY UPGRADE
   Safe: only affects pages when body has class role-student
   ========================================================= */

body.role-student{
    overflow-x:hidden;
}

body.role-student *{
    box-sizing:border-box;
}

body.role-student .wrap,
body.role-student .layout,
body.role-student .dashboard-main,
body.role-student main,
body.role-student section,
body.role-student .card,
body.role-student .soft{
    max-width:100%;
    min-width:0;
}

body.role-student img,
body.role-student video,
body.role-student iframe,
body.role-student canvas{
    max-width:100%;
}

body.role-student pre,
body.role-student code{
    white-space:pre-wrap;
    word-break:break-word;
}

/* Prevent long names, links, messages and file names from pushing content off-screen */
body.role-student .card,
body.role-student .soft,
body.role-student td,
body.role-student th,
body.role-student p,
body.role-student div,
body.role-student span,
body.role-student a{
    overflow-wrap:anywhere;
}

/* Student sidebar polish */
body.role-student .sidebar{
    border:1px solid rgba(27,94,32,.18);
    background:
        linear-gradient(180deg,#ffffff 0%,#f8fff9 100%);
}

body.role-student .sidebar .role{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#1b5e20;
    background:#e8f5e9;
    border:1px solid rgba(27,94,32,.18);
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    margin-bottom:8px;
}

body.role-student .sidebar .user{
    font-size:15px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:12px;
}

body.role-student .side-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    border:1px solid rgba(27,94,32,.14);
    background:#ffffff;
    color:#0f172a;
}

body.role-student .side-links a:hover{
    background:#f0fdf4;
    color:#1b5e20;
    border-color:#1b5e20;
}

/* Student cards and stats */
body.role-student .stats,
body.role-student .stats-mini{
    gap:10px;
}

body.role-student .stats-mini .s,
body.role-student .stat{
    background:linear-gradient(180deg,#ffffff,#f8fff9);
    border:1px solid rgba(27,94,32,.14);
}

body.role-student .stats-mini .s .k,
body.role-student .stat .k{
    color:#1b5e20;
}

/* Forms */
body.role-student form{
    max-width:100%;
}

body.role-student input,
body.role-student select,
body.role-student textarea{
    max-width:100%;
}

/* Tables */
body.role-student .scroll-x{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    width:100%;
}

body.role-student table{
    width:100%;
}

/* =========================================================
   MOBILE STUDENT LAYOUT
   ========================================================= */
@media (max-width:768px){

    body.role-student{
        overflow-x:hidden;
        background:#f8fafc;
    }

    body.role-student .wrap{
        width:100%;
        max-width:100%;
        margin:12px auto;
        padding-left:10px;
        padding-right:10px;
    }

    body.role-student .layout{
        display:block !important;
        grid-template-columns:1fr !important;
        width:100%;
        max-width:100%;
    }

    body.role-student .dashboard-main{
        display:block;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    /* Header */
    body.role-student .header{
        position:sticky;
        top:0;
        z-index:50;
        width:100%;
        max-width:100%;
    }

    body.role-student .nav{
        width:100%;
        max-width:100%;
        padding:10px;
        gap:10px;
    }

    body.role-student .brand{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    body.role-student .brand-logo{
        width:38px;
        height:38px;
        border-radius:12px;
    }

    body.role-student .brand .title{
        font-size:16px;
        line-height:1.2;
        overflow-wrap:anywhere;
    }

    body.role-student .links{
        width:100%;
        max-width:100%;
        display:flex;
        overflow-x:auto;
        gap:8px;
        padding-bottom:4px;
        -webkit-overflow-scrolling:touch;
    }

    body.role-student .links a,
    body.role-student .links button{
        flex:0 0 auto;
        width:auto;
        margin-left:0;
        white-space:nowrap;
        font-size:12px;
        padding:7px 10px;
        border-radius:999px;
    }

    /* Sidebar becomes a mobile profile/navigation card */
    body.role-student .sidebar{
        width:100%;
        max-width:100%;
        position:relative;
        top:auto;
        max-height:none;
        margin:0 0 12px;
        padding:12px;
        border-radius:18px;
        overflow:visible;
        box-shadow:0 8px 20px rgba(15,23,42,.08);
        background:
            linear-gradient(135deg,rgba(27,94,32,.08),rgba(255,255,255,.96)),
            #ffffff;
    }

    body.role-student .sidebar .role{
        margin-bottom:6px;
    }

    body.role-student .sidebar .user{
        font-size:16px;
        margin-bottom:10px;
    }

    /* Student nav links as horizontal chips */
    body.role-student .side-links{
        width:100%;
        max-width:100%;
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding:4px 0 10px;
        margin:4px 0 10px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    body.role-student .side-links a{
        flex:0 0 auto;
        width:auto;
        min-width:128px;
        justify-content:center;
        text-align:center;
        padding:10px 12px;
        border-radius:999px;
        font-size:13px;
        white-space:nowrap;
        scroll-snap-align:start;
        box-shadow:0 2px 8px rgba(15,23,42,.05);
    }

    body.role-student .side-links a[href*="logout"]{
        color:#991b1b;
        border-color:#fecaca;
        background:#fff7f7;
    }

    /* Student sidebar mini stats */
    body.role-student .stats-mini{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    body.role-student .stats-mini .s{
        min-width:0;
        width:100%;
        padding:10px;
        border-radius:14px;
    }

    body.role-student .stats-mini .s .k{
        font-size:19px;
        line-height:1.2;
    }

    body.role-student .stats-mini .s .t{
        font-size:11px;
        line-height:1.25;
    }

    /* Cards */
    body.role-student .card,
    body.role-student .soft{
        width:100%;
        max-width:100%;
        overflow:visible;
        padding:14px;
        border-radius:18px;
        margin-bottom:12px;
        transform:none !important;
        box-shadow:0 4px 14px rgba(15,23,42,.06);
    }

    body.role-student .card:hover{
        transform:none !important;
    }

    body.role-student h1{
        font-size:21px;
        line-height:1.2;
    }

    body.role-student h2{
        font-size:18px;
        line-height:1.25;
    }

    body.role-student h3{
        font-size:15px;
    }

    body.role-student .mini{
        font-size:12px;
    }

    /* Force student grids to fit */
    body.role-student .grid,
    body.role-student .stats{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100% !important;
        max-width:100% !important;
        gap:10px !important;
    }

    body.role-student .stats{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    body.role-student .stat{
        min-width:0;
        width:100%;
        padding:12px;
        border-radius:14px;
    }

    body.role-student .stat .k{
        font-size:18px;
        line-height:1.2;
        word-break:break-word;
    }

    body.role-student .stat .t{
        font-size:11px;
        line-height:1.25;
    }

    /* Forms and profile update */
    body.role-student form,
    body.role-student .toolbar,
    body.role-student .inlineform{
        width:100%;
        max-width:100%;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
        align-items:stretch !important;
    }

    body.role-student label{
        width:100%;
        max-width:100%;
        font-size:12px;
    }

    body.role-student input,
    body.role-student select,
    body.role-student textarea{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        font-size:16px;
        padding:13px;
        border-radius:14px;
    }

    body.role-student textarea{
        min-height:110px;
    }

    body.role-student input[type="file"]{
        width:100%;
        max-width:100%;
        white-space:normal;
        padding:10px;
        background:#fff;
    }

    body.role-student input::file-selector-button{
        display:block;
        width:100%;
        margin:0 0 8px 0;
        padding:10px;
        border-radius:12px;
    }

    /* Buttons */
    body.role-student .btn,
    body.role-student button,
    body.role-student input[type="submit"]{
        max-width:100%;
        white-space:normal;
        text-align:center;
        justify-content:center;
    }

    body.role-student .card > .btn,
    body.role-student .card > button,
    body.role-student form .btn,
    body.role-student form button{
        width:100%;
        min-height:42px;
        border-radius:14px;
    }

    body.role-student .btn.mini,
    body.role-student button.mini{
        min-height:36px;
    }

    body.role-student td .btn,
    body.role-student td button{
        width:auto;
        max-width:100%;
        margin:2px 0;
        white-space:nowrap;
    }

    /* Tables must scroll instead of hiding */
    body.role-student .scroll-x{
        display:block;
        width:100%;
        max-width:100%;
        overflow-x:auto !important;
        overflow-y:visible;
        -webkit-overflow-scrolling:touch;
        border:1px solid #e5e7eb;
        border-radius:14px;
        background:#fff;
    }

    body.role-student .scroll-x table{
        width:max-content;
        min-width:700px;
        max-width:none;
    }

    body.role-student table{
        border-collapse:collapse;
    }

    body.role-student th,
    body.role-student td{
        white-space:normal;
        vertical-align:top;
        padding:10px;
    }

    body.role-student table:not(.no-mobile-scroll){
        display:block;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    body.role-student table:not(.no-mobile-scroll) thead,
    body.role-student table:not(.no-mobile-scroll) tbody,
    body.role-student table:not(.no-mobile-scroll) tr{
        width:100%;
    }

    /* Student academic tracker extra protection */
    body.role-student .student-progress-page{
        width:100%;
        max-width:100%;
    }

    body.role-student .student-progress-toolbar{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    body.role-student .student-progress-toolbar .btn{
        width:100%;
    }

    body.role-student .student-chart-grid,
    body.role-student .student-progress-mini-grid{
        grid-template-columns:1fr !important;
        width:100%;
        max-width:100%;
    }

    body.role-student .student-chart-box,
    body.role-student .student-chart-box-large{
        width:100%;
        max-width:100%;
        overflow:hidden;
    }

    body.role-student canvas{
        width:100% !important;
        max-width:100% !important;
    }

    /* Student messages/chat */
    body.role-student .chat-layout{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:auto !important;
        max-height:none !important;
        border-radius:16px;
    }

    body.role-student .chat-list,
    body.role-student .chat-window,
    body.role-student .chat-messages,
    body.role-student .chat-input{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    body.role-student .chat-list{
        max-height:180px;
        overflow-y:auto;
        border-right:0;
        border-bottom:1px solid #e5e7eb;
    }

    body.role-student .chat-messages{
        max-height:420px;
        overflow-y:auto;
    }

    body.role-student .bubble{
        max-width:90%;
        overflow-wrap:anywhere;
    }

    body.role-student .chat-input form{
        display:grid !important;
        gap:8px !important;
    }

    /* Any inline flex or inline grid must not hide content */
    body.role-student [style*="display:flex"],
    body.role-student [style*="display: flex"]{
        flex-wrap:wrap !important;
        max-width:100% !important;
    }

    body.role-student [style*="grid-template-columns"]{
        grid-template-columns:1fr !important;
    }

    /* Report upload / camera areas */
    body.role-student #report_camera_input,
    body.role-student #report_file_upload{
        width:100%;
    }
}

@media (max-width:420px){

    body.role-student .wrap{
        padding-left:8px;
        padding-right:8px;
    }

    body.role-student .stats,
    body.role-student .stats-mini{
        grid-template-columns:1fr !important;
    }

    body.role-student h1{
        font-size:20px;
    }

    body.role-student h2{
        font-size:17px;
    }

    body.role-student .side-links a{
        min-width:115px;
        font-size:12px;
        padding:9px 10px;
    }

    body.role-student .scroll-x table{
        min-width:660px;
    }

    body.role-student .card,
    body.role-student .soft{
        padding:12px;
    }
}\n:root {
        --ebta-green-950:#082d18;
        --ebta-green-900:#0e4325;
        --ebta-green-800:#155d32;
        --ebta-green-700:#1b6f3b;
        --ebta-green-600:#25894b;
        --ebta-green-500:#36a85f;
        --ebta-green-100:#dcf6e5;
        --ebta-green-50:#f0fbf4;
        --ebta-gold-600:#c89416;
        --ebta-gold-500:#e3ad24;
        --ebta-gold-300:#f3d277;
        --ebta-ink:#102117;
        --ebta-muted:#64746a;
        --ebta-line:#dbe9df;
        --ebta-surface:#ffffff;
        --ebta-surface-soft:#f7fbf8;
        --ebta-danger:#b42318;
        --ebta-radius-sm:12px;
        --ebta-radius:18px;
        --ebta-radius-lg:26px;
        --ebta-shadow-sm:0 5px 16px rgba(9,60,31,.06);
        --ebta-shadow:0 14px 38px rgba(9,60,31,.10);
        --ebta-shadow-lg:0 24px 70px rgba(7,44,24,.16);
        --ebta-ease:cubic-bezier(.2,.8,.2,1);
        --ebta-role-accent:var(--ebta-green-700);
        --ebta-role-accent-2:var(--ebta-green-500);
        --ebta-role-glow:rgba(37,137,75,.15);
    }

    html {
        scroll-behavior:smooth;
        background:#edf7f0;
    }

    body.ebta-unified-ui {
        min-height:100%;
        overflow-x:hidden;
        color:var(--ebta-ink);
        background:
            radial-gradient(circle at 8% 2%, rgba(227,173,36,.13), transparent 24rem),
            radial-gradient(circle at 96% 12%, var(--ebta-role-glow), transparent 28rem),
            linear-gradient(180deg,#f9fcfa 0%,#eef7f1 48%,#f8fbf9 100%);
        background-attachment:fixed;
    }

    body.ebta-unified-ui::before,
    body.ebta-unified-ui::after {
        content:"";
        position:fixed;
        z-index:-1;
        border-radius:999px;
        filter:blur(2px);
        pointer-events:none;
        opacity:.7;
    }

    body.ebta-unified-ui::before {
        width:260px;
        height:260px;
        right:-110px;
        top:180px;
        background:radial-gradient(circle,rgba(227,173,36,.14),transparent 68%);
        animation:ebtaAmbientFloat 10s ease-in-out infinite;
    }

    body.ebta-unified-ui::after {
        width:320px;
        height:320px;
        left:-160px;
        bottom:5%;
        background:radial-gradient(circle,var(--ebta-role-glow),transparent 68%);
        animation:ebtaAmbientFloat 13s ease-in-out infinite reverse;
    }

    body.role-student { --ebta-role-accent:#1b7a42; --ebta-role-accent-2:#3eb86a; }
    body.role-tutor { --ebta-role-accent:#145f34; --ebta-role-accent-2:#2f9453; }
    body.role-admin,
    body.role-duty-admin,
    body.role-admission { --ebta-role-accent:#185f34; --ebta-role-accent-2:#d7a51f; }
    body.role-manager,
    body.role-aqm { --ebta-role-accent:#17673a; --ebta-role-accent-2:#38a361; }
    body.role-treasurer { --ebta-role-accent:#155e36; --ebta-role-accent-2:#d5a21c; }
    body.role-secretary { --ebta-role-accent:#1d6940; --ebta-role-accent-2:#4cab70; }
    body.role-social-media { --ebta-role-accent:#17693c; --ebta-role-accent-2:#e0aa22; }
    body.role-coo,
    body.role-cao { --ebta-role-accent:#124e2b; --ebta-role-accent-2:#2e8d50; }
    body.role-ceo { --ebta-role-accent:#0d4024; --ebta-role-accent-2:#d2a01d; }
    body.role-school-manager { --ebta-role-accent:#1a6840; --ebta-role-accent-2:#47a968; }
    body.role-one-on-one-manager { --ebta-role-accent:#176b3a; --ebta-role-accent-2:#e0aa22; }

    body.ebta-unified-ui .header {
        position:sticky;
        top:0;
        z-index:1000;
        color:#fff;
        background:
            linear-gradient(110deg,rgba(8,45,24,.98),rgba(21,93,50,.97) 62%,rgba(31,113,61,.96));
        border-bottom:2px solid rgba(227,173,36,.72);
        box-shadow:0 9px 28px rgba(7,44,24,.22);
        backdrop-filter:blur(18px);
    }

    body.ebta-unified-ui .header::after {
        content:"";
        position:absolute;
        inset:auto 0 0 0;
        height:1px;
        background:linear-gradient(90deg,transparent,var(--ebta-gold-300),transparent);
        opacity:.9;
    }

    body.ebta-unified-ui .header .nav {
        width:min(1480px,100%);
        max-width:1480px;
        min-height:70px;
        padding:12px 22px;
        gap:18px;
    }

    body.ebta-unified-ui .brand {
        min-width:0;
    }

    body.ebta-unified-ui .brand-logo {
        width:46px;
        height:46px;
        border-radius:15px;
        border:2px solid rgba(243,210,119,.85);
        box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 0 5px rgba(255,255,255,.08);
        animation:ebtaLogoBreathe 4.8s ease-in-out infinite;
    }

    body.ebta-unified-ui .brand .title {
        color:#fff;
        background:none;
        -webkit-background-clip:initial;
        -webkit-text-fill-color:currentColor;
        font-family:"Plus Jakarta Sans",Inter,sans-serif;
        font-size:19px;
        font-weight:900;
        letter-spacing:-.35px;
        text-shadow:0 2px 8px rgba(0,0,0,.18);
    }

    body.ebta-unified-ui .links {
        display:flex;
        align-items:center;
        justify-content:flex-end;
        flex-wrap:wrap;
        gap:7px;
    }

    body.ebta-unified-ui .links a,
    body.ebta-unified-ui .links button {
        margin:0;
        min-height:38px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        border-radius:999px;
        border:1px solid rgba(255,255,255,.22);
        background:rgba(255,255,255,.10);
        color:#fff;
        font-weight:800;
        font-size:13px;
        text-decoration:none;
        box-shadow:none;
        backdrop-filter:blur(8px);
        transition:transform .18s var(--ebta-ease),background .18s ease,border-color .18s ease;
    }

    body.ebta-unified-ui .links a:hover,
    body.ebta-unified-ui .links button:hover {
        color:#fff;
        background:rgba(255,255,255,.19);
        border-color:rgba(243,210,119,.78);
        transform:translateY(-1px);
    }

    body.ebta-unified-ui .links .header-logout-link {
        background:rgba(180,35,24,.25);
        border-color:rgba(255,204,199,.42);
    }

    body.ebta-unified-ui .links .header-logout-link:hover {
        background:#b42318;
        border-color:#ffc9c3;
    }

    body.ebta-unified-ui .links .header-dashboard-link {
        background:rgba(227,173,36,.17);
        border-color:rgba(243,210,119,.48);
    }

    body.ebta-unified-ui .links .btn.success {
        color:#17341f;
        background:linear-gradient(135deg,#f5d67d,#dfaa22);
        border-color:#f6df9e;
        text-shadow:none;
    }

    .ebta-role-badge {
        display:inline-flex;
        align-items:center;
        gap:7px;
        max-width:230px;
        padding:7px 11px;
        border-radius:999px;
        color:#fff;
        background:rgba(255,255,255,.10);
        border:1px solid rgba(255,255,255,.20);
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.55px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .ebta-role-badge::before {
        content:"";
        width:8px;
        height:8px;
        border-radius:50%;
        flex:0 0 8px;
        background:var(--ebta-gold-300);
        box-shadow:0 0 0 4px rgba(243,210,119,.16);
        animation:ebtaStatusPulse 2.5s ease-in-out infinite;
    }

    body.ebta-unified-ui .wrap {
        width:min(1480px,100%);
        max-width:1480px;
        margin:22px auto;
        padding:0 22px;
        opacity:1;
        transform:none;
    }

    body.ebta-unified-ui .layout {
        gap:20px;
    }

    body.ebta-unified-ui .dashboard-main {
        min-width:0;
    }

    body.ebta-unified-ui .sidebar {
        top:92px;
        border:1px solid rgba(21,93,50,.14);
        border-radius:24px;
        background:
            linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,252,248,.96));
        box-shadow:var(--ebta-shadow);
    }

    body.ebta-unified-ui .side-links {
        gap:8px;
    }

    body.ebta-unified-ui .side-links a,
    body.ebta-unified-ui .portal-menu-link {
        position:relative;
        overflow:hidden;
        border:1px solid rgba(21,93,50,.12);
        border-radius:13px;
        color:#1b3423;
        background:rgba(255,255,255,.92);
        font-weight:760;
        box-shadow:0 3px 10px rgba(9,60,31,.04);
        transition:all .18s var(--ebta-ease);
    }

    body.ebta-unified-ui .side-links a:hover,
    body.ebta-unified-ui .side-links a.ebta-active,
    body.ebta-unified-ui .portal-menu-link.ebta-active {
        color:#fff;
        border-color:var(--ebta-role-accent);
        background:linear-gradient(135deg,var(--ebta-role-accent),var(--ebta-role-accent-2));
        box-shadow:0 9px 20px rgba(16,92,47,.18);
        transform:translateX(3px);
    }

    body.ebta-unified-ui .card,
    body.ebta-unified-ui .panel,
    body.ebta-unified-ui .auth-card,
    body.ebta-unified-ui details.aqm-section {
        border:1px solid rgba(21,93,50,.12);
        border-radius:var(--ebta-radius);
        background:rgba(255,255,255,.94);
        box-shadow:var(--ebta-shadow-sm);
        backdrop-filter:blur(8px);
    }

    body.ebta-unified-ui .card {
        padding:19px;
        overflow:visible;
        transition:transform .22s var(--ebta-ease),box-shadow .22s ease,border-color .22s ease;
    }

    body.ebta-unified-ui .card:hover {
        border-color:rgba(27,111,59,.23);
        box-shadow:var(--ebta-shadow);
        transform:translateY(-2px);
    }

    body.ebta-unified-ui .card::before {
        height:4px;
        border-radius:var(--ebta-radius) var(--ebta-radius) 0 0;
        background:linear-gradient(90deg,var(--ebta-role-accent),var(--ebta-role-accent-2),var(--ebta-gold-500));
    }

    body.ebta-unified-ui .card.soft {
        background:
            linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,250,244,.90));
    }

    /* Student pages favour paint stability over glass effects.
       This prevents Chromium/Edge from repainting large scrolling card lists
       through a backdrop blur, which can show as blank/flickering regions. */
    body.role-student.ebta-unified-ui .card,
    body.role-student.ebta-unified-ui .panel {
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        will-change:auto !important;
    }

    body.ebta-unified-ui .auth-card {
        position:relative;
        max-width:470px;
        padding:28px;
        overflow:hidden;
        box-shadow:var(--ebta-shadow-lg);
    }

    body.ebta-unified-ui .auth-card::before {
        content:"";
        position:absolute;
        width:180px;
        height:180px;
        right:-80px;
        top:-90px;
        border-radius:50%;
        background:radial-gradient(circle,var(--ebta-role-glow),transparent 68%);
        pointer-events:none;
    }

    body.ebta-unified-ui h1,
    body.ebta-unified-ui h2,
    body.ebta-unified-ui h3 {
        color:#13291b;
        letter-spacing:-.025em;
    }

    body.ebta-unified-ui h1 {
        position:relative;
        width:fit-content;
        max-width:100%;
        margin-bottom:13px;
        font-size:clamp(22px,2.4vw,31px);
        font-weight:900;
        line-height:1.18;
    }

    body.ebta-unified-ui h1::after {
        content:"";
        display:block;
        width:56px;
        height:4px;
        margin-top:8px;
        border-radius:999px;
        background:linear-gradient(90deg,var(--ebta-role-accent),var(--ebta-gold-500));
    }

    body.ebta-unified-ui .coo-hero h1::after,
    body.ebta-unified-ui .cao-hero h1::after,
    body.ebta-unified-ui .ceo-hero h1::after,
    body.ebta-unified-ui .ooo-brand h1::after {
        background:linear-gradient(90deg,#fff,var(--ebta-gold-300));
    }

    body.ebta-unified-ui .muted {
        color:var(--ebta-muted);
    }

    body.ebta-unified-ui .stats {
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(165px,1fr)) !important;
        gap:12px !important;
    }

    body.ebta-unified-ui .stat,
    body.ebta-unified-ui .stats-mini .s {
        position:relative;
        isolation:isolate;
        overflow:hidden;
        min-height:92px;
        padding:15px;
        border:1px solid rgba(21,93,50,.12);
        border-radius:16px;
        background:
            linear-gradient(145deg,#ffffff 0%,#f2faf4 100%);
        box-shadow:0 7px 20px rgba(9,60,31,.06);
        transition:all .2s var(--ebta-ease);
    }

    body.ebta-unified-ui .stat::after,
    body.ebta-unified-ui .stats-mini .s::after {
        content:"";
        position:absolute;
        z-index:-1;
        width:70px;
        height:70px;
        right:-26px;
        bottom:-30px;
        border-radius:50%;
        background:radial-gradient(circle,var(--ebta-role-glow),transparent 70%);
    }

    body.ebta-unified-ui .stat:hover,
    body.ebta-unified-ui .stats-mini .s:hover {
        transform:translateY(-3px);
        border-color:rgba(227,173,36,.45);
        box-shadow:0 14px 28px rgba(9,60,31,.11);
    }

    body.ebta-unified-ui .stat .k,
    body.ebta-unified-ui .stats-mini .s .k {
        color:var(--ebta-role-accent);
        font-family:"Plus Jakarta Sans",Inter,sans-serif;
        font-size:clamp(20px,2.2vw,27px);
        font-weight:900;
        line-height:1.15;
    }

    body.ebta-unified-ui .stat .t,
    body.ebta-unified-ui .stats-mini .s .t {
        margin-top:5px;
        color:#607066;
        font-size:11px;
        font-weight:760;
        letter-spacing:.03em;
        text-transform:uppercase;
    }

    body.ebta-unified-ui label {
        color:#52655a;
        font-weight:780;
    }

    body.ebta-unified-ui input,
    body.ebta-unified-ui select,
    body.ebta-unified-ui textarea {
        min-height:44px;
        border:1.5px solid #d9e6dd;
        border-radius:13px;
        background:rgba(255,255,255,.96);
        box-shadow:inset 0 1px 2px rgba(15,23,42,.025);
        transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
    }

    body.ebta-unified-ui textarea {
        min-height:105px;
    }

    body.ebta-unified-ui input:hover,
    body.ebta-unified-ui select:hover,
    body.ebta-unified-ui textarea:hover {
        border-color:#b7d2bf;
    }

    body.ebta-unified-ui input:focus,
    body.ebta-unified-ui select:focus,
    body.ebta-unified-ui textarea:focus {
        border-color:var(--ebta-role-accent);
        box-shadow:0 0 0 4px var(--ebta-role-glow);
        transform:translateY(-1px);
    }

    body.ebta-unified-ui .btn,
    body.ebta-unified-ui button,
    body.ebta-unified-ui input[type="submit"] {
        position:relative;
        overflow:hidden;
        border-radius:12px;
        font-weight:800;
        transition:transform .18s var(--ebta-ease),box-shadow .18s ease,filter .18s ease;
    }

    body.ebta-unified-ui .btn:not(.secondary):not(.danger):not(.warn),
    body.ebta-unified-ui button.btn:not(.secondary):not(.danger):not(.warn) {
        background:linear-gradient(135deg,var(--ebta-role-accent),var(--ebta-role-accent-2));
    }

    body.ebta-unified-ui .btn:hover,
    body.ebta-unified-ui button:hover,
    body.ebta-unified-ui input[type="submit"]:hover {
        transform:translateY(-2px);
        filter:saturate(1.06);
    }

    body.ebta-unified-ui .btn.secondary {
        color:var(--ebta-role-accent);
        border:1.5px solid rgba(21,93,50,.28);
        background:#fff;
        box-shadow:0 4px 12px rgba(9,60,31,.05);
    }

    body.ebta-unified-ui .btn.secondary:hover,
    body.ebta-unified-ui .admin-nav .btn.secondary.ebta-active {
        color:#fff;
        border-color:var(--ebta-role-accent);
        background:linear-gradient(135deg,var(--ebta-role-accent),var(--ebta-role-accent-2));
    }

    body.ebta-unified-ui .btn.danger {
        background:linear-gradient(135deg,#c9362b,#a91f16);
    }

    body.ebta-unified-ui .chip,
    body.ebta-unified-ui .badge {
        border-radius:999px;
        font-weight:800;
    }

    body.ebta-unified-ui table {
        border:1px solid rgba(21,93,50,.11);
        border-radius:16px;
        background:#fff;
        box-shadow:0 8px 22px rgba(9,60,31,.05);
    }

    body.ebta-unified-ui thead th {
        color:#1b4c2d;
        background:linear-gradient(180deg,#f0f8f2,#e8f4eb);
        border-bottom:1px solid #ccdfd2;
        font-weight:900;
    }

    body.ebta-unified-ui tbody tr {
        transition:background .15s ease,transform .15s ease;
    }

    body.ebta-unified-ui tbody tr:hover {
        background:#eff9f2;
    }

    body.ebta-unified-ui .scroll-x,
    body.ebta-unified-ui .ebta-table-shell {
        border-radius:16px;
        scrollbar-width:thin;
        scrollbar-color:#83ae90 #edf6ef;
    }

    body.ebta-unified-ui .admin-nav,
    body.ebta-unified-ui .ebta-role-nav {
        position:sticky;
        top:82px;
        z-index:60;
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        gap:8px;
        width:100%;
        margin:0 0 18px;
        padding:10px;
        overflow-x:auto;
        border:1px solid rgba(21,93,50,.14);
        border-radius:17px;
        background:rgba(255,255,255,.90);
        box-shadow:0 10px 28px rgba(9,60,31,.10);
        backdrop-filter:blur(16px);
        scrollbar-width:thin;
    }

    body.ebta-unified-ui .admin-nav > *,
    body.ebta-unified-ui .ebta-role-nav > * {
        flex:0 0 auto;
    }

    /* AQM navigation should scroll naturally with the page. */
    body.role-aqm.ebta-unified-ui .ebta-role-nav {
        position:relative;
        top:auto;
        z-index:auto;
    }

    body.ebta-unified-ui .admin-nav .btn,
    body.ebta-unified-ui .ebta-role-nav .btn {
        min-height:38px;
        padding:8px 12px;
        border-radius:999px;
        white-space:nowrap;
        box-shadow:none;
        font-size:12px;
    }

    body.ebta-unified-ui .admin-nav .btn.danger,
    body.ebta-unified-ui .ebta-role-nav .btn.danger {
        margin-left:auto;
    }

    body.ebta-unified-ui .coo-hero,
    body.ebta-unified-ui .cao-hero,
    body.ebta-unified-ui .ceo-hero,
    body.ebta-unified-ui .ooo-portal-shell {
        box-shadow:var(--ebta-shadow-lg);
        animation:ebtaHeroIn .55s var(--ebta-ease) both;
    }

    body.ebta-unified-ui .coo-quick-link,
    body.ebta-unified-ui .cao-quick-link,
    body.ebta-unified-ui .ceo-quick-link,
    body.ebta-unified-ui .ooo-nav-link {
        position:relative;
        transition:transform .18s var(--ebta-ease),box-shadow .18s ease,background .18s ease;
    }

    body.ebta-unified-ui .coo-quick-link:hover,
    body.ebta-unified-ui .cao-quick-link:hover,
    body.ebta-unified-ui .ceo-quick-link:hover,
    body.ebta-unified-ui .ooo-nav-link:hover {
        transform:translateY(-2px);
        box-shadow:0 8px 18px rgba(9,60,31,.13);
    }

    body.ebta-unified-ui .coo-quick-link.ebta-active,
    body.ebta-unified-ui .cao-quick-link.ebta-active,
    body.ebta-unified-ui .ceo-quick-link.ebta-active {
        color:#fff;
        border-color:var(--ebta-role-accent);
        background:linear-gradient(135deg,var(--ebta-role-accent),var(--ebta-role-accent-2));
    }

    body.ebta-unified-ui details {
        transition:border-color .2s ease,box-shadow .2s ease;
    }

    body.ebta-unified-ui details[open] {
        border-color:rgba(21,93,50,.24);
        box-shadow:0 12px 28px rgba(9,60,31,.08);
    }

    body.ebta-unified-ui summary {
        border-radius:12px;
        transition:background .16s ease,color .16s ease;
    }

    body.ebta-unified-ui summary:hover {
        background:#eef8f1;
        color:var(--ebta-role-accent);
    }

    body.ebta-unified-ui .announce,
    body.ebta-unified-ui .msg,
    body.ebta-unified-ui .empty {
        border-radius:15px;
    }

    body.ebta-unified-ui .announce {
        border-color:#ead28a;
        background:linear-gradient(145deg,#fffdf5,#fff8df);
        box-shadow:0 8px 20px rgba(176,125,17,.07);
    }

    body.ebta-unified-ui .empty {
        border:1.5px dashed #bcd4c3;
        background:rgba(247,252,248,.86);
    }

    body.ebta-unified-ui .footer {
        margin-top:48px;
        border-top:1px solid rgba(21,93,50,.12);
        background:
            linear-gradient(180deg,rgba(255,255,255,.35),rgba(232,244,235,.85));
    }

    .ebta-reveal {
        opacity:1;
        transform:none;
        animation:none;
    }

    .ebta-ripple {
        position:absolute;
        border-radius:50%;
        pointer-events:none;
        background:rgba(255,255,255,.38);
        transform:translate(-50%,-50%) scale(0);
        animation:ebtaRipple .55s ease-out forwards;
    }

    .ebta-submitting {
        cursor:progress !important;
        filter:saturate(.8);
    }

    .ebta-submitting::after {
        content:"";
        width:14px;
        height:14px;
        margin-left:7px;
        border:2px solid rgba(255,255,255,.45);
        border-top-color:#fff;
        border-radius:50%;
        animation:ebtaSpin .7s linear infinite;
    }

    #ebtaBackToTop {
        position:fixed;
        z-index:9800;
        right:18px;
        bottom:20px;
        width:46px;
        height:46px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(243,210,119,.65);
        border-radius:50%;
        color:#fff;
        background:linear-gradient(135deg,var(--ebta-role-accent),var(--ebta-role-accent-2));
        box-shadow:0 12px 26px rgba(9,60,31,.24);
        opacity:0;
        visibility:hidden;
        transform:translateY(12px);
        transition:all .2s var(--ebta-ease);
        cursor:pointer;
    }

    #ebtaBackToTop.show {
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    #ebtaBackToTop:hover {
        transform:translateY(-3px);
    }

    @keyframes ebtaPageIn {
        from { opacity:0; transform:translateY(10px); }
        to { opacity:1; transform:translateY(0); }
    }

    @keyframes ebtaReveal {
        from { opacity:0; transform:translateY(16px) scale(.992); }
        to { opacity:1; transform:translateY(0) scale(1); }
    }

    @keyframes ebtaHeroIn {
        from { opacity:0; transform:translateY(-10px) scale(.992); }
        to { opacity:1; transform:translateY(0) scale(1); }
    }

    @keyframes ebtaLogoBreathe {
        0%,100% { transform:translateY(0) scale(1); }
        50% { transform:translateY(-2px) scale(1.025); }
    }

    @keyframes ebtaStatusPulse {
        0%,100% { box-shadow:0 0 0 4px rgba(243,210,119,.15); }
        50% { box-shadow:0 0 0 7px rgba(243,210,119,.04); }
    }

    @keyframes ebtaAmbientFloat {
        0%,100% { transform:translate3d(0,0,0); }
        50% { transform:translate3d(0,-18px,0); }
    }

    @keyframes ebtaRipple {
        to { transform:translate(-50%,-50%) scale(5); opacity:0; }
    }

    @keyframes ebtaSpin {
        to { transform:rotate(360deg); }
    }

    @media(max-width:900px) {
        body.ebta-unified-ui .header .nav {
            padding:10px 13px;
        }

        body.ebta-unified-ui .wrap {
            margin:14px auto;
            padding:0 12px;
        }

        body.ebta-unified-ui .admin-nav,
        body.ebta-unified-ui .ebta-role-nav {
            top:72px;
            border-radius:14px;
        }

        body.ebta-unified-ui .card {
            padding:15px;
            border-radius:17px;
        }

        body.ebta-unified-ui .stats {
            grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        }
    }

    @media(max-width:640px) {
        body.ebta-unified-ui .header {
            position:relative;
        }

        body.ebta-unified-ui .header .nav {
            min-height:auto;
            align-items:stretch;
        }

        body.ebta-unified-ui .brand {
            width:100%;
        }

        body.ebta-unified-ui .links {
            width:100%;
            justify-content:flex-start;
            overflow-x:auto;
            flex-wrap:nowrap;
            padding-bottom:3px;
            scrollbar-width:none;
        }

        body.ebta-unified-ui .links::-webkit-scrollbar {
            display:none;
        }

        body.ebta-unified-ui .links > * {
            flex:0 0 auto;
        }

        .ebta-role-badge {
            max-width:180px;
        }

        body.ebta-unified-ui .admin-nav,
        body.ebta-unified-ui .ebta-role-nav {
            position:relative;
            top:auto;
            margin-bottom:13px;
            padding:8px;
        }

        body.ebta-unified-ui .admin-nav .btn.danger,
        body.ebta-unified-ui .ebta-role-nav .btn.danger {
            margin-left:0;
        }

        body.ebta-unified-ui h1 {
            font-size:22px;
        }

        body.ebta-unified-ui .stats {
            grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        }

        body.ebta-unified-ui .stat,
        body.ebta-unified-ui .stats-mini .s {
            min-height:82px;
            padding:12px;
        }

        body.ebta-unified-ui .stat .k,
        body.ebta-unified-ui .stats-mini .s .k {
            font-size:19px;
        }

        body.ebta-unified-ui .toolbar:not(.ebta-role-nav) {
            align-items:stretch;
        }

        #ebtaBackToTop {
            width:42px;
            height:42px;
            right:12px;
            bottom:14px;
        }
    }

    @media(max-width:420px) {
        body.ebta-unified-ui .stats {
            grid-template-columns:1fr !important;
        }
    }

    @media(prefers-reduced-motion:reduce) {
        html { scroll-behavior:auto; }

        body.ebta-unified-ui *,
        body.ebta-unified-ui *::before,
        body.ebta-unified-ui *::after {
            animation-duration:.01ms !important;
            animation-iteration-count:1 !important;
            transition-duration:.01ms !important;
        }
    }\n
/* =============================================================
   EBTA GLOBAL VISIBILITY / CONTRAST GUARD
   Keeps every portal action readable even if a page-specific rule,
   browser cache, or dynamically-created modal overrides older styles.
   ============================================================= */
:root {
    --ebta-action-green:#176b3a;
    --ebta-action-green-dark:#0f4d2a;
    --ebta-action-green-light:#279459;
    --ebta-action-gold:#e0aa22;
    --ebta-action-danger:#b42318;
    --ebta-action-text:#ffffff;
}

/* Normal/default/success actions: always dark-green with white text. */
body.ebta-unified-ui .btn,
body.ebta-unified-ui button.btn,
body.ebta-unified-ui a.btn,
body.ebta-unified-ui input[type="submit"].btn {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background-color:var(--ebta-action-green) !important;
    background-image:linear-gradient(135deg,var(--ebta-role-accent, #176b3a),var(--ebta-role-accent-2, #279459)) !important;
    border-color:transparent !important;
    text-decoration:none !important;
    opacity:1;
}

body.ebta-unified-ui .btn.success,
body.ebta-unified-ui button.btn.success,
body.ebta-unified-ui a.btn.success,
body.ebta-unified-ui input[type="submit"].success {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background-color:#176b3a !important;
    background-image:linear-gradient(135deg,#279459,#176b3a) !important;
    border-color:#176b3a !important;
}

/* Secondary actions intentionally remain white, but text/border are always dark enough. */
body.ebta-unified-ui .btn.secondary,
body.ebta-unified-ui button.btn.secondary,
body.ebta-unified-ui a.btn.secondary,
body.ebta-unified-ui input[type="submit"].secondary {
    color:#155d32 !important;
    -webkit-text-fill-color:#155d32 !important;
    background:#ffffff !important;
    border:1.5px solid #78a989 !important;
    text-shadow:none !important;
}

body.ebta-unified-ui .btn.secondary:hover,
body.ebta-unified-ui button.btn.secondary:hover,
body.ebta-unified-ui a.btn.secondary:hover,
body.ebta-unified-ui .btn.secondary.ebta-active {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:linear-gradient(135deg,#176b3a,#279459) !important;
    border-color:#176b3a !important;
}

body.ebta-unified-ui .btn.warn,
body.ebta-unified-ui button.btn.warn,
body.ebta-unified-ui a.btn.warn {
    color:#352400 !important;
    -webkit-text-fill-color:#352400 !important;
    background:linear-gradient(135deg,#f8d66d,#e0aa22) !important;
    border-color:#c89416 !important;
}

body.ebta-unified-ui .btn.danger,
body.ebta-unified-ui button.btn.danger,
body.ebta-unified-ui a.btn.danger {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:linear-gradient(135deg,#c9362b,#a91f16) !important;
    border-color:#a91f16 !important;
}

/* Disabled buttons are still clearly readable. */
body.ebta-unified-ui .btn:disabled,
body.ebta-unified-ui button.btn:disabled,
body.ebta-unified-ui input[type="submit"]:disabled,
body.ebta-unified-ui .btn.disabled,
body.ebta-unified-ui [aria-disabled="true"].btn {
    color:#475569 !important;
    -webkit-text-fill-color:#475569 !important;
    background:#e5e7eb !important;
    background-image:none !important;
    border:1px solid #cbd5e1 !important;
    box-shadow:none !important;
    opacity:1 !important;
    cursor:not-allowed !important;
    filter:none !important;
}

/* Submit controls that do not use .btn still receive a safe visual treatment. */
body.ebta-unified-ui input[type="submit"]:not(.btn) {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:linear-gradient(135deg,#176b3a,#0f4d2a) !important;
    border:1px solid #0f4d2a !important;
    border-radius:12px;
    font-weight:800;
    cursor:pointer;
}

/* Text inside form controls must never become transparent or white on white. */
body.ebta-unified-ui input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.ebta-unified-ui select,
body.ebta-unified-ui textarea {
    color:#102117 !important;
    -webkit-text-fill-color:#102117 !important;
    background-color:#ffffff !important;
    opacity:1 !important;
}

body.ebta-unified-ui input::placeholder,
body.ebta-unified-ui textarea::placeholder {
    color:#66756c !important;
    -webkit-text-fill-color:#66756c !important;
    opacity:1 !important;
}

body.ebta-unified-ui input:disabled,
body.ebta-unified-ui select:disabled,
body.ebta-unified-ui textarea:disabled {
    color:#475569 !important;
    -webkit-text-fill-color:#475569 !important;
    background:#f1f5f9 !important;
    opacity:1 !important;
}

/* Keep public header actions readable against the dark green header. */
body.ebta-unified-ui .header .links a,
body.ebta-unified-ui .header .links button {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

body.ebta-unified-ui .header .links .btn.success {
    color:#17341f !important;
    -webkit-text-fill-color:#17341f !important;
    background:linear-gradient(135deg,#f5d67d,#dfaa22) !important;
    border-color:#f6df9e !important;
}

/* High-visibility keyboard focus across every portal. */
body.ebta-unified-ui .btn:focus-visible,
body.ebta-unified-ui button:focus-visible,
body.ebta-unified-ui a:focus-visible,
body.ebta-unified-ui input:focus-visible,
body.ebta-unified-ui select:focus-visible,
body.ebta-unified-ui textarea:focus-visible {
    outline:3px solid #f3d277 !important;
    outline-offset:2px !important;
}

/* Plain form buttons without a class should still be legible. */
body.ebta-unified-ui form button:not([class]) {
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:#176b3a !important;
    border:1px solid #0f4d2a !important;
    border-radius:10px;
    padding:9px 13px;
    font-weight:800;
}