/* Event Calendar Plugin — styles are scoped under .ec-app to avoid leaking into the site theme */
.ec-app{
  --ec-bg:#EEF1F4;
  --ec-surface:#FFFFFF;
  --ec-surface-2:#F7F8FA;
  --ec-ink:#202634;
  --ec-ink-soft:#5B6472;
  --ec-ink-faint:#9AA2AF;
  --ec-border:#DFE3E8;
  --ec-border-soft:#E9ECEF;
  --ec-primary:#2F4858;
  --ec-primary-ink:#FFFFFF;
  --ec-today-bg:#FCEEDD;
  --ec-today-ring:#E8A33D;
  --ec-danger:#D1495B;
  --ec-shadow:0 8px 24px rgba(32,38,52,0.10);
  --ec-shadow-sm:0 2px 8px rgba(32,38,52,0.08);

  font-family:'Sarabun',sans-serif;
  background:var(--ec-bg);
  color:var(--ec-ink);
  -webkit-font-smoothing:antialiased;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--ec-shadow-sm);
  line-height:normal;
}
.ec-app *{box-sizing:border-box;}
.ec-app h1,.ec-app h2,.ec-app h3,.ec-app .ec-disp{font-family:'Kanit',sans-serif;}
.ec-app button{font-family:'Sarabun',sans-serif;}

.ec-shell{display:flex;min-height:640px;}

/* ---------- Sidebar ---------- */
.ec-sidebar{width:230px;flex:0 0 230px;padding:20px 16px;border-right:1px solid var(--ec-border);display:flex;flex-direction:column;gap:20px;background:var(--ec-bg);}
.ec-brand{display:flex;align-items:center;gap:8px;font-family:'Kanit',sans-serif;font-weight:600;font-size:18px;color:var(--ec-primary);padding:0 2px;}
.ec-brand-mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(155deg, var(--ec-primary) 55%, var(--ec-today-ring) 55%);flex:0 0 auto;}
.ec-btn-new{background:var(--ec-primary);color:var(--ec-primary-ink);border:none;border-radius:6px;padding:11px 14px;font-weight:600;font-size:14.5px;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:var(--ec-shadow-sm);transition:transform .12s ease, background .15s ease;}
.ec-btn-new:hover{background:#25404F;transform:translateY(-1px);}
.ec-btn-new:active{transform:translateY(0);}
.ec-side-section-title{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ec-ink-faint);text-transform:uppercase;margin-bottom:8px;}
.ec-cat-list{display:flex;flex-direction:column;gap:2px;}
.ec-cat-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--ec-ink);user-select:none;}
.ec-cat-item:hover{background:var(--ec-surface-2);}
.ec-cat-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.ec-cat-check{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--ec-border);display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--ec-surface);}
.ec-cat-check.on{background:var(--ec-primary);border-color:var(--ec-primary);}
.ec-cat-check.on svg{display:block;}
.ec-cat-check svg{display:none;width:10px;height:10px;}
.ec-cat-name{flex:1;}
.ec-side-stats{margin-top:auto;background:var(--ec-surface-2);border-radius:10px;padding:14px;font-size:13px;color:var(--ec-ink-soft);line-height:1.7;}
.ec-side-stats b{color:var(--ec-ink);font-family:'Kanit',sans-serif;font-size:20px;display:block;}
.ec-login-note{font-size:12px;color:var(--ec-ink-faint);line-height:1.6;background:var(--ec-surface-2);padding:10px;border-radius:8px;}

/* ---------- Main ---------- */
.ec-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--ec-bg);}
.ec-topbar{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--ec-border);flex-wrap:wrap;}
.ec-nav-btns{display:flex;align-items:center;gap:6px;}
.ec-icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--ec-border);background:var(--ec-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ec-ink-soft);}
.ec-icon-btn:hover{background:var(--ec-surface-2);color:var(--ec-ink);}
.ec-today-btn{border:1px solid var(--ec-border);background:var(--ec-surface);border-radius:8px;padding:0 14px;height:32px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ec-ink);}
.ec-today-btn:hover{background:var(--ec-surface-2);}
.ec-title-block{font-size:21px;font-weight:600;color:var(--ec-ink);white-space:nowrap;}
.ec-topbar .ec-spacer{flex:1;}
.ec-view-switch{display:flex;background:var(--ec-surface-2);border-radius:9px;padding:3px;gap:2px;}
.ec-view-switch button{border:none;background:transparent;padding:7px 13px;border-radius:7px;font-size:13.5px;font-weight:600;color:var(--ec-ink-soft);cursor:pointer;}
.ec-view-switch button.active{background:var(--ec-surface);color:var(--ec-primary);box-shadow:var(--ec-shadow-sm);}

.ec-view-area{flex:1;padding:0 22px 24px;overflow:auto;}

/* ---------- Month view ---------- */
.ec-dow-row{display:grid;grid-template-columns:repeat(7,1fr);position:sticky;top:0;background:var(--ec-bg);z-index:2;}
.ec-dow-row div{padding:10px 8px 8px;font-size:12.5px;font-weight:700;color:var(--ec-ink-faint);text-align:left;letter-spacing:.02em;}
.ec-month-grid{border-top:1px solid var(--ec-border-soft);border-left:1px solid var(--ec-border-soft);}
.ec-week-row{position:relative;border-bottom:1px solid var(--ec-border-soft);}
.ec-week-numbers{display:grid;grid-template-columns:repeat(7,1fr);}
.ec-day-cell{border-right:1px solid var(--ec-border-soft);min-height:118px;padding:6px 6px 4px;cursor:pointer;position:relative;}
.ec-day-cell.pad{background:repeating-linear-gradient(135deg, transparent 0 8px, #F4F5F7 8px 9px);}
.ec-day-cell.pad .ec-day-num{color:var(--ec-ink-faint);}
.ec-day-cell:hover{background:#FAFBFC;}
.ec-day-num{font-family:'Kanit',sans-serif;font-size:14px;font-weight:600;color:var(--ec-ink);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.ec-day-cell.today .ec-day-num{background:var(--ec-today-ring);color:#fff;}
.ec-day-cell.today{background:var(--ec-today-bg);}
.ec-events-overlay{position:absolute;left:0;right:0;top:34px;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:20px;row-gap:3px;column-gap:0;pointer-events:none;}
.ec-ev-bar{pointer-events:auto;margin:0 3px;height:20px;line-height:20px;border-radius:5px;padding:0 7px;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08);}
.ec-ev-bar.dot-style{background:transparent!important;color:var(--ec-ink);font-weight:500;display:flex;align-items:center;gap:6px;padding:0 4px;}
.ec-ev-bar .ec-dot-style-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.ec-more-link{pointer-events:auto;grid-row:4;font-size:11.5px;font-weight:600;color:var(--ec-ink-soft);padding:1px 8px;cursor:pointer;}
.ec-more-link:hover{color:var(--ec-primary);text-decoration:underline;}

/* ---------- Week/Day time-grid view ---------- */
.ec-tg-wrap{display:flex;flex-direction:column;}
.ec-tg-allday{display:flex;border-bottom:1px solid var(--ec-border);padding:8px 0 8px 56px;gap:8px;flex-wrap:wrap;min-height:20px;}
.ec-tg-header{display:grid;grid-template-columns:56px repeat(var(--ec-cols,7),1fr);border-bottom:1px solid var(--ec-border);}
.ec-tg-header .ec-tg-col-head{padding:10px 6px;text-align:center;}
.ec-tg-col-head .ec-dname{font-size:12px;color:var(--ec-ink-faint);font-weight:700;}
.ec-tg-col-head .ec-dnum{font-family:'Kanit',sans-serif;font-size:17px;font-weight:600;margin-top:2px;}
.ec-tg-col-head.today .ec-dnum{color:var(--ec-today-ring);}
.ec-tg-body{display:grid;grid-template-columns:56px repeat(var(--ec-cols,7),1fr);position:relative;}
.ec-tg-hours{display:flex;flex-direction:column;}
.ec-tg-hour-label{height:48px;font-size:11px;color:var(--ec-ink-faint);text-align:right;padding-right:8px;transform:translateY(-6px);}
.ec-tg-col{position:relative;border-left:1px solid var(--ec-border-soft);}
.ec-tg-col.today{background:var(--ec-today-bg);}
.ec-tg-slot{height:48px;border-bottom:1px solid var(--ec-border-soft);cursor:pointer;}
.ec-tg-slot:hover{background:rgba(47,72,88,0.04);}
.ec-tg-event{position:absolute;left:3px;right:3px;border-radius:6px;padding:4px 6px;font-size:11.5px;font-weight:600;color:#fff;overflow:hidden;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15);line-height:1.3;}
.ec-tg-event .ec-t{font-weight:500;font-size:10.5px;opacity:.9;display:block;}

/* ---------- List view ---------- */
.ec-list-view{max-width:640px;margin:6px auto 0;}
.ec-list-date-head{font-family:'Kanit',sans-serif;font-weight:600;font-size:14px;color:var(--ec-primary);padding:16px 0 8px;border-bottom:1px solid var(--ec-border-soft);margin-bottom:6px;}
.ec-list-item{display:flex;align-items:center;gap:12px;padding:10px 6px;border-radius:8px;cursor:pointer;}
.ec-list-item:hover{background:var(--ec-surface-2);}
.ec-list-time{width:70px;flex:0 0 auto;font-size:12.5px;color:var(--ec-ink-soft);font-weight:600;}
.ec-list-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.ec-list-title{font-size:14.5px;color:var(--ec-ink);flex:1;}
.ec-list-empty{color:var(--ec-ink-faint);text-align:center;padding:60px 0;font-size:14px;}

/* ---------- Modal ---------- */
.ec-modal-backdrop{position:fixed;inset:0;background:rgba(20,24,32,0.42);display:flex;align-items:center;justify-content:center;z-index:100000;padding:16px;}
.ec-modal{background:var(--ec-surface);border-radius:14px;width:420px;max-width:100%;box-shadow:var(--ec-shadow);max-height:90vh;overflow:auto;font-family:'Sarabun',sans-serif;color:var(--ec-ink);}
.ec-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--ec-border-soft);}
.ec-modal-head h3{margin:0;font-size:17px;font-weight:600;font-family:'Kanit',sans-serif;}
.ec-modal-close{border:none;background:none;font-size:20px;color:var(--ec-ink-faint);cursor:pointer;line-height:1;padding:4px;}
.ec-modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px;}
.ec-field label{display:block;font-size:12.5px;font-weight:700;color:var(--ec-ink-soft);margin-bottom:6px;}
.ec-field input[type=text],.ec-field input[type=date],.ec-field input[type=time],.ec-field select,.ec-field textarea{width:100%;border:1px solid var(--ec-border);border-radius:8px;padding:9px 10px;font-family:'Sarabun',sans-serif;font-size:14.5px;color:var(--ec-ink);background:var(--ec-surface);}
.ec-field textarea{resize:vertical;min-height:56px;}
.ec-field input:focus,.ec-field select:focus,.ec-field textarea:focus{outline:2px solid var(--ec-primary);outline-offset:1px;}
.ec-row2{display:flex;gap:10px;}
.ec-row2 .ec-field{flex:1;}
.ec-checkbox-row{display:flex;align-items:center;gap:8px;font-size:14px;}
.ec-checkbox-row input{width:16px;height:16px;}
.ec-cat-pick{display:flex;flex-wrap:wrap;gap:8px;}
.ec-cat-pill{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:20px;border:1.5px solid var(--ec-border);font-size:13px;cursor:pointer;color:var(--ec-ink-soft);}
.ec-cat-pill.sel{border-color:var(--ec-primary);color:var(--ec-ink);background:var(--ec-surface-2);font-weight:600;}
.ec-cat-pill .ec-d{width:8px;height:8px;border-radius:50%;}
.ec-modal-foot{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--ec-border-soft);}
.ec-btn{border:none;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;}
.ec-btn-primary{background:var(--ec-primary);color:#fff;}
.ec-btn-primary:hover{background:#25404F;}
.ec-btn-ghost{background:var(--ec-surface-2);color:var(--ec-ink);}
.ec-btn-ghost:hover{background:var(--ec-border-soft);}
.ec-btn-danger{background:transparent;color:var(--ec-danger);}
.ec-btn-danger:hover{text-decoration:underline;}
.ec-modal-foot .ec-push{flex:1;}
.ec-notice{padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:10px;}
.ec-notice.error{background:#FBE9EC;color:var(--ec-danger);}

/* Day-detail popover (for "+more") */
.ec-day-detail-list{display:flex;flex-direction:column;gap:4px;}
.ec-day-detail-item{display:flex;align-items:center;gap:9px;padding:8px 8px;border-radius:8px;cursor:pointer;}
.ec-day-detail-item:hover{background:var(--ec-surface-2);}
.ec-day-detail-item .ec-dd-time{font-size:12px;color:var(--ec-ink-soft);width:52px;flex:0 0 auto;}
.ec-day-detail-item .ec-dd-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.ec-day-detail-item .ec-dd-title{font-size:14px;color:var(--ec-ink);}

.ec-app ::-webkit-scrollbar{width:9px;height:9px;}
.ec-app ::-webkit-scrollbar-thumb{background:#D3D8DE;border-radius:5px;}
.ec-app ::-webkit-scrollbar-track{background:transparent;}

.ec-loading{padding:60px;text-align:center;color:var(--ec-ink-faint);font-size:14px;}

@media (max-width:820px){
  .ec-sidebar{display:none;}
  .ec-title-block{font-size:17px;}
  .ec-day-cell{min-height:84px;}
  .ec-shell{min-height:520px;}
}