/* FuticFlow reference composition. All colors come from the central theme. */
body{font-size:16px;line-height:1.75}
.sidebar{background:var(--ink);border:0;padding:34px 20px}
.brand,.brand strong{color:var(--on-dark)}
.brand small,.school-label,.sidebar-footer{color:var(--on-dark-muted)}
.logo{background:var(--accent);color:var(--ink);border:0;border-radius:12px;width:49px;height:49px;font-size:31px;font-weight:800}
.brand strong{font-size:37px;font-weight:800}
.brand small{font-size:12px}
.school-label{border-color:var(--on-dark-line);font-size:13px}
nav{gap:10px}nav button{color:var(--on-dark-muted);font-size:14px;font-weight:500;border-right:3px solid transparent;padding:13px 12px;border-radius:11px}
nav button.active{background:var(--on-dark-soft);color:var(--on-dark);border-color:var(--accent)}
nav button:hover{background:var(--on-dark-soft);color:var(--on-dark)}
.sidebar-footer>div{color:var(--accent);font-weight:700;font-size:20px;letter-spacing:0}
.live-dot{background:var(--accent)}
main{padding:0 38px}.topbar{padding:28px 0 24px;border:0;margin-bottom:14px}
h1{font-size:32px;font-weight:800;letter-spacing:-.8px}
h2{font-size:22px;font-weight:700;letter-spacing:-.4px}
.eyebrow{font-size:13px}.topbar-right .badge{font-size:12px;padding:6px 14px}
.hero{background:transparent;border:0;border-radius:0;padding:12px 0 28px;gap:30px;box-shadow:none}
.hero .eyebrow{font-size:15px;font-weight:500;margin-bottom:14px}
.hero h2.reference-title{font-size:44px;font-weight:800;line-height:1.45;letter-spacing:-1.5px;margin:0 0 18px}
.reference-title span{display:block;color:var(--primary)}
.hero p{font-size:15px;line-height:1.85;max-width:560px}
.hero-date{background:var(--surface);border:1px solid var(--subtle-line);border-radius:19px;padding:22px;min-width:205px;box-shadow:var(--shadow)}
.hero-date label{font-size:13px}.hero-date input{font-size:17px;font-weight:600;padding:10px 0}.hero-date small{font-size:12px}
.stats{gap:18px;margin-bottom:28px}.stat{padding:22px;border-radius:20px;border-color:var(--subtle-line);box-shadow:var(--shadow)}
.stat-label{font-size:14px}.stat-label span{background:var(--primary-soft);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:16px}
.stat strong{font-size:39px;font-weight:800;line-height:1.6}.stat small{font-size:12px}
.columns{gap:24px}.panel{border-radius:20px;border-color:var(--subtle-line);padding:25px;box-shadow:var(--shadow)}
.panel-head{margin-bottom:22px}.panel-head p{font-size:13px;line-height:1.8}.tag{padding:5px 12px;font-size:12px}
.btn{border-radius:12px;font-size:14px;padding:10px 16px;min-height:44px;font-weight:500}.btn.small{border-radius:9px;font-size:12px;min-height:34px}
.btn.soft{background:var(--primary-soft)}.field{font-size:15px}.field input,.field select,.search{border-radius:12px;padding:11px 13px;font-size:15px;min-height:46px;background:var(--surface)}
.field small,.hint{font-size:13px}.absence-top label{font-size:14px}.absence-top small{font-size:12px}.absence-item{padding:15px 0}
.absence-select{font-size:12px;max-width:105px;border-radius:8px;padding:5px}.absence-list{max-height:350px}
table{font-size:14px}th{font-size:13px;padding:14px 12px;font-weight:500}td{padding:17px 12px}td small{font-size:12px}
.period-pill{width:33px;height:33px;border-radius:10px}.cover-select{font-size:13px;padding:9px;border-radius:10px;max-width:190px}
.notice{font-size:14px;border-radius:13px;padding:14px 17px}.settings-note{font-size:14px;line-height:1.9;border-radius:14px}
.report-item{border-radius:16px;padding:18px;background:var(--surface)}.report-item strong{font-size:15px}.report-item small{font-size:12px}
.owner-brand-card{background:var(--ink);color:var(--on-dark);border-style:solid;border-color:var(--ink);border-radius:20px}
.owner-brand-copy h2{font-size:26px;color:var(--on-dark)}.owner-brand-copy .eyebrow{color:var(--accent)}
.owner-brand-copy p,.owner-brand-action small{color:var(--on-dark-muted)}.owner-brand-mark{background:var(--accent);color:var(--ink);border-radius:13px}
.owner-brand-mark span{color:var(--ink)}.owner-brand-copy .tag{background:var(--on-dark-soft);color:var(--on-dark-muted)}
.owner-brand-action .btn.soft{background:var(--accent);color:var(--ink)}
.empty h3{font-size:20px;font-weight:700}.empty p{font-size:14px;line-height:1.8}.empty{padding:48px 20px}.summary-strip{font-size:13px}
.main-footer{font-size:12px;padding:25px 0}.tab-row button{border-radius:10px;font-size:13px;padding:9px 14px}
@media(max-width:1200px){main{padding:0 24px}.hero h2.reference-title{font-size:36px}.hero{gap:20px}.hero-date{min-width:185px;padding:18px}.stat{padding:18px}.stat-label{font-size:12px}.panel{padding:23px}.absence-list{max-height:230px}}
@media(max-width:850px){.sidebar{background:var(--surface);padding:12px 16px;border-bottom:1px solid var(--line)}nav button{color:var(--muted);font-size:13px;font-weight:600;padding:9px 12px}nav button.active{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}nav button:hover{background:var(--primary-soft);color:var(--primary)}nav button span{font-size:17px}main{padding:0 18px}.topbar{padding:21px 0 14px}h1{font-size:28px}.hero{padding:4px 0 24px;display:block}.hero h2.reference-title{font-size:36px;line-height:1.5;margin-bottom:15px}.hero p{font-size:15px}.hero-date{margin-top:22px;width:100%;padding:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.hero-date label{grid-column:1/-1}.hero-date small{align-self:center}.hero-date input{width:100%;min-width:0}.stats{gap:13px}.stat{padding:18px}.stat strong{font-size:34px}.panel{padding:21px}.owner-brand-copy h2{font-size:24px}.owner-brand-action .btn{width:100%}.main-footer{font-size:11px}}
@media(max-width:420px){.hero h2.reference-title{font-size:31px;letter-spacing:-.8px}.hero-date{grid-template-columns:minmax(0,1fr)}.hero-date small{grid-column:1/-1}.stat{padding:15px}.stat-label{font-size:12px}.stat strong{font-size:32px}.stat small{font-size:11px}.panel{padding:18px}.owner-brand-copy{max-width:calc(100% - 70px)}.owner-brand-copy h2{font-size:21px}.panel-head h2{font-size:20px}}
@media print{.panel{padding:0;border:0;box-shadow:none;border-radius:0}.hero{display:none}.owner-brand-card{display:none}main{padding:0}table{font-size:11px}th,td{padding:8px}.reference-title{display:none}}

/* Reports use stronger brand accents while status colors keep their meaning. */
.report-stats .stat{border:0;position:relative;overflow:hidden;min-height:175px}
.report-stats .stat:nth-child(1){background:var(--ink);color:var(--on-dark)}
.report-stats .stat:nth-child(2){background:var(--primary);color:var(--on-primary)}
.report-stats .stat:nth-child(-n+2) .stat-label,.report-stats .stat:nth-child(-n+2) small{color:var(--on-dark-muted)}
.report-stats .stat:nth-child(-n+2) .stat-label span{background:var(--on-dark-soft);color:var(--on-dark)}
.report-stats .stat:nth-child(1) strong{color:var(--accent)}
.report-stats .stat:nth-child(3){background:var(--brand-lavender)}
.report-stats .stat:nth-child(3) .stat-label span,.report-stats .stat:nth-child(3) strong{color:var(--brand-violet)}
.report-stats .stat:nth-child(3) .stat-label span{background:var(--surface)}
.report-stats .stat:nth-child(4){background:var(--warning-bg);border-bottom:4px solid var(--accent)}
.report-stats .stat:nth-child(4) .stat-label span{color:var(--warning);background:var(--surface)}
.report-distribution{border-top:4px solid var(--brand-violet)}
.report-history{border-top:4px solid var(--primary)}
.report-distribution .panel-head{background:var(--brand-lavender);padding:18px;border-radius:14px}
.report-history .panel-head{background:var(--primary-soft);padding:18px;border-radius:14px}
.report-distribution th{background:var(--brand-lavender);color:var(--ink)}
.report-distribution .has-cover{background:color-mix(in srgb,var(--primary) 3%,var(--surface))}
.report-distribution .has-cover td:first-child{border-right:3px solid var(--primary)}
.report-count{display:inline-grid;place-items:center;min-width:32px;height:30px;border-radius:9px;background:var(--brand-lavender);color:var(--brand-violet)}
.no-cover .report-count{background:var(--surface-soft);color:var(--muted)}
.reports-page .bar{height:8px;width:120px;background:var(--subtle-line);margin-top:9px}
.reports-page [data-tone="1"] .bar span{background:var(--brand-violet)}
.reports-page [data-tone="2"] .bar span{background:var(--accent)}
.report-item.history-approved{border-right:4px solid var(--success);background:var(--primary-soft)}
.report-item.history-draft{border-right:4px solid var(--accent);background:var(--warning-bg)}
.report-item .btn{background:var(--surface);color:var(--primary);border-color:var(--primary-border)}
.distribution-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.schedule-view-tabs{margin-bottom:24px}.x-roster-table .cover-select{min-width:155px;max-width:190px}
@media(max-width:850px){.report-stats .stat{min-height:165px}.report-distribution .panel-head,.report-history .panel-head{padding:14px}.reports-page .bar{width:90px}}
@media print{.report-stats .stat{background:var(--surface)!important;color:var(--ink)!important}.report-distribution .panel-head,.report-history .panel-head{background:var(--surface)}.report-distribution .has-cover{background:var(--surface)}}

.teacher-notification{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.teacher-notification .btn{white-space:nowrap}