/* ---------------------------------------------------------------- appointments (Ραντεβού) — the secretariat */
.ap-head { margin-bottom: 14px; gap: 12px; }
.ap-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); padding: 4px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); }
.ap-state.on { color: var(--success); background: var(--success-soft); border-color: #c6e6d3; font-weight: 600; }
.ap-week .card-head h3 { margin: 0 4px; min-width: 210px; text-align: center; }
.ap-grid { display: grid; gap: 0; border-top: 1px solid var(--border); }
.ap-col { padding: 10px 8px 14px; border-right: 1px solid var(--border); min-height: 260px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-col:last-child { border-right: 0; }
.ap-col.today { background: var(--primary-soft); }
.ap-col.past { background: var(--surface-2); }
.ap-dh { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 0 2px 6px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.ap-dh b { font-size: 13px; }
.ap-dh span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-col.today .ap-dh b, .ap-col.today .ap-dh span { color: var(--primary); }
.ap-ov { font-size: 11px; font-weight: 650; color: var(--warning); background: var(--warning-soft); border-radius: 6px; padding: 3px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ov.closed { color: var(--danger); background: var(--danger-soft); }
.ap-none { font-size: 12px; color: var(--faint); padding: 6px 2px; }
.ap-e { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: 1px solid var(--border); border-left: 4px solid var(--primary); background: var(--surface); border-radius: 8px; padding: 6px 8px; font: inherit; cursor: pointer; min-width: 0; }
.ap-e:hover { border-color: var(--primary-line); box-shadow: var(--shadow-sm); }
.ap-e .ap-t { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.ap-e .ap-n { font-size: 12.5px; font-weight: 600; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-e .ap-s { font-size: 11.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-e .ap-st { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.ap-e .ap-web { font-size: 10px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.ap-e.free { border: 1px dashed var(--border-strong); border-left: 4px solid #cfe3d6; background: transparent; flex-direction: row; align-items: baseline; gap: 8px; padding: 5px 8px; }
.ap-e.free .ap-t { color: var(--success); }
.ap-e.free .ap-n { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.ap-e.free:hover { border-color: var(--success); background: var(--success-soft); }
.ap-e.free.past, .ap-e.free:disabled { opacity: 0.45; cursor: default; }
.ap-e.free:disabled:hover { border-color: var(--border-strong); background: transparent; box-shadow: none; }
.ap-e.st-done { border-left-color: var(--success); }
.ap-e.st-done .ap-st { color: var(--success); }
.ap-e.st-noshow { border-left-color: var(--warning); }
.ap-e.st-noshow .ap-st { color: var(--warning); }
.ap-e.block { border-left-color: var(--faint); background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, #eef1f5 6px, #eef1f5 12px); }
.ap-e.block .ap-n { color: var(--muted); }
.ap-legend { border-top: 1px solid var(--border); line-height: 1.9; }
.ap-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin: 0 4px 0 10px; border: 1px solid var(--border-strong); }
.ap-key:first-child { margin-left: 0; }
.ap-key.free { border-style: dashed; border-color: var(--success); }
.ap-key.booked { background: var(--primary); border-color: var(--primary); }
.ap-key.done { background: var(--success); border-color: var(--success); }
.ap-key.noshow { background: var(--warning); border-color: var(--warning); }
.ap-key.block { background: #dde2e9; }
.ap-note-cell { max-width: 260px; color: var(--text-2); }

/* availability form */
.ap-avail { align-items: start; }
.ap-enable { align-items: flex-start; font-size: 13px; line-height: 1.45; }
.ap-enable input { margin-top: 2px; }
.ap-preview { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.5; }
.ap-rules { grid-template-columns: 1fr 1fr; }
.ap-weekly td { vertical-align: middle; }
.ap-range { display: inline-flex; align-items: center; gap: 4px; margin: 2px 10px 2px 0; }
.ap-range .input { width: 74px; height: 30px; padding-top: 0; padding-bottom: 0; text-align: center; font-variant-numeric: tabular-nums; }
#ap-dates .input, #ap-dates .select { height: 30px; padding-top: 0; padding-bottom: 0; }
.ap-save-bar { position: sticky; bottom: 0; margin-top: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 -4px 14px rgba(20, 32, 49, 0.06); z-index: 2; }
.ap-kv { width: 100%; }
.ap-kv th { width: 180px; color: var(--muted); font-weight: 600; vertical-align: top; }
.ap-today-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ap-today h3 { display: flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- appointments — the student's portal */
.apx-mine { display: grid; gap: 10px; margin-top: 14px; }
.apx-card { display: flex; align-items: center; gap: 14px; }
.apx-when { flex: none; width: 64px; text-align: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); padding: 8px 4px; }
.apx-when b { display: block; font-size: 22px; line-height: 1.1; }
.apx-when span { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.apx-card.past .apx-when, .apx-card.cancelled .apx-when { background: var(--surface-2); color: var(--muted); }
.apx-info { flex: 1; min-width: 0; }
.apx-info .t { font-weight: 700; }
.apx-info .s { font-size: 12.5px; color: var(--muted); }
.apx-days { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.apx-day { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; text-align: center; min-width: 86px; }
.apx-day b { display: block; font-size: 13px; }
.apx-day span { font-size: 11.5px; color: var(--muted); }
.apx-day.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.apx-day.on span { color: var(--primary); }
.apx-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 8px; }
.apx-slot { border: 1px solid var(--primary-line); color: var(--primary); background: var(--surface); border-radius: 8px; padding: 8px 0; font: inherit; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.apx-slot:hover { background: var(--primary-soft); }
.apx-slot.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.apx-form { margin-top: 14px; display: grid; gap: 10px; }
.apx-info-box { white-space: pre-line; }