/* UI Unify v4 - make Accounts tab UI match Lessons tab (Tech Minimal baseline)
   - Panels (.pm-panel) now use the same "soft blue card" feeling as Lessons forms
   - Lists (.pm-list-item) now match menu-card style (rounded, border, hover)
   - Keep form controls unified (.pm-input)
*/
:root{
  --pm-line: rgba(15,23,42,.14);
  --pm-line-strong: rgba(60,110,255,.35);
  --pm-bg: #ffffff;
  --pm-text: #0f172a;
  --pm-muted: rgba(15,23,42,.62);
  --pm-soft: rgba(60,110,255,.06);
  --pm-soft-line: rgba(60,110,255,.22);
}

/* Core: pm-input (used everywhere) */
.pm-input{
  width:100%;
  box-sizing:border-box;
  border-radius:14px;
  padding:12px 12px;
  border:1px solid var(--pm-line);
  background:var(--pm-bg);
  color:var(--pm-text);
  font: inherit;
  outline:none;
}

.pm-input:focus{
  border-color: var(--pm-line-strong);
  box-shadow: 0 0 0 3px rgba(60,110,255,.10);
}

/* Fallback containers (in case some inputs lack pm-input) */
.pm-note input[type="text"],
.pm-note input[type="number"],
.pm-note input[type="email"],
.pm-note input[type="date"],
.pm-note input[type="time"],
.pm-note input[type="search"],
.pm-note textarea,
.pm-note select{
  width:100%;
  box-sizing:border-box;
  border-radius:14px;
  padding:12px 12px;
  border:1px solid var(--pm-line);
  background:var(--pm-bg);
  color:var(--pm-text);
  font: inherit;
  outline:none;
}

/* Select: unified arrow */
select.pm-input,
.pm-note select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:40px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    0 0;
  background-size:6px 6px, 6px 6px, 100% 100%;
  background-repeat:no-repeat;
}

/* Disabled */
.pm-input:disabled,
.pm-note input:disabled,
.pm-note textarea:disabled,
.pm-note select:disabled{
  opacity:.65;
  background: rgba(15,23,42,.03);
  cursor:not-allowed;
}

/* Buttons: consistent height */
.pm-btn, .pm-primary, .pm-secondary{
  min-height:40px;
}

/* --- IMPORTANT: Panels / sections --- */
/* Make pm-panel look like the Lessons "soft blue" block */
.pm-panel{
  border: 1px solid var(--pm-soft-line) !important;
  background: var(--pm-soft) !important;
  border-radius: 18px !important;
  padding: 14px 14px !important;
}

/* Headings inside panels */
.pm-panel .pm-h3,
.pm-panel .pm-h2{
  margin: 0 0 8px 0 !important;
  font-weight: 800;
  color: var(--pm-text);
}

/* If some pages use pm-h2 as section title, match h4 feeling */
.pm-h2{
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  color: var(--pm-text);
}
.pm-h3{
  font-size: 14px !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  color: var(--pm-text);
}

/* Notes inside panels should not look like "a note inside a note" */
.pm-panel .pm-note{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* --- Lists (Accounts list) --- */
.pm-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.pm-list-item{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border:1px solid var(--pm-line);
  border-radius:16px;
  padding:12px 12px;
}

.pm-list-item:hover{
  border-color: var(--pm-line-strong);
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}

.pm-list-left .pm-title{
  font-weight:800;
  font-size:16px;
  color:var(--pm-text);
}

.pm-list-left .pm-sub{
  margin-top:4px;
  color:var(--pm-muted);
}

.pm-list-right .pm-btn{
  min-width:96px;
}

/* Mobile: tap friendly, full width actions */
@media (max-width: 900px){
  .pm-lesson-actions{ width:100%; }
  .pm-lesson-actions .pm-btn{ width:100%; }
  .pm-lesson-grid{ grid-template-columns:1fr !important; }

  .pm-list-item{flex-direction:column;align-items:stretch;}
  .pm-list-right{width:100%;}
  .pm-list-right .pm-btn{width:100%;}
}

/* =========================================================
   UI Unify v5 (Polish)
   Goal: Accounts tab looks as "solid" as Lessons tab:
   - Bigger padding (boxes not cramped)
   - Better typography (readable, consistent)
   - Cleaner list cards
   ========================================================= */
:root{
  --pm-font: "Inter","Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Typography baseline */
body{
  font-family: var(--pm-font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--pm-text);
}
button,input,select,textarea{
  font-family: var(--pm-font);
}

/* Make cards/panels feel same as Lessons soft block (more spacious) */
.pm-card{
  padding: 18px 18px !important;
}
.pm-panel{
  padding: 18px 18px !important;
}

/* Section titles */
.pm-h2{
  font-size: 18px !important;
  letter-spacing: -0.01em;
}
.pm-h3{
  font-size: 15px !important;
  letter-spacing: -0.01em;
}
.pm-sub{
  font-size: 13px !important;
  color: var(--pm-muted) !important;
}

/* Chips (counts) */
.pm-chip{
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}
.pm-chip .k{
  opacity: .75;
}
.pm-chip b{
  font-size: 14px !important;
}

/* Accounts list readability */
.pm-list{
  margin-top: 10px;
}
.pm-list-item{
  padding: 14px 14px !important;
}
.pm-list-item .pm-title{
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
.pm-list-item .pm-sub{
  font-size: 12.5px !important;
}

/* Buttons: slightly bigger, nicer */
.pm-btn{
  padding: 10px 14px !important;
  font-weight: 800 !important;
}

/* Mobile: buttons full width where possible */
@media (max-width: 768px){
  .pm-panel form.pm-row{
    flex-direction: column;
    align-items: stretch !important;
  }
  .pm-panel form.pm-row .pm-btn,
  .pm-panel form.pm-row .pm-input{
    width: 100% !important;
  }
  .pm-list-item{
    flex-direction: column;
    align-items: stretch !important;
  }
  .pm-list-right{
    margin-top: 10px;
  }
  .pm-list-right .pm-btn{
    width: 100% !important;
  }
}
/* === ui-unify additions: v3 (menu width + spacing) === */
@media (min-width: 1000px){
  /* Narrow right menu column on desktop */
  .pm-grid{ grid-template-columns: minmax(0, 1fr) 360px !important; }
}
/* Pull content up a bit (reduce whitespace under header) */
.pm-main{ padding-top: 18px !important; }
.pm-cardin{ padding-top: 18px !important; }

/* If any inline quick action row exists in control center, hide it (new buttons live in right menu) */
.cc-quick, .cc-short, .pm-quick, .pm-short, .cc-shortcuts, .cc-shortcut-row { display:none !important; }

/* ui-unify:v4:control - keep Tech Minimal consistent */

/* Narrow right menu on desktop (do NOT affect mobile full width) */
@media (min-width: 1024px){
  .pm-grid{ grid-template-columns: minmax(0,1fr) 360px; }
  .pm-grid > aside.pm-card{ max-width: 360px; }
}

/* Remove quick shortcut cards inside the LEFT(main) area (keep them in the RIGHT menu) */
.pm-grid > section.pm-card .pm-menu-item[href*="/control/grades"],
.pm-grid > section.pm-card .pm-menu-item[href*="/control/tuition"]{
  display:none !important;
}

/* Lift content a bit (reduce extra whitespace under tab area) */
.pm-grid > section.pm-card .pm-cardin{
  padding-top: 18px;
}