/* Attendance applications: New Request sheet (Figma 22316:140217) + Apply forms (22316:140742 … 141557). */

/* New Request for sheet */
.sheet.ap-sheet { gap: 16px; padding-bottom: 16px; }
.ap-req-list { display: flex; flex-direction: column; }
.ap-req {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--beerus);
  font: 700 16px/24px var(--font); color: var(--bulma); text-align: left;
}
.ap-req:last-child { border-bottom: 0; }
.ap-req > span:not(.ap-ico-short) { flex: 1; min-width: 0; }
.ap-req > img { flex: none; }
.ap-req:hover > span { color: var(--piccolo); }
.ap-ico-short { flex: none; width: 24px; height: 24px; display: grid; place-items: center; }

/* Page */
.screen.ap { display: flex; flex-direction: column; overflow: hidden; background: var(--gohan); }
.ap-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: calc(var(--sb) + 24px) 20px 40px; }
.ap-body::-webkit-scrollbar { display: none; }
.ap-head { display: flex; align-items: center; gap: 8px; height: 40px; margin-bottom: 32px; }
.ap-head h1 { flex: 1; min-width: 0; font: 700 24px/32px var(--font); color: var(--bulma); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-back { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; }
.ap-back:hover { background: var(--heles); }
.ap-form { display: flex; flex-direction: column; gap: 24px; }

/* Dropdown field (Leave type / Type) */
.ap-select {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 15px; border: 1px solid var(--beerus);
  border-radius: var(--radius-i-sm); background: var(--gohan); text-align: left;
}
.ap-select:hover { border-color: #CFCFCF; }
.ap-select[aria-expanded="true"] { border-color: var(--piccolo); }
.ap-select-ph { flex: 1; min-width: 0; font: 400 16px/24px var(--font); color: var(--trunks); }
.ap-select.is-filled { flex-direction: column; align-items: stretch; gap: 0; padding: 11px 15px 7px; }
.ap-select-label { font: 400 12px/12px var(--font); color: var(--trunks); }
.ap-select-value { font: 400 16px/24px var(--font); color: var(--bulma); }

/* Segmented chips (Leave Use, Full/Half Day, On Duty/On Tour, Morning/Evening) */
.ap-group { display: flex; flex-direction: column; gap: 8px; }
.ap-group-label { font: 400 16px/24px var(--font); color: var(--bulma); }
.ap-seg { display: flex; gap: 12px; }
.ap-seg-btn {
  padding: 7px 11px; border: 1px solid var(--piccolo); border-radius: 8px; background: var(--gohan);
  font: 400 14px/20px var(--font); color: var(--piccolo); white-space: nowrap;
}
.ap-seg-btn.is-on { background: var(--piccolo); color: var(--gohan); }
.ap-seg-btn:not(.is-on):hover { background: var(--jiren); }

/* Date / time boxes */
.ap-box { display: flex; flex-direction: column; gap: 16px; padding: 15px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); }
.ap-div { width: 100%; height: 1px; margin: 0; border: 0; background: var(--beerus); }
.ap-row { display: flex; align-items: center; gap: 10px; }
.ap-row-label { flex: 1; min-width: 0; font: 400 16px/24px var(--font); color: rgba(0, 0, 0, 0.25); }
.ap-row-label.strong { color: var(--trunks); }
.ap-chips { flex: none; display: flex; align-items: center; gap: 8px; }
.ap-chip {
  position: relative; display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 4px;
  background: var(--heles); font: 400 16px/24px var(--font); color: var(--piccolo); white-space: nowrap; cursor: pointer;
}
.ap-chip:hover { background: rgba(0, 0, 0, 0.07); }
.ap-chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ap-chip input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.ap-time.is-empty { min-width: 56px; justify-content: center; letter-spacing: 1px; }
.ap-session { padding: 4px 8px 4px 12px; }
.ap-session sup { font-size: 10.32px; line-height: 0; vertical-align: 5px; }

/* Reason */
.ap-reason-wrap { display: flex; flex-direction: column; gap: 8px; }
.ap-reason {
  position: relative; display: flex; flex-direction: column; min-height: 88px; padding: 15px;
  border: 1px solid var(--beerus); border-radius: var(--radius-s-sm); background: var(--gohan); cursor: text;
}
.ap-reason:focus-within { border-color: var(--piccolo); }
.ap-reason textarea {
  display: block; width: 100%; min-height: 24px; padding: 0; border: 0; outline: 0; resize: none; overflow: hidden; background: transparent;
  font: 400 16px/24px var(--font); color: var(--bulma);
}
.ap-reason textarea::placeholder { color: var(--trunks); }
.ap-reason-label { display: none; font: 400 12px/12px var(--font); color: var(--trunks); }
.ap-scale { position: absolute; right: 7px; bottom: 7px; pointer-events: none; }
.ap-reason.is-filled { min-height: 0; padding: 11px 15px 7px; border-radius: var(--radius-i-sm); }
.ap-reason.is-filled .ap-reason-label { display: block; }
.ap-reason.is-filled .ap-scale { display: none; }
.ap-help { font: 400 12px/16px var(--font); color: var(--trunks); }

/* Attachment (reuses .an-attach; empty state is a single grey row) */
.ap-attach:not(.has-files) .an-attach-title { color: var(--trunks); }
.ap-minus:hover img { filter: invert(24%) sepia(83%) saturate(2500%) hue-rotate(345deg); }
.ap-attach { padding: 15px; }