:root{--sapp-accent:#1d4ed8;--sapp-bg:#f5f7fb;--sapp-card:#ffffff;--sapp-text:#0f172a;--sapp-muted:#64748b;--sapp-border:#dbe4f0;--sapp-success:#16a34a;--sapp-danger:#dc2626;--sapp-warn:#d97706;--sapp-info:#2563eb}
.sapp-wrap,.sapp-portal{color:var(--sapp-text)}
.sapp-wrap .sapp-card,.sapp-portal .sapp-panel-card,.sapp-portal .sapp-login-card{background:#fff;border:1px solid var(--sapp-border);border-radius:20px;box-shadow:0 12px 35px rgba(15,23,42,.08);padding:22px}
.sapp-wrap .sapp-stats,.sapp-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:16px 0}
.sapp-stat-card,.sapp-mini-card{background:linear-gradient(135deg,#eff6ff,#fff);border:1px solid #dbeafe;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px;min-height:96px}
.sapp-stat-card span,.sapp-mini-card span{font-size:1.1rem;font-weight:800}
.sapp-grid-2{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:20px;align-items:start}
.sapp-grid-portal{grid-template-columns:1.2fr 1fr}
.sapp-wrap label{display:block;font-weight:700;margin:0 0 8px}
.sapp-wrap input,.sapp-wrap select,.sapp-wrap textarea,.sapp-portal input,.sapp-portal select,.sapp-portal textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid #cbd5e1;background:#fff;box-sizing:border-box}
.sapp-wrap textarea,.sapp-portal textarea{min-height:90px}
.sapp-permissions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sapp-permissions label,.sapp-class-list label{display:flex;gap:8px;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;font-weight:500}
.sapp-table-wrap{overflow:auto;margin-top:14px}
.sapp-table-wrap table{width:100%;border-collapse:collapse;min-width:720px}
.sapp-table-wrap th,.sapp-table-wrap td{padding:12px 10px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
.sapp-filter-grid,.sapp-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;align-items:end}
.sapp-portal{background:linear-gradient(180deg,#eff6ff 0%,#f8fafc 70%,#fff 100%);padding:22px;border-radius:24px;border:1px solid #dbeafe}
.sapp-login-card{max-width:520px;margin:20px auto;background:linear-gradient(145deg,#fff,#f8fbff)}
.sapp-login-card h2,.sapp-panel-head h2{margin:0 0 8px;font-size:1.8rem}
.sapp-form,.sapp-detail-grid{display:grid;gap:14px}
.sapp-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;background:var(--sapp-accent);color:#fff!important;border:none;border-radius:14px;text-decoration:none;font-weight:700;cursor:pointer;box-shadow:0 10px 20px rgba(29,78,216,.18)}
.sapp-btn-light{background:#fff!important;color:var(--sapp-accent)!important;border:1px solid #bfdbfe;box-shadow:none}
.sapp-error,.sapp-success{padding:12px 14px;border-radius:14px;margin-bottom:14px}
.sapp-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.sapp-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}
.sapp-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}
.sapp-head-actions{display:flex;gap:10px;flex-wrap:wrap}
.sapp-panel-head p,.sapp-hero-note span{margin:0;color:var(--sapp-muted)}
.sapp-student-list,.sapp-mobile-cards{display:grid;gap:14px}
.sapp-student-card,.sapp-student-summary,.sapp-detail-item{border:1px solid #dbe4f0;border-radius:18px;background:#fff;padding:16px}
.sapp-student-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sapp-student-top span,.sapp-student-summary span,.sapp-detail-item span{display:block;color:var(--sapp-muted);font-size:.92rem}
.sapp-attendance-row{display:grid;grid-template-columns:180px 1fr;gap:12px}
.sapp-detail-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.sapp-inline-summary{padding:10px 14px;border-radius:999px;background:#eff6ff;color:#1d4ed8;display:inline-block;font-weight:700}
.sapp-hero-note{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(29,78,216,.08),rgba(124,58,237,.08));border:1px solid #dbeafe;border-radius:18px;padding:16px 18px;margin-bottom:16px}
.sapp-hero-note strong{font-size:1.05rem}
.sapp-calendar{margin-top:12px}
.sapp-calendar-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.sapp-calendar-dow{font-weight:700;text-align:center;font-size:.82rem;color:var(--sapp-muted)}
.sapp-calendar-cell{min-height:56px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:6px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;font-size:.78rem}
.sapp-calendar-cell strong{font-size:.9rem}
.sapp-calendar-cell.status-present{background:#f0fdf4;border-color:#bbf7d0}
.sapp-calendar-cell.status-absent{background:#fef2f2;border-color:#fecaca}
.sapp-calendar-cell.status-leave{background:#fff7ed;border-color:#fed7aa}
.sapp-calendar-cell.status-late{background:#eff6ff;border-color:#bfdbfe}
.sapp-calendar-cell.status-none{background:#f8fafc}
.sapp-calendar-empty{opacity:.35}
.sapp-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.sapp-legend span,.sapp-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;font-size:.82rem;font-weight:700}
.sapp-legend .present,.sapp-badge.status-present,.sapp-badge.status-approved{background:#dcfce7;color:#166534}
.sapp-legend .absent,.sapp-badge.status-absent,.sapp-badge.status-rejected{background:#fee2e2;color:#991b1b}
.sapp-legend .leave,.sapp-badge.status-leave,.sapp-badge.status-pending{background:#ffedd5;color:#9a3412}
.sapp-legend .late,.sapp-badge.status-late{background:#dbeafe;color:#1d4ed8}
.sapp-inline-form{display:grid;grid-template-columns:120px 1fr auto;gap:8px;align-items:center}
.sapp-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media print{body *{visibility:hidden}.sapp-portal,.sapp-portal *{visibility:visible}.sapp-portal{position:absolute;left:0;top:0;width:100%;border:none;padding:0}.sapp-btn,.sapp-head-actions,.sapp-toolbar{display:none!important}.sapp-panel-card,.sapp-login-card{box-shadow:none;border:1px solid #ddd}}
@media (max-width: 900px){.sapp-grid-2,.sapp-grid-portal{grid-template-columns:1fr}.sapp-permissions{grid-template-columns:1fr}.sapp-attendance-row,.sapp-inline-form{grid-template-columns:1fr}.sapp-panel-head{flex-direction:column;align-items:flex-start}.sapp-table-wrap table{min-width:620px}}
@media (max-width: 640px){.sapp-portal{padding:14px;border-radius:18px}.sapp-login-card h2,.sapp-panel-head h2{font-size:1.4rem}.sapp-wrap .sapp-card,.sapp-portal .sapp-panel-card,.sapp-portal .sapp-login-card{padding:16px}.sapp-btn{width:100%}.sapp-toolbar-action,.sapp-head-actions{display:flex;align-items:end;width:100%}.sapp-head-actions .sapp-btn{width:100%}.sapp-calendar-cell{min-height:48px;font-size:.72rem;padding:5px}.sapp-hero-note{padding:14px}}

.sapp-kpi-alert{border-left:4px solid var(--sapp-warn)}
.sapp-parent-hero{background:linear-gradient(135deg, rgba(29,78,216,.10), rgba(124,58,237,.10), rgba(16,185,129,.08));border:1px solid #dbeafe;border-radius:22px;padding:18px;margin-bottom:18px}
.sapp-parent-hero h3{margin:0 0 8px;font-size:1.35rem}
.sapp-report-table-low td:last-child{color:#b91c1c;font-weight:700}
.sapp-table-wrap table tbody tr:hover{background:#f8fbff}
.sapp-login-card .sapp-btn{background:linear-gradient(135deg,var(--sapp-accent),#7c3aed)}
.sapp-panel-card h3{margin-top:0}
.sapp-card .button,.sapp-card .button-secondary,.sapp-card .button-primary{margin-top:8px}

.sapp-profile-card{display:flex;gap:16px;align-items:center}
.sapp-profile-photo{width:84px;height:84px;border-radius:22px;object-fit:cover;border:4px solid rgba(255,255,255,.8);box-shadow:0 10px 25px rgba(15,23,42,.12)}
.sapp-profile-photo-placeholder,.sapp-photo-placeholder{display:inline-flex;align-items:center;justify-content:center;background:#eef2ff;color:#4338ca;font-weight:700}
.sapp-photo-placeholder{width:44px;height:44px;border-radius:12px}
.sapp-profile-photo-placeholder{width:84px;height:84px}
.sapp-table-wrap .sapp-print-btn{font-weight:700}
@media (max-width:640px){.sapp-profile-card{flex-direction:column;align-items:flex-start}.sapp-table-wrap table{min-width:760px}}

.sapp-progress{position:relative;height:18px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:12px 0 10px}
.sapp-progress-bar{height:100%;background:linear-gradient(90deg,var(--sapp-accent),#7c3aed);border-radius:999px}
.sapp-progress span{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.8rem;font-weight:800;color:#0f172a}
.sapp-note-row{display:flex;gap:16px;flex-wrap:wrap;color:var(--sapp-muted);margin-bottom:12px}
.sapp-trend-chart{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:12px;align-items:end;min-height:190px;margin-top:14px}
.sapp-trend-col{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sapp-trend-bar-wrap{height:120px;width:100%;max-width:48px;border-radius:16px;background:#eef2ff;display:flex;align-items:flex-end;justify-content:center;padding:4px;overflow:hidden}
.sapp-trend-bar{width:100%;border-radius:12px;background:linear-gradient(180deg,#38bdf8,var(--sapp-accent),#7c3aed)}
.sapp-trend-col strong{font-size:.82rem}
.sapp-trend-col span{font-size:.78rem;color:var(--sapp-muted)}


.sapp-media-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}
.sapp-media-preview-wrap{margin-top:12px}
.sapp-media-preview{width:110px;height:110px;border-radius:18px;object-fit:cover;border:1px solid var(--sapp-border);background:#fff;display:block}
.sapp-media-preview-empty{display:flex;align-items:center;justify-content:center;background:#f8fafc;color:var(--sapp-muted);font-weight:600;padding:14px;width:110px;height:110px}
.sapp-trend-chart-class .sapp-trend-bar-wrap{max-width:58px;height:140px;background:linear-gradient(180deg,#eff6ff,#eef2ff)}
.sapp-trend-chart-class .sapp-trend-bar{background:linear-gradient(180deg,#22c55e,var(--sapp-accent),#7c3aed)}
@media (max-width: 640px){.sapp-media-row{grid-template-columns:1fr}.sapp-media-preview,.sapp-media-preview-empty{width:100%;max-width:180px;height:140px}}


.sapp-flow-card{margin:16px 0}
.sapp-flow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.sapp-flow-grid-compact{margin:0 0 16px}
.sapp-flow-step{padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,#eff6ff,#ffffff);border:1px solid #dbeafe;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.sapp-flow-step strong{display:block;font-size:1rem;margin-bottom:6px;color:#1d4ed8}
.sapp-flow-step span{display:block;color:var(--sapp-muted);line-height:1.5}
.sapp-attendance-tools{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:end;margin:16px 0}
.sapp-bulk-actions,.sapp-attendance-tools > div{background:#f8fbff;border:1px solid #dbeafe;border-radius:16px;padding:14px}
.sapp-bulk-actions label,.sapp-attendance-tools label{display:block;font-weight:700;margin-bottom:8px}
.sapp-btn-row{display:flex;gap:10px;flex-wrap:wrap}
.sapp-help-text{display:block;color:var(--sapp-muted);margin-top:6px;line-height:1.4}
.button-hero{padding:8px 18px;font-size:15px}
.sapp-status-select{min-width:150px}
.sapp-student-card label{display:block;font-weight:700;margin-bottom:6px}
@media (max-width:900px){.sapp-attendance-tools{grid-template-columns:1fr}}


.sapp-date-strip{display:flex;justify-content:space-between;gap:12px;align-items:center;background:linear-gradient(135deg,#eff6ff,#ffffff);border:1px solid #dbeafe;border-radius:16px;padding:14px 16px;margin:12px 0}
.sapp-date-strip strong{display:block;color:var(--sapp-accent);margin-bottom:4px}
.sapp-date-strip span{display:block;color:var(--sapp-muted);line-height:1.5}
.sapp-date-chip-group{display:flex;gap:10px;flex-wrap:wrap}
.sapp-attendance-date-field{margin:0 0 14px;background:#f8fbff;border:1px solid #dbeafe;border-radius:16px;padding:14px}
.sapp-attendance-date-field label{display:block;font-weight:700;margin-bottom:8px}
.sapp-date-input{letter-spacing:.04em;font-weight:700}
@media (max-width:900px){.sapp-date-strip{flex-direction:column;align-items:flex-start}}


.sapp-attendance-tools-advanced{grid-template-columns:1.1fr .8fr 1.2fr}
.sapp-info-strip .sapp-flow-step{min-height:100%}
.sapp-save-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;padding:14px 16px;border:1px solid #dbeafe;border-radius:16px;background:linear-gradient(135deg,#eff6ff,#ffffff)}
.sapp-save-bar strong{display:block;color:var(--sapp-accent);margin-bottom:4px}
.sapp-save-bar span{display:block;color:var(--sapp-muted);line-height:1.45}
.sapp-student-top .sapp-badge{margin-top:8px;display:inline-flex}
@media (max-width:900px){.sapp-attendance-tools-advanced{grid-template-columns:1fr}.sapp-save-bar{flex-direction:column;align-items:flex-start}}

/* v5.5.2: compact student report selector for teacher portal */
.sapp-student-report-panel .sapp-section-head p{margin:.25rem 0 0;color:var(--sapp-muted)}
.sapp-report-name-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:16px 0 10px}
.sapp-report-name-item{appearance:none;border:1px solid #dbeafe;background:linear-gradient(135deg,#ffffff,#f8fbff);border-radius:16px;padding:12px 14px;text-align:left;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.05);transition:.18s ease}
.sapp-report-name-item strong{display:block;color:var(--sapp-text);font-size:.98rem;margin-bottom:4px}
.sapp-report-name-item span{display:block;color:var(--sapp-muted);font-size:.86rem}
.sapp-report-name-item:hover,.sapp-report-name-item.is-active{border-color:var(--sapp-accent);transform:translateY(-1px);box-shadow:0 12px 26px rgba(29,78,216,.12)}
.sapp-report-hint{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:14px;padding:11px 13px;color:var(--sapp-muted);font-size:.92rem;margin-bottom:14px}
.sapp-student-report-details{display:grid;gap:12px}
.sapp-student-report-detail{border:1px solid #dbeafe;border-radius:18px;background:linear-gradient(135deg,#eff6ff,#fff);padding:12px}
.sapp-student-report-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sapp-student-report-top .sapp-btn{white-space:normal;max-width:320px}
.sapp-student-summary-selected{background:rgba(255,255,255,.88)}
.sapp-student-monthly-report{margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}
@media(max-width:640px){.sapp-report-name-list{grid-template-columns:1fr}.sapp-student-report-top{flex-direction:column}.sapp-student-report-top .sapp-btn{width:100%;max-width:none}}

/* v5.5.3: compact colorful teacher dashboard + stable attendance save UX */
.sapp-portal{background:linear-gradient(135deg,#eef7ff 0%,#f8fbff 42%,#fff7ed 100%);padding:18px;border-radius:22px}
.sapp-panel-head{background:linear-gradient(135deg,#0f3b82,#2563eb 58%,#7c3aed);color:#fff;border-radius:20px;padding:16px 18px;margin-bottom:14px;box-shadow:0 18px 40px rgba(29,78,216,.20)}
.sapp-panel-head h2,.sapp-panel-head p{color:#fff!important}.sapp-panel-head p{opacity:.88}.sapp-panel-head .sapp-btn-light{background:rgba(255,255,255,.96)!important;color:#1d4ed8!important}
.sapp-card-grid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin:10px 0 12px}
.sapp-mini-card{min-height:auto;padding:12px 13px;border-radius:16px;gap:5px;box-shadow:0 8px 22px rgba(15,23,42,.06);overflow:hidden;position:relative}
.sapp-mini-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#2563eb,#7c3aed)}
.sapp-mini-card:nth-child(2n):before{background:linear-gradient(90deg,#0891b2,#22c55e)}
.sapp-mini-card:nth-child(3n):before{background:linear-gradient(90deg,#f97316,#facc15)}
.sapp-mini-card:nth-child(4n):before{background:linear-gradient(90deg,#ec4899,#8b5cf6)}
.sapp-mini-card strong{font-size:.78rem;letter-spacing:.01em;text-transform:uppercase;color:#334155}
.sapp-mini-card span{font-size:.98rem!important;line-height:1.35;word-break:break-word;color:#0f172a}
.sapp-mini-card:nth-child(4) span{font-size:.82rem!important;max-height:56px;overflow:auto;padding-right:4px}
.sapp-portal .sapp-panel-card,.sapp-portal .sapp-login-card{padding:16px;border-radius:18px;box-shadow:0 10px 26px rgba(15,23,42,.07)}
.sapp-section-head{gap:10px}.sapp-section-head h3{margin-bottom:4px}.sapp-section-head p{font-size:.92rem;line-height:1.45}
.sapp-trend-chart{min-height:130px;gap:8px;margin-top:8px}.sapp-trend-bar-wrap{height:84px;max-width:42px}.sapp-trend-chart-class .sapp-trend-bar-wrap{height:92px;max-width:44px}.sapp-trend-col{gap:5px}.sapp-trend-col strong{font-size:.75rem}.sapp-trend-col span{font-size:.72rem}
.sapp-toolbar{background:rgba(255,255,255,.82);border:1px solid #dbeafe;border-radius:16px;padding:12px;margin:12px 0;box-shadow:0 8px 18px rgba(15,23,42,.04)}
.sapp-toolbar label,.sapp-attendance-tools label,.sapp-attendance-date-field label{font-size:.86rem;color:#1e3a8a}
.sapp-flow-grid{gap:10px}.sapp-flow-step{padding:12px 13px;border-radius:15px}.sapp-flow-step strong{font-size:.9rem}.sapp-flow-step span{font-size:.84rem;line-height:1.4}
.sapp-date-strip,.sapp-attendance-date-field,.sapp-bulk-actions,.sapp-attendance-tools>div{padding:12px;border-radius:15px}
.sapp-student-card{padding:13px;border-radius:16px}.sapp-student-top{margin-bottom:8px}.sapp-student-top strong{font-size:1rem}.sapp-student-top span{font-size:.84rem}
.sapp-save-bar{background:linear-gradient(135deg,#e0f2fe,#ffffff);border:1px solid #bfdbfe;box-shadow:0 10px 24px rgba(29,78,216,.10)}
.sapp-btn{border-radius:13px;min-height:40px}.sapp-btn-light{border-color:#c7d2fe}
.sapp-report-name-list{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}.sapp-report-name-item{padding:10px 12px;border-radius:14px}.sapp-report-name-item strong{font-size:.9rem}.sapp-report-name-item span{font-size:.78rem}
@media(max-width:760px){.sapp-portal{padding:12px}.sapp-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sapp-mini-card{padding:11px}.sapp-mini-card span{font-size:.88rem!important}.sapp-panel-head{padding:14px}.sapp-section-head{align-items:flex-start;flex-direction:column}.sapp-toolbar{grid-template-columns:1fr}.sapp-trend-chart{grid-template-columns:repeat(3,1fr)}}

/* v5.5.5: ultra compact teacher attendance UI */
.sapp-mini-trend-card{padding:10px 12px!important;border-radius:16px!important;background:linear-gradient(135deg,#ffffff,#f8fbff)!important;border:1px solid #dbeafe!important;margin-bottom:10px!important}
.sapp-mini-trend-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.sapp-mini-trend-head strong{font-size:.9rem;color:#0f3b82}.sapp-mini-trend-head span{font-size:.78rem;font-weight:800;color:#2563eb;background:#eff6ff;border-radius:999px;padding:5px 9px}
.sapp-mini-trend-card .sapp-trend-chart{min-height:46px!important;margin:0!important;gap:6px!important;grid-template-columns:repeat(6,minmax(38px,1fr))!important;align-items:center!important}
.sapp-mini-trend-card .sapp-trend-col{gap:3px!important;display:grid!important;grid-template-rows:auto 8px auto!important;align-items:center!important}
.sapp-mini-trend-card .sapp-trend-col strong{font-size:.66rem!important;line-height:1.1;order:1;white-space:nowrap;color:#334155}
.sapp-mini-trend-card .sapp-trend-col span{font-size:.64rem!important;line-height:1;order:3;color:#64748b}
.sapp-mini-trend-card .sapp-trend-bar-wrap{order:2;height:8px!important;width:100%!important;max-width:none!important;padding:0!important;border-radius:999px!important;background:#e0f2fe!important;display:block!important}
.sapp-mini-trend-card .sapp-trend-bar{height:100%!important;width:100%!important;border-radius:999px!important;background:linear-gradient(90deg,#22c55e,#2563eb,#7c3aed)!important;min-width:4px!important}
.sapp-flow-grid-compact:not(.sapp-info-strip){display:none!important}
.sapp-date-strip{display:none!important}
.sapp-attendance-context-row{display:grid;grid-template-columns:minmax(160px,210px) repeat(4,minmax(92px,1fr));gap:8px;align-items:stretch;margin:8px 0 10px}
.sapp-attendance-date-field-mini{margin:0!important;padding:9px 10px!important;border-radius:14px!important;background:linear-gradient(135deg,#eff6ff,#fff)!important;border:1px solid #bfdbfe!important}
.sapp-attendance-date-field-mini label{font-size:.76rem!important;margin-bottom:4px!important;color:#1d4ed8!important}
.sapp-attendance-date-field-mini input{padding:8px 10px!important;border-radius:10px!important;font-size:.88rem!important}
.sapp-attendance-date-field-mini .sapp-help-text{display:none!important}
.sapp-context-pill{border:1px solid #dbeafe;border-radius:14px;background:linear-gradient(135deg,#fff,#f8fbff);padding:8px 10px;min-height:42px;box-shadow:0 6px 16px rgba(15,23,42,.04)}
.sapp-context-pill strong{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:#2563eb;margin-bottom:3px}.sapp-context-pill span{font-size:.82rem;font-weight:800;color:#0f172a;line-height:1.15}.sapp-context-tip{background:linear-gradient(135deg,#fff7ed,#ffffff);border-color:#fed7aa}.sapp-context-tip strong{color:#ea580c}.sapp-context-tip span{font-size:.74rem;color:#7c2d12}
.sapp-attendance-tools-advanced{grid-template-columns:1fr .72fr 1.05fr!important;gap:8px!important;margin:10px 0!important}.sapp-attendance-tools>div,.sapp-bulk-actions{padding:10px!important;border-radius:14px!important}.sapp-attendance-tools label{font-size:.78rem!important;margin-bottom:5px!important}.sapp-attendance-tools input,.sapp-attendance-tools select{padding:9px 10px!important;border-radius:11px!important;font-size:.86rem!important}.sapp-attendance-tools .sapp-help-text{display:none!important}.sapp-btn-row{gap:6px!important}.sapp-btn-row .sapp-btn{padding:8px 10px!important;min-height:34px!important;font-size:.8rem!important;border-radius:11px!important}
.sapp-attendance-list-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:10px 0 8px;padding:10px 12px;border-radius:16px;color:#fff;background:linear-gradient(135deg,#0f3b82,#2563eb,#7c3aed);box-shadow:0 12px 24px rgba(29,78,216,.16)}.sapp-attendance-list-title strong{font-size:.95rem}.sapp-attendance-list-title span{font-size:.78rem;opacity:.9}
.sapp-colorful-attendance-list{gap:9px!important}.sapp-colorful-attendance-list .sapp-student-card{position:relative;overflow:hidden;padding:11px 12px!important;border-radius:16px!important;background:linear-gradient(135deg,#ffffff,#f8fbff)!important;border:1px solid #dbeafe!important;box-shadow:0 8px 22px rgba(15,23,42,.06)!important}.sapp-colorful-attendance-list .sapp-student-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,#22c55e,#2563eb,#7c3aed)}
.sapp-student-name{display:block;color:#0f172a;font-size:1.05rem!important;margin-bottom:7px}.sapp-student-chip-row{display:flex;flex-wrap:wrap;gap:6px}.sapp-student-chip-row .sapp-chip{display:inline-flex!important;align-items:center;padding:5px 8px;border-radius:999px;font-size:.75rem!important;font-weight:700;line-height:1.1}.sapp-chip-roll{background:#dbeafe;color:#1e3a8a}.sapp-chip-class{background:#dcfce7;color:#166534}.sapp-chip-father{background:#fef3c7;color:#92400e}.sapp-chip-mobile{background:#fce7f3;color:#9d174d}.sapp-student-status-box{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.sapp-student-status-box>span:first-child{font-weight:800;color:#7c3aed;font-size:.82rem!important}.sapp-color-student-top{align-items:center!important;margin-bottom:7px!important}
.sapp-attendance-row{grid-template-columns:minmax(145px,180px) 1fr!important;gap:8px!important}.sapp-attendance-row label{font-size:.78rem!important;margin-bottom:4px!important;color:#1e3a8a}.sapp-attendance-row select,.sapp-attendance-row input{padding:9px 10px!important;border-radius:11px!important}.sapp-attendance-row .sapp-help-text{display:none!important}.sapp-save-bar{margin-top:10px!important;padding:11px 12px!important;border-radius:15px!important}.sapp-save-bar strong{font-size:.9rem}.sapp-save-bar span{font-size:.78rem}.sapp-save-bar .sapp-btn{padding:9px 15px!important;min-height:36px!important}
@media(max-width:900px){.sapp-attendance-context-row{grid-template-columns:repeat(2,minmax(0,1fr))}.sapp-attendance-tools-advanced{grid-template-columns:1fr!important}.sapp-mini-trend-card .sapp-trend-chart{grid-template-columns:repeat(3,1fr)!important}.sapp-attendance-row{grid-template-columns:1fr!important}.sapp-student-status-box{align-items:flex-start}.sapp-attendance-list-title{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){.sapp-attendance-context-row{grid-template-columns:1fr}.sapp-mini-trend-card .sapp-trend-chart{grid-template-columns:repeat(2,1fr)!important}.sapp-student-chip-row .sapp-chip{width:100%;justify-content:flex-start}.sapp-btn-row .sapp-btn{width:calc(50% - 4px)!important}.sapp-save-bar{flex-direction:column;align-items:stretch}.sapp-save-bar .sapp-btn{width:100%}}

/* v5.5.6: make Monthly Attendance % graph a small card after top boxes, not a full-width strip */
.sapp-mini-trend-card{
  width:100%!important;max-width:330px!important;margin:8px 0 12px!important;padding:8px 10px!important;border-radius:14px!important;
}
.sapp-mini-trend-head{margin-bottom:4px!important}
.sapp-mini-trend-head strong{font-size:.76rem!important}.sapp-mini-trend-head span{font-size:.64rem!important;padding:3px 7px!important}
.sapp-mini-trend-card .sapp-trend-chart{min-height:32px!important;height:32px!important;margin:0!important;display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:4px!important;align-items:end!important}
.sapp-mini-trend-card .sapp-trend-col{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:end!important;gap:1px!important;min-width:0!important}
.sapp-mini-trend-card .sapp-trend-col strong{font-size:.52rem!important;line-height:1!important;text-align:center!important;max-width:38px!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#334155!important}
.sapp-mini-trend-card .sapp-trend-col span{font-size:.5rem!important;line-height:1!important;text-align:center!important;color:#64748b!important}
.sapp-mini-trend-card .sapp-trend-bar-wrap{height:16px!important;width:6px!important;max-width:6px!important;margin:0 auto!important;display:flex!important;align-items:flex-end!important;background:#e0f2fe!important;border-radius:999px!important;overflow:hidden!important;padding:0!important}
.sapp-mini-trend-card .sapp-trend-bar{width:100%!important;min-width:0!important;background:linear-gradient(180deg,#2563eb,#22c55e)!important;border-radius:999px!important}
@media(max-width:520px){.sapp-mini-trend-card{max-width:100%!important}.sapp-mini-trend-card .sapp-trend-chart{grid-template-columns:repeat(6,1fr)!important}}

/* v5.5.8.1: REAL placement fix - chart is now a grid card immediately after Leave Today */
.sapp-card-grid{align-items:stretch!important;grid-auto-flow:row dense!important;gap:10px!important;margin:10px 0 12px!important}
.sapp-card-grid .sapp-mini-card{min-height:70px!important;padding:10px 12px!important;border-radius:16px!important;margin:0!important}
.sapp-card-grid .sapp-mini-card strong{font-size:.74rem!important;line-height:1.15!important;text-transform:uppercase;color:#334155!important}
.sapp-card-grid .sapp-mini-card span{font-size:1rem!important;line-height:1.15!important}
.sapp-card-grid .sapp-dashboard-trend-card{width:auto!important;max-width:none!important;min-height:70px!important;padding:8px 10px!important;display:block!important;background:linear-gradient(135deg,#ffffff,#eff6ff)!important;border:1px solid #bfdbfe!important;box-shadow:0 10px 22px rgba(15,23,42,.06)!important}
.sapp-dashboard-trend-card .sapp-mini-trend-head{margin-bottom:3px!important;gap:6px!important}
.sapp-dashboard-trend-card .sapp-mini-trend-head strong{font-size:.68rem!important;text-transform:none!important;color:#0f3b82!important;white-space:nowrap!important}
.sapp-dashboard-trend-card .sapp-mini-trend-head span{font-size:.58rem!important;padding:2px 6px!important;white-space:nowrap!important}
.sapp-dashboard-trend-card .sapp-trend-chart{height:30px!important;min-height:30px!important;gap:3px!important;grid-template-columns:repeat(6,minmax(10px,1fr))!important}
.sapp-dashboard-trend-card .sapp-trend-col strong{font-size:.47rem!important;max-width:26px!important}
.sapp-dashboard-trend-card .sapp-trend-col span{font-size:.46rem!important}
.sapp-dashboard-trend-card .sapp-trend-bar-wrap{height:14px!important;width:5px!important;max-width:5px!important}
@media(max-width:900px){.sapp-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sapp-card-grid .sapp-dashboard-trend-card{grid-column:auto!important}}

/* v5.5.8.2: stretch dashboard graph after Leave Today and hide student report behind 3D toggle */
.sapp-card-grid{
  grid-template-columns:repeat(7,minmax(110px,1fr))!important;
  align-items:stretch!important;
}
.sapp-card-grid .sapp-dashboard-trend-card{
  grid-column:3 / -1!important;
  max-width:none!important;
  width:100%!important;
  min-height:76px!important;
  padding:9px 12px!important;
  background:linear-gradient(135deg,#ffffff 0%,#eff6ff 45%,#f5f3ff 100%)!important;
  border:1px solid #bfdbfe!important;
  box-shadow:0 12px 26px rgba(37,99,235,.10)!important;
}
.sapp-dashboard-trend-card .sapp-trend-chart{
  height:38px!important;
  min-height:38px!important;
  grid-template-columns:repeat(6,minmax(70px,1fr))!important;
  gap:10px!important;
  align-items:end!important;
}
.sapp-dashboard-trend-card .sapp-trend-col{
  display:grid!important;
  grid-template-columns:44px 1fr 34px!important;
  gap:6px!important;
  align-items:center!important;
  text-align:left!important;
}
.sapp-dashboard-trend-card .sapp-trend-col strong{
  max-width:none!important;
  font-size:.58rem!important;
  white-space:nowrap!important;
  order:1!important;
}
.sapp-dashboard-trend-card .sapp-trend-col span{
  font-size:.55rem!important;
  order:3!important;
  text-align:right!important;
}
.sapp-dashboard-trend-card .sapp-trend-bar-wrap{
  order:2!important;
  width:100%!important;
  max-width:none!important;
  height:8px!important;
  padding:0!important;
  border-radius:999px!important;
  background:#dbeafe!important;
}
.sapp-dashboard-trend-card .sapp-trend-bar{
  width:100%!important;
  min-width:4px!important;
  height:100%!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#22c55e,#2563eb,#7c3aed)!important;
}
.sapp-report-master-toggle-wrap{
  margin:14px 0 10px!important;
  padding:14px!important;
  border-radius:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  background:linear-gradient(135deg,#ecfeff,#eff6ff,#f5f3ff,#fff7ed)!important;
  border:1px solid #bfdbfe!important;
  box-shadow:0 16px 32px rgba(15,23,42,.08)!important;
}
.sapp-report-master-toggle-wrap span{
  color:#334155!important;
  font-weight:700!important;
  font-size:.88rem!important;
}
.sapp-report-master-toggle{
  border:none!important;
  cursor:pointer!important;
  min-width:290px!important;
  padding:15px 24px!important;
  border-radius:18px!important;
  color:#fff!important;
  font-weight:900!important;
  font-size:1rem!important;
  letter-spacing:.01em!important;
  background:linear-gradient(135deg,#0ea5e9,#2563eb,#7c3aed,#ec4899,#f97316)!important;
  box-shadow:0 16px 0 #0f3b82,0 24px 38px rgba(37,99,235,.28)!important;
  transform:translateY(-5px)!important;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease!important;
}
.sapp-report-master-toggle:hover{
  filter:saturate(1.15)!important;
  transform:translateY(-7px)!important;
  box-shadow:0 18px 0 #0f3b82,0 28px 42px rgba(37,99,235,.32)!important;
}
.sapp-report-master-toggle:active{
  transform:translateY(2px)!important;
  box-shadow:0 7px 0 #0f3b82,0 12px 22px rgba(37,99,235,.22)!important;
}
.sapp-student-report-panel{
  background:linear-gradient(135deg,#ffffff,#eff6ff 38%,#f5f3ff 70%,#fff7ed)!important;
  border:1px solid #bfdbfe!important;
}
.sapp-report-section-head h3{color:#0f3b82!important}
@media(max-width:1200px){
  .sapp-card-grid{grid-template-columns:repeat(4,minmax(110px,1fr))!important}
  .sapp-card-grid .sapp-dashboard-trend-card{grid-column:3 / -1!important}
  .sapp-dashboard-trend-card .sapp-trend-chart{grid-template-columns:repeat(3,minmax(80px,1fr))!important;height:auto!important;min-height:54px!important}
}
@media(max-width:760px){
  .sapp-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sapp-card-grid .sapp-dashboard-trend-card{grid-column:1 / -1!important}
  .sapp-report-master-toggle-wrap{flex-direction:column!important;align-items:stretch!important}
  .sapp-report-master-toggle{min-width:0!important;width:100%!important}
  .sapp-dashboard-trend-card .sapp-trend-chart{grid-template-columns:1fr!important}
}