/**
 * PonPon School Ops v5.9.21 – Complete Design System
 * Scoped under #ppso-app to prevent DIVI / WPML conflicts
 */
/* System font stack - no external font import needed */

/* ================================================================
   CSS Variables
   ================================================================ */
:root {
  /* Put a known Chinese sans-serif first. On Windows, starting with an
   * unavailable -apple-system font can make CJK glyphs fall back to a serif
   * face even when the surrounding Latin text looks sans-serif. */
  --ppf: "PonPon CJK", "Noto Sans SC", "Microsoft YaHei", "Microsoft JhengHei", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Arial, sans-serif;
  --bg: #F6F8FB;
  --sf: #FFFFFF;
  --sfh: #F4F7FB;
  --bd: #E5E9F0;
  --bl: #EEF2F8;
  --t1: #1A2433;
  --t2: #475569;
  --t3: #7A8699;
  --ac: #2A6AE0;
  --ac-h: #1F56BD;
  --acbg: #EEF3FE;
  --g: #2A6AE0;
  --gbg: #EEF4FF;
  --b: #2A6AE0;
  --bbg: #EFF6FF;
  --y: #B7791F;
  --ybg: #FEF7EC;
  --r: #D64545;
  --rbg: #FDEDED;
  --p: #7C3AED;
  /* v5.117.0 — SaaS polish: slightly softer corners (cards 14 / controls 10),
   * a warm-neutral shadow ramp, unchanged palette (blue/gray/white + semantics). */
  --rd: 14px;
  --rds: 10px;
  --rdx: 7px;
  --s1: 0 1px 2px rgba(16,24,40,.05);
  --s2: 0 2px 5px rgba(16,24,40,.07);
  --s3: 0 6px 16px rgba(16,24,40,.09);
  --s4: 0 18px 44px rgba(16,24,40,.16);
  --tr: .18s cubic-bezier(.4,0,.2,1);
  --nav: #0F172A;
  --nav2: #0B1220;
}

/* ================================================================
   Root & Reset  (all scoped to #ppso-app)
   ================================================================ */
#ppso-app{font-family:var(--ppf)!important;overflow-x:hidden!important;-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;line-height:1.6!important;color:var(--t1)!important;background:var(--bg)!important;min-height:100vh;font-size:15px!important}
/* Hide WP admin bar on mobile when app is active */
@media(max-width:1099px){body.admin-bar #wpadminbar{display:none!important}body.admin-bar{margin-top:0!important}body.admin-bar html{margin-top:0!important}}
#ppso-app *,#ppso-app *::before,#ppso-app *::after{box-sizing:border-box!important}
#ppso-app button{cursor:pointer;font-family:var(--ppf)!important;border:none;background:none}
#ppso-app input,#ppso-app select,#ppso-app textarea{font-family:var(--ppf)!important;font-size:14px!important}
#ppso-app a{color:inherit;text-decoration:none}
#ppso-app h1,#ppso-app h2,#ppso-app h3{font-family:var(--ppf)!important;letter-spacing:-.4px;line-height:1.2;font-weight:700!important;padding-bottom:0!important;margin-bottom:0!important;color:var(--t1)!important;text-transform:none!important;background:none!important;border:none!important}
#ppso-app p,#ppso-app div,#ppso-app span,#ppso-app a,#ppso-app li{font-family:var(--ppf)!important}

/* v5.271.0 — bundle the project-used CJK glyphs so Chinese UI text does not
 * depend on a browser/OS fallback choosing a thinner face for individual
 * characters. The subset is generated from the shipped project text and is
 * intentionally small enough to keep the media-lite ZIP lightweight. */
@font-face{
  font-family:"PonPon CJK";
  src:url("../fonts/ponpon-cjk.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  unicode-range:U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;
}

/* v5.270.0 — keep status/value text in the same blue family as the primary
 * action. Inline JS styles are serialized by browsers as rgb(), so cover the
 * common green tokens used by older page fragments as well as the CSS tokens. */
#ppso-app [style*="color: rgb(22, 163, 74)"],
#ppso-app [style*="color: rgb(21, 146, 78)"],
#ppso-app [style*="color: rgb(21, 128, 61)"],
#ppso-app [style*="color: rgb(22, 101, 52)"],
#ppso-app [style*="color: rgb(5, 150, 105)"],
#ppso-app [style*="color: rgb(16, 185, 129)"],
#ppso-app [style*="color: rgb(46, 125, 50)"],
#ppso-app [style*="color: rgb(67, 160, 71)"],
#ppso-app [style*="color: rgb(76, 175, 80)"],
#ppso-app [style*="color:#16A34A"],
#ppso-app [style*="color:#15924E"],
#ppso-app [style*="color:#15803D"],
#ppso-app [style*="color:#166534"]{color:var(--ac)!important}

/* Older page fragments used inline blue/green button styles instead of the
 * shared button classes. Normalize those primary-looking buttons as well. */
#ppso-app button.ppso-btn[style*="background: rgb(47, 111, 237)"],
#ppso-app button.ppso-btn[style*="background:#2F6FED"],
#ppso-app button.ppso-btn[style*="background: #2F6FED"],
#ppso-app button.ppso-btn[style*="background: rgb(22, 163, 74)"],
#ppso-app button.ppso-btn[style*="background:#16A34A"],
#ppso-app button.ppso-btn[style*="background: #16A34A"]{background:#2A6AE0!important;border-color:#2A6AE0!important;color:#fff!important}

/* scrollbar */
#ppso-app ::-webkit-scrollbar{width:5px;height:5px}
#ppso-app ::-webkit-scrollbar-track{background:transparent}
#ppso-app ::-webkit-scrollbar-thumb{background:#B8C5D8;border-radius:3px}

/* focus */
#ppso-app input:focus,#ppso-app select:focus,#ppso-app textarea:focus{outline:none!important;border-color:#2A6AE0!important;border-width:1.5px!important;box-shadow:0 0 0 3px rgba(42,106,224,.18)!important;background:#fff!important}

/* wp-admin context */
body.wp-admin #ppso-app{background:transparent!important;min-height:auto}
body.wp-admin #ppso-main{margin-left:0!important}
body.wp-admin .ppso-main{padding-top:16px!important}

/* DIVI pseudo-element kill */
#ppso-app button::after,#ppso-app button::before{content:none!important;display:none!important}
/* DIVI letter-spacing kill */
#ppso-app button{letter-spacing:0!important;text-transform:none!important}

/* ================================================================
   Main Content Area
   ================================================================ */
/* v5.95.0 — readability/size pass: wider canvas so data tables breathe on
 * desktop; on phones inputs go to 16px (stops iOS auto-zoom on focus) and
 * small buttons keep a comfortable tap height. */
.ppso-main{padding-left:28px!important;padding-right:28px!important;padding-bottom:24px!important;max-width:1280px;overflow-x:hidden!important}
@media(max-width:782px){.ppso-main{padding-left:3px!important;padding-right:3px!important;padding-bottom:10px!important}
.ppso-input,#ppso-app select.ppso-input,#ppso-app textarea.ppso-input{font-size:16px!important}
.ppso-btn-sm{min-height:36px!important}
/* v5.222.0 — hide desktop-only header actions on phones (the ＋ FAB and the ⋯
 * More menu cover them), so the calendar / list sits higher and uses full width. */
.ppso-hide-m{display:none!important}}

/* ================================================================
   Page Header
   ================================================================ */
/* v5.97.0 — Excel-density pass: list pages must show many rows at once with
 * minimal chrome. Vertical paddings/margins compressed across header/section/
 * card/tabs/table; row font 13px; buttons slimmer on desktop (mobile keeps
 * 42px tap targets via the media block below). */
.ppso-header{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:8px!important;padding-bottom:6px!important;border-bottom:1px solid #E0E7F2!important}
.ppso-title{font-size:19px!important;font-weight:700!important;color:var(--t1)!important;letter-spacing:-.3px!important;margin:0!important;padding:0!important}

/* ================================================================
   Buttons
   ================================================================ */
.ppso-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:6px 14px!important;font-size:13px!important;font-weight:700!important;line-height:1.4!important;border-radius:var(--rds)!important;border:1px solid transparent!important;transition:all .2s ease!important;white-space:nowrap!important;cursor:pointer!important;text-decoration:none!important;min-height:34px!important}
.ppso-btn:hover{transform:translateY(-1px)!important;box-shadow:var(--s2)!important;opacity:.92!important;filter:brightness(1.05)!important}
.ppso-btn:active{transform:translateY(0)!important;box-shadow:none!important;opacity:1!important;filter:brightness(.95)!important}
.ppso-btn:active{transform:translateY(0) scale(.98)!important;box-shadow:none!important}

.ppso-btn-primary{background:#2A6AE0!important;color:#fff!important;border-color:#2A6AE0!important;box-shadow:0 1px 2px rgba(42,106,224,.25)!important}
.ppso-btn-primary:hover{background:var(--ac-h)!important;border-color:var(--ac-h)!important;box-shadow:0 4px 12px rgba(42,106,224,.30)!important}

.ppso-btn-secondary{background:#fff!important;color:#2A6AE0!important;border-color:#2A6AE0!important}
.ppso-btn-secondary:hover{background:#fff!important;color:#1F56BD!important;border-color:#1F56BD!important;box-shadow:0 3px 10px rgba(42,106,224,.16)!important}

.ppso-btn-success{background:#2A6AE0!important;color:#fff!important;border-color:#2A6AE0!important}
.ppso-btn-success:hover{background:#1F56BD!important;border-color:#1F56BD!important}

.ppso-btn-danger{background:transparent!important;color:var(--r)!important;border-color:var(--r)!important}
.ppso-btn-danger:hover{background:var(--rbg)!important}

/* v5.117.0 — semantic warning button (orange) as a proper variant so pages can
 * stop hand-coding background:#F59E0B inline. Reserved for "needs attention"
 * actions (check-in reminders, etc.) — not decoration. */
.ppso-btn-warning{background:#F59E0B!important;color:#fff!important;border-color:#F59E0B!important}
.ppso-btn-warning:hover{background:#D97706!important;border-color:#D97706!important}

.ppso-btn-sm{padding:5px 12px!important;font-size:12px!important;border-radius:var(--rdx)!important}

/* ================================================================
   Form Inputs
   ================================================================ */
.ppso-input{display:block!important;width:100%!important;padding:10px 14px!important;font-size:15px!important;line-height:1.5!important;color:var(--t1)!important;background:#FFFFFF!important;border:1.5px solid var(--bd)!important;border-radius:var(--rds)!important;transition:border-color .2s,box-shadow .2s,background .2s,transform .15s!important;outline:none!important;box-shadow:var(--s1)!important;-webkit-appearance:none!important;appearance:none!important}
.ppso-input::placeholder{color:var(--t3)!important}
.ppso-input:hover{border-color:#A9C4F6!important;background:#fff!important;box-shadow:0 0 0 3px rgba(47,111,237,.06)!important}
.ppso-input:focus{border-color:var(--ac)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(47,111,237,.18)!important}
.ppso-input:active{transform:scale(0.995)!important}
.ppso-input.efo-valid{background:#EEF4FF!important;border-color:#2A6AE0!important;box-shadow:0 0 0 3px rgba(42,106,224,.08)!important}
.ppso-input.efo-valid:focus{box-shadow:0 0 0 3px rgba(42,106,224,.15)!important}
.ppso-input.efo-error{background:#FEF2F2!important;border-color:#EF4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.08)!important}
.ppso-input-sm{width:130px!important;display:inline-block!important;padding:5px 8px!important;font-size:13px!important}

#ppso-app select.ppso-input{cursor:pointer!important;padding-right:32px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237A8699' d='M2 4l4 4 4-4'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important;background-color:var(--sf)!important}
#ppso-app select.ppso-input:hover{background-color:#FEFFFE!important}
#ppso-app select.ppso-input:focus{background-color:#fff!important}
#ppso-app textarea.ppso-input{resize:vertical!important;min-height:60px!important}
#ppso-app input[type="checkbox"]{width:18px!important;height:18px!important;border-radius:4px!important;border:1.5px solid var(--bd)!important;cursor:pointer!important;accent-color:var(--ac)!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s!important}
#ppso-app input[type="checkbox"]:hover{border-color:var(--ac)!important;box-shadow:0 0 0 3px rgba(47,111,237,.12)!important}

/* Form layout */
.ppso-form-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
@media(max-width:600px){.ppso-form-row{grid-template-columns:1fr!important}}

/* Form label */
#ppso-app label{display:block!important;font-size:13px!important;font-weight:600!important;color:var(--t1)!important;letter-spacing:0!important;margin-bottom:5px!important;line-height:1.3!important}

/* Section divider */
.ppso-section{font-size:13px!important;font-weight:600!important;color:var(--t2)!important;text-transform:none!important;letter-spacing:0!important;padding:5px 0 3px!important;margin-top:2px!important;border-top:1px solid var(--bd)!important}

/* ================================================================
   Card
   ================================================================ */
.ppso-card{background:var(--sf)!important;border:1px solid var(--bd)!important;border-radius:var(--rd)!important;padding:10px 12px!important;margin-bottom:8px!important;box-shadow:var(--s1)!important}

/* ================================================================
   Stat Grid
   ================================================================ */
.ppso-stat-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin-bottom:8px!important}
@media(max-width:782px){.ppso-stat-grid{grid-template-columns:repeat(3,1fr)!important}}

/* v5.116.0 — Dashboard SaaS layout: a 4-up KPI row and a 2-column body grid
 * (left: today+punch, right: confirm queue + alerts). Both collapse gracefully
 * on smaller screens. */
.ppso-kpi-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important;margin-bottom:12px!important}
@media(max-width:782px){.ppso-kpi-grid{grid-template-columns:repeat(2,1fr)!important}}
/* v5.118.0 — 5-up KPI row (Lessons page: All/Today/Trial/Completed/Need action) */
.ppso-kpi-grid.k5{grid-template-columns:repeat(5,1fr)!important}
@media(max-width:782px){.ppso-kpi-grid.k5{grid-template-columns:repeat(2,1fr)!important}}
/* v5.154.0 — 3-up KPI row (Teacher Dashboard: today/students/week hours) — a
 * fixed 3-tile row in the default 4-col grid left a dead 4th column. */
.ppso-kpi-grid.k3{grid-template-columns:repeat(3,1fr)!important}
@media(max-width:782px){.ppso-kpi-grid.k3{grid-template-columns:repeat(2,1fr)!important}}
/* v5.155.0 — 2-up KPI row (Visas page: total records/urgent) */
.ppso-kpi-grid.k2{grid-template-columns:repeat(2,1fr)!important}
.ppso-dash-grid{display:grid!important;grid-template-columns:1.35fr 1fr!important;gap:12px!important;align-items:start!important;margin-bottom:12px!important}
@media(max-width:1000px){.ppso-dash-grid{grid-template-columns:1fr!important}}

.ppso-stat{background:var(--sf)!important;border:1px solid var(--bd)!important;border-radius:var(--rd)!important;padding:8px 12px!important;box-shadow:var(--s1)!important;transition:all var(--tr)!important}
.ppso-stat:hover{box-shadow:var(--s3)!important;transform:translateY(-2px)}

.ppso-stat-label{font-size:12px!important;font-weight:500!important;color:var(--t2)!important;text-transform:none!important;letter-spacing:0!important;margin-bottom:3px!important;display:block!important}
.ppso-stat-value{font-size:20px!important;font-weight:700!important;letter-spacing:-.4px!important;line-height:1.2!important;display:block!important;word-break:break-word!important}
.ppso-stat-value br+br{display:none}
.ppso-stat-value br~span{font-size:16px!important}
.ppso-stat-sub{font-size:12px!important;color:var(--t3)!important;margin-top:4px!important;display:block!important}

/* ================================================================
   Tabs
   ================================================================ */
.ppso-tabs{display:flex!important;gap:2px!important;margin-bottom:6px!important;background:var(--bl)!important;border-radius:var(--rds)!important;padding:2px!important;overflow-x:visible!important;flex-wrap:wrap!important}
.ppso-tab{padding:5px 12px!important;font-size:13px!important;font-weight:500!important;color:var(--t2)!important;background:transparent!important;border:none!important;border-radius:var(--rdx)!important;cursor:pointer!important;transition:all var(--tr)!important;white-space:nowrap!important;font-family:var(--ppf)!important}
.ppso-tab:hover{color:var(--t1)!important;background:rgba(255,255,255,.5)!important}
.ppso-tab.active{background:var(--sf)!important;color:var(--t1)!important;font-weight:600!important;box-shadow:var(--s1)!important}

/* ================================================================
   Badge
   ================================================================ */
.ppso-badge{display:inline-flex!important;align-items:center!important;padding:2px 8px!important;font-size:12px!important;font-weight:700!important;line-height:1.35!important;border-radius:20px!important;white-space:nowrap!important;letter-spacing:0!important}

/* ================================================================
   Progress Bar
   ================================================================ */
.ppso-pbar{display:flex!important;align-items:center!important;gap:8px!important;width:100%!important}
.ppso-pbar-track{flex:1!important;height:6px!important;background:var(--bl)!important;border-radius:3px!important;overflow:hidden!important}
.ppso-pbar-fill{height:100%!important;border-radius:3px!important;transition:width .4s ease!important;min-width:2px}
.ppso-pbar-label{font-size:13px!important;font-weight:700!important;white-space:nowrap!important}

/* ================================================================
   Data Table (Grid) – bordered table style
   ================================================================ */
.ppso-table-wrap{background:var(--sf)!important;border:1px solid var(--bd)!important;border-radius:var(--rd)!important;overflow:hidden!important;box-shadow:var(--s1)!important;margin-bottom:8px!important;overflow-x:auto!important}
.ppso-table-wrap .ppso-thead,.ppso-table-wrap .ppso-trow{min-width:1000px!important}
.ppso-thead{display:grid!important;column-gap:10px!important;padding:4px 10px!important;font-size:11.5px!important;font-weight:600!important;color:var(--t2)!important;text-transform:none!important;letter-spacing:0!important;background:#F8FAFC!important;border-bottom:1px solid var(--bd)!important;align-items:center!important;border-radius:0!important;margin-bottom:0!important;border:none!important;line-height:1.3!important}
.ppso-trow{display:grid!important;column-gap:10px!important;padding:3px 10px!important;font-size:13px!important;line-height:1.35!important;align-items:center!important;background:var(--sf)!important;border:none!important;border-bottom:1px solid var(--bd)!important;border-radius:0!important;margin-bottom:0!important;transition:all var(--tr)!important;color:var(--t1)!important}
.ppso-trow:last-child{border-bottom:none!important}
.ppso-trow:hover{background:var(--sfh)!important;box-shadow:inset 3px 0 0 var(--ac)!important}
.ppso-trow[style*="cursor: pointer"]:hover,.ppso-trow[style*="cursor:pointer"]:hover{background:var(--sfh)!important;box-shadow:inset 3px 0 0 var(--ac)!important}
.ppso-trow:nth-child(even){background:#FAFBFD!important}
.ppso-trow:nth-child(even):hover{background:var(--sfh)!important}

/* ================================================================
   List Item (Mobile)
   ================================================================ */
.ppso-item{background:var(--sf)!important;border:1px solid var(--bl)!important;border-radius:var(--rd)!important;padding:7px 10px!important;margin-bottom:4px!important;transition:all var(--tr)!important;color:var(--t1)!important;box-shadow:var(--s1)!important}
.ppso-item:hover{border-color:var(--bd)!important;box-shadow:var(--s3)!important}

/* ================================================================
   Left-Border Accent
   ================================================================ */
/* v5.115.4 (Q3) — compact, Excel-like lesson rows: tighter padding/margin + a
 * smaller base font so 上课记录 fits many more rows on screen. */
.ppso-lborder{position:relative;padding:5px 12px 5px 14px!important;margin-bottom:3px!important;border-radius:6px;background:var(--sf);border:1px solid var(--bl);border-left:3px solid var(--b);transition:all var(--tr);box-shadow:none;font-size:13px!important;line-height:1.35!important}
.ppso-lborder:hover{box-shadow:var(--s1)!important}
.ppso-lborder.done{border-left-color:var(--g)!important;background:var(--gbg)!important}
.ppso-lborder.warn{border-left-color:var(--y)!important;background:var(--ybg)!important}

/* ================================================================
   Empty State
   ================================================================ */
.ppso-empty{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:48px 24px!important;color:var(--t3)!important;font-size:15px!important;text-align:center!important}
.ppso-empty-icon{font-size:36px!important;margin-bottom:10px!important;display:block!important;opacity:.5}

/* ================================================================
   Modal / Overlay
   ================================================================ */
.ppso-overlay{position:fixed!important;inset:0!important;z-index:100000!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(30,50,80,.35)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;padding:20px!important;animation:ppsoFI .2s ease!important}
.ppso-modal{background:var(--sf)!important;border-radius:16px!important;padding:24px!important;width:100%!important;max-width:560px!important;max-height:85vh!important;overflow-y:auto!important;box-shadow:var(--s4)!important;animation:ppsoSU .25s ease!important}
@keyframes ppsoFI{from{opacity:0}to{opacity:1}}
@keyframes ppsoSU{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ================================================================
   Toast
   ================================================================ */
.ppso-toast{position:fixed!important;bottom:28px!important;right:28px!important;z-index:100010!important;padding:12px 22px!important;font-size:14px!important;font-weight:600!important;color:#fff!important;border-radius:var(--rds)!important;box-shadow:var(--s3)!important;font-family:var(--ppf)!important;animation:ppsoTI .3s ease!important;max-width:360px!important}
@keyframes ppsoTI{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ================================================================
   Sidebar Navigation
   ================================================================ */
.ppso-nav-item{display:flex!important;align-items:center!important;gap:7px!important;width:100%!important;padding:3px 12px!important;font-size:13px!important;font-weight:500!important;color:rgba(255,255,255,.85)!important;background:transparent!important;border:none!important;border-radius:5px!important;cursor:pointer!important;transition:all .2s ease!important;text-align:left!important;font-family:var(--ppf)!important;margin:0 6px!important;width:calc(100% - 12px)!important;line-height:1.35!important}
.ppso-nav-item,.ppso-nav-item span,.ppso-nav-item *{color:rgba(255,255,255,.85)!important}
.ppso-nav-item:hover,.ppso-nav-item:hover span,.ppso-nav-item:hover *{background:rgba(255,255,255,.2)!important;color:#fff!important}
.ppso-nav-item.active,.ppso-nav-item.active span,.ppso-nav-item.active *{background:rgba(255,255,255,.95)!important;color:#2A6AE0!important;font-weight:700!important;box-shadow:0 2px 8px rgba(0,0,0,.12)!important;border-radius:6px!important}
/* v5.250.0 — the navigation now uses distinct, colour emoji cues instead of
 * a brightness-inverted white silhouette. Keep their own glyph colours and
 * prevent hover/active row backgrounds from painting a box behind the glyph. */
.ppso-nav-item .ppso-nav-icon,.ppso-nav-item:hover .ppso-nav-icon,.ppso-nav-item.active .ppso-nav-icon{filter:none!important;background:transparent!important;box-shadow:none!important;color:inherit!important;border-radius:0!important;text-shadow:0 1px 2px rgba(0,0,0,.2)!important}

/* ================================================================
   Mobile Top Bar
   ================================================================ */
.ppso-tb{box-shadow:var(--s1)!important}

/* ================================================================
   Print
   ================================================================ */
@media print{#ppso-app nav,.ppso-tb{display:none!important}#ppso-main{margin-left:0!important}}

@media(max-width:782px){
/* v5.215.0 — tighter mobile density: smaller stat tiles, tighter grids/cards, so
 * the main content of each page fits the first screen. */
.ppso-stat-value{font-size:17px!important;word-break:break-all!important}
.ppso-stat-label{font-size:10.5px!important}
.ppso-stat{padding:6px 9px!important}
.ppso-stat-sub{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.ppso-kpi-grid{gap:6px!important;margin-bottom:8px!important}
.ppso-header{flex-wrap:wrap!important;gap:6px!important;margin-bottom:8px!important}
.ppso-title{font-size:18px!important}
.ppso-card{padding:10px 12px!important;margin-bottom:8px!important}
.ppso-tabs{overflow-x:visible!important;flex-wrap:wrap!important}
.ppso-tabs::-webkit-scrollbar{display:none!important}
.ppso-tab{font-size:12px!important;padding:6px 8px!important;white-space:nowrap!important}
.ppso-btn{padding:8px 14px!important;font-size:13px!important}
.ppso-btn-sm{padding:5px 10px!important;font-size:11px!important}
.ppso-form-row{grid-template-columns:1fr!important}
.ppso-modal{max-width:95vw!important;padding:16px!important;margin:10px!important}
.ppso-overlay{padding:10px!important}
.ppso-badge{font-size:12px!important;padding:2px 8px!important}
.ppso-pbar-label{font-size:12px!important}
.ppso-section{font-size:11px!important}
#ppso-app label{font-size:11px!important}
.ppso-btn{width:100%!important;padding:12px 16px!important;font-size:15px!important;border-radius:10px!important;justify-content:center!important}
.ppso-btn-sm{width:auto!important;padding:10px 16px!important;font-size:14px!important;border-radius:8px!important;min-height:40px!important}
.ppso-header .ppso-btn{width:auto!important;min-width:100px!important;padding:10px 20px!important;font-size:15px!important;border-radius:10px!important}
}

/* ================================================================
   EFO - Entry Form Optimization
   ================================================================ */
.ppso-efo-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:11px;margin-left:6px;vertical-align:middle;flex-shrink:0;transition:all .25s}
.ppso-efo-check.ok{background:#2A6AE0;color:#fff;animation:ppsoFI .3s ease}
.ppso-efo-check.ng{background:#E5E7EB;color:#9CA3AF}
.ppso-efo-counter{position:sticky;top:0;z-index:10;background:#FEF3C7;border:1px solid #FCD34D;border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:14px;font-weight:600;color:#92400E;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s}
.ppso-efo-counter.done{background:#EEF4FF;border-color:#BFDBFE;color:#2A6AE0}
.ppso-efo-err{font-size:12px;color:#EF4444;margin-top:3px;display:none;font-weight:500}
.ppso-efo-err.show{display:block}
@keyframes ppsoFI{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}

/* ── Divi full-width override for SPA pages ── */
body.ppso-spa-active #left-area{width:100%!important;padding:0!important;margin:0!important;float:none!important}
body.ppso-spa-active .et_pb_row{max-width:100%!important;padding:0!important;width:100%!important}
body.ppso-spa-active .et_pb_column{padding:0!important}
body.ppso-spa-active #sidebar,body.ppso-spa-active .et_pb_widget_area{display:none!important}
body.ppso-spa-active .et_pb_section{padding:0!important}
body.ppso-spa-active .entry-content{padding:0!important;margin:0!important}
body.ppso-spa-active .et_pb_post_content{padding:0!important}
@media(max-width:782px){
body.ppso-spa-active .et_pb_section,body.ppso-spa-active .et_pb_row{padding-left:0!important;padding-right:0!important}
/* v5.219.0 — mobile uses more horizontal width: slimmer card side padding
 * (was 12px) + slimmer .ppso-main gutters (6→3px above) so the calendar and
 * tables reach closer to the screen edges. */
.ppso-card{padding:14px 8px!important}
.ppso-stat{padding:12px 10px!important}
.ppso-nav-item{padding:10px 16px!important;font-size:16px!important;gap:10px!important;border-radius:8px!important;margin:1px 8px!important;width:calc(100% - 16px)!important}
}

/* ── Tablet (768-1099px) ── */
@media(min-width:768px) and (max-width:1099px){
/* v5.114.0 — 11" tablets / small laptops (768–1099px): the modal is only 560px
 * wide, so a 2-column form row cramps every input (the 购买套餐 total/实收款/定金
 * were unreadably narrow). Stack form rows to a single column here — always safe
 * (just taller). Fixes this across ALL modals/pages, not only 购买套餐. */
.ppso-form-row{grid-template-columns:1fr!important}
.ppso-nav-item{padding:10px 18px!important;font-size:16px!important;gap:10px!important;border-radius:8px!important;margin:2px 8px!important;width:calc(100% - 16px)!important}
.ppso-title{font-size:22px!important}
.ppso-stat-value{font-size:22px!important}
.ppso-stat-label{font-size:12px!important}
.ppso-btn{padding:10px 20px!important;font-size:15px!important}
.ppso-tab{padding:10px 18px!important;font-size:15px!important}
.ppso-input{font-size:15px!important;padding:10px 14px!important}
.ppso-item{padding:7px 10px!important}
.ppso-thead{font-size:12px!important;padding:4px 10px!important}
.ppso-trow{font-size:13px!important;padding:3px 10px!important}
.ppso-footer{height:64px!important}
.ppso-footer button:hover{background:rgba(255,255,255,.2)!important}
}

/* ================================================================
   v5.249.0 — Readability pass for phones and small screens
   Keep labels, helper copy, table data, and controls readable instead of
   shrinking them to fit more rows. Inline page-specific styles are covered
   for the small-size values used by the SPA renderers.
   ================================================================ */
#ppso-app{font-size:16px!important;line-height:1.65!important}
#ppso-app .ppso-title{font-size:21px!important}
#ppso-app .ppso-btn{font-size:14px!important}
#ppso-app .ppso-btn-sm{font-size:13px!important}
#ppso-app .ppso-input,#ppso-app select.ppso-input,#ppso-app textarea.ppso-input{font-size:16px!important}
#ppso-app label{font-size:14px!important;line-height:1.45!important}
#ppso-app .ppso-section{font-size:14px!important;line-height:1.45!important}
#ppso-app .ppso-stat-label,#ppso-app .ppso-stat-sub{font-size:13px!important;line-height:1.45!important}
#ppso-app .ppso-tab{font-size:14px!important}
#ppso-app .ppso-badge{font-size:13px!important}
#ppso-app .ppso-pbar-label{font-size:14px!important}
#ppso-app .ppso-thead{font-size:13px!important;line-height:1.45!important}
#ppso-app .ppso-trow{font-size:14px!important;line-height:1.5!important}
#ppso-app .ppso-lborder{font-size:14px!important;line-height:1.5!important}
#ppso-app .ppso-efo-err{font-size:14px!important;line-height:1.45!important}
#ppso-app [style*="font-size:10px"],#ppso-app [style*="font-size: 10px"],
#ppso-app [style*="font-size:10.5px"],#ppso-app [style*="font-size: 10.5px"],
#ppso-app [style*="font-size:11px"],#ppso-app [style*="font-size: 11px"],
#ppso-app [style*="font-size:11.5px"],#ppso-app [style*="font-size: 11.5px"],
#ppso-app [style*="font-size:12px"],#ppso-app [style*="font-size: 12px"],
#ppso-app [style*="font-size:12.5px"],#ppso-app [style*="font-size: 12.5px"],
#ppso-app [style*="font-size:13px"],#ppso-app [style*="font-size: 13px"]{
  font-size:14px!important;line-height:1.45!important
}
@media(max-width:782px){
  #ppso-app{font-size:17px!important;line-height:1.65!important}
  #ppso-app .ppso-title{font-size:21px!important}
  #ppso-app .ppso-stat-value{font-size:19px!important;line-height:1.25!important}
  #ppso-app .ppso-stat-label,#ppso-app .ppso-stat-sub{font-size:14px!important;line-height:1.45!important}
  #ppso-app .ppso-tab{font-size:15px!important;padding:8px 10px!important}
  #ppso-app .ppso-btn{font-size:16px!important;line-height:1.45!important}
  #ppso-app .ppso-btn-sm{font-size:15px!important;line-height:1.45!important}
  #ppso-app label{font-size:14.5px!important}
  #ppso-app .ppso-section{font-size:14.5px!important}
  #ppso-app .ppso-badge{font-size:14px!important}
  #ppso-app .ppso-pbar-label{font-size:14px!important}
  #ppso-app .ppso-thead{font-size:14px!important}
  #ppso-app .ppso-trow,#ppso-app .ppso-lborder{font-size:15px!important;line-height:1.55!important}
  #ppso-app .ppso-input-sm{font-size:15px!important}
  #ppso-app [style*="font-size:10px"],#ppso-app [style*="font-size: 10px"],
  #ppso-app [style*="font-size:10.5px"],#ppso-app [style*="font-size: 10.5px"],
  #ppso-app [style*="font-size:11px"],#ppso-app [style*="font-size: 11px"],
  #ppso-app [style*="font-size:11.5px"],#ppso-app [style*="font-size: 11.5px"],
  #ppso-app [style*="font-size:12px"],#ppso-app [style*="font-size: 12px"],
  #ppso-app [style*="font-size:12.5px"],#ppso-app [style*="font-size: 12.5px"],
  #ppso-app [style*="font-size:13px"],#ppso-app [style*="font-size: 13px"]{
    font-size:15px!important;line-height:1.5!important
  }
}

/* ================================================================
   v5.291.0 — Compact mobile page controls + readable weekly calendar
   The first content row now stays a single, horizontally-scrollable line
   instead of gaining a second row of empty-looking space. The week calendar
   deliberately uses readable columns on phones and scrolls sideways, rather
   than squeezing seven days into unreadable slivers.
   ================================================================ */
@media(max-width:782px){
  /* A theme-level public-page rule was overriding the narrower app gutters.
   * Keep the content close to the edge without removing a safe touch margin. */
  body:not(.wp-admin) #ppso-app .ppso-main{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  /* All page headings: title + actions stay compact. Extra actions remain
   * reachable by a natural horizontal swipe instead of forcing a new row. */
  #ppso-app .ppso-header{
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    min-height:38px!important;
    margin-bottom:6px!important;
    padding-bottom:4px!important;
  }
  #ppso-app .ppso-header .ppso-title{
    flex:0 0 auto!important;
    min-width:0!important;
    font-size:19px!important;
    white-space:nowrap!important;
  }
  #ppso-app .ppso-header>div:last-child{
    display:flex!important;
    flex:1 1 auto!important;
    min-width:0!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
    justify-content:flex-end!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  #ppso-app .ppso-header>div:last-child::-webkit-scrollbar{display:none!important}
  #ppso-app .ppso-header>.ppso-btn,
  #ppso-app .ppso-header>div:last-child>.ppso-btn{
    width:auto!important;
    min-width:0!important;
    min-height:36px!important;
    padding:6px 10px!important;
    font-size:14px!important;
    flex:0 0 auto!important;
  }
  /* The schedule has a mobile FAB and the More menu already, so the desktop
   * add/print controls must not occupy a hidden second header row. */
  #ppso-app .ppso-header .ppso-hide-m{display:none!important}

  /* Cards form the shared page-control container on many screens. */
  #ppso-app .ppso-card{padding:10px 8px!important;margin-bottom:6px!important}

  /* Schedule filters and the view/date toolbar: one compact row per task. */
  #ppso-app .ppso-schedule-filterbar{
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    margin-bottom:6px!important;
  }
  #ppso-app .ppso-schedule-filterbar>div:first-child{
    flex:1 1 auto!important;
    min-width:0!important;
  }
  #ppso-app .ppso-schedule-filterbar button{
    min-height:36px!important;
    padding:6px 10px!important;
    font-size:14px!important;
  }
  #ppso-app .ppso-schedule-toolbar{
    padding:6px 8px!important;
    margin-bottom:6px!important;
    border-radius:10px!important;
  }
  #ppso-app .ppso-schedule-modebar{
    margin-bottom:4px!important;
    padding:2px!important;
  }
  #ppso-app .ppso-schedule-modebar button{
    min-height:34px!important;
    padding:6px 0!important;
    font-size:14px!important;
  }
  #ppso-app .ppso-schedule-nav{
    gap:6px!important;
    min-width:0!important;
    white-space:nowrap!important;
  }
  #ppso-app .ppso-schedule-nav>span{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:14px!important;
  }
  #ppso-app .ppso-schedule-nav>div{gap:4px!important;flex:0 0 auto!important}
  #ppso-app .ppso-schedule-nav .ppso-btn{
    width:auto!important;
    min-width:0!important;
    min-height:34px!important;
    padding:5px 8px!important;
    font-size:14px!important;
  }

  /* Week view: 7 readable day columns, strong boundaries, and native swipe.
   * The fixed time axis remains visible while scrolling horizontally. */
  #ppso-app .ppso-week-grid-wrap{
    max-height:66vh!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity!important;
    border-color:#CBD5E1!important;
  }
  #ppso-app .ppso-week-grid-head,
  #ppso-app .ppso-week-grid-body{
    grid-template-columns:52px repeat(7,88px)!important;
    min-width:668px!important;
  }
  #ppso-app .ppso-week-grid-head{
    border-bottom:2px solid #CBD5E1!important;
  }
  #ppso-app .ppso-week-grid-head>div:first-child{
    position:sticky!important;
    left:0!important;
    z-index:5!important;
    background:#F8FAFC!important;
    box-shadow:4px 0 8px rgba(71,85,105,.10)!important;
  }
  #ppso-app .ppso-week-grid-head>div:not(:first-child){
    min-width:88px!important;
    border-left:2px solid #CBD5E1!important;
    scroll-snap-align:start!important;
  }
  #ppso-app .ppso-week-grid-head>div>div:first-child{
    font-size:12px!important;
    line-height:1.2!important;
  }
  #ppso-app .ppso-week-grid-head>div>div:last-child{
    font-size:17px!important;
    line-height:1.2!important;
  }
  #ppso-app .ppso-week-grid-axis{
    position:sticky!important;
    left:0!important;
    z-index:3!important;
    background:#F8FAFC!important;
    box-shadow:4px 0 8px rgba(71,85,105,.10)!important;
  }
  #ppso-app .ppso-week-grid-day{
    min-width:88px!important;
    border-left:2px solid #CBD5E1!important;
    scroll-snap-align:start!important;
  }
  #ppso-app .ppso-week-grid-day>div{
    font-size:12px!important;
    line-height:1.25!important;
  }
  #ppso-app .ppso-week-grid-day>div[style*="border-top"]{
    border-top-color:#DCE5F0!important;
  }
}