/* Same compact visual language for operational and read-only school views. */
.au-widget{min-width:0}.au-help{font-size:12px;color:var(--muted);line-height:1.6;margin:12px 0}.au-empty{padding:30px 16px;text-align:center;background:var(--bg);border-radius:6px}.au-empty p{margin-top:8px;color:var(--muted)}
.au-toolbar,.au-calendar-toolbar,.au-calendar-filters,.au-date-nav,.au-arrows,.au-pages{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.au-toolbar{align-items:end;margin-bottom:14px}.au-calendar-toolbar{justify-content:space-between;margin-bottom:18px}.au-calendar-filters{gap:14px}.au-arrows{gap:2px}.au-pages{font-size:12px;color:var(--muted)}
.au-widget label{font-size:12px;min-width:0}.au-calendar-filters label{display:flex;align-items:center;gap:8px}.au-widget select{min-height:32px;padding:5px 8px;font-size:12px;width:auto;max-width:100%}
:is(.app-content,.phone-main) .au-widget button{min-height:32px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:5px}
:is(.app-content,.phone-main) .au-widget .au-icon{width:32px;padding:5px}.au-widget button:disabled{opacity:.45;cursor:not-allowed}
.au-widget .au-icon svg,.au-widget button svg{width:16px;height:16px}
.au-segments{display:inline-flex;gap:4px;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:7px}
.au-widget .au-segments button{border-color:transparent;background:transparent}.au-widget .au-segments button.selected{background:white;color:var(--brand);border-color:var(--line)}
.au-widget .au-date-label{border-color:transparent;background:transparent;font-size:15px;padding:5px 0;white-space:normal;text-align:left}
.au-pairs{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:var(--muted);margin-bottom:16px}.au-pairs span{display:inline-flex;align-items:center;gap:7px}.au-pairs i{width:9px;height:9px;border-radius:3px;background:var(--pair);flex-shrink:0}
.au-scroll{max-width:100%;overflow:auto;position:relative;border:1px solid var(--line);border-radius:6px;scroll-padding-top:70px;scroll-padding-left:220px}
.au-scroll:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.au-scroll table{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}.au-scroll caption{text-align:left;padding:9px 12px;font-size:12px;color:var(--muted)}
.au-scroll th,.au-scroll td{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.au-scroll th{background:#f7f9fa}.au-scroll thead th{position:sticky;top:0;z-index:2}.au-scroll th:first-child{position:sticky;left:0;z-index:1}.au-scroll thead th:first-child{z-index:3}
.au-scroll th small{display:block;font-weight:400;font-size:11px;margin-top:3px}
.au-calendar{max-height:560px;scroll-padding-left:118px}.au-calendar table{min-width:810px;table-layout:fixed}.au-calendar td{height:48px;padding:5px;vertical-align:top;text-align:center}.au-calendar th{min-width:0;font-size:12px}.au-calendar th:first-child{width:116px;min-width:116px;font-size:11px}
.au-widget .au-today{background:var(--brand-soft);color:var(--brand)}
.au-widget .au-event{display:flex;flex-direction:column;align-items:start;justify-content:start;gap:3px;white-space:normal;text-align:left;width:100%;min-height:90px;background:var(--pair-bg);border:1px solid var(--pair-border);border-left:3px solid var(--pair);padding:8px;color:var(--ink)}
.au-event span{color:var(--pair);font-size:11px}.au-event small{font-size:11px;font-weight:400}.au-event:hover{box-shadow:inset 0 0 0 1px var(--pair)}
.au-calendar .au-break td,.au-calendar .au-break th{background:#f0f3f4;height:28px;font-size:11px;color:var(--muted);text-align:left}
.au-agenda-day h3{font-size:13px;margin:20px 0 8px}.au-agenda-row{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--pair-bg);border-left:3px solid var(--pair);border-radius:5px;margin:6px 0;padding:12px 14px;font-size:13px}.au-agenda-row small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.au-sheet{width:fit-content;max-height:520px;scroll-padding-top:42px}.au-sheet table{min-width:0;width:max-content;table-layout:fixed}.au-sheet caption{white-space:nowrap}
:is(body[data-role="admin"] .app-content,.app-content,.phone-main) .au-sheet th,:is(body[data-role="admin"] .app-content,.app-content,.phone-main) .au-sheet td{padding:0;height:32px;min-width:0;font-size:12px;text-align:center}
:is(body[data-role="admin"] .app-content,.app-content,.phone-main) .au-sheet th:first-child{width:218px;min-width:218px;max-width:218px;text-align:left;padding:6px 10px}
:is(body[data-role="admin"] .app-content,.app-content,.phone-main) .au-attendance td,.au-attendance thead th:not(:first-child){width:32px;min-width:32px;max-width:32px}
.au-sheet abbr{text-decoration:none;cursor:help}.au-sheet [data-mark="H"]{color:var(--brand)}.au-sheet [data-mark="I"],.au-sheet [data-mark="S"]{color:var(--blue);background:#f2f6fc}.au-sheet [data-mark="A"]{color:var(--red);background:#fff2f2}.au-sheet [data-mark="-"]{background:#f5f7f8;color:#7a898d}
.au-grades th:not(:first-child),.au-grades td{width:64px;min-width:64px}.au-widget .au-grades td button{display:block;width:62px;min-width:62px;min-height:32px;border:0;background:transparent;color:var(--ink);padding:0;border-radius:0;outline-offset:-2px}.au-grades sup{font-size:9px;color:var(--amber);margin-left:3px}
.au-identity{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px;padding:12px 16px;border:1px solid var(--line);border-radius:7px;background:white}.au-identity label{font-size:12px;display:flex;gap:10px;align-items:center}.au-identity select{min-height:32px;padding:5px 8px;font-size:12px}.au-identity small{color:var(--muted)}
.sc-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}.app-content .sc-tabs button,.phone-main .sc-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:9px 0;color:var(--muted)}.sc-tabs button.selected{border-bottom-color:var(--brand);color:var(--brand)}
.sc-block{display:block;margin-top:4px;color:var(--muted)}.sc-bill+.sc-bill{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}
.sc-feed-filter{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:18px}.sc-feed-filter label{font-size:12px}.sc-feed-filter select,.sc-feed-filter input{min-height:32px;font-size:12px;padding:5px 9px}.sc-feed-filter input{width:210px;max-width:100%}
.sc-post{border:1px solid var(--line);border-radius:8px;padding:20px;margin-bottom:16px}.sc-post header,.sc-post footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}.sc-post h3{margin:16px 0 8px}.sc-post p{white-space:pre-line;max-width:78ch}.sc-post footer{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}.sc-post .badge{margin-right:8px}.sc-compact-table{font-size:12px}.sc-detail-body{white-space:pre-line;margin:20px 0}.sc-feedback{font-size:12px;color:var(--brand);margin-top:12px}
.phone-main .au-calendar-toolbar,.phone-main .au-calendar-filters{align-items:start}.phone-main .au-calendar-filters{width:100%;justify-content:space-between}.phone-main .au-widget .au-date-label{font-size:13px}.phone-main .au-date-nav{gap:6px}
.phone-main .au-widget .au-segments{max-width:100%;gap:2px}.phone-main .au-pairs{gap:8px 12px}.phone-main .au-agenda-row{grid-template-columns:60px minmax(0,1fr);gap:10px;padding:12px 10px}.phone-main .au-agenda-row>button{grid-column:2;justify-self:start}.phone-main .au-identity{padding:12px}.phone-main .au-identity label{display:grid;width:100%}.phone-main .au-identity select{width:100%}
.phone-row .phone-figure{min-width:0}.phone-main .page-heading{flex-wrap:wrap}
.phone-main .au-sheet th:first-child{width:84px!important;min-width:84px!important;max-width:84px!important;padding:6px 5px!important}.phone-main .au-sheet{scroll-padding-left:86px}.phone-main .au-sheet caption{white-space:normal}.phone-main .sc-tabs{gap:8px 16px}.phone-main .sc-post{padding:16px}.phone-main .sc-feed-filter{align-items:stretch}.phone-main .sc-feed-filter label{width:100%}.phone-main .sc-feed-filter input{width:100%}
.phone-main .au-widget .au-sheet.au-attendance td,.phone-main .au-widget .au-sheet.au-attendance thead th:not(:first-child){width:24px;min-width:24px;max-width:24px}
.phone-main .au-widget .au-grades th:not(:first-child),.phone-main .au-widget .au-grades td{width:56px;min-width:56px}.phone-main .au-widget .au-grades td button{width:54px;min-width:54px}
.phone-main .au-widget button,.phone-main .au-widget select,.phone-main .sc-feed-filter select,.phone-main .sc-feed-filter input,.phone-main .au-identity select{min-height:44px}.phone-main .au-widget .au-icon{min-width:44px;width:44px}
.phone-main .au-widget .au-grades td button{min-height:44px}
:is(.app-top,.phone-header) .profile-button{min-height:44px;width:44px;padding:0;border:0;background:transparent;border-radius:50%}
@media(pointer:coarse){.au-widget button,.au-widget select,.au-identity select,.sc-feed-filter input,.sc-feed-filter select{min-height:44px!important}.au-widget .au-icon{min-width:44px!important}.au-widget .au-grades td button{min-height:44px}}

/* Custom Indonesian Date Picker */
.school-datepicker-popover {
  width: 280px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 10px -2px rgba(0, 0, 0, 0.05);
  padding: 14px;
  font-family: inherit;
  user-select: none;
  animation: sdpFadeIn 0.15s ease-out;
  box-sizing: border-box;
}
@keyframes sdpFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.sdp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.sdp-month-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.sdp-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.sdp-nav-btn:hover:not(:disabled) {
  background: var(--paper);
  border-color: var(--brand);
  color: var(--brand);
}
.sdp-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.sdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  margin-bottom: 6px;
}
.sdp-weekday {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}
.sdp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.sdp-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: auto;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: all 0.12s ease;
}
.sdp-day:hover:not(.is-disabled):not(.is-selected) {
  background: rgba(23, 107, 91, 0.08);
  color: var(--brand);
}
.sdp-day.is-outside {
  color: var(--muted);
  opacity: 0.45;
}
.sdp-day.is-today {
  border-color: var(--brand);
  font-weight: 700;
  color: var(--brand);
}
.sdp-day.is-selected {
  background: var(--brand) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-color: var(--brand);
}
.sdp-day.is-disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
.sdp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.sdp-today-btn, .sdp-close-btn {
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.sdp-today-btn {
  color: var(--brand);
}
.sdp-today-btn:hover {
  background: rgba(23, 107, 91, 0.08);
}
.sdp-close-btn {
  color: var(--muted);
}
.sdp-close-btn:hover {
  background: var(--bg);
}

/* In-Phone Bottom Sheet Date Picker */
.phone-datepicker-sheet {
  max-height: 90%;
}
.phone-datepicker-body {
  padding: 8px 16px 16px;
  user-select: none;
}
.phone-datepicker-body .sdp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.phone-datepicker-body .sdp-month-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.phone-datepicker-body .sdp-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.phone-datepicker-body .sdp-nav-btn:active:not(:disabled) {
  background: var(--brand-soft);
  color: var(--brand);
}
.phone-datepicker-body .sdp-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.phone-datepicker-body .sdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  margin-bottom: 6px;
}
.phone-datepicker-body .sdp-weekday {
  font-size: .7857rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  padding: 4px 0;
}
.phone-datepicker-body .sdp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px 2px;
  justify-items: center;
}
.phone-datepicker-body .sdp-day {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  font-size: .9286rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease, background 0.12s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.phone-datepicker-body .sdp-day:active:not(.is-disabled) {
  transform: scale(0.92);
  background: rgba(23, 107, 91, 0.15);
}
.phone-datepicker-body .sdp-day.is-outside {
  color: var(--muted);
  opacity: 0.35;
}
.phone-datepicker-body .sdp-day.is-today {
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 700;
}
.phone-datepicker-body .sdp-day.is-selected {
  background: var(--brand) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-color: var(--brand);
}
.phone-datepicker-body .sdp-day.is-disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
.phone-datepicker-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.phone-datepicker-today-btn {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--brand);
  font-size: .9286rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.phone-datepicker-today-btn:active {
  background: var(--brand-soft);
}