/* Calendar items: the + menu's Something Else (class.calendar_items.php, calendar_items.js) and how
   an item reads on the /home calendar (class.home.php) */

/* When: Starts and Ends each get a full-width row, label on the left, the date on the right. Side
   by side they ran into each other on a phone (iOS date inputs keep a wide intrinsic width) */
.cal_item_dates { display: flex; flex-direction: column; gap: 8px; }
.cal_item_date_row { display: flex; align-items: center; gap: 12px; margin: 0; padding: 4px 4px 4px 14px; background: #f7fafa; border: 1px solid #c3d1d4; border-radius: 10px; font-weight: 500; }
.cal_item_date_label { flex: none; width: 52px; font-size: 14px; font-weight: 700; color: #4a5b5c; }
.cal_item_date { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; padding: 8px 8px; font-size: 15px; color: #16211f; text-align: right; -webkit-appearance: none; appearance: none; min-height: 38px; }
.cal_item_date::-webkit-date-and-time-value { text-align: right; }
.cal_item_date:focus { outline: none; }
.cal_item_date_row:focus-within { border-color: #0f7777; background: white; box-shadow: 0 0 0 3px #eaf7f8; }

/* Does it block your time? three rows, one lit */
.cal_item_blocks { display: flex; flex-direction: column; gap: 8px; }
.cal_item_block { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: white; border: 1px solid #d6e2e3; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.cal_item_block.is_on { border-color: #0f7777; box-shadow: 0 0 0 3px #eaf7f8; }
.cal_item_block_icon { flex: none; width: 34px; height: 34px; border-radius: 8px; background: #e6f3f3; color: #0f7777; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.cal_item_block_text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cal_item_block_label { font-weight: 700; font-size: 14px; color: #16211f; }
.cal_item_block_sub { font-weight: 500; font-size: 12px; color: #6b7c7d; margin-top: 2px; }
.cal_item_block_tick { flex: none; color: #0f7777; font-size: 18px; visibility: hidden; }
.cal_item_block.is_on .cal_item_block_tick { visibility: visible; }

.cal_item_companies { margin-top: 10px; background: white; border: 1px solid #d6e2e3; border-radius: 10px; padding: 6px 12px; }
.cal_item_companies.hide_me { display: none; }
.cal_item_companies_hint { font-size: 12px; font-weight: 700; color: #6b7c7d; text-transform: uppercase; letter-spacing: .03em; padding: 6px 0 2px; }
.cal_item_company { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 0; font-weight: 600; font-size: 14px; color: #16211f; cursor: pointer; }
.cal_item_company + .cal_item_company { border-top: 1px solid #eef3f3; }
.cal_item_company input { margin: 0; width: 18px; height: 18px; accent-color: #0f7777; flex: none; }
.cal_item_optional { font-weight: 500; color: #8a9a9b; font-size: .85em; margin-left: 4px; }

/* on the calendar: a note is a quiet slate line, blocked time is hatched so it reads as taken */
.mac_cal_chip.mcc_chip_item { background: #eef1f4; color: #3d4a5c; border-left-color: #7a8ba3; }
.mac_cal_chip.mcc_chip_item.is_blocked { background: repeating-linear-gradient(135deg, #f3e9e9, #f3e9e9 4px, #fbf4f4 4px, #fbf4f4 8px); color: #8a3b3b; border-left-color: #c0504d; }
.mac_cal_cell.mcc_item_blocked:not(.mcc_selected) .mac_cal_num { box-shadow: inset 0 -3px 0 #e2a3a1; }

.mac_cal_item_card { margin: 0 12px 10px 12px; background: #f5f7f9; border: 1px solid #dde3ea; border-radius: 10px; padding: 12px 14px; display: flex; align-items: stretch; gap: 12px; cursor: pointer; }
.mac_cal_item_card.is_blocked { background: repeating-linear-gradient(135deg, #fbf3f3, #fbf3f3 6px, #fff8f8 6px, #fff8f8 12px); border-color: #efd2d1; }
.mac_cal_item_accent { width: 4px; border-radius: 2px; background: #7a8ba3; flex: none; }
.mac_cal_item_card.is_blocked .mac_cal_item_accent { background: #c0504d; }
.mac_cal_item_block { font-size: 12px; font-weight: 700; color: #5b6b80; margin-top: 4px; }
.mac_cal_item_card.is_blocked .mac_cal_item_block { color: #a33f3c; }
.mac_cal_item_note { font-size: 13px; color: #4a5b5c; margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.mac_cal_day_window .mac_cal_item_card { margin: 0 0 10px 0; }