/* ShardaClass design system — mint/green + yellow.
   Plain CSS (no build step); loaded after the compiled Tailwind bundle.
   All classes are `sc-` prefixed so they never collide with Tailwind utilities
   still used inside individual page bodies. */

:root{
  --sc-mint:#cfe9df; --sc-panel:#ffffff; --sc-tile:#f4f9f6; --sc-tile2:#eef5f1;
  --sc-green:#2f6f5c; --sc-green-2:#3f8f77; --sc-chip:#e4f2eb; --sc-yellow:#f6c945;
  --sc-ink:#1f2a33; --sc-muted:#8b98a1; --sc-line:#e6efe9; --sc-field:#ffffff;
  --sc-rose:#e78a7b; --sc-rose-bg:#f9e7e3; --sc-amber:#c79a3a; --sc-amber-bg:#f7edcf;
  --sc-sky:#5b93b6; --sc-sky-bg:#e3eef4;
}

.sc-body{
  font-family:"Plus Jakarta Sans","Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--sc-mint); color:var(--sc-ink); margin:0;
}
.sc-body *{box-sizing:border-box}

/* ---------- App shell (edge-to-edge, collapsible rail) ---------- */
:root{--sc-rail:78px;--sc-rail-open:248px}
.sc-app{position:relative}
.sc-side{position:fixed;top:0;left:0;bottom:0;width:var(--sc-rail);z-index:50;background:var(--sc-green);
  padding:18px 14px;display:flex;flex-direction:column;overflow:hidden;
  transition:width .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease}
.sc-side:hover{width:var(--sc-rail-open);box-shadow:12px 0 46px rgba(31,58,48,.22)}
.sc-side::-webkit-scrollbar{width:0}
.sc-brand{display:flex;align-items:center;gap:12px;padding:4px 6px 16px;color:#fff;text-decoration:none}
.sc-brand .sc-logo{width:40px;height:40px;flex-shrink:0;border-radius:12px;background:linear-gradient(135deg,#f6c945,#f0b429);
  display:grid;place-items:center;color:#fff;font-weight:800}
.sc-brand b{font-size:16px;font-weight:800;letter-spacing:-.2px}
.sc-navlabel{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#a9d2c4;padding:8px 12px 6px;font-weight:700}
.sc-nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;overflow-x:hidden}
.sc-nav a{display:flex;align-items:center;gap:14px;padding:12px 13px;border-radius:14px;
  color:#cfe7dd;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,color .15s;white-space:nowrap}
.sc-nav a svg{width:22px;height:22px;flex-shrink:0}
.sc-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.sc-nav a.active{background:#fff;color:var(--sc-green)}
.sc-nav a.soon{opacity:.55}
.sc-nav a .soon-tag{margin-left:auto;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#a9d2c4}

/* Labels/brand text reveal only when the rail is expanded on hover */
.sc-brand b,.sc-navlabel,.sc-nav a span,.sc-nav a .soon-tag{opacity:0;transition:opacity .16s ease}
.sc-side:hover .sc-brand b,.sc-side:hover .sc-navlabel,
.sc-side:hover .sc-nav a span,.sc-side:hover .sc-nav a .soon-tag{opacity:1}

.sc-mainwrap{margin-left:var(--sc-rail);min-width:0;background:var(--sc-panel);
  min-height:100vh;padding:20px 32px 40px}

/* ---------- Topbar ---------- */
.sc-topbar{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sc-burger{display:none;width:42px;height:42px;border:none;border-radius:12px;background:var(--sc-tile);color:var(--sc-green);cursor:pointer}
.sc-search{flex:1;position:relative;max-width:640px}
.sc-search .sc-search-box{display:flex;align-items:center;gap:10px;background:var(--sc-tile);border-radius:14px;padding:12px 16px;color:var(--sc-muted);font-size:14px}
.sc-search .sc-search-box svg{width:18px;height:18px;flex-shrink:0}
.sc-search input{flex:1;border:none;background:none;outline:none;font-family:inherit;font-size:14px;color:var(--sc-ink)}
.sc-search input::placeholder{color:var(--sc-muted)}
.sc-search-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--sc-line);
  border-radius:16px;box-shadow:0 22px 48px rgba(40,80,66,.18);padding:6px;z-index:45;max-height:420px;overflow:auto;display:none}
.sc-search-panel.open{display:block}
.sc-search-group{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sc-muted);padding:10px 12px 4px}
.sc-search-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;text-decoration:none;color:var(--sc-ink);cursor:pointer}
.sc-search-item:hover,.sc-search-item.active{background:var(--sc-tile)}
.sc-search-item .ic{width:32px;height:32px;border-radius:9px;background:var(--sc-chip);color:var(--sc-green);display:grid;place-items:center;flex-shrink:0}
.sc-search-item .ic svg{width:16px;height:16px}
.sc-search-item b{font-size:13.5px;font-weight:600;display:block}
.sc-search-item p{font-size:11.5px;color:var(--sc-muted);margin:0}
.sc-search-empty{padding:16px 14px;font-size:13px;color:var(--sc-muted);text-align:center}
.sc-topbar-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.sc-icobtn{position:relative;width:42px;height:42px;border:none;border-radius:50%;background:var(--sc-tile);display:grid;place-items:center;color:var(--sc-green);cursor:pointer;text-decoration:none}
.sc-icobtn:hover{background:var(--sc-chip)}
.sc-icobtn svg{width:18px;height:18px}
.sc-icobtn .sc-badge-dot{position:absolute;top:9px;right:10px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#e0574a;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--sc-panel)}
.sc-notify{position:relative}
.sc-notify-panel{position:absolute;right:0;top:calc(100% + 8px);width:300px;background:#fff;border:1px solid var(--sc-line);border-radius:16px;box-shadow:0 22px 48px rgba(40,80,66,.18);padding:8px;z-index:45}
.sc-notify-panel h4{font-size:13px;font-weight:800;padding:8px 10px 4px}
.sc-notify-empty{padding:22px 14px;text-align:center;color:var(--sc-muted);font-size:13px}
.sc-user{position:relative}
.sc-user-btn{display:flex;align-items:center;gap:10px;background:var(--sc-tile);border:none;border-radius:30px;padding:5px 14px 5px 6px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:var(--sc-ink)}
.sc-avatar{width:34px;height:34px;border-radius:50%;background:var(--sc-green-2);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;object-fit:cover}
.sc-menu{position:absolute;right:0;top:calc(100% + 8px);width:190px;background:#fff;border:1px solid var(--sc-line);
  border-radius:14px;box-shadow:0 18px 38px rgba(40,80,66,.18);padding:6px;z-index:40}
.sc-menu a,.sc-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;
  font-size:13.5px;color:var(--sc-ink);background:none;border:none;cursor:pointer;font-family:inherit;text-decoration:none}
.sc-menu a:hover,.sc-menu button:hover{background:var(--sc-tile)}
.sc-menu button.danger{color:#c15e4e}

/* ---------- Page head ---------- */
.sc-crumbs{font-size:12px;color:var(--sc-muted);margin-bottom:4px}
.sc-pagehead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sc-pagehead h1{font-size:26px;font-weight:800;letter-spacing:-.4px;margin:0}

/* ---------- Buttons ---------- */
.sc-btn{padding:11px 20px;border-radius:13px;font-size:14px;font-weight:700;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;font-family:inherit;text-decoration:none}
.sc-btn svg{width:16px;height:16px}
.sc-btn.primary{background:var(--sc-green);color:#fff;box-shadow:0 10px 20px rgba(47,111,92,.28)}
.sc-btn.primary:hover{background:#28604f}
.sc-btn.ghost{background:var(--sc-tile);color:var(--sc-ink)}
.sc-btn.chip{background:var(--sc-chip);color:var(--sc-green)}

/* ---------- Cards & tiles ---------- */
.sc-card{background:var(--sc-tile);border-radius:22px;padding:20px}
.sc-card + .sc-card{margin-top:18px}
.sc-card h2,.sc-card h3{margin:0}
.sc-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sc-h h2{font-size:18px;font-weight:800}
.sc-muted{color:var(--sc-muted)}
.sc-small{font-size:12px}

.sc-statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sc-stat{background:var(--sc-tile);border-radius:20px;padding:18px}
.sc-stat .ic{width:40px;height:40px;border-radius:12px;background:var(--sc-green-2);color:#fff;display:grid;place-items:center;margin-bottom:12px}
.sc-stat .ic svg{width:20px;height:20px}
.sc-stat .lab{font-size:13px;color:var(--sc-muted)}
.sc-stat .val{font-size:26px;font-weight:800;margin-top:2px}
.sc-stat .sub{font-size:12px;margin-top:4px;color:var(--sc-muted)}
.sc-stat.hot .ic{background:var(--sc-yellow);color:#fff}

/* accent variants for stat icon */
.sc-ic-green{background:var(--sc-green-2)!important}
.sc-ic-yellow{background:var(--sc-yellow)!important}
.sc-ic-rose{background:var(--sc-rose)!important}
.sc-ic-sky{background:var(--sc-sky)!important}

/* ---------- Lists ---------- */
.sc-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--sc-line)}
.sc-row:first-child{border-top:none}
.sc-row .who{flex:1;min-width:0}
.sc-row .who b{font-size:13.5px;display:block}
.sc-row .who p{font-size:11.5px;color:var(--sc-muted);margin:0}
.sc-row .amt{font-weight:700;font-size:13.5px;white-space:nowrap}
.sc-savatar{width:36px;height:36px;border-radius:50%;background:var(--sc-green-2);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}

/* progress bar */
.sc-pbar{height:8px;background:var(--sc-tile2);border-radius:6px;overflow:hidden}
.sc-pbar i{display:block;height:100%;background:var(--sc-yellow);border-radius:6px}

/* ---------- Form controls (reused across pages) ---------- */
.sc-label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.sc-label .req{color:#e0857a}
.sc-in{width:100%;background:var(--sc-field);border:1px solid var(--sc-line);border-radius:12px;
  padding:11px 13px;font-size:14px;color:var(--sc-ink);font-family:inherit;outline:none}
.sc-in:focus{border-color:var(--sc-green-2);box-shadow:0 0 0 3px rgba(63,143,119,.15)}
.sc-in::placeholder{color:#b6c1bb}
textarea.sc-in{resize:vertical;min-height:60px}

/* themed select */
.sc-sel{position:relative}
.sc-sel-btn{width:100%;background:var(--sc-field);border:1px solid var(--sc-line);border-radius:12px;
  padding:11px 13px;font-size:14px;color:var(--sc-ink);font-family:inherit;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.sc-sel-btn svg{width:16px;height:16px;color:var(--sc-muted);transition:transform .2s}
.sc-sel.open .sc-sel-btn{border-color:var(--sc-green-2);box-shadow:0 0 0 3px rgba(63,143,119,.15)}
.sc-sel.open .sc-sel-btn svg{transform:rotate(180deg);color:var(--sc-green)}
.sc-sel-menu{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--sc-line);
  border-radius:14px;box-shadow:0 18px 38px rgba(40,80,66,.18);padding:6px;display:none;max-height:260px;overflow:auto}
.sc-sel.open .sc-sel-menu{display:block}
.sc-sel-opt{padding:9px 12px;border-radius:10px;font-size:13.5px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--sc-ink)}
.sc-sel-opt:hover{background:var(--sc-tile)}
.sc-sel-opt.on{background:var(--sc-chip);color:var(--sc-green);font-weight:700}

/* ---------- Badges ---------- */
.sc-badge{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:20px;display:inline-block}
.sc-badge.paid,.sc-badge.active,.sc-badge.present{background:var(--sc-chip);color:var(--sc-green)}
.sc-badge.partial,.sc-badge.late{background:var(--sc-amber-bg);color:var(--sc-amber)}
.sc-badge.pending,.sc-badge.inactive{background:var(--sc-tile2);color:#7d8a92}
.sc-badge.overdue,.sc-badge.absent{background:var(--sc-rose-bg);color:#c15e4e}

/* ---------- Native select, themed ---------- */
select.sc-in,.sc-native{-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238b98a1' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}

/* ---------- Grid helpers ---------- */
.sc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sc-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.sc-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sc-col2{grid-column:span 2}
@media (max-width:820px){.sc-grid3,.sc-grid4{grid-template-columns:1fr 1fr}.sc-col2{grid-column:auto}}

/* ---------- Form section ---------- */
.sc-card h3.sc-sec{font-size:16px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.sc-card h3.sc-sec .dot{width:9px;height:9px;border-radius:50%;background:var(--sc-yellow);flex-shrink:0}
.sc-opt{font-size:12px;font-weight:500;color:var(--sc-muted)}
.sc-section-label{font-size:13px;font-weight:700;margin:6px 0 10px}
.sc-hint{font-size:11.5px;color:var(--sc-muted);margin-top:6px}
.sc-formactions{display:flex;justify-content:flex-end;gap:12px;margin-top:22px}

/* radios / checkbox / toggle */
.sc-choices{display:flex;gap:16px;flex-wrap:wrap}
.sc-radio{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer}
.sc-radio input{accent-color:var(--sc-green);width:16px;height:16px}
.sc-check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.sc-check input{accent-color:var(--sc-green);width:16px;height:16px}
.sc-toggle{display:flex;align-items:center;gap:10px;background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600}

/* sibling row */
.sc-sib{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:16px;padding:16px;margin-bottom:12px}
.sc-sib-top{display:flex;gap:16px;align-items:flex-start}
.sc-remove{margin-top:26px;font-size:13px;font-weight:600;color:#c06a5b;background:#f9e7e3;border:none;padding:9px 14px;border-radius:11px;cursor:pointer;white-space:nowrap;font-family:inherit}
.sc-addrow{font-size:13px;font-weight:700;color:var(--sc-green);background:var(--sc-chip);border:none;padding:9px 16px;border-radius:11px;cursor:pointer;font-family:inherit}
.sc-subgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sc-subgrid label{font-size:11.5px;color:var(--sc-muted)}
@media (max-width:820px){.sc-subgrid{grid-template-columns:1fr 1fr}}

/* ---------- Index / list pages ---------- */
.sc-filters{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sc-searchbox{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:var(--sc-field);border:1px solid var(--sc-line);border-radius:12px;padding:11px 14px;color:var(--sc-muted);font-size:14px}
.sc-searchbox svg{width:16px;height:16px;flex-shrink:0}
.sc-searchbox input{border:none;background:none;outline:none;flex:1;font-family:inherit;font-size:14px;color:var(--sc-ink)}
.sc-fsel{width:180px;flex-shrink:0}

.sc-tablewrap{overflow-x:auto}
.sc-table{width:100%;border-collapse:separate;border-spacing:0}
.sc-table thead th{text-align:left;font-size:12px;color:var(--sc-muted);font-weight:600;padding:0 14px 12px;white-space:nowrap}
.sc-table thead th.right{text-align:right}
.sc-table tbody tr{background:var(--sc-panel)}
.sc-table tbody td{padding:13px 14px;border-top:8px solid var(--sc-tile);font-size:13.5px;vertical-align:middle}
.sc-table tbody tr td:first-child{border-radius:14px 0 0 14px}
.sc-table tbody tr td:last-child{border-radius:0 14px 14px 0}
.sc-table td.right{text-align:right}
.sc-table .num{font-variant-numeric:tabular-nums}
.sc-cellsub{font-size:11.5px;color:var(--sc-muted)}
.sc-stu{display:flex;align-items:center;gap:11px}
.sc-stu b{font-size:13.5px;display:block}
.sc-stu p{font-size:11.5px;color:var(--sc-muted);margin:0}

/* small row-action icon buttons */
.sc-rowbtn{width:34px;height:34px;border-radius:10px;background:var(--sc-tile);border:none;display:inline-grid;place-items:center;color:var(--sc-green);cursor:pointer;text-decoration:none;font-size:14px}
.sc-rowbtn:hover{background:var(--sc-chip)}
.sc-rowbtn.danger{color:#c15e4e}
.sc-rowbtn.danger:hover{background:var(--sc-rose-bg)}
.sc-rowbtn svg{width:16px;height:16px}
.sc-rowactions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.sc-btn-sm{padding:7px 14px;border-radius:10px;font-size:12.5px;font-weight:700;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.sc-btn-sm.primary{background:var(--sc-green);color:#fff}
.sc-btn-sm.chip{background:var(--sc-chip);color:var(--sc-green)}

.sc-empty{text-align:center;padding:44px 20px;color:var(--sc-muted);font-size:14px}

/* mobile stacked list card (index pages) */
.sc-listcard{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:16px;padding:14px;margin-bottom:10px}
.sc-mobilelist{display:none}
@media (max-width:820px){
  .sc-desk{display:none}
  .sc-mobilelist{display:block}
}

/* ---------- Pagination (themed paginator view) ---------- */
.sc-pagination{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:20px;flex-wrap:wrap}
.sc-pagination a,.sc-pagination span{min-width:36px;height:36px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;color:var(--sc-ink);background:var(--sc-tile)}
.sc-pagination a:hover{background:var(--sc-chip);color:var(--sc-green)}
.sc-pagination .sc-page-active span{background:var(--sc-green);color:#fff}
.sc-pagination .sc-page-disabled span{opacity:.4}
.sc-pagination .sc-page-dots{background:none}

/* ---------- Flash ---------- */
.sc-flash{display:flex;align-items:center;gap:10px;border-radius:14px;padding:12px 16px;font-size:14px;margin-bottom:16px}
.sc-flash svg{width:18px;height:18px;flex-shrink:0}
.sc-flash.ok{background:var(--sc-chip);color:var(--sc-green)}
.sc-flash.err{background:var(--sc-rose-bg);color:#c15e4e}
.sc-flash .x{margin-left:auto;background:none;border:none;cursor:pointer;color:inherit;font-size:18px;line-height:1}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .sc-side{width:248px;transform:translateX(-110%);transition:transform .2s;z-index:60}
  .sc-side:hover{width:248px;box-shadow:none}
  .sc-side.open{transform:none;box-shadow:12px 0 46px rgba(31,58,48,.28)}
  /* full drawer on mobile — always show the labels */
  .sc-side .sc-brand b,.sc-side .sc-navlabel,.sc-side .sc-nav a span,.sc-side .sc-nav a .soon-tag{opacity:1}
  .sc-mainwrap{margin-left:0;padding:16px 16px 32px}
  .sc-burger{display:grid;place-items:center}
  .sc-backdrop{position:fixed;inset:0;background:rgba(31,42,51,.45);z-index:55}
  .sc-statgrid{grid-template-columns:repeat(2,1fr)}
}