/* =================================================================== LSC Student Management — Modern "Liquid Glass" design system Brand: Forest Green · Oxblood Red · Warm Cream Apple-style frosted glass · system (SF Pro) typography =================================================================== */ :root{ /* brand */ --green:#1B5E3A; --green-deep:#143C28; --green-bright:#23794C; --green-700:#17502F; --oxblood:#8E1417; --oxblood-600:#7A1114; --cream:#F5F1E6; /* ink */ --ink:#16241D; --muted:#5E6E64; --soft:#7C8A80; /* glass surfaces */ --glass:rgba(255,255,255,.60); --glass-strong:rgba(255,255,255,.80); --glass-border:rgba(255,255,255,.80); --hairline:rgba(20,60,40,.10); --hairline-2:rgba(20,60,40,.07); --tint-green:rgba(27,94,58,.08); --line:var(--hairline); /* legacy alias */ --card:var(--glass-strong); --bg:#EAF1EC; --cream-200:#EFE9D8; --warn:#B7791F; --danger:#8E1417; --ok:#1B5E3A; --radius:20px; --radius-sm:14px; --radius-xs:11px; --shadow-sm:0 1px 2px rgba(18,48,33,.05), 0 8px 20px rgba(18,48,33,.06); --shadow:0 12px 34px rgba(18,48,33,.10), 0 2px 8px rgba(18,48,33,.05); --shadow-lg:0 40px 90px rgba(10,30,20,.30), 0 8px 24px rgba(10,30,20,.18); --blur:saturate(180%) blur(22px); --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --serif:var(--sans); /* legacy var kept; now resolves to the modern sans */ } *{box-sizing:border-box} html,body{height:100%} body{ margin:0;font-family:var(--sans);color:var(--ink); font-size:15px;line-height:1.5;letter-spacing:-.005em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; background: radial-gradient(820px 620px at 6% -8%, rgba(35,121,76,.18), transparent 58%), radial-gradient(760px 600px at 102% 4%, rgba(142,20,23,.07), transparent 55%), radial-gradient(900px 760px at 50% 116%, rgba(245,241,230,.85), transparent 60%), linear-gradient(158deg,#E9F1EC 0%,#ECF0E7 48%,#F4F0E6 100%); background-attachment:fixed; } h1,h2,h3{font-family:var(--sans);font-weight:680;letter-spacing:-.022em;margin:0;color:var(--ink)} h1{font-weight:700} a{color:var(--green);text-decoration:none} small{font-size:12.5px} [hidden]{display:none !important} ::selection{background:rgba(27,94,58,.16)} /* ---------- Buttons ---------- */ .btn{ font-family:var(--sans);font-size:14px;font-weight:590;cursor:pointer; border:1px solid var(--hairline);border-radius:12px;padding:10px 16px; display:inline-flex;align-items:center;gap:8px;white-space:nowrap; background:rgba(255,255,255,.7);color:var(--ink); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); box-shadow:0 1px 2px rgba(18,48,33,.05); transition:transform .14s ease, box-shadow .18s ease, background .18s ease, filter .18s ease; } .btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(18,48,33,.12)} .btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(18,48,33,.08)} .btn-primary{background:linear-gradient(180deg,#27855A,#1B5E3A);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(27,94,58,.30)} .btn-primary:hover{filter:brightness(1.06);box-shadow:0 10px 24px rgba(27,94,58,.34)} .btn-danger{background:linear-gradient(180deg,#A8201F,#8E1417);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(142,20,23,.28)} .btn-danger:hover{filter:brightness(1.06)} .btn-outline{background:rgba(255,255,255,.55);border-color:var(--hairline);color:var(--ink)} .btn-outline:hover{border-color:rgba(27,94,58,.4);color:var(--green)} .btn-ghost{background:transparent;border-color:var(--hairline);color:var(--muted);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .btn-ghost:hover{background:var(--tint-green);color:var(--green);border-color:rgba(27,94,58,.25)} .btn-sm{padding:7px 12px;font-size:13px;border-radius:10px} .btn-block{width:100%;justify-content:center;padding:13px;font-size:15px} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .btn-link{background:none;border:none;color:var(--green);padding:5px 7px;font-weight:600;cursor:pointer;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .btn-link:hover{text-decoration:underline} .btn-link.danger{color:var(--oxblood)} /* ---------- Login ---------- */ .login-screen{ min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px; background: radial-gradient(1000px 720px at 14% 8%, #2c9560 0%, transparent 56%), radial-gradient(860px 720px at 92% 96%, #0e3322 0%, transparent 55%), linear-gradient(150deg,#1f6b41 0%,#143C28 56%,#0b2117 100%); } .login-card{ width:100%;max-width:400px;padding:34px 30px 30px;border-radius:26px; background:rgba(255,255,255,.74); -webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px); border:1px solid rgba(255,255,255,.85); box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.7); } .login-brand{text-align:center;margin-bottom:6px} .login-logo-img{display:block;height:96px;width:auto;margin:0 auto 6px} .login-logo{font-weight:700;font-size:44px;color:var(--green);letter-spacing:.04em;line-height:1} /* fallback if no image */ .login-sub{font-size:10.5px;letter-spacing:.16em;color:var(--green-deep);margin-top:6px;font-weight:600} .login-tag{font-size:10px;letter-spacing:.1em;color:var(--muted);margin-top:3px;text-transform:uppercase} .login-title{text-align:center;font-size:20px;font-weight:700;letter-spacing:-.02em;margin:16px 0 20px;color:var(--ink)} .login-error{background:rgba(255,235,235,.85);color:var(--oxblood);border:1px solid rgba(142,20,23,.25);padding:10px 13px;border-radius:12px;font-size:13.5px;margin-bottom:14px} .login-foot{color:rgba(232,244,236,.78);font-size:12.5px;margin-top:20px;font-weight:500} /* ---------- Form fields ---------- */ .field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px} .field>span{font-size:13px;font-weight:600;color:var(--ink)} .field input,.field select,.field textarea,.search input,select.input{ font-family:var(--sans);font-size:15px;color:var(--ink); background:rgba(255,255,255,.7); border:1px solid var(--hairline);border-radius:12px;padding:11px 13px;width:100%; transition:border-color .15s, box-shadow .15s, background .15s; } .field input:focus,.field select:focus,.field textarea:focus,.search input:focus,select.input:focus{ outline:none;border-color:rgba(27,94,58,.55);background:#fff; box-shadow:0 0 0 4px rgba(27,94,58,.13) } .field input:read-only{background:rgba(245,241,230,.6);color:var(--muted)} .field textarea{resize:vertical;min-height:64px} .field .hint{font-weight:400;color:var(--muted);font-size:12px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px} .form-grid .full{grid-column:1 / -1} /* ---------- App layout ---------- */ .app{display:grid;grid-template-columns:264px 1fr;min-height:100vh} .sidebar{ display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh; background:linear-gradient(180deg, rgba(255,255,255,.66), rgba(238,244,239,.58)); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border-right:1px solid var(--glass-border); } .brand{display:flex;align-items:center;gap:12px;padding:8px 8px 18px} .brand-mark{height:40px;width:auto;display:block} .brand-logo{font-weight:700;font-size:22px;color:#fff;background:linear-gradient(180deg,#27855A,#1B5E3A);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:13px;letter-spacing:.03em;box-shadow:0 6px 16px rgba(27,94,58,.3)} /* fallback */ .brand-text{display:flex;flex-direction:column;line-height:1.2} .brand-text strong{color:var(--ink);font-size:16px;font-weight:680;letter-spacing:-.01em} .brand-text span{font-size:11.5px;color:var(--muted);font-weight:500} .nav{display:flex;flex-direction:column;gap:3px;margin-top:6px;flex:1} .nav a{ display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px; color:var(--muted);font-weight:570;font-size:14.5px;transition:.14s ease; } .nav a .ic{width:19px;height:19px;opacity:.85} .nav a:hover{background:var(--tint-green);color:var(--green)} .nav a.active{background:linear-gradient(180deg,#27855A,#1B5E3A);color:#fff;box-shadow:0 8px 20px rgba(27,94,58,.30)} .nav a.active .ic{opacity:1} .sidebar-foot{border-top:1px solid var(--hairline);padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:8px} .who{display:flex;flex-direction:column;line-height:1.25;overflow:hidden} .who span{color:var(--ink);font-weight:650;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .who small{color:var(--muted);text-transform:capitalize} .main{min-width:0;display:flex;flex-direction:column} .topbar{ display:flex;align-items:center;justify-content:space-between;padding:18px 30px; background:rgba(247,250,247,.6); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:5; } .topbar h1{font-size:25px;font-weight:700;letter-spacing:-.025em;color:var(--green-deep)} .env-pill{font-size:12px;color:var(--green);background:rgba(27,94,58,.10);border:1px solid rgba(27,94,58,.18);padding:6px 13px;border-radius:999px;font-weight:600} .view{padding:26px 30px 64px} /* ---------- Glass cards ---------- */ .card,.table-wrap,.kpi{ background:var(--glass-strong); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-border);border-radius:var(--radius); box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.6); } .card-pad{padding:20px} .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--hairline)} .card-head h2{font-size:17px;font-weight:680;color:var(--green-deep)} .card-head h3{font-size:15px} .section-title{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--soft);font-weight:700;margin:28px 0 12px} .muted{color:var(--muted)} .row-gap{display:flex;flex-direction:column;gap:20px} /* KPI */ .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px} .kpi{padding:18px;position:relative;overflow:hidden} .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#27855A,#1B5E3A)} .kpi.alt::before{background:linear-gradient(180deg,#A8201F,#8E1417)} .kpi .label{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em} .kpi .value{font-weight:720;font-size:32px;letter-spacing:-.03em;color:var(--green-deep);margin-top:7px;line-height:1;font-variant-numeric:tabular-nums} .kpi .sub{font-size:12.5px;color:var(--muted);margin-top:7px} /* dashboard widgets */ .grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:20px} .grid-2-even{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media (max-width:1000px){.grid-2,.grid-2-even{grid-template-columns:1fr}} .bars{display:flex;align-items:flex-end;gap:14px;height:186px;padding:18px 8px 6px} .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end} .bar{width:62%;max-width:44px;background:linear-gradient(180deg,#2f9462,#1B5E3A);border-radius:9px 9px 4px 4px;min-height:4px;transition:.4s ease;box-shadow:0 6px 14px rgba(27,94,58,.22)} .bar:hover{background:linear-gradient(180deg,#bd3a3f,#8E1417);box-shadow:0 6px 14px rgba(142,20,23,.25)} .bar-label{font-size:11.5px;color:var(--muted)} .bar-val{font-size:11px;color:var(--green-deep);font-weight:650} .list{display:flex;flex-direction:column} .list-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 20px;border-top:1px solid var(--hairline-2)} .list-item:first-child{border-top:none} .list-item .li-main{display:flex;flex-direction:column;min-width:0} .li-main strong{font-size:14px;font-weight:620} .li-main small{color:var(--muted)} .li-right{text-align:right;white-space:nowrap} /* toolbar / search */ .toolbar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:18px} .toolbar .spacer{flex:1} .search{position:relative;flex:1;min-width:220px;max-width:440px} .search input{padding-left:38px} .search .si{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--soft)} /* table */ .table-wrap{overflow:hidden} table{width:100%;border-collapse:collapse;font-size:14px} thead th{ text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--soft); font-weight:700;padding:13px 16px;background:rgba(245,241,230,.5);border-bottom:1px solid var(--hairline);white-space:nowrap; } tbody td{padding:13px 16px;border-bottom:1px solid var(--hairline-2);vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:rgba(27,94,58,.05)} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} td.actions{text-align:right;white-space:nowrap} .t-empty{padding:48px;text-align:center;color:var(--muted)} .t-strong{font-weight:620} .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--muted)} /* badges */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;white-space:nowrap} .badge.green{background:rgba(27,94,58,.10);color:var(--green);border:1px solid rgba(27,94,58,.20)} .badge.red{background:rgba(142,20,23,.09);color:var(--oxblood);border:1px solid rgba(142,20,23,.20)} .badge.amber{background:rgba(183,121,31,.12);color:#9a6713;border:1px solid rgba(183,121,31,.24)} .badge.grey{background:rgba(60,70,64,.08);color:var(--muted);border:1px solid rgba(60,70,64,.16)} .lessons-pill{font-weight:700;font-variant-numeric:tabular-nums} .pill-action{padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.7);border:1px solid var(--hairline)} /* modal */ .modal-back{position:fixed;inset:0;background:rgba(12,32,22,.40);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:44px 16px;z-index:50;overflow:auto} .modal{ background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px); border:1px solid rgba(255,255,255,.85);border-radius:22px; box-shadow:var(--shadow-lg);width:100%;max-width:640px;animation:pop .16s ease } .modal.lg{max-width:880px} @keyframes pop{from{transform:translateY(10px) scale(.99);opacity:0}to{transform:none;opacity:1}} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--hairline)} .modal-head h2{font-size:19px;font-weight:700;color:var(--green-deep)} .modal-head .x{border:none;background:rgba(0,0,0,.04);font-size:18px;line-height:1;color:var(--muted);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center} .modal-head .x:hover{background:rgba(142,20,23,.1);color:var(--oxblood)} .modal-body{padding:24px} .modal-foot{display:flex;justify-content:flex-end;gap:11px;padding:18px 24px;border-top:1px solid var(--hairline);background:rgba(245,241,230,.4);border-radius:0 0 22px 22px} /* profile blocks */ .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px} .kv>div{min-width:0} .kv .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);font-weight:600} .kv .v{font-size:14.5px;margin-top:3px;overflow-wrap:anywhere;word-break:break-word} .balance-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:4px 0 6px} .balance-box{background:rgba(245,241,230,.5);border:1px solid var(--hairline);border-radius:16px;padding:14px;text-align:center} .balance-box .n{font-size:26px;font-weight:720;letter-spacing:-.02em;color:var(--green-deep);font-variant-numeric:tabular-nums} .balance-box .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .subtab{display:flex;gap:4px;margin:20px 0 12px;border-bottom:1px solid var(--hairline)} .subtab button{border:none;background:none;padding:9px 14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;font-size:13.5px} .subtab button.active{color:var(--green);border-bottom-color:var(--green)} .ledger-in{color:var(--green);font-weight:650} .ledger-out{color:var(--oxblood);font-weight:650} /* toast */ .toast-root{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:11px;z-index:80} .toast{ background:rgba(20,44,30,.86);color:#fff;padding:13px 17px;border-radius:14px; -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px); border:1px solid rgba(255,255,255,.12); box-shadow:0 16px 40px rgba(0,0,0,.30);font-size:14px;font-weight:550;max-width:360px;animation:slideIn .2s ease } .toast.err{background:rgba(120,17,20,.9)} .toast.warn{background:rgba(122,80,18,.9)} @keyframes slideIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}} /* loading */ .loading{padding:54px;text-align:center;color:var(--muted)} .spinner{width:28px;height:28px;border:3px solid rgba(27,94,58,.18);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px} @keyframes spin{to{transform:rotate(360deg)}} /* misc */ .inline-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap} .tag-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .note-text{white-space:pre-wrap;font-size:13.5px} pre.json{background:rgba(16,38,26,.92);color:#d6e7db;padding:16px;border-radius:14px;overflow:auto;font-size:12.5px;line-height:1.5;max-height:340px} .help-banner{background:rgba(27,94,58,.08);border:1px solid rgba(27,94,58,.18);color:#2c5f43;border-radius:14px;padding:13px 17px;font-size:13.5px;margin-bottom:18px} /* responsive */ @media (max-width:780px){ .app{grid-template-columns:1fr} .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:none;border-bottom:1px solid var(--glass-border)} .nav{flex-direction:row;flex-wrap:wrap;flex-basis:100%;margin-top:10px} .nav a{padding:9px 12px} .sidebar-foot{flex-basis:100%} .form-grid{grid-template-columns:1fr} .balance-strip{grid-template-columns:1fr 1fr 1fr} .topbar,.view{padding-left:18px;padding-right:18px} } /* ============================================================ Modern additions: proactive home, one-tap attendance, ⌘K palette ============================================================ */ /* --- Needs attention today --- */ .attention{margin-bottom:20px} .attention-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:2px 2px 12px} .attention-head h2{font-size:18px;color:var(--green-deep)} .attention-head .muted{font-size:12.5px;color:var(--muted);font-weight:600} .attention-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .attn-card{background:var(--glass-strong);border:1px solid var(--glass-border);border-top:3px solid var(--hairline);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);padding:14px 14px 8px} .attn-card.urgent{border-top-color:var(--oxblood)} .attn-card.warn{border-top-color:var(--warn)} .attn-card.info{border-top-color:var(--green-bright)} .attn-card.birthday{border-top-color:var(--green)} .attn-card-head{display:flex;align-items:center;gap:9px;margin-bottom:6px} .attn-count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:9px;font-weight:720;font-size:14px;background:var(--tint-green);color:var(--green-deep)} .attn-card.urgent .attn-count{background:rgba(142,20,23,.10);color:var(--oxblood)} .attn-card.warn .attn-count{background:rgba(183,121,31,.14);color:#9a6713} .attn-card-head h3{font-size:13.5px;font-weight:650;color:var(--ink);letter-spacing:-.01em} .attn-items{display:flex;flex-direction:column} .attn-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--hairline-2);padding:9px 4px;cursor:pointer;border-radius:8px;font:inherit;color:inherit;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .attn-item:first-child{border-top:none} .attn-item:hover{background:var(--tint-green)} .attn-item .ai-main{display:flex;flex-direction:column;gap:1px;min-width:0} .attn-item .ai-main strong{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .attn-item .ai-main small{font-size:11.5px;color:var(--muted)} .attn-chev{color:var(--soft);font-size:18px;line-height:1;flex:none} .attn-clear{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:16px 18px;color:var(--muted);font-weight:560;font-size:14px} /* --- One-tap attendance --- */ .att-hint{font-size:12.5px;color:var(--muted);margin:12px 2px 4px} .att-note{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit} .seg{display:inline-flex;background:rgba(27,94,58,.06);border:1px solid var(--hairline);border-radius:11px;padding:3px;gap:2px} .seg button{border:none;background:none;font:inherit;font-size:13px;font-weight:560;color:var(--muted);padding:6px 12px;border-radius:8px;cursor:pointer;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:.14s} .seg button:hover{color:var(--ink)} .seg button.on{background:#fff;color:var(--green-deep);box-shadow:var(--shadow-sm);font-weight:640} .att-seg button[data-v=absent].on{color:var(--oxblood)} .att-seg button[data-v=late].on{color:#9a6713} .att-pill{font-size:11.5px;font-weight:640;color:var(--green);background:rgba(27,94,58,.10);border:1px solid rgba(27,94,58,.18);padding:3px 9px;border-radius:999px} tr.att-done{opacity:.72} .att-allmarked{font-size:13px;color:var(--muted);font-weight:560} /* --- ⌘K command palette --- */ .cmdk-open{display:inline-flex;align-items:center;gap:7px} .cmdk-open .cmdk-glyph{font-size:15px} .cmdk-open kbd,.cmdk-foot kbd{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted);background:rgba(20,60,40,.06);border:1px solid var(--hairline);border-bottom-width:2px;border-radius:6px;padding:1px 6px;margin:0 1px} .cmdk-back{position:fixed;inset:0;background:rgba(12,32,22,.40);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;z-index:60} .cmdk{width:100%;max-width:560px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);overflow:hidden;display:flex;flex-direction:column;max-height:70vh} .cmdk-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--hairline)} .cmdk-ic{font-size:18px;color:var(--soft)} .cmdk-input{flex:1;border:none;background:none;outline:none;font:inherit;font-size:16px;color:var(--ink)} .cmdk-list{overflow:auto;padding:6px} .cmdk-sec{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);padding:10px 10px 4px} .cmdk-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:10px;padding:9px 11px;cursor:pointer;font:inherit;color:var(--ink);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .cmdk-item .cmdk-lab{font-size:14px;font-weight:560} .cmdk-item .cmdk-hint{font-size:12px;color:var(--muted)} .cmdk-item.active{background:var(--green);color:#fff} .cmdk-item.active .cmdk-hint{color:rgba(255,255,255,.82)} .cmdk-empty{padding:22px;text-align:center;color:var(--muted);font-size:14px} .cmdk-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--hairline);font-size:11.5px;color:var(--soft)} .cmdk-foot span{display:inline-flex;align-items:center;gap:4px} /* ============================================================ 2026 refresh — gloss, depth & tasteful motion (mix: lively base · premium detail · a few bold, delightful moments) ============================================================ */ :root{ --spring:cubic-bezier(.34,1.4,.56,1); /* gentle overshoot */ --ease:cubic-bezier(.22,.61,.36,1); /* smooth ease-out */ --shadow-hover:0 22px 46px rgba(18,48,33,.16), 0 5px 14px rgba(18,48,33,.08); --glow-green:0 10px 26px rgba(27,94,58,.34); } /* --- rounder, glossier surfaces --- */ .card,.kpi{ background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74)); border-radius:24px; box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9); transition:transform .32s var(--spring), box-shadow .32s var(--ease); } .table-wrap{border-radius:22px} .attn-card{border-radius:18px;transition:transform .28s var(--spring), box-shadow .28s var(--ease)} .kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover), inset 0 1px 0 rgba(255,255,255,.95)} .card:hover{box-shadow:var(--shadow-hover), inset 0 1px 0 rgba(255,255,255,.9)} .attn-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)} .balance-box{border-radius:18px;transition:transform .26s var(--spring)} .balance-box:hover{transform:translateY(-2px)} /* --- buttons: springy + a shiny sweep on the primary --- */ .btn{border-radius:14px;transition:transform .22s var(--spring), box-shadow .22s var(--ease), filter .2s, background .2s} .btn:hover{transform:translateY(-2px) scale(1.015)} .btn:active{transform:translateY(0) scale(.955);transition-duration:.06s} .btn-sm{border-radius:11px} .btn-block{border-radius:15px} .btn-primary{position:relative;overflow:hidden;box-shadow:var(--glow-green), inset 0 1px 0 rgba(255,255,255,.28)} .btn-primary:hover{box-shadow:0 16px 34px rgba(27,94,58,.40), inset 0 1px 0 rgba(255,255,255,.3)} .btn-primary::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none} .btn-primary:hover::after{left:135%} /* --- inputs a touch rounder --- */ .field input,.field select,.field textarea,.search input,select.input{border-radius:13px} /* --- nav: bouncy hover, glossy active --- */ .nav a{transition:transform .18s var(--spring), background .16s, color .16s, box-shadow .18s} .nav a:hover{transform:translateX(3px)} .nav a.active{box-shadow:var(--glow-green), inset 0 1px 0 rgba(255,255,255,.25)} .nav a.active:hover{transform:none} /* --- lists & rows come alive --- */ .list-item{transition:background .16s var(--ease)} .list-item:hover{background:var(--tint-green)} .attn-item{transition:background .15s, transform .18s var(--spring)} .attn-item:hover{transform:translateX(3px)} .attn-chev{transition:transform .18s var(--spring)} .attn-item:hover .attn-chev{transform:translateX(4px)} .cmdk-item{transition:background .12s, transform .12s} .seg button{transition:background .16s var(--ease), color .16s, box-shadow .16s, transform .16s var(--spring)} .seg button.on{transform:translateY(-1px)} .modal-head .x{transition:background .16s, transform .16s var(--spring)} .modal-head .x:hover{transform:rotate(90deg)} /* --- entrance choreography (replays on every page load) --- */ @keyframes riseIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} @keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.965)}to{opacity:1;transform:none}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}} .view>*{animation:riseIn .52s var(--ease) both} .view>*:nth-child(1){animation-delay:.02s} .view>*:nth-child(2){animation-delay:.09s} .view>*:nth-child(3){animation-delay:.16s} .view>*:nth-child(4){animation-delay:.23s} .view>*:nth-child(n+5){animation-delay:.29s} /* KPI hero: count in individually */ .kpi-grid{animation:none} .kpi{animation:riseIn .5s var(--ease) both} .kpi:nth-child(1){animation-delay:.06s} .kpi:nth-child(2){animation-delay:.12s} .kpi:nth-child(3){animation-delay:.18s} .kpi:nth-child(4){animation-delay:.24s} .kpi:nth-child(5){animation-delay:.30s} /* attention cards: stagger the children, not the block */ .attention{animation:none} .attention-head{animation:riseIn .5s var(--ease) both} .attention-grid>.attn-card{animation:riseIn .5s var(--ease) both} .attention-grid>.attn-card:nth-child(1){animation-delay:.05s} .attention-grid>.attn-card:nth-child(2){animation-delay:.11s} .attention-grid>.attn-card:nth-child(3){animation-delay:.17s} .attention-grid>.attn-card:nth-child(4){animation-delay:.23s} /* revenue chart bars grow up */ .bar{transform-origin:bottom;animation:barGrow .7s var(--spring) both;transition:background .25s, box-shadow .25s} .bars .bar-col:nth-child(1) .bar{animation-delay:.30s} .bars .bar-col:nth-child(2) .bar{animation-delay:.36s} .bars .bar-col:nth-child(3) .bar{animation-delay:.42s} .bars .bar-col:nth-child(4) .bar{animation-delay:.48s} .bars .bar-col:nth-child(5) .bar{animation-delay:.54s} .bars .bar-col:nth-child(6) .bar{animation-delay:.60s} /* overlays get a springy entrance */ .modal{animation:popIn .3s var(--spring)} .modal-back{animation:fadeIn .18s ease} .cmdk{animation:popIn .26s var(--spring)} .cmdk-back{animation:fadeIn .15s ease} .toast{animation:popIn .28s var(--spring)} /* --- a little more breathing room --- */ .view{padding:30px 34px 74px} .kpi-grid{gap:18px} .attention-grid{gap:16px} /* --- respect reduced-motion preferences --- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;transition-duration:.001ms !important} .view>*,.kpi,.attn-card,.balance-box{transform:none !important} } /* ============================================================ Brand warmth — sand/beige surfaces, forest-green + oxblood accents (less white). Overrides the glass-white surfaces. ============================================================ */ :root{ --sand:#E4D8BE; --sand-deep:#DCCFB0; --cream-1:#FCF7EA; --cream-2:#F4EAD4; --cream-side:#EFE6CF; --warm-line:rgba(120,92,40,.18); --warm-line-2:rgba(120,92,40,.11); --warm-shadow-sm:0 1px 2px rgba(74,54,20,.07), 0 10px 22px rgba(74,54,20,.08); --warm-shadow:0 20px 44px rgba(74,54,20,.14), 0 4px 12px rgba(74,54,20,.08); --warm-ink:#5a5236; } /* warm sand canvas */ body{ background: radial-gradient(760px 560px at 3% -8%, rgba(27,94,58,.20), transparent 56%), radial-gradient(720px 560px at 105% 0%, rgba(142,20,23,.12), transparent 54%), radial-gradient(900px 720px at 52% 122%, rgba(255,251,240,.55), transparent 60%), linear-gradient(160deg,#EADFC8 0%,#E4D8BE 52%,#ECE2CD 100%); } /* warm cream cards (were white glass) */ .card,.kpi{ background:linear-gradient(180deg,var(--cream-1),var(--cream-2)); border:1px solid var(--warm-line); box-shadow:var(--warm-shadow-sm), inset 0 1px 0 rgba(255,255,255,.55); } .card:hover{box-shadow:var(--warm-shadow), inset 0 1px 0 rgba(255,255,255,.55)} .kpi:hover{box-shadow:var(--warm-shadow), inset 0 1px 0 rgba(255,255,255,.65)} .kpi.alt{background:linear-gradient(180deg,#FCF4EC,#F5E7D6)} .table-wrap{background:linear-gradient(180deg,var(--cream-1),#F7EEDC);border:1px solid var(--warm-line)} .attn-card{background:linear-gradient(180deg,#FBF6E8,var(--cream-2));border-color:var(--warm-line)} .attn-clear{background:var(--cream-1);border-color:var(--warm-line)} .balance-box{background:rgba(233,221,195,.55);border-color:var(--warm-line)} /* hairlines → warm */ .card-head{border-bottom-color:var(--warm-line)} .list-item{border-top-color:var(--warm-line-2)} .attn-item{border-top-color:var(--warm-line-2)} tbody td{border-bottom-color:var(--warm-line-2)} thead th{background:rgba(228,216,190,.6);border-bottom-color:var(--warm-line);color:var(--green-700)} tbody tr:hover{background:rgba(27,94,58,.06)} .section-title{color:var(--green-700)} /* sidebar → warm cream with green nav + oxblood-free chrome */ .sidebar{background:linear-gradient(180deg,#F1E8D2,#E9DFC6);border-right:1px solid var(--warm-line)} .brand-text strong{color:var(--green-deep)} .brand-text span{color:var(--warm-ink)} .nav a{color:var(--warm-ink)} .nav a:hover{background:rgba(27,94,58,.10);color:var(--green-deep)} .nav a.active{color:#F5F1E6} .sidebar-foot{border-top-color:var(--warm-line)} .who span{color:var(--green-deep)} .who small{color:var(--warm-ink)} /* topbar → warm with a green hairline */ .topbar{background:rgba(244,235,214,.72);border-bottom:1px solid rgba(27,94,58,.16)} /* inputs → warm off-white, not stark white */ .field input,.field select,.field textarea,.search input,select.input{background:rgba(255,252,244,.82);border-color:var(--warm-line)} .field input:focus,.field select:focus,.field textarea:focus,.search input:focus,select.input:focus{background:#fffdf7} /* overlays → warm cream */ .cmdk{background:#FBF6E9;border-color:var(--warm-line)} .cmdk-input-wrap{border-bottom-color:var(--warm-line)} .cmdk-foot{border-top-color:var(--warm-line)} .modal{background:rgba(251,246,233,.92);border:1px solid rgba(255,255,255,.6)} .modal-head{border-bottom-color:var(--warm-line)} .modal-foot{background:rgba(236,226,202,.5);border-top-color:var(--warm-line)} .seg{background:rgba(27,94,58,.08);border-color:var(--warm-line)} .seg button.on{background:#FCF7EA} .att-note{border-color:var(--warm-line);background:rgba(255,252,244,.8)} /* ============================================================ Lighten the beige — softer warm ivory (keep the warmth, less sand). Green + oxblood accents unchanged. ============================================================ */ :root{ --cream-1:#FDFBF4; --cream-2:#F8F2E6; --cream-side:#F4EEE0; --sand:#EFE9DB; --sand-deep:#E9E2D0; --warm-line:rgba(120,92,40,.15); --warm-line-2:rgba(120,92,40,.09); } body{ background: radial-gradient(760px 560px at 3% -8%, rgba(27,94,58,.15), transparent 56%), radial-gradient(720px 560px at 105% 0%, rgba(142,20,23,.09), transparent 54%), radial-gradient(900px 720px at 52% 122%, rgba(255,253,247,.6), transparent 60%), linear-gradient(160deg,#F2ECDF 0%,#EDE7D8 52%,#F4EFE4 100%); } .card,.kpi{background:linear-gradient(180deg,var(--cream-1),var(--cream-2))} .kpi.alt{background:linear-gradient(180deg,#FEF8F1,#F9EFE2)} .table-wrap{background:linear-gradient(180deg,#FDFBF4,#FAF4E8)} .attn-card{background:linear-gradient(180deg,#FDFAF1,var(--cream-2))} .attn-clear{background:var(--cream-1)} .sidebar{background:linear-gradient(180deg,#F6F0E2,#EFE8D8)} .balance-box{background:rgba(240,232,214,.5)} thead th{background:rgba(238,229,209,.55)} .topbar{background:rgba(249,244,233,.72)} .seg button.on{background:#FDFBF4} .cmdk{background:#FDFAF1} .modal{background:rgba(253,250,242,.93)} /* --- attendance: today's-class quick chips --- */ .att-today{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px} .att-today-lab{font-size:12px;font-weight:640;color:var(--green-700);text-transform:uppercase;letter-spacing:.04em;margin-right:2px} .chip{border:1px solid var(--warm-line);background:var(--cream-1);color:var(--ink);font:inherit;font-size:13px;font-weight:560;padding:6px 13px;border-radius:999px;cursor:pointer;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:transform .16s var(--spring), background .16s, border-color .16s, color .16s} .chip:hover{transform:translateY(-1px);border-color:rgba(27,94,58,.4);color:var(--green-deep)} .chip.on{background:linear-gradient(180deg,#27855A,#1B5E3A);color:#F5F1E6;border-color:transparent;box-shadow:var(--glow-green)} /* --- reminders + dashboard header button --- */ .att-head-right{display:flex;align-items:center;gap:12px} .rem-list{max-height:58vh;overflow:auto;margin-top:4px} .rem-row .li-main{gap:2px} .rem-right{display:flex;align-items:center;gap:12px;white-space:nowrap} .rem-weeks{font-size:12px} /* ============================================================ Themed dropdowns — custom