/* =========================================================
   LAYOUT.CSS  (dashboard / welcome page)
   Structure, spacing, typography lang dito. Walang kulay.
   Lahat ng kulay ay nasa colors.css (na galing sa theme tokens).

   Design:
   - Mas siksik at mas malinis: manipis na border, halos walang shadow.
   - Grid na kusang nag-aadjust (auto-fill) sa lapad ng screen.
   - Malinaw na hierarchy: banner (kailangan ng aksyon) -> mga seksyon -> cards.
   ========================================================= */

:root{
   --radius:12px;
}

*{ box-sizing:border-box; }

body{
   margin:0;
   font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ===== Page shell ===== */

.userchip-wrap{
   position:relative;
   display:inline-block;
   margin-bottom:16px;
}
.userchip{
   display:inline-flex; align-items:center; gap:8px;
   min-height:36px;
   padding:6px 14px; border-radius:999px;
   font-size:.875rem; font-weight:600;
   cursor:pointer; font-family:inherit;
   transition:border-color .15s ease;
}
.userchip::before{ content:"●"; font-size:9px; }
.userchip .chevron{
   font-size:11px;
   transition:transform .15s ease;
}
.userchip.open .chevron{ transform:rotate(180deg); }
.userchip:focus-visible{ outline:3px solid rgba(var(--sm-action-rgb),.4); outline-offset:2px; }


/* ===== Priority action banner ===== */
.banner{
   border-radius:var(--radius);
   padding:14px 18px;
   display:flex; align-items:center; justify-content:space-between; gap:16px;
   margin-bottom:22px;
   cursor:pointer;
   transition:border-color .12s ease, background .12s ease;
}
.banner:active{ opacity:.92; }
.banner:focus-visible{ outline:3px solid rgba(var(--sm-action-rgb),.4); outline-offset:2px; }
.banner-left{ display:flex; align-items:center; gap:14px; }
.banner-icon{
   width:36px; height:36px; border-radius:10px;
   display:flex; align-items:center; justify-content:center;
   font-size:1rem; font-weight:700; flex-shrink:0;
}
.banner-text .count{ font-size:.9375rem; font-weight:600; }
.banner-text .sub{ font-size:.8125rem; margin-top:2px; }
.banner-btn{
   border:1px solid transparent; padding:8px 14px; border-radius:10px;
   font-size:.8125rem; font-weight:600; cursor:pointer; white-space:nowrap;
   transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.banner-btn .arrow{
   display:inline-block;
   transition:transform .15s ease;
}
.banner:hover .banner-btn .arrow{ transform:translateX(3px); }

/* ===== Section headers ===== */
.section-title{
   font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
   margin:26px 0 12px; display:flex; align-items:center; gap:10px;
}
.section-title::after{ content:""; flex:1; height:1px; }

/* ===== Card grid ===== */
/* auto-fill: nagdadagdag/nagbabawas ng column ayon sa lapad; hindi na 3 na malalaking card lang */
.grid{
   display:grid;
   grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
   gap:12px;
}
@media(max-width:600px){ .grid{ grid-template-columns:1fr; } }

/* Mga card ng staff: nakatago hanggang dumating ang bilang (ang card na 0 ay hindi ipinapakita; tingnan ang refreshCardCounts sa modules/welcome/Controller.php) */
#staffCards.cards-pending{ display:none; }

.flex-direction-row{ flex-direction:row !important; }

/* Generic .card (ginagamit din ng ibang module: enrollment, lesson, blog): pareho pa rin ang istruktura */
.card{
   border-radius:var(--radius);
   padding:14px 16px;
   display:flex;
   align-items:center;
   gap:13px;
   cursor:pointer;
   transition:border-color .12s ease, box-shadow .12s ease;
   position:relative;
   box-shadow:none;          /* alisin ang makapal na default na shadow ng MDB; manipis na border lang */
}
.card:hover{ box-shadow:0 1px 4px rgba(15,23,42,.10); }
.card:focus-visible{ outline:3px solid rgba(var(--sm-action-rgb),.4); outline-offset:2px; }

/* Dashboard card (welcome lang): mas siksik */
.grid > .card{
   min-height:64px;
   padding:12px 14px;
}
.card .icon{
   width:36px; height:36px; border-radius:10px;
   display:flex; align-items:center; justify-content:center;
   font-size:1.05rem; flex-shrink:0;
}
.card .label{ font-size:.9375rem; font-weight:600; line-height:1.3; }
.card .badge{
   margin-left:auto;
   font-size:.6875rem; font-weight:700;
   padding:3px 9px; border-radius:999px;
}

/* Mga custom badge (ginagamit sa welcome/inbox at iba pa) */
.badge-danger{
   margin-left:auto;
   background-color:var(--sm-danger);
   color:#fff;
   font-size:.6875rem; font-weight:700;
   padding:3px 9px; border-radius:999px;
}

.badge-primary{
   margin-left:auto;
   background-color:var(--sm-action);
   color:#fff;
   font-size:.6875rem; font-weight:700;
   padding:3px 9px; border-radius:999px;
}