
/* WW Epaper Addon - Calendar (UI Controls) v1.1.1 */
:root{
  --ww-ep-left-w: 260px;
  --ww-ep-right-w: 260px;
  --ww-ep-left-h: 80vh;
  --ww-ep-right-h: auto;
  --ww-ep-gap: 14px;
  --ww-ep-mid-pad: 8px;

  --ww-ep-btn-bg: #111827;
  --ww-ep-btn-color: #ffffff;
  --ww-ep-btn-border: transparent;
  --ww-ep-btn-radius: 6px;
  --ww-ep-btn-font-size: 14px;
  --ww-ep-btn-font-weight: 600;
  --ww-ep-btn-min-w: 110px;
  --ww-ep-btn-height: 36px;
  --ww-ep-btn-pad-x: 12px;
  --ww-ep-btn-pad-y: 6px;

  --ww-ep-hover-bg: #1f2937;
  --ww-ep-hover-color: #ffffff;
  --ww-ep-hover-border: #1f2937;

  --ww-ep-active-bg: #2563eb;
  --ww-ep-active-color: #ffffff;
  --ww-ep-active-border: #1d4ed8;

  --ww-cal-header-bg: #f3f4f6;
  --ww-cal-header-color: #111827;
  --ww-cal-cell-bg: #ffffff;
  --ww-cal-cell-color: #111827;
  --ww-cal-hover-bg: #f3f4f6;
  --ww-cal-hover-color: #111827;
  --ww-cal-issue-bg: #fff4cc;
  --ww-cal-issue-color: #111827;
  --ww-cal-today-bg: #0f3d91;
  --ww-cal-today-color: #ffffff;
  --ww-cal-radius: 6px;
}

/* Panels */
.ww-ep-wrap{ grid-template-columns: var(--ww-ep-left-w) 1fr var(--ww-ep-right-w) !important; gap: var(--ww-ep-gap) !important; }
.ww-ep-left{ height: var(--ww-ep-left-h) !important; max-height: var(--ww-ep-left-h) !important; }
.ww-ep-right{ max-height: var(--ww-ep-right-h) !important; }
.ww-ep-middle{ padding: var(--ww-ep-mid-pad) !important; }

/* Buttons */
.ww-ep-top-actions .ww-ep-btn,
.ww-ep-bottom-nav .btn-prev,
.ww-ep-bottom-nav .btn-next,
.ww-ep-pagebar .ww-ep-num{
  background: var(--ww-ep-btn-bg) !important;
  color: var(--ww-ep-btn-color) !important;
  border-color: var(--ww-ep-btn-border) !important;
  border-style: solid; border-width: 1px;
  border-radius: var(--ww-ep-btn-radius) !important;
  font-size: var(--ww-ep-btn-font-size) !important;
  font-weight: var(--ww-ep-btn-font-weight) !important;
  min-width: var(--ww-ep-btn-min-w) !important;
  height: var(--ww-ep-btn-height) !important;
  padding: var(--ww-ep-btn-pad-y) var(--ww-ep-btn-pad-x) !important;
  line-height: 1.1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  text-decoration: none !important; box-shadow: 0 1px 2px rgba(0,0,0,.08) !important; cursor: pointer !important;
}
/* Hover */
.ww-ep-top-actions .ww-ep-btn:hover,
.ww-ep-bottom-nav .btn-prev:hover,
.ww-ep-bottom-nav .btn-next:hover,
.ww-ep-pagebar .ww-ep-num:hover{
  background: var(--ww-ep-hover-bg) !important;
  color: var(--ww-ep-hover-color) !important;
  border-color: var(--ww-ep-hover-border) !important;
  filter: none !important;
}
/* Active */
.ww-ep-top-actions .ww-ep-btn.active,
.ww-ep-bottom-nav .btn-prev.active,
.ww-ep-bottom-nav .btn-next.active,
.ww-ep-pagebar .ww-ep-num.active,
.ww-ep-pagebar .ww-ep-num.current{
  background: var(--ww-ep-active-bg) !important;
  color: var(--ww-ep-active-color) !important;
  border-color: var(--ww-ep-active-border) !important;
}

/* Calendar using variables */
#ww-ep-inline-calendar .ui-datepicker{ border-radius: var(--ww-cal-radius) !important; }
#ww-ep-inline-calendar .ui-datepicker-header{ background: var(--ww-cal-header-bg) !important; color: var(--ww-cal-header-color) !important; border-radius: var(--ww-cal-radius) !important; }
#ww-ep-inline-calendar .ui-state-default{ background: var(--ww-cal-cell-bg) !important; color: var(--ww-cal-cell-color) !important; }
#ww-ep-inline-calendar .ui-state-hover{ background: var(--ww-cal-hover-bg) !important; color: var(--ww-cal-hover-color) !important; }
#ww-ep-inline-calendar .ww-ep-has-issue a{ background: var(--ww-cal-issue-bg) !important; color: var(--ww-cal-issue-color) !important; }
#ww-ep-inline-calendar .ww-ep-today a{ background: var(--ww-cal-today-bg) !important; color: var(--ww-cal-today-color) !important; }


/* v1.1.2 — mobile friendly overrides; desktop settings remain intact */
.ww-ep-wrap,.ww-ep-wrap *{box-sizing:border-box;}
@media (max-width: 1180px){
  .ww-ep-wrap{grid-template-columns:170px minmax(0,1fr) 230px !important;gap:10px !important;}
  .ww-ep-left{height:auto !important;max-height:75vh !important;}
}
@media (max-width: 900px){
  .ww-ep-wrap{display:flex !important;flex-direction:column !important;gap:12px !important;}
  .ww-ep-middle{order:1;width:100% !important;min-width:0 !important;overflow:hidden !important;}
  .ww-ep-left{order:2;width:100% !important;height:auto !important;max-height:none !important;overflow-x:auto !important;overflow-y:hidden !important;}
  .ww-ep-right{order:3;width:100% !important;height:auto !important;max-height:none !important;}
  .ww-ep-thumbs{flex-direction:row !important;overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch;}
  .ww-ep-thumb{flex:0 0 96px !important;min-width:96px !important;}
  .ww-ep-top-controls{flex-direction:column !important;align-items:stretch !important;gap:8px !important;}
  .ww-ep-top-controls .ww-ep-top-actions{position:static !important;width:100% !important;justify-content:center !important;display:flex !important;}
  .ww-ep-pagebar{justify-content:flex-start !important;overflow-x:auto !important;white-space:nowrap !important;-webkit-overflow-scrolling:touch;}
  .ww-ep-pagebar .ww-ep-num{flex:0 0 auto !important;min-width:36px !important;width:auto !important;height:36px !important;}
  .ww-ep-top-actions .ww-ep-btn{width:100% !important;max-width:240px !important;}
  .ww-ep-bottom-nav{gap:8px !important;}
  .ww-ep-bottom-nav .btn-prev,.ww-ep-bottom-nav .btn-next{flex:1 1 0 !important;min-width:0 !important;}
  #ww-ep-inline-calendar{width:100% !important;max-width:100% !important;}
  #ww-ep-inline-calendar .ui-datepicker{width:100% !important;max-width:100% !important;}
}
@media (max-width: 600px){
  .ww-ep-thumb{flex-basis:78px !important;min-width:78px !important;}
  .ww-ep-pagebar .ww-ep-num{min-width:32px !important;height:32px !important;font-size:12px !important;}
  #ww-ep-inline-calendar .ui-datepicker{font-size:13px !important;padding:6px !important;}
  #ww-ep-inline-calendar th{font-size:12px !important;padding:5px 0 !important;}
  #ww-ep-inline-calendar .ui-state-default{font-size:12px !important;padding:7px 0 !important;}
}
