/* RD Care Period Hub — a clean, responsive reinterpretation of the legacy e-Teacher grids. */
.period-center{--pc-ink:#26384b;--pc-muted:#718196;--pc-stroke:#e4e9f1;--pc-card:#fff;--pc-soft:#f5f8fd;--pc-green:#169a6e;--pc-purple:#6578de;--pc-shadow:0 7px 25px rgba(31,52,91,.055);gap:15px}
.period-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 21px 15px;background:linear-gradient(116deg,#28495d,#315a66 56%,#427d80);border-radius:15px;color:white;box-shadow:var(--pc-shadow)}
.period-top h2,.rd-workspace .period-top h2{color:#fff;font-size:clamp(20px,2.2vw,25px);margin:2px 0 5px;font-weight:700;line-height:1.35}
.period-top p{color:#dcebef;font-size:11px;margin:0}
.period-top .button{background:#fff;border-color:transparent;color:#26675d;font-weight:600;flex-shrink:0;box-shadow:0 3px 14px #00000012}
.period-top .button:hover{background:#e9f8f4}
.period-eyebrow{font-size:10px;color:#b8ebd2;letter-spacing:1px;font-weight:600}
.period-tabs{display:flex;flex-wrap:wrap;gap:8px;background:#fff;padding:7px;border:1px solid var(--pc-stroke);border-radius:12px;box-shadow:var(--pc-shadow)}
.period-tabs button{background:transparent;border:1px solid transparent;border-radius:9px;min-height:42px;padding:10px 16px;font-size:12px;font-weight:600;color:#5a7188;cursor:pointer;transition:background .15s}
.period-tabs button:hover{background:#f4f7fd}
.period-tabs button.active{color:#117751;background:#e8f7f0;border-color:#c7ecdb}
.period-tabs button:focus-visible{outline:3px solid #f7c45b;outline-offset:1px}
.period-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.period-stat{display:flex;align-items:center;gap:13px;background:var(--pc-card);border:1px solid var(--pc-stroke);border-radius:12px;min-height:86px;padding:14px 17px;box-shadow:var(--pc-shadow)}
.period-stat>span{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;border-radius:11px;background:#eef3ff;font-size:22px}
.period-stat:nth-child(2)>span{background:#e6f8f2}
.period-stat:nth-child(3)>span{background:#fff0ed}
.period-stat>div{display:flex;flex-direction:column;min-width:0}
.period-stat strong{font-size:22px;line-height:1.25;font-weight:700;color:#263b55}
.period-stat small{font-size:10px;color:var(--pc-muted);font-weight:500}
.period-center .period-week-panel,.period-center .period-report-panel,.period-center .period-report-details{border-radius:13px;border:1px solid var(--pc-stroke);box-shadow:var(--pc-shadow);padding:18px 19px}
.period-panel-title{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.period-panel-title h3{font-size:16px;color:#33465d;font-weight:700;margin:0}
.period-panel-title p{font-size:11px;line-height:1.65;margin:3px 0 0}
.period-week-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.period-week-controls strong{font-size:11px;font-weight:600;min-width:205px;text-align:center;color:#3f5571}
.period-week-controls .button{min-height:33px;padding:5px 12px;font-size:11px}
.period-week-controls #periodPrevWeek,.period-week-controls #periodNextWeek{font-size:18px;width:33px;padding:0}
.period-jump-label{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;background:#f2f8fc;border:1px solid #e1ebf2;border-radius:8px;color:#586f87;font-size:10px;font-weight:600}
.period-jump-label input{border:0;background:transparent;color:#40556d;font:inherit;font-size:10px;width:123px;min-height:28px;cursor:pointer}
.period-jump-label input:focus-visible{outline:2px solid #279a83}

.period-legend{display:flex;gap:17px;flex-wrap:wrap;font-size:10px;color:#6a798c}
.period-legend span{display:flex;align-items:center;gap:5px}
.period-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#f6ad55}
.period-dot.done{background:#1ebd85}.period-dot.absent{background:#ef6b85}
.period-grid-scroll{width:100%;max-width:100%;overflow-x:auto;border:1px solid #e2e9f0;border-radius:10px;scrollbar-color:#bed2de #f2f7f9;overscroll-behavior-x:contain}
.period-week-grid{width:100%;min-width:1170px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-variant-numeric:tabular-nums;background:#fff}
.period-week-grid th,.period-week-grid td{border-right:1px solid #e5ebf1;border-bottom:1px solid #e5ebf1;text-align:center;padding:6px;vertical-align:middle}
.period-week-grid thead th{height:45px;background:#eff5fa;color:#526a80;font-weight:650;font-size:11px;position:sticky;top:0;z-index:2}
.period-week-grid thead th:first-child{left:0;z-index:4;width:110px}
.period-week-grid .period-day{width:110px;position:sticky;left:0;z-index:3;background:#eaf4ff;color:#205983;font-size:12px;font-weight:700}
.period-week-grid .period-day small{display:block;font-size:10px;font-weight:500;margin-top:2px}
.period-week-grid .period-day-2{background:#fff1f6;color:#ac4871}
.period-week-grid .period-day-3{background:#e8f8ec;color:#3b8754}
.period-week-grid .period-day-4{background:#fff2e4;color:#a35d2b}
.period-week-grid .period-day-5{background:#e8f4ff;color:#376b9e}
.period-week-grid .period-day-6{background:#f1eaff;color:#7857b0}
.period-week-grid .period-day-7{background:#fff0f0;color:#b25a5a}
.period-week-grid tbody tr:last-child>*{border-bottom:0}
.period-week-grid tr>*:last-child{border-right:0}
.period-week-grid tbody td{height:93px}
.period-empty{background:#fafcff}
.period-empty span{color:#d1dae2;font-size:13px}
.period-occupied{background:#fff;padding:4px!important}
.period-slot{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:2px;width:100%;min-height:80px;padding:9px 5px;border-radius:9px;border:1px solid #f4d4a7;background:linear-gradient(180deg,#fff8ec,#fff1de);color:#7c5822;cursor:pointer;text-align:center;transition:transform .15s,box-shadow .15s,border-color .15s}
.period-slot strong{font-size:12px;font-weight:750;color:inherit}
.period-slot span{font-size:10px;line-height:1.4;max-height:29px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.period-slot small{font-size:9px;opacity:.85}
.period-slot em{font-size:9px;font-weight:650;font-style:normal;opacity:.9}
.period-slot.done{background:linear-gradient(180deg,#edfdf6,#def8eb);border-color:#b7ebd1;color:#207653}
.period-slot.absent{background:linear-gradient(180deg,#fff0f3,#ffeaec);border-color:#f6bdc8;color:#a84364}
.period-slot:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 12px rgba(34,52,86,.15);border-color:#90afcd}
.period-slot:focus-visible{outline:3px solid #ffd34e;outline-offset:1px}
.period-slot:disabled{cursor:not-allowed;opacity:.65}
.period-hint{font-size:10px;line-height:1.7;margin-top:0}
.period-empty-state{padding:14px;text-align:center;background:#f6f9fd;border-radius:11px}
.period-report-filters{display:flex;gap:12px;align-items:end;flex-wrap:wrap;background:#f8fafc;border:1px solid #edf0f4;border-radius:11px;padding:12px 14px}
.period-report-filters .field{min-width:170px;flex:1 1 160px}
.period-report-filters input{width:100%;min-height:40px}
.period-report-filters .button{flex:none;margin-bottom:1px}
.period-report-table{min-width:900px}
.period-report-table th,.period-report-table td{white-space:nowrap}
.period-report-table td:nth-child(2){max-width:250px;min-width:180px;white-space:normal}
.period-report-table td:nth-child(2) small{display:block;color:#8797a5;font-size:10px}
.period-report-details .table{min-width:570px}
.period-danger{color:#e15c74}
.period-event{display:inline-block;padding:4px 9px;border-radius:50px;font-size:10px;font-weight:650;background:#f0f4f7;color:#5c6b79}
.period-event-absent{background:#fff0f1;color:#ca4564}
.period-event-late{background:#fff5dc;color:#9d7325}
.period-event-leave{background:#e9f3ff;color:#366da8}
.period-return{margin:0 0 -4px}
.period-return .button{font-size:11px}
[data-theme="dark"] .period-center{--pc-ink:#e1eaf7;--pc-muted:#abbdd3;--pc-stroke:#374a5e;--pc-card:#1c293c;--pc-soft:#17273d}
[data-theme="dark"] .period-tabs{background:#1c293c;border-color:#344559}
[data-theme="dark"] .period-tabs button{color:#b7c9db}
[data-theme="dark"] .period-tabs button:hover{background:#2b3f58}
[data-theme="dark"] .period-tabs button.active{background:#1b554a;color:#dbfff0;border-color:#397c65}
[data-theme="dark"] .period-stat{background:#1c293c;border-color:#35465b}
[data-theme="dark"] .period-stat strong,[data-theme="dark"] .period-panel-title h3{color:#edf5fe}
[data-theme="dark"] .period-week-controls strong{color:#dce6f3}
[data-theme="dark"] .period-grid-scroll{border-color:#34465e}
[data-theme="dark"] .period-week-grid{background:#1c293c}
[data-theme="dark"] .period-week-grid thead th{background:#263d50;color:#d7e6f1}
[data-theme="dark"] .period-week-grid th,[data-theme="dark"] .period-week-grid td{border-color:#3b5064}
[data-theme="dark"] .period-empty{background:#1c293c}
[data-theme="dark"] .period-occupied{background:#22374b}
[data-theme="dark"] .period-report-filters{background:#25364a;border-color:#3a4c60}
[data-theme="dark"] .period-slot.pending{background:#493b2b;border-color:#785833;color:#ffe5be}
[data-theme="dark"] .period-slot.done{background:#1b4d40;border-color:#357e60;color:#d0ffe6}
[data-theme="dark"] .period-slot.absent{background:#562e43;border-color:#9b4c68;color:#ffd8e3}
[data-theme="dark"] .period-event-absent{background:#5d2b40;color:#ffe1e9}
[data-theme="dark"] .period-event-late{background:#554326;color:#ffeba3}
[data-theme="dark"] .period-event-leave{background:#2a4468;color:#e2efff}
[data-theme="dark"] .period-jump-label{background:#263f55;border-color:#426076;color:#d0e3f0}
[data-theme="dark"] .period-jump-label input{color:#ecf6ff}
@media(max-width:850px){
 .period-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .period-stat{gap:8px;padding:11px 10px;min-height:73px}
 .period-stat>span{width:34px;height:34px;flex-basis:34px;font-size:17px}
 .period-stat strong{font-size:18px}
 .period-stat small{font-size:9px}
 .period-panel-title{align-items:start}
 .period-week-controls strong{min-width:175px}
}
@media(max-width:560px){
 .period-top{flex-direction:column;align-items:start;padding:15px}
 .period-top .button{align-self:stretch}
 .period-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .period-tabs button{font-size:9px;padding:9px 4px}
 .period-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
 .period-stat{flex-direction:column;text-align:center;gap:5px;padding:10px 5px}
 .period-stat strong{font-size:19px}
 .period-stat small{font-size:9px}
 .period-center .period-week-panel,.period-center .period-report-panel,.period-center .period-report-details{padding:13px 10px}
 .period-week-controls{width:100%;justify-content:space-between}
 .period-week-controls strong{min-width:0;flex:1;font-size:10px}
 .period-week-controls #periodThisWeek{margin-top:4px;flex:1}
 .period-jump-label{margin-top:4px;flex:1;justify-content:space-between}
 .period-jump-label input{width:110px}
 .period-report-filters{gap:9px}
 .period-report-filters .field{flex-basis:46%;min-width:0}
 .period-report-filters .button{width:100%}
}
@media(prefers-reduced-motion:reduce){.period-slot,.period-tabs button{transition:none!important;transform:none!important}}


/* Optional teaching note on each dated period attendance sheet. */
.teaching-note-card{margin-top:8px;padding:17px 18px;border:1px solid #dce7ef;border-radius:12px;background:linear-gradient(120deg,#f6fcfa,#f7f9ff);display:flex;flex-direction:column;gap:10px}
.teaching-note-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.teaching-note-heading h3{margin:0 0 3px;color:#375a55;font-size:15px;font-weight:650}
.teaching-note-heading p{font-size:11px;margin:0}
.teaching-note-optional{font-size:11px;color:#6c8591;font-weight:450}
.teaching-note-label{color:#405868;font-size:11px;font-weight:600}
.teaching-note-card textarea{display:block;min-height:102px;width:100%;box-sizing:border-box;resize:vertical;padding:12px 14px;border:1px solid #cbdbe4;border-radius:10px;background:#fff;color:#2d3e53;font:inherit;font-size:12px;line-height:1.8}
.teaching-note-card textarea:focus{border-color:#2eaa83;outline:3px solid #d6f4e7}
.teaching-note-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;color:#728597}
.teaching-note-foot #teachingNoteCount{font-variant-numeric:tabular-nums;white-space:nowrap}
.teaching-log-history{display:flex;flex-direction:column;gap:10px;margin:7px 0 10px}
.teaching-log-history h4,.period-report-details h4{font-size:13px;font-weight:650;color:#37536b;margin:6px 0 2px}
.teaching-log-item{padding:13px 15px;background:#f6f9fc;border:1px solid #e5eaf1;border-radius:10px}
.teaching-log-item>div{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.teaching-log-item strong{font-size:11px;color:#266f62}
.teaching-log-item span{font-size:10px}
.teaching-log-item p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.75;margin:7px 0 0;color:#42566c}
[data-theme="dark"] .teaching-note-card{background:#21394a;border-color:#3b5867}
[data-theme="dark"] .teaching-note-heading h3,[data-theme="dark"] .teaching-note-label{color:#d7f1e8}
[data-theme="dark"] .teaching-note-card textarea{background:#172536;border-color:#496070;color:#edf6ff}
[data-theme="dark"] .teaching-log-item{background:#24374a;border-color:#3b4f66}
[data-theme="dark"] .teaching-log-item p{color:#d5e1f2}
[data-theme="dark"] .teaching-log-history h4,[data-theme="dark"] .period-report-details h4{color:#e0ebf7}
@media(max-width:550px){.teaching-note-card{padding:13px}.teaching-note-foot{flex-direction:column;align-items:flex-start;gap:3px}}


/* Teacher-friendly daily registration snapshot within period attendance.
   Daily is a separate read-only source, never automatically copied to a period. */
.daily-class-overview{
 display:flex;flex-direction:column;gap:11px;
 padding:16px 17px;border:1px solid #cfe5de;border-radius:13px;
 background:linear-gradient(120deg,#f0faf6 0%,#f5f9fd 100%);
}
.daily-overview-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.daily-overview-heading h3{margin:0 0 3px;color:#246750;font-size:15px;font-weight:700}
.daily-overview-heading p{margin:0;color:#668075;font-size:11px;line-height:1.7}
.daily-reference-readonly{font-size:10px;font-weight:650;color:#2d8060;background:#e2f6ec;border:1px solid #bfe5d2;border-radius:99px;padding:5px 10px;white-space:nowrap}
.daily-overview-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.daily-overview-stat{min-width:0;display:flex;align-items:center;gap:7px;justify-content:center;flex-wrap:wrap;padding:11px 6px;background:#fff;border:1px solid #e5ecea;border-radius:10px}
.daily-overview-stat>span{font-size:14px;line-height:1}
.daily-overview-stat strong{font-size:19px;color:#345368;line-height:1.2;font-weight:750;font-variant-numeric:tabular-nums}
.daily-overview-stat small{font-size:10px;font-weight:600;color:#667887;white-space:nowrap}
.daily-overview-stat.daily-ref-absent{border-color:#f4cbd2;background:#fff7f8}
.daily-overview-stat.daily-ref-leave{border-color:#cce0f6;background:#f5faff}
.daily-overview-stat.daily-ref-present{border-color:#bfe7cf;background:#f5fff9}
.daily-overview-stat.daily-ref-late{border-color:#f6debc;background:#fffaf2}
.daily-overview-stat.daily-ref-unrecorded{background:#f5f7fa}
.daily-watch{display:flex;flex-direction:column;gap:7px;padding:11px 12px;border:1px solid #efded4;border-radius:10px;background:#fffdf9}
.daily-watch>strong{font-size:11px;color:#775c42}
.daily-watch-students{display:flex;gap:7px;flex-wrap:wrap}
.daily-watch-person{padding:6px 10px;border-radius:8px;font-size:11px;font-weight:550;max-width:100%;overflow-wrap:anywhere}
.daily-watch-empty{margin:0;color:#5e866e;font-size:11px;line-height:1.6}
.daily-reference-hint{margin:0;font-size:10px;line-height:1.7;color:#6f7f8c}
.daily-student-badge{display:inline-flex;align-items:center;margin-top:5px;padding:3px 8px;border-radius:99px;border:1px solid #dfe5ec;font-weight:600;font-size:10px;white-space:nowrap}
.daily-watch-person.daily-ref-absent,.daily-student-badge.daily-ref-absent{background:#ffe8ec;color:#b52d4b;border-color:#f8c4d0}
.daily-watch-person.daily-ref-leave,.daily-student-badge.daily-ref-leave{background:#e6f1ff;color:#2267b6;border-color:#c9dff5}
.daily-student-badge.daily-ref-present{background:#e1f8ea;color:#177b4b;border-color:#b9e9ce}
.daily-student-badge.daily-ref-late{background:#fff0d8;color:#a26815;border-color:#f4ddaf}
.daily-student-badge.daily-ref-unrecorded{background:#f1f3f7;color:#6c798a;border-color:#dde3e9}
[data-theme="dark"] .daily-class-overview{background:#22384a;border-color:#335b59}
[data-theme="dark"] .daily-overview-heading h3{color:#baf5d9}
[data-theme="dark"] .daily-overview-heading p{color:#b2cdc7}
[data-theme="dark"] .daily-overview-stat{background:#24374a;border-color:#446076}
[data-theme="dark"] .daily-overview-stat strong{color:#f0f7ff}
[data-theme="dark"] .daily-overview-stat small{color:#c3d0e1}
[data-theme="dark"] .daily-overview-stat.daily-ref-absent{background:#4b2c3d;border-color:#794657}
[data-theme="dark"] .daily-overview-stat.daily-ref-leave{background:#263e60;border-color:#405f80}
[data-theme="dark"] .daily-overview-stat.daily-ref-present{background:#204639;border-color:#3b6956}
[data-theme="dark"] .daily-overview-stat.daily-ref-late{background:#453b2b;border-color:#706142}
[data-theme="dark"] .daily-overview-stat.daily-ref-unrecorded{background:#2c394a}
[data-theme="dark"] .daily-reference-hint{color:#b0c0d1}
[data-theme="dark"] .daily-watch{background:#34383c;border-color:#695d4c}
[data-theme="dark"] .daily-watch>strong{color:#f6dfbb}
[data-theme="dark"] .daily-watch-empty{color:#c0d7c3}
@media(max-width:800px){.daily-overview-stats{gap:5px}.daily-overview-stat{padding:9px 4px;gap:4px}}
@media(max-width:580px){
 .daily-class-overview{padding:12px}
 .daily-overview-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .daily-overview-stat{gap:5px;padding:10px 5px}
 .daily-overview-stat strong{font-size:16px}
 .daily-overview-stat small{font-size:9px}
}