/* ปฏิทินองค์กร — หน้าเต็ม */
.oc { display: flex; flex-direction: column; min-height: calc(calc(100vh / var(--z, 1)) - var(--tb-h, 60px) - 51px); }
.oc-card { flex: 1; display: flex; flex-direction: column; padding: 12px 14px 14px; min-height: 0; }
.oc-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.oc-bar h2 { margin: 0 6px; font-size: 17px; font-weight: 600; min-width: 150px; text-align: center; }
.oc-nav { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; }
.oc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; margin-left: 4px; }
.oc-seg button { height: 30px; padding: 0 14px; border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; }
.oc-seg button.on { background: var(--primary-l); color: var(--primary); font-weight: 600; }
.oc-search { margin-left: auto; min-width: 200px; }
.oc-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.oc-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font: inherit; font-size: 11.5px; color: var(--text-2); cursor: pointer; }
.oc-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.oc-chip.off { opacity: .45; } .oc-chip.off i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.oc-chip:hover { border-color: var(--c); }
.oc-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.oc-main { display: flex; flex-direction: column; min-height: 460px; min-width: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.oc-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: #faf8f7; border-bottom: 1px solid var(--border); }
.oc-dow div { padding: 7px 8px; font-size: 11.5px; font-weight: 600; color: var(--text-3); text-align: center; }
.oc-dow .sun, .oc-day.sun .oc-dn b { color: #d34848; } .oc-dow .sat, .oc-day.sat .oc-dn b { color: #3b6fd8; }
.oc-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, minmax(86px, 1fr)); }
.oc-day { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 5px 3px; cursor: pointer; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.oc-day:nth-child(7n) { border-right: 0; } .oc-day:nth-last-child(-n+7) { border-bottom: 0; }
.oc-day:hover { background: #fdf8f6; } .oc-day.out { background: #fbfaf9; } .oc-day.out .oc-dn b, .oc-day.out .oc-ev { opacity: .5; }
.oc-day.sel { background: var(--primary-l); box-shadow: inset 0 0 0 1.5px var(--primary); }
.oc-dn { display: flex; align-items: center; gap: 5px; min-width: 0; }
.oc-dn b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 600; flex: none; }
.oc-day.today .oc-dn b { background: var(--primary); color: #fff; }
.oc-dn em { font-style: normal; font-size: 10px; color: #d34848; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-ev { display: flex; align-items: center; gap: 4px; min-width: 0; height: 18px; padding: 0 5px; border-radius: 5px; background: color-mix(in srgb, var(--c) 14%, #fff); font-size: 11px; color: #2b2622; }
.oc-ev i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.oc-ev small { font-size: 10px; color: var(--text-3); flex: none; } .oc-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-ev.doc { background: transparent; border: 1px dashed var(--c); }
.oc-more { font-size: 10.5px; color: var(--text-3); padding-left: 4px; }
.oc-side { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.oc-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: #faf8f7; }
.oc-sh small { display: block; font-size: 10.5px; color: var(--text-3); } .oc-sh b { font-size: 13.5px; font-weight: 600; }
.oc-sh em { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-style: normal; font-size: 11px; color: #d34848; } .oc-sh em .ms { font-size: 14px; }
.oc-sl { flex: 1; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.oc-sl h4 { margin: 8px 0 0; font-size: 11px; font-weight: 600; color: var(--text-3); }
.oc-none { text-align: center; color: var(--text-4); font-size: 12px; padding: 22px 0; }
.oc-card2 { border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; }
.oc-card2h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.oc-card2 b { font-weight: 600; } .oc-card2 p { margin: 6px 0 0; font-size: 12px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.oc-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--c, var(--text-3)); } .oc-tag .ms { font-size: 14px; }
.oc-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; color: var(--text-3); } .oc-meta .ms { font-size: 14px; }
.oc-act { display: inline-flex; gap: 2px; } .oc-act button { width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; padding: 0; }
.oc-act button:hover { background: var(--primary-l); color: var(--primary); } .oc-act .ms { font-size: 16px; }
.oc-act button.del.arm { background: #dc2626; color: #fff; }
.oc-doc { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 6px 9px; border: 1px dashed #0f8b8d; border-radius: 8px; color: var(--text-2); } .oc-doc .ms { font-size: 16px; color: #0f8b8d; }
.oc-up { display: flex; gap: 8px; align-items: flex-start; padding: 5px 4px; border-radius: 8px; cursor: pointer; font-size: 12px; } .oc-up:hover { background: #faf8f7; }
.oc-up i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--c); flex: none; } .oc-up b { font-weight: 500; display: block; } .oc-up small { color: var(--text-3); font-size: 11px; }
.oc-agenda { overflow-y: auto; flex: 1; padding: 6px 12px; }
.oc-ag { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .oc-ag:last-child { border-bottom: 0; }
.oc-agd { width: 54px; flex: none; text-align: center; cursor: pointer; } .oc-agd b { display: block; font-size: 20px; line-height: 1.1; } .oc-agd span { font-size: 11px; color: var(--text-3); } .oc-agd.sel b { color: var(--primary); }
.oc-agl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.oc-agh { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #d34848; } .oc-agh .ms { font-size: 15px; }
.oc-agi { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; background: color-mix(in srgb, var(--c) 10%, #fff); cursor: pointer; }
.oc-agi i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; } .oc-agi > div { flex: 1; min-width: 0; } .oc-agi b { font-weight: 500; font-size: 12.5px; display: block; } .oc-agi small { font-size: 11px; color: var(--text-3); }
.oc-form .oc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .oc-form .oc-row2[hidden] { display: none; }
.oc-check { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 12.5px; cursor: pointer; }
.oc-ta { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 13px; resize: vertical; background: #fff; box-sizing: border-box; }
.oc-ta:focus { outline: 0; border-color: #ee9a85; box-shadow: 0 0 0 4px rgba(208,50,14,.12); }
.oc-err { margin-bottom: 8px; padding: 7px 10px; border-radius: 8px; background: #fde8e8; color: #b42318; font-size: 12px; }
@media (max-width: 1100px) { .oc-body { grid-template-columns: 1fr; } .oc-side { max-height: 360px; } }
.oc-by { margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--text-3); }
.oc-memf { position: relative; }
.oc-memf .field-lbl small { font-weight: 400; color: var(--text-4); }
.oc-mem { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 40px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 12px; background: #faf8f7; cursor: text; }
.oc-mem:focus-within { background: #fff; border-color: #ee9a85; box-shadow: 0 0 0 4px rgba(208,50,14,.12); }
.oc-mem input { flex: 1; min-width: 140px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; height: 28px; }
.oc-mchip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; background: #f1ede9; font-size: 11.5px; color: var(--text-2); }
.oc-mchip.del { background: var(--primary-l); color: var(--primary); padding-right: 4px; }
.oc-mchip button { width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.oc-mchip button:hover { background: rgba(0,0,0,.1); }
.oc-mchip.read { background: #e3f6ec; color: #1c9a62; } .oc-mchip .ms { font-size: 14px; }
.oc-msug { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(40,30,25,.18); padding: 4px; max-height: 220px; overflow-y: auto; }
.oc-ms { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; font-size: 12.5px; cursor: pointer; } .oc-ms .ms { font-size: 17px; color: var(--primary); }
.oc-ms:hover, .oc-ms.on { background: var(--primary-l); } .oc-ms.none { color: var(--text-4); cursor: default; } .oc-ms.none:hover { background: transparent; }
.oc-mems { display: flex; gap: 6px; align-items: flex-start; margin-top: 5px; } .oc-mems > .ms { font-size: 14px; color: var(--text-3); margin-top: 4px; } .oc-mems > div { display: flex; flex-wrap: wrap; gap: 4px; }
.oc-meta b { color: var(--text-2); font-weight: 600; }