/* Registry visual system: emerald, warm paper, readable data surfaces. */
.workflow-menu { display:flex; gap:6px; overflow-x:auto; padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--surface); margin-bottom:12px; }
.workflow-tab { display:flex; align-items:center; justify-content:center; gap:9px; padding:13px 16px; border-radius:9px; font-size:13px; color:var(--muted); white-space:nowrap; flex:1; min-height:44px; }
.workflow-tab.is-active { background:var(--soft); color:var(--accent); font-weight:600; }
.workflow-tab:hover { background:var(--soft); }
.workflow-panel { padding:18px 0 26px; }
.workflow-description { font-size:12px; color:var(--muted); line-height:1.8; margin:0 0 14px; }
.workflow-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.workflow-action { display:flex; gap:14px; align-items:center; text-align:left; padding:18px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); min-height:90px; }
.workflow-action:hover { border-color:var(--accent); background:var(--soft); }
.workflow-action > i:first-child { color:var(--accent); font-size:20px; width:25px; text-align:center; }
.workflow-action > i:last-child { margin-left:auto; color:var(--muted); font-size:10px; }
.workflow-action strong { display:block; font-size:13px; font-weight:500; }
.workflow-action small { display:block; font-size:11px; color:var(--muted); line-height:1.7; margin-top:5px; }
@media(max-width:767px) { .workflow-actions { grid-template-columns:1fr; } .workflow-action { min-height:76px; padding:14px; } .workflow-tab { font-size:12px; padding:11px; } }
:root { --page:#f4f7f6; --surface:#fff; --ink:#18372f; --muted:#64766f; --line:#dfe8e3; --accent:#087f60; --soft:#eaf5ef; }
.dark { --page:#101c19; --surface:#192923; --ink:#e3eee8; --muted:#a4b7ad; --line:#30473b; --accent:#34b88e; --soft:#213d30; }
body { background:var(--page); color:var(--ink); -webkit-font-smoothing:antialiased; }
button, input, select { touch-action:manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #33b78f; outline-offset:3px; }
.app-navigation { background:var(--surface); border-color:var(--line); box-shadow:none; }
.app-navigation > div { min-height:82px; max-width:1760px; margin:auto; gap:20px; }
.app-navigation h1 { letter-spacing:-.5px; }
.app-navigation img { width:44px; height:48px; }
.app-navigation .btn { min-height:40px; border-color:transparent; background:transparent; }
.app-navigation .btn:hover { background:var(--soft); }
.workspace { max-width:1760px; margin:0 auto; padding-top:34px; }
.page-intro { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:28px; }
.eyebrow { font-size:10px; letter-spacing:2px; font-weight:600; color:var(--accent); margin-bottom:8px; }
.page-intro h2 { font-size:32px; font-weight:600; letter-spacing:-1px; line-height:1.4; }
.page-intro p { font-size:14px; color:var(--muted); margin-top:6px; }
.intro-note { display:flex; gap:14px; align-items:center; color:var(--muted); font-size:11px; line-height:1.9; }
.intro-note i { font-size:24px; background:var(--soft); color:var(--accent); padding:16px; border-radius:16px; }
.intro-note strong { font-weight:400; }
#dashboardSummary { gap:16px; margin-bottom:28px; }
#dashboardSummary .card { position:relative; padding:22px!important; margin:0; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:0 3px 10px #173c2403; overflow:hidden; }
#dashboardSummary .card:after { content:''; position:absolute; right:24px; top:26px; width:12px; height:12px; border-radius:50%; background:#8da9c9; box-shadow:0 0 0 7px #8da9c918; }
#dashboardSummary .card:nth-child(2):after { background:#079b71; box-shadow:0 0 0 7px #079b7118; }
#dashboardSummary .card:nth-child(3):after { background:#9480c5; box-shadow:0 0 0 7px #9480c518; }
#dashboardSummary .card:nth-child(4):after { background:#cb866e; box-shadow:0 0 0 7px #cb866e18; }
#dashboardSummary .card > div:first-child { color:var(--muted)!important; font-size:13px; padding-right:25px; }
#dashboardSummary .card > div:last-child { color:var(--ink)!important; font-size:34px; font-weight:600; margin-top:12px; line-height:1.2; font-variant-numeric:tabular-nums; }
.card, .student-panel { border-radius:16px; border-color:var(--line); box-shadow:0 4px 20px #15352303; }
.filter-card { padding:24px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.section-heading h3 { font-size:15px; font-weight:600; color:var(--ink); }
.section-heading i { margin-right:8px; color:var(--accent); }
.section-heading > span { color:var(--muted); font-size:11px; }
.btn { min-height:42px; border-radius:9px; font-size:12px; padding:10px 14px; font-weight:500; }
.btn-primary { background:#087f60; border-color:#087f60; }
.btn-primary:hover { background:#056349; border-color:#056349; }
.btn-success { background:#edf6f1; color:#086548; border-color:#d3e9dc; }
.btn-success:hover { background:#dceee3; }
.btn-secondary { border-color:var(--line); box-shadow:none; }
.input-field { min-height:44px; border-radius:9px; border-color:var(--line); padding-top:10px; padding-bottom:10px; }
.input-field:focus { border-color:var(--accent); box-shadow:0 0 0 3px #087f6015; }
#quickSearchInput { padding-left:36px; }
.filter-card .fa-search { top:15px; }
#schoolYearFilter { background:var(--soft); border-color:var(--line); color:var(--ink); }
.student-panel > div:first-child { padding:18px 22px; background:var(--surface); }
.student-panel .table-container { border:0; border-radius:0; box-shadow:none; height:clamp(400px,56vh,720px); }
th { padding:16px 18px; background:#f1f6f3; border-bottom:1px solid var(--line); font-size:11px; color:#597064; }
td { padding:16px 18px; font-size:13px; }
#studentTable tbody tr:nth-child(even) { background:#f9fbfa; }
#studentTable tbody tr:hover td { background:#edf6f0; }
#studentTable .rt-name-cell { font-weight:500; }
input[type=checkbox] { accent-color:#087f60; width:16px; height:16px; }
#paginationButtons button { min-width:36px; min-height:36px; border-radius:8px; }
.modal-content { border-radius:20px; box-shadow:0 24px 80px #081e2333; }
.modal-header { padding-bottom:20px; }
.modal-close { min-width:40px; min-height:40px; border-radius:50%; background:var(--soft); }
.modal-overlay { background:#102c255c; backdrop-filter:blur(5px); }
#loginOverlay { background:radial-gradient(ellipse at 10% 20%,#daeade,transparent 55%),var(--page); padding:24px; overflow-y:auto; }
#loginOverlay > div { border-radius:24px; box-shadow:0 24px 80px #143f2612; border-color:var(--line); }
#loginForm input { min-height:48px; border-radius:10px; }
#loginForm button { background:#087f60; min-height:48px; border-radius:10px; box-shadow:none; }
.dark body { background:var(--page); }
.dark #dashboardSummary .card, .dark .app-navigation, .dark .card, .dark .modal-content { background:var(--surface)!important; border-color:var(--line)!important; }
.dark #studentTable tbody tr:nth-child(even), .dark th { background:#1b3026; }
.dark #studentTable tbody tr:hover td { background:#294536; }
.dark .btn-success { background:#254332; color:#9cdec0; border-color:#365943; }
.dark #loginOverlay { background:radial-gradient(ellipse at 10% 20%,#234031,transparent 55%),var(--page); }
@media(min-width:1280px) { .filter-card > div:last-child { flex-direction:column; align-items:stretch; } .filter-card > div:last-child > div:first-child { width:100%; grid-template-columns:repeat(12,minmax(0,1fr)); } .filter-card > div:last-child > div:first-child > div:nth-child(1) { grid-column:span 2; } .filter-card > div:last-child > div:first-child > div:nth-child(2) { grid-column:span 3; } .filter-card > div:last-child > div:first-child > div:nth-child(3) { grid-column:span 5; align-self:end; } .filter-card > div:last-child > div:first-child > div:nth-child(4) { grid-column:span 2; align-self:end; } .filter-card > div:last-child > div:last-child { padding-top:16px; border-top:1px solid var(--line); justify-content:flex-start; } }
@media(max-width:767px) { .app-navigation > div { flex-wrap:wrap; gap:12px; padding:14px 16px; } .app-navigation > div > div:last-child { width:100%; gap:6px; justify-content:flex-end; border-top:1px solid var(--line); padding-top:10px; } .app-navigation .btn { font-size:11px; padding:8px 10px; } .workspace { padding:22px 14px; } .page-intro h2 { font-size:26px; } .page-intro p { font-size:12px; } .intro-note, .section-heading > span { display:none; } #dashboardSummary { gap:10px; } #dashboardSummary .card { padding:17px!important; border-radius:12px; } #dashboardSummary .card > div:last-child { font-size:28px; } #dashboardSummary .card:after { right:20px; width:8px; height:8px; } .filter-card { padding:16px; } .student-panel > div:last-child { flex-wrap:wrap; gap:12px; justify-content:center; } .selection-bar { width:calc(100% - 24px); border-radius:16px; padding:12px; flex-wrap:wrap; justify-content:center; gap:8px; bottom:12px; } .selection-bar .btn-tool { padding:8px; font-size:11px; } }
@media(prefers-reduced-motion:reduce) { *, *:before, *:after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }