.apo-screen { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(330px, 36%) minmax(0, 1fr); gap: 10px; min-width: 0; color: #171717; }
.apo-screen[hidden] { display: none; }
.apo-sidebar, .apo-detail { min-width: 0; }
.apo-search { background: #cfe8f5; border: 1px solid #38aeec; border-radius: 12px; padding: 10px 16px 16px; }
.apo-fields { display: grid; grid-template-columns: 1fr 1fr 1.35fr .65fr; align-items: end; gap: 12px; }
.apo-fields label { display: grid; gap: 3px; font-size: 12px; font-weight: 700; min-width: 0; }
.apo-fields input, .apo-fields select { width: 100%; min-width: 0; height: 28px; background: white; border: 1px solid #aaa; border-radius: 8px; padding: 2px 8px; font: inherit; font-size: 15px; }
.apo-search-submit { height: 28px; color: white; border: 0; border-radius: 7px; background: #0876bc; font-size: 16px; cursor: pointer; }
.apo-image-button { padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; border-radius: 8px; min-width: 0; }
.apo-image-button img { display: block; width: 100%; height: auto; }
.apo-image-button:hover { filter: brightness(.96); }
.apo-screen button:focus-visible, .apo-screen textarea:focus-visible { outline: 2px solid #0876bc; outline-offset: 3px; }
.apo-list-tabs { display: flex; gap: 16px; margin-top: 10px; }
.apo-list-tabs button { width: 90px; }
.apo-list-tabs button[aria-pressed="true"] { outline: 2px solid white; outline-offset: 2px; }
.apo-pager { display: flex; align-items: center; gap: 10px; padding: 14px 8px 9px; }
.apo-pager>span { margin-right: 24px; font-size: 13px; }
.apo-pager strong { font-size: 23px; }
.apo-pager button { width: 30px; height: 30px; border-radius: 50%; color: white; background: #7ecef0; border: 1px solid #349fdc; cursor: pointer; }
.apo-pager button:disabled { background: #d2eafa; cursor: default; }
.apo-card { display: block; text-align: left; width: 100%; background: white; border: 1px solid #92c928; border-radius: 12px; padding: 7px 10px; margin-bottom: 6px; cursor: pointer; font-size: 14px; color: inherit; }
.apo-card.is-selected { background: #fbfef3; }
.apo-card-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 5px; font-size: 17px; }
.apo-card-heading small { font-size: 11px; }
.apo-card-heading img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
.apo-preview-note { color: #777; font-size: 12px; padding: 0 8px; }
.apo-detail { border: 1px solid #91c927; border-radius: 12px; padding: 12px 17px; min-height: calc(100vh - 150px); }
.apo-detail-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 18px; }
.apo-detail-heading h1 { margin: 0; font-size: clamp(18px, 1.4vw, 26px); font-weight: 600; }
.apo-detail-heading>img { width: 24px; height: 24px; object-fit: contain; }
.apo-header-actions { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.apo-header-actions button:first-child { width: 35px; }
.apo-header-actions button:last-child { width: 150px; }
.apo-family { border: 1px solid #92c928; border-radius: 12px; overflow: hidden; }
.apo-family h2 { margin: 0; padding: 5px 15px; background: #fbfdd4; border-bottom: 1px solid #92c928; font-size: 16px; font-weight: 500; }
.apo-address { margin: 9px 15px 4px; color: #555; font-size: 16px; }
.apo-phones { display: grid; grid-template-columns: 1fr .85fr 1.65fr; gap: 10px; padding: 0 12px 12px; }
.apo-phones span { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: clamp(17px, 1.3vw, 24px); }
.apo-phones img { width: 34px; height: 34px; object-fit: contain; }
.apo-application { border: 1px solid #36b6fb; border-radius: 12px; overflow: hidden; margin-top: 8px; }
.apo-application h2 { display: flex; gap: 32px; margin: 0; padding: 5px 15px; background: #caeafa; border-bottom: 1px solid #36b6fb; font-size: 16px; font-weight: 500; }
.apo-application p { display: flex; flex-wrap: wrap; gap: 25px; margin: 10px 15px; color: #666; font-size: 16px; }
.apo-application strong { margin-left: 12px; color: #171717; font-size: 16px; font-weight: 500; }
.apo-call-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 12px; }
.apo-call-groups>div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.apo-outcomes { display: flex; gap: 20px; margin: 10px 0 14px; }
.apo-outcomes button { width: 120px; }
.apo-history article { border: 1px solid #71ca8c; border-radius: 12px; padding: 10px 13px; margin-top: 10px; }
.apo-history-line { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; color: #444; font-size: 16px; }
.apo-history-line .apo-callback { color: #00b9ed; margin: 0 auto; }
.apo-history textarea { display: block; width: 100%; min-height: 85px; resize: vertical; border: 1px solid #d3e9a8; border-radius: 12px; margin-top: 12px; padding: 10px; font: inherit; }
.apo-action-status, .apo-empty { font-size: 14px; color: #666; }
@media(max-width:1450px) { .apo-fields { gap: 7px; } .apo-detail-heading { font-size: 15px; gap: 7px; } .apo-header-actions { gap: 12px; } .apo-header-actions button:last-child { width: 125px; } .apo-phones { grid-template-columns: 1.2fr .3fr 1.2fr; } .apo-phones img { width: 28px; height: 28px; } .apo-call-groups { gap: 12px; } }
@media(max-width:1100px) { .apo-screen { grid-template-columns: minmax(250px,34%) minmax(0,1fr); } .apo-fields { grid-template-columns: 1fr 1fr; } .apo-list-tabs { gap: 8px; } .apo-detail { padding: 12px; } .apo-phones { display:flex; flex-wrap:wrap; gap:14px; } .apo-application h2 { flex-wrap:wrap; gap:4px 20px; font-size:16px; } .apo-call-groups { grid-template-columns:1fr; gap:8px; } .apo-call-groups>div { max-width:320px; } }
@media(max-width:700px) { .apo-screen { grid-column:1 / -1; grid-template-columns:1fr; } .apo-detail { min-height:600px; } .apo-detail-heading h1 { font-size:18px; } .apo-header-actions { margin-left:0; } .apo-card-heading { font-size:16px; } .apo-application p { gap:8px 18px; } .apo-history-line { gap:10px; font-size:14px; } }

.apo-grant-form { display:grid; gap:18px; max-width:850px; }
.apo-grant-form>label { display:grid; gap:6px; font-weight:600; }
.apo-grant-form select,.apo-edit-form input,.apo-edit-form select { min-width:0; width:100%; padding:8px; border:1px solid #aaa; border-radius:6px; font:inherit; background:white; }
.apo-grade-options { display:flex; flex-wrap:wrap; gap:16px; padding:8px; }
.apo-grade-options label { display:flex; gap:5px; align-items:center; }
.apo-edit-actions { display:flex; gap:12px; }
.apo-edit-actions button { padding:8px 20px; border:1px solid #0876bc; border-radius:7px; cursor:pointer; background:#fff; color:#0876bc; font:inherit; }
.apo-edit-actions button[type=submit] { background:#0876bc; color:#fff; }
.apo-grant-list { display:grid; gap:8px; }
.apo-grant-list>button { display:flex; flex-wrap:wrap; gap:12px; padding:12px; background:white; border:1px solid #b5cdda; border-radius:8px; text-align:left; cursor:pointer; font:inherit; }
.apo-edit-form { display:grid; gap:16px; }
.apo-edit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.apo-edit-grid label { display:grid; gap:5px; font-size:14px; }
.apo-edit-form fieldset,.apo-grant-form fieldset { min-width:0; border:1px solid #b5cdda; border-radius:8px; }
@media(max-width:600px) { .apo-edit-grid { grid-template-columns:1fr; } .apo-phones { grid-template-columns:1fr; } }

.apo-header-actions button[data-edit] { width:35px; }
.apo-outcomes[hidden] { display:none; }
.apo-phones .apo-phone-wrong { color:#d62139; }
.apo-contact-badge { border-radius:5px; padding:3px 10px; white-space:nowrap; color:white; font-size:14px; }
.apo-contact-badge-unneeded { background:#db629a; }
.apo-contact-badge-retry { background:#15b6df; }
.apo-contact-badge-confirmed { background:#0876bc; }
.apo-contact-schedule { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.apo-contact-schedule label { display:flex; align-items:center; gap:4px; font-size:14px; }
.apo-contact-schedule input,.apo-contact-schedule select { border:1px solid #a8cb78; border-radius:5px; background:white; color:#333; font:inherit; padding:4px; }
.apo-contact-save-row { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:8px; font-size:13px; color:#666; }
.apo-contact-save-row button,[data-contact-retry],[data-contact-reload] { border:1px solid #0876bc; background:white; color:#0876bc; border-radius:6px; padding:5px 16px; cursor:pointer; }
.apo-image-button:disabled { opacity:.6; cursor:wait; }

.sales-screen .sales-heading { margin: 0; padding: 10px 8px; font-size: 18px; }
.sales-screen .apo-card { cursor: pointer; }

.sales-schedule { font-weight: 700; white-space: pre; }

.sales-calendar { border: 1px solid #a8ce79; border-radius: 10px; padding: 8px; margin: 6px 0 10px; background: #fff; }
.sales-calendar-controls { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; }
.sales-calendar-controls label { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.sales-calendar-controls select { font: inherit; font-size: 14px; padding: 4px; border: 1px solid #a8ce79; border-radius: 5px; background: white; }
.sales-calendar [role="status"] { margin: 4px 0; font-size: 12px; }
.sales-calendar-week,.sales-calendar-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.sales-calendar-week { text-align: center; padding: 5px 0; font-size: 12px; background: #f0f7e7; }
.sales-calendar-week span:first-child { color: #bc3535; }.sales-calendar-week span:last-child { color: #2465ae; }
.sales-calendar-days { border-top: 1px solid #e2e7dc; border-left: 1px solid #e2e7dc; }
.sales-calendar-day,.sales-calendar-blank { min-width: 0; min-height: 65px; padding: 3px 2px; border-right: 1px solid #e2e7dc; border-bottom: 1px solid #e2e7dc; }
.sales-calendar-blank { background: #f7f8f5; }.sales-calendar-date { font-size: 12px; padding: 0 3px; }
.sales-calendar-day.is-today .sales-calendar-date { background: #568a21; color: white; border-radius: 9px; }
.sales-calendar-event { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 3px; margin-top: 3px; padding: 3px 1px; border-left: 3px solid hsl(var(--prefecture-hue) 65% 40%); border-radius: 3px; background: hsl(var(--prefecture-hue) 70% 93%); color: hsl(var(--prefecture-hue) 65% 24%); font-size: 11px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.sales-calendar-event time { font-weight: 700; }
.apo-grade-gender { display:inline-flex; align-items:center; gap:8px; }
.apo-gender-badge { width:24px; height:24px; object-fit:contain; vertical-align:middle; flex-shrink:0; }

.apo-card.is-reminder-target,.apo-card.is-reminder-target.is-selected{background:#fff9c4;border-color:#b4c943}
.sales-calendar-controls { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 8px; }
.sales-screen .sales-calendar-controls .sales-heading { margin: 0 auto 0 0; padding: 0; font-size: 17px; }
.sales-calendar-day[role="button"] { cursor: pointer; }
.sales-calendar-day.is-selected { background: #e8f3fb; box-shadow: inset 0 0 0 2px #0876bc; }
.sales-calendar-day:focus-visible { outline: 2px solid #0876bc; outline-offset: -2px; }
.sales-screen [data-sales-detail] { align-self: start; }
.sales-history-heading { margin: 16px 0 0; font-size: 18px; }
.sales-history-comment { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0; }

.apo-card-identity { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.apo-card-grade-gender { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.apo-card-grade-gender .apo-gender-badge { display:block; }

.apo-contact-badge-hirooka { background:#97058b; color:#fff; }

.apo-history article[data-contact-result="absence"] { border-color:#8ec31f; }
.apo-history article[data-contact-result="wrong"] { border-color:#f19ec2; }
.apo-history article[data-contact-result="connected"] { border-color:#7dcef4; }
.apo-contact-comment { white-space:pre-wrap; overflow-wrap:anywhere; margin:12px 0 0; }

.apo-contact-badge-retry ~ .apo-contact-schedule-text,
.apo-contact-badge-confirmed ~ .apo-contact-schedule-text,
.apo-contact-badge-retry ~ .apo-contact-schedule > span,
.apo-contact-badge-confirmed ~ .apo-contact-schedule > span { font-weight:700; }
.apo-application .apo-text-details-button { margin-left:auto; border:1px solid #0876bc; border-radius:6px; background:white; color:#0876bc; font:inherit; font-size:14px; padding:5px 10px; cursor:pointer; }
.apo-text-dialog { width:min(820px,calc(100vw - 32px)); max-height:85dvh; box-sizing:border-box; border:1px solid #38aeec; border-radius:12px; padding:20px; color:#222; }
.apo-text-dialog::backdrop { background:#0005; }
.apo-text-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.apo-text-dialog h2 { font-size:20px; margin:0; }
.apo-text-dialog button { border:1px solid #0876bc; border-radius:6px; background:white; color:#0876bc; padding:8px 14px; font:inherit; cursor:pointer; }
.apo-text-table-wrap { overflow:auto; }
.apo-text-dialog table { width:100%; border-collapse:collapse; font-size:15px; }
.apo-text-dialog th,.apo-text-dialog td { border:1px solid #b6dceb; padding:8px; text-align:left; }
.apo-text-dialog th { background:#cfe8f5; }

.apo-image-button:is(.apo-phone-unavailable,.apo-phone-wrong-buttons) { position:relative; background:#fff; color:var(--phone-result-color); box-shadow:inset 0 0 0 1px currentColor; opacity:.45; }
:is(.apo-phone-unavailable,.apo-phone-wrong-buttons)[data-contact-result="absence"] { --phone-result-color:#8ec31f; }
:is(.apo-phone-unavailable,.apo-phone-wrong-buttons)[data-contact-result="wrong"] { --phone-result-color:#f19ec2; }
:is(.apo-phone-unavailable,.apo-phone-wrong-buttons)[data-contact-result="connected"] { --phone-result-color:#7dcef4; }
:is(.apo-phone-unavailable,.apo-phone-wrong-buttons) img { visibility:hidden; }
.apo-phone-unavailable-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:4px; font-size:clamp(10px,1vw,16px); line-height:1.2; white-space:nowrap; }
.apo-image-button:is(.apo-phone-unavailable,.apo-phone-wrong-buttons):hover { filter:none; }

.apo-image-button.apo-phone-unavailable { cursor:not-allowed; }

.apo-tel-schedule { font-weight:700; }

/* Student chart and confirmed sales information */
.apo-karte{border:1px solid #92c928;border-radius:12px;overflow:hidden;margin:0 0 18px;background:#fff}
.apo-karte h2{margin:0;background:#92c31b;color:#fff;padding:8px 14px;font-size:16px;display:flex;gap:24px;flex-wrap:wrap}
.apo-karte dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;padding:14px;margin:0}
.apo-karte dl>div{display:grid;grid-template-columns:5em minmax(0,1fr);gap:14px;min-width:0;align-items:start}.apo-karte dt{color:#666}.apo-karte dd{margin:0;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.apo-karte-wide{grid-column:1/-1}.apo-karte-edit textarea{width:100%;min-height:85px;box-sizing:border-box;font:inherit;border:1px solid #a7c78c;border-radius:6px;padding:8px}
.apo-sales-details{border:0;padding:8px 0;margin:0;min-width:0}.apo-sales-details legend{font-size:14px;color:#666}.apo-sales-details>div{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;margin:8px 0}.apo-sales-details label{display:inline-flex;align-items:center;gap:5px;max-width:100%}.apo-sales-details input[type=checkbox]{width:20px;height:20px;accent-color:#14b6dc}.apo-sales-details input:not([type=checkbox]){min-width:90px;width:180px;max-width:100%;font:inherit;border:1px solid #a7c78c;border-radius:5px;padding:6px}.apo-sales-summary p{margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:600px){.apo-karte dl{grid-template-columns:1fr}.apo-karte h2{gap:6px 18px}.apo-sales-details label{flex-wrap:wrap}}

.apo-application .apo-application-payment { align-items: center; }

.apo-karte-form{display:grid;gap:12px}
.apo-karte-form-row{display:grid;gap:12px;align-items:start;min-width:0}
.apo-karte-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.apo-karte-columns-3{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.apo-karte-form-row>label,.apo-karte-choice{display:grid;gap:5px;min-width:0;font-size:14px}
.apo-karte-choice>div{display:flex;gap:8px 12px;flex-wrap:wrap;min-height:38px;align-items:center}
.apo-karte-choice label{display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.apo-edit-form .apo-karte-choice input[type=checkbox]{width:20px;height:20px;padding:0;margin:0;accent-color:#14b6dc;flex-shrink:0}
@media(max-width:600px){.apo-karte-columns-3{grid-template-columns:repeat(2,minmax(0,1fr))}.apo-karte-columns-3>label:first-child{grid-column:1/-1}}

.apo-sales-details>.apo-sales-attendance{flex-wrap:nowrap}
.apo-sales-attendance>span,.apo-sales-attendance>label{flex-shrink:0}
.apo-sales-attendance>.apo-sales-other{flex:1;min-width:0;flex-wrap:nowrap}
.apo-sales-other input{flex:1;min-width:0!important;width:100%!important;box-sizing:border-box}
.apo-parking-memo{display:flex;align-items:center;gap:8px;flex:1;min-width:0;white-space:nowrap;font-size:16px;color:#333}
.apo-parking-memo input{flex:1;width:100%;min-width:0;box-sizing:border-box;font:inherit;border:1px solid #a7c78c;border-radius:5px;padding:6px}
.apo-contact-save-row>button,.apo-contact-save-row>[data-draft-status]{flex-shrink:0}
@media(max-width:600px){.apo-sales-details>.apo-sales-attendance{flex-wrap:wrap}.apo-sales-attendance>.apo-sales-other{flex-basis:100%}.apo-parking-memo{font-size:14px}}

.apo-idle-toggle{margin-left:auto;flex-shrink:0;border:1px solid #0876bc;border-radius:6px;padding:6px 12px;background:#fff;color:#0876bc;cursor:pointer;font:inherit;font-size:14px}.apo-idle-toggle[aria-pressed=true]{background:#fff4cd;border-color:#dc9c22;color:#805700}

@media (max-width: 760px) {
  [data-view="apo"].apo-screen { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  [data-view="apo"] .apo-detail { scroll-margin-top: calc(var(--header-height, 90px) + 12px); }
}

[data-view="apo"] .apo-detail[hidden] { display: none; }

.apo-card-last-call { display: inline-block; white-space: nowrap; font-weight: 700; }

.apo-contact-tools{margin-left:auto;display:flex;gap:6px;flex-shrink:0}.apo-contact-tools button,.apo-correction button{border:1px solid #0876bc;background:white;color:#0876bc;border-radius:6px;padding:6px 14px;cursor:pointer}.apo-contact-tools [data-contact-delete]{border-color:#da6797;color:#ba4777}.apo-correction-fields{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}.apo-correction-fields label{display:flex;align-items:center;gap:6px}.apo-correction-fields input,.apo-correction-fields select{font:inherit;padding:5px;border:1px solid #a7c78c;border-radius:5px}.apo-correction [hidden]{display:none!important}

.apo-contact-tools button{font-size:12px;line-height:1.4;padding:3px 8px;border-radius:4px}

.apo-history article:has(.apo-contact-tools){position:relative}
.apo-history article:has(.apo-contact-tools)>.apo-history-line{padding-right:80px;min-height:36px}
.apo-contact-tools{position:absolute;top:10px;right:10px;gap:8px}
.apo-contact-tools button.apo-history-icon{width:32px;height:32px;min-height:0;padding:0;border:0;background:transparent}
.apo-contact-tools img{width:100%;height:100%;object-fit:contain}
.apo-correction [data-correction-save]{background:#0876bc;color:#fff}