:root{
--body-bg:#D6DFF0;
--nav-bg:#E5EBF9;
--drawer-bg:#449FE4;
--drawer-item-hover:#6DB4EB;
--drawer-item-text:#FFFFFF;
--drawer-item-text-hover:#FFFFFF;
--item-hover:#F1FEE6;
--header-text:#444444;
--page-text: #333333;
--maxbar-h:50px;
--article-bg-blue:#F2F7FC;
--article-bg-red:#FCF5F2;
--article-bg-green:#F2FCF2;
--article-bg-yellow:#FCFFEF;
--article-bg-purple:#FAF2FC;
--article-bg-orange:#FCF7E8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--body-bg);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
line-height:1.4;color:#1a1a1a;
display:flex;
flex-direction:column;
min-height: 100%;
margin: 0;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: url("../img/bg/field.webp");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
background-color: #ffffff;
}
/* --- HEADER --- */
/* --- original bg color #cfd9f1 --- */
header.topbar{width:100%;background:#449FE4;display:flex;align-items:center;justify-content:center;max-height:var(--maxbar-h);height:var(--maxbar-h);padding-inline:12px}
header.topbar .header-content{width:100%;max-width:1200px;display:flex;align-items:center;gap:12px}
header.topbar .header-content h1{font-size:20px;color:#555555;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* --- TOP NAV --- */
nav.sticky-nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);width:100%;border-bottom:1px solid #c8d3ee}
.nav-inner{max-height:var(--maxbar-h);height:var(--maxbar-h);display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:1200px;margin:0 auto;padding:0 12px}
.nav-left{flex:1 1 auto;min-width:0;overflow:hidden}
.logo{display:inline-flex;align-items:center;gap:10px;min-width:0}
.logo img{height:55px;width:auto}
.logo .brand{font-weight:700;white-space:nowrap}
.nav-right{flex:0 0 auto;display:flex;align-items:center;gap:8px}
/* Icon buttons */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;padding:0;cursor:pointer;border-radius:8px}
.icon-btn:hover{background:rgba(0,0,0,0.06)}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px}
.icon-link img{max-width: 30px; height: auto;}
.icon-link:hover{background:rgba(0,0,0,0.06)}
.icon-link-active{background:rgba(0,0,0,0.06)}
.avatar{width:40px;height:40px;border-radius:50%;display:block}
.square-icon{width:40px;height:40px;border-radius:8px;display:block}
/* SEARCH BAR below nav, pushes content */
.search-bar-wrap{display:none;width:100%;background:#f4f7ff;border-bottom:1px solid #c8d3ee;position:sticky;top:var(--maxbar-h);z-index:55}
.search-bar{max-width:1200px;margin:0 auto;padding:8px 12px;display:flex;gap:8px;align-items:stretch}
.search-bar input{flex:1 1 auto;min-height:40px;resize:vertical;padding:10px;border-radius:10px;border:1px solid #b9c6eb;font:inherit}
.search-bar button{flex:0 0 auto;height:46px;padding:0 18px;border-radius:10px;border:1px solid #8ea1d9;background:#A2B3E7;color:#fff;font-weight:600;cursor:pointer}
.search-bar button:hover{filter:brightness(0.98)}
/* --- RIGHT SIDE DRAWER --- */
.drawer{position:fixed;top:0;right:0;height:100vh;width:250px;background:var(--drawer-bg);transform:translateX(100%);transition:transform .25s ease;z-index:120;display:flex;flex-direction:column;padding-top:12px}
.drawer.open{transform:translateX(0)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,0.35);backdrop-filter:saturate(80%) blur(1px);opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:110}
.scrim.show{opacity:1;visibility:visible}
.drawer .menu{margin-top:8px;display:flex;flex-direction:column}
.drawer .menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;height:60px;text-decoration:none}
.drawer .menu a:hover{background:var(--drawer-item-hover)}
.drawer .menu a span{color:var(--drawer-item-text);font-weight:600;}
.drawer .menu a img{width:30px;height:30px;border-radius:8px;flex:0 0 auto}
.drawer .menu a:hover span,
.drawer .menu a:focus-visible span{
color: var(--drawer-item-text-hover, #6E86D4);
}
/* --- MAIN LAYOUT --- */
main{
max-width:1200px;margin:16px auto;padding:0 12px;display:grid;grid-template-columns:280px 1fr;gap:16px;
flex:1 0 auto; width:100%;
}
aside{background:#e7eff7;border:1px solid #c8d3ee;border-radius:12px;min-height:200px;padding:12px}
section{}
article{margin-top:16px;background:#ffffffb8;border:1px solid #c8d3ee;border-radius:12px;min-height:50px;padding:12px}
.section-body {
background:#ffffffb8;border:1px solid #c8d3ee;border-radius:12px;min-height:300px;padding: 0 12px 12px 12px;
}
/* --- TABS --- */
.lm-tabs{
display:flex;
align-items:flex-end;
gap:8px;
flex-wrap:wrap;
margin: 0 0 -1px 0;
padding:0 0 0 12px;
position:relative;
z-index:2;
}
.lm-tab{
display:inline-flex;
align-items:center;
gap:8px;
min-height:52px;
padding:10px 16px;
border:1px solid #c8d3ee;
border-bottom-color:#c8d3ee;
border-radius:12px 12px 0 0;
background:#ffffffcc;
filter: brightness(90%);
color:#1a1a1a;
text-decoration:none;
font-weight:400;
transition:background .15s ease, border-color .15s ease, color .15s ease, filter .15s ease;
}
.lm-tab:hover,
.lm-tab:focus-visible{
background:var(--item-hover, #F1FEE6);
filter: brightness(100%);
outline:none;
color:#1a1a1a;
}
.lm-tab .icon{
width:30px;
height:30px;
border-radius:6px;
display:block;
flex:0 0 30px;
}
.lm-tab .label{
white-space:nowrap;
}
/* Active tab becomes the “top” of the section body */
.lm-tab.is-active{
background:#ffffffb8;
color:#1a1a1a;
border-color:#c8d3ee;
border-bottom-color:#ffffffb8;
filter: brightness(100%);
position:relative;
z-index:3;
}
.lm-tab.is-active .label{
color:#1a1a1a;
}
/* Section body connects directly under tabs */
.section-body{
background:#ffffffb8;
border:1px solid #c8d3ee;
border-radius:0 12px 12px 12px;
min-height:300px;
padding:0 12px 12px 12px;
}
/* Optional: if the first tab is active, keep the body’s top-left corner flat */
.lm-tabs + .section-body{
margin-top:0;
}
/* Keyboard focus ring */
.lm-tab:focus-visible{
outline:3px solid color-mix(in oklab, var(--lm-focus, #5b7de0) 40%, transparent);
outline-offset:2px;
}
/* Responsive */
@media (max-width:1140px){
.lm-tab{
padding:8px 10px;
min-height:46px;
}
.lm-tab .label{
display:none;
}
.lm-tab .icon{
width:28px;
height:28px;
flex-basis:28px;
}
}
/* --- CALENDAR --- */
.lm-cal{
display:flex;
flex-direction:column;
gap:8px;
background:#fff; /* white body */
border:1px solid #c8d3ee;
border-radius:12px;
padding:12px;
}
.lm-cal-header{
display:grid;
grid-template-columns:40px 1fr 40px; /* arrows always same spot */
align-items:center;
justify-items:center;
}
.lm-cal-header button{
border:none;
background:transparent;
cursor:pointer;
padding:6px;
border-radius:8px;
font-size:18px;
line-height:1;
}
.lm-cal-header button:hover{background:rgba(0,0,0,0.06)}
.lm-cal-title{
font-weight:500;
text-align:center;
}
.lm-cal-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
}
.lm-cal-dow{
font-size:12px;
font-weight:700;
opacity:0.7;
text-align:center;
}
.lm-cal-day a{
display:block;
text-decoration:none;
text-align:center;
padding:4px 0;
border-radius:10px;
background:#ffffff;
border:1px solid #c8d3ee;
color:#1a1a1a;
}
.lm-cal-day a:hover{filter:brightness(0.98)}
.lm-cal-day.is-out a{opacity:0.45}
.lm-cal-day.is-today a{outline:2px solid #8ea1d9;outline-offset:2px}
/* --- ASIDE ACTION BUTTONS --- */
.aside-actions{
margin-top:12px;
display:grid;
gap:8px;
}
.aside-action{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border:1px solid #c8d3ee;
border-radius:10px;
background:#fff;
text-decoration:none;
color:#1a1a1a;
transition:background .15s ease, filter .15s ease;
}
.aside-action:hover,
.aside-action:focus-visible{
background:var(--item-hover, #D5DCED);
color:#1a1a1a;
outline:none;
}
.aside-action .icon{
width:24px; height:24px; flex:0 0 24px; border-radius:6px; display:block;
}
.aside-action .label{
font-weight:400;
}
/* --- HEADER TEXT--- */
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
color: --header-text;
}
h1 {
font-size: 1.4em;
}
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1.1em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.9em;
}
h6 {
font-size: 0.8em;
}
p {
font-size: 1em;
color: var(--page-text);
line-height: 1.5;
text-align: justify;
}
a {
color: #1473CC;
text-decoration: none;
}
a:hover {
color: #2D90ED;
}
b {
font-weight: 600;
}
hr {
border: 0;
padding: 0;
margin: 0;
border-top: 2px solid #CBD4EF;
}
hr.padded {
margin: 12px 0;
}
.narrow {
font-weight: 400;
}
.bold {
font-weight: 600;
}
.uberbold {
font-weight: 700;
}
.align-right {
text-align: right;
}
.hide-overflow {
display: block; /* allows width: 100% to take effect */
width: 100%;
max-width:100%;
white-space: nowrap; /* keep text on one line */
overflow: hidden; /* hide anything that overflows */
text-overflow: ellipsis;
box-sizing: border-box; /* keeps padding from increasing total width */
}
.status {
font-size: 0.9em;
font-weight: 600;
}
.header-text, .subheader-text{
display:flex;
align-items:center;
justify-content:space-between; /* space left and right */
}
.header-text{
margin: 18px 0 12px 0;
}
.subheader-text{
margin: 0 0 12px 0;
}
.header-text-left {
display:inline-flex;
height: 32px;
min-height: 32px;
align-items:center;
gap:8px;
}
.header-text-left img{margin-right: 5px;}
/* Kill the default margins and tighten the line box */
.header-text h1, .subheader-text h1, .subheader-text h2 {
margin: 0;
line-height: 1;
display: flex; /* align icon + text nicely */
align-items: center;
gap: 8px;
padding: 0;
}
.header-text h1 img, .subheader-text h1 img, .subheader-text h2 img {
display: block; /* avoids inline image baseline gap */
}
article h3{
display:inline-flex;
align-items:center;
gap:8px;
margin:0;
}
.h3-icon{ width:24px; height:24px; display:inline-block; }
.header-text-link{
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
border-radius:8px;
text-decoration:none;
}
.header-text-link:hover{ background:rgba(0,0,0,0.06); }
.header-text-link img{ width:24px; height:24px; display:block; cursor: pointer; }
.subtext {
display: block;
font-size: 12px;
color: #6a758f;
margin-top: 2px;
}
/* --- NOTIFICATIONS --- */
:root{
--lm-note-gap: 8px;
--lm-note-radius: 12px;
--lm-note-padY: 10px;
--lm-note-padX: 12px;
/* Colors */
--lm-note-error-bg: #ffe8e8;
--lm-note-error-border: #e49797;
--lm-note-error-text: #6b1d1d;
/* Per spec, Caution = green (distinct from Success) */
--lm-note-caution-bg: #e9f7ef;
--lm-note-caution-border: #7fcaa3;
--lm-note-caution-text: #1f5e3f;
--lm-note-info-bg: #e9f1ff;
--lm-note-info-border: #8ea1d9;
--lm-note-info-text: #1f284a;
--lm-note-success-bg: #e7fbe9;
--lm-note-success-border: #58c473;
--lm-note-success-text: #165c2c;
/* Computed at runtime so the bar sticks under nav/search */
--notify-top: var(--maxbar-h);
}
/* Wrapper is full width, sticks under nav/search, stacks notes */
.lm-notify-wrap{
position: sticky;
top: var(--notify-top);
z-index: 54; /* below search bar (55), above content */
width: 100%;
padding: 0 10px 0 10px;
display: grid;
gap: var(--lm-note-gap);
padding-block: var(--lm-note-gap);
padding-bottom: 0;
}
.lm-note{
width: 100%;
background: transparent;
}
.lm-note-inner{
max-width: 1200px;
margin: 0 auto;
border-radius: var(--lm-note-radius);
border: 1px solid transparent;
background: #fff;
display: grid;
grid-template-columns: 24px 1fr 24px;
align-items: center;
gap: 10px;
padding: var(--lm-note-padY) var(--lm-note-padX);
box-shadow: 0 6px 14px rgba(20,30,60,.06);
}
/* Variants */
.lm-note.error .lm-note-inner{ background: var(--lm-note-error-bg); border-color: var(--lm-note-error-border); color: var(--lm-note-error-text);}
.lm-note.caution .lm-note-inner{ background: var(--lm-note-caution-bg); border-color: var(--lm-note-caution-border); color: var(--lm-note-caution-text);}
.lm-note.info .lm-note-inner{ background: var(--lm-note-info-bg); border-color: var(--lm-note-info-border); color: var(--lm-note-info-text);}
.lm-note.success .lm-note-inner{ background: var(--lm-note-success-bg); border-color: var(--lm-note-success-border); color: var(--lm-note-success-text);}
/* Icon + text + close */
.lm-note-ico{ width:24px; height:24px; display:block; }
.lm-note-text{
font-weight: 600;
line-height: 1.35;
}
.lm-note-close{
width:24px; height:24px;
display:flex;
align-items:center;
justify-content:center;
border:none; background:transparent; cursor:pointer;
border-radius: 8px;
padding:0;
line-height:0;
}
.lm-note-close svg{
width:16px; height:16px; /* scale consistently */
display:block; /* remove inline-gap */
}
.lm-note-close:hover{ background: rgba(0,0,0,.06); }
/* Hide the notifications strip when there are no notes */
.lm-notify-wrap:empty{
display:none;
padding-block:0;
}
/* More robust (works even if whitespace exists inside the wrapper) */
.lm-notify-wrap:not(:has(.lm-note)){
display:none;
padding-block:0;
}
.lm-note-inner:not(:has(.lm-note-ico)){
grid-template-columns: 1fr 24px;
}
.lm-note-inner:not(:has(.lm-note-ico)) .lm-note-text{
grid-column: 1;
}
.lm-note-inner:not(:has(.lm-note-ico)) .lm-note-close{
grid-column: 2;
justify-self: end;
}
/* Small screens: allow long text to wrap gracefully */
@media (max-width: 420px){
.lm-note-inner{ grid-template-columns: 24px 1fr 24px; }
}
/* --- BREADCRUMBS --- */
.lm-breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 0.8em; /* same as h6 */
margin: 10px; /* small spacing below */
color: #555;
}
.lm-breadcrumbs a {
color: #1473CC;
text-decoration: none;
font-weight: 600;
}
.lm-breadcrumbs a:hover {
color: #2D90ED;
}
.lm-breadcrumbs .sep {
color: #888;
}
/* --- POP MENUS --- */
.pop-menu{
position:absolute;
width:220px;
background:#fff;
border:1px solid #c8d3ee;
border-radius:10px;
box-shadow:0 8px 20px rgba(20,30,60,.12);
padding:6px;
display:none; /* hidden on load */
z-index:54; /* under the sticky search bar (z=55) */
}
.pop-menu[aria-hidden="false"]{ display:block; }
.pop-menu a{
display:flex;
align-items:center;
gap:10px;
padding:10px 10px;
text-decoration:none;
color:#1a1a1a;
border-radius:8px;
font-weight:400;
}
.pop-menu a:hover{
background:var(--item-hover, #D5DCED);
}
.pop-menu a img{
width:24px; height:24px; flex:0 0 24px; border-radius:6px;
}
/* --- STUDENTS TABLE --- */
.lm-table-wrap{margin:12px 0; overflow-x:auto;}
.lm-table{
width:100%; border-collapse:collapse; background:#fff; border:1px solid #c8d3ee; border-radius:12px; overflow:hidden;
}
.lm-table thead th{
text-align:left; font-weight:700; font-size:14px; padding:10px 12px; background:#f6f8ff; border-bottom:1px solid #c8d3ee;
}
.lm-table thead th.sortable{
cursor:pointer; user-select:none; position:relative;
}
.lm-table thead th.sortable .sort-ind{
font-size:12px; opacity:.6; margin-left:6px;
}
.lm-table tbody td{
padding:10px 12px; border-bottom:1px solid #e6ecff; vertical-align:middle;
}
.lm-table tbody tr:hover{ background:var(--item-hover); }
.lm-table .avatar{
width:40px; height:40px; border-radius:50%; object-fit:cover; display:block;
}
.lm-table .name{ font-weight:600; }
.lm-table tbody tr{ cursor:pointer; }
/* Hide Birthdate & Start Date on small screens - affects ONLY the students table */
@media (max-width: 720px){
#studentsTable thead th:nth-child(3),
#studentsTable thead th:nth-child(4),
#studentsTable tbody td:nth-child(3),
#studentsTable tbody td:nth-child(4){
display:none;
}
}
/* Birthday "Today" separator row */
#eventsTable tr.lm-bday-divider-row td.lm-bday-divider-cell{
background: #FFFCD1;
text-align: center;
font-weight: 500;
letter-spacing: .5px;
padding: 5px 12px;
border-bottom: 1px solid #e6ecff;
}
/* Events table: hide Avatar AND Date/Time on small screens */
@media (max-width: 720px){
/* Collapse the actual column definitions so no width is reserved */
#eventsTable col.col-av,
#eventsTable col.col-dt{
display:none;
width:0 !important;
visibility:collapse; /* extra belt-and-suspenders for some engines */
}
/* Hide the header + cells for those columns */
#eventsTable thead th.th-av,
#eventsTable tbody td.td-av,
#eventsTable thead th.th-dt,
#eventsTable tbody td.td-dt{
display:none;
}
}
/* Guardians + Mailing List tables: on small screens hide Phone + Email */
@media (max-width: 720px){
/* 3rd = Phone, 4th = Email on both tables */
#guardiansTable thead th:nth-child(3),
#guardiansTable thead th:nth-child(4),
#guardiansTable tbody td:nth-child(3),
#guardiansTable tbody td:nth-child(4) {
display: none;
}
}
/* Staff table responsive columns */
@media (max-width: 720px) {
/* Hide Title, Phone, Email columns */
#staffTable th.title-col,
#staffTable td.title,
#staffTable th.phone-col,
#staffTable td.phone,
#staffTable th.email-col,
#staffTable td.email {
display: none;
}
/* Optional: tighten avatar/name/position for mobile */
#staffTable .avatar-col { width: 44px; }
#staffTable td img.avatar { width: 40px; height: 40px; }
/* Prevent horizontal scroll + keep cells readable */
#staffTable { table-layout: fixed; }
#staffTable td.name,
#staffTable td.position {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* Relationships table: on small screens show ONLY Child + Pickup + Contact */
@media (max-width: 720px){
/* Collapse avatar, relation, newsletter columns so no width is reserved */
#relationshipTable col.col-av,
#relationshipTable col.col-relation,
#relationshipTable col.col-newsletter{
display: none;
width: 0 !important;
visibility: collapse;
}
/* Hide the matching headers and cells */
#relationshipTable thead th.th-av,
#relationshipTable tbody td.td-av,
#relationshipTable thead th.th-relation,
#relationshipTable tbody td.td-relation,
#relationshipTable thead th.th-newsletter,
#relationshipTable tbody td.td-newsletter{
display: none;
}
}
/* Transactions table: mobile view */
@media (max-width: 720px){
/* Hide Fee, Discount, ACCB, CCFRI */
#transactionsTable thead th:nth-child(2),
#transactionsTable thead th:nth-child(3),
#transactionsTable thead th:nth-child(4),
#transactionsTable thead th:nth-child(5),
#transactionsTable tbody td:nth-child(2),
#transactionsTable tbody td:nth-child(3),
#transactionsTable tbody td:nth-child(4),
#transactionsTable tbody td:nth-child(5){
display:none;
}
/* Optional tighter spacing */
#transactionsTable th,
#transactionsTable td{
padding:8px 10px;
}
#transactionsTable{
table-layout:fixed;
}
#transactionsTable td{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
}
.lm-table-meta {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 10px;
}
/* --- EVENTS / ACTIONS TABLE --- */
.lm-events-wrap{ margin:12px 0; }
/* Use existing .lm-table base styles; only add specifics */
.lm-events col.col-ico { width:40px; } /* 24x24 icon + padding */
.lm-events col.col-av { width:56px; } /* optional avatar column */
.lm-events col.col-dt { width:160px; } /* date/time on the right */
.lm-events col.col-event{ width:auto; } /* fills the remaining space */
.lm-events tbody tr{ cursor:pointer; position:relative; } /* for row-wide link */
.lm-events .rowlink{
position:absolute; inset:0; z-index:1;
text-indent:-9999px; overflow:hidden; /* invisible but clickable */
}
/* Cells */
.lm-events td{ vertical-align:middle; }
.lm-events .ico img, .ico img{
width:24px; height:24px; border-radius:6px; display:block;
}
.ico {
width: 40px;
}
.lm-not-specified {
font-style: italic;
color: #c00;
}
.lm-events .av .avatar{
width:40px; height:40px; border-radius:50%; object-fit:cover; display:block;
}
.lm-events .event{
/* Let long text wrap nicely without pushing layout */
overflow-wrap:anywhere;
line-height:1.35;
}
.lm-events .event .emph{ font-weight:500; } /* bold span for names/holidays */
.lm-events .event .red{ color: #B53F3F; }
/* Right-aligned date/time stack */
.lm-events .dt{ text-align:right; white-space:nowrap; }
.lm-events .dt .date{ font-weight:400; }
.lm-events .dt .time{ font-size:12px; color:#6a758f; margin-top:2px; }
/* Responsive: hide Avatar column on smaller screens.
Using + header/cell classes keeps layout stable if the column is removed. */
@media (max-width: 720px){
.lm-events col.col-av{ display:none; }
.lm-events th.th-av, .lm-events td.td-av{ display:none; }
}
/* Mobile-only date that lives inside .event cell */
.lm-events .event .date--mobile{
display: none; /* hidden by default (desktop/tablet) */
}
/* On small screens: show it under the phrase, styled like .time */
@media (max-width: 720px){
.lm-events .event .date--mobile{
display: block;
font-size: 12px;
color: #6a758f; /* same grey tone as .time */
margin-top: 2px;
}
}
.event-empty:hover {
background-color: #fff;
cursor: default;
}
/* Action Buttons */
.lm-action{
display:flex; align-items:center; gap:10px;
width:100%;
padding:10px 12px;
border:1px solid #c8d3ee; border-radius:10px;
background:#fff; color:#1a1a1a; text-decoration:none;
transition: background .15s ease, filter .15s ease;
}
.lm-action:hover,
.lm-action:focus-visible{
background:var(--item-hover, #D5DCED);
color: #1a1a1a;
outline:none;
}
.lm-action .icon{ width:24px; height:24px; flex:0 0 24px; border-radius:6px; display:block; }
.lm-action .label{ font-weight:400; }
/* Highlight the Inquiries button when unread inquiries exist */
.lm-action.has-new-inquiries {
background: #FFFCEB;
}
/* Keep existing hover behaviour */
.lm-action.has-new-inquiries:hover {
background: inherit;
}
/* Bold text when unread inquiries exist */
.lm-action.has-new-inquiries .label {
font-weight: 700;
}
/* Badge Buttons */
.lm-action-badge{
display:flex; align-items:center; gap:10px;
width:100%;
padding:10px 12px;
border:1px solid #c8d3ee; border-radius:10px;
background:#fff; color:#1a1a1a; text-decoration:none;
transition: background .15s ease, filter .15s ease;
}
.lm-action-badge:hover,
.lm-action-badge:focus-visible{
background:var(--item-hover, #D5DCED);
color: #1a1a1a;
outline:none;
}
.lm-action-badge .icon{ width:65px; height:65px; flex:0 0 24px; border-radius:50%; display:block; }
.lm-action-badge img {border: 4px solid #D8DFE2;}
.lm-allergy-badge img {border: 4px solid #F9898E;}
.lm-action-badge .text {
display: flex;
flex-direction: column;
min-width: 0; /* allows overflow */
flex: 1 1 auto; /* allow it to shrink/grow */
overflow: hidden; /* belt-and-suspenders */
}
/* 1) Allow the grid children to shrink within the grid column */
.lm-actions > * { min-width: 0; }
/* 2) Make the card itself shrinkable (belt-and-suspenders for Grid) */
.lm-action-badge { min-width: 0; overflow: hidden; }
/* 3) Make the icon’s flex-basis match its visual width (or drop flex entirely) */
.lm-action-badge .icon {
width:65px; height:65px;
flex: 0 0 65px; /* was 24px */
/* or simply remove the flex:... line and keep just width/height */
}
.lm-action-badge .label{ font-weight:400; }
.lm-action-badge h1 {
color: #555;
font-size: 1rem;
font-weight: 600;
margin: 0 0 0 10px;
padding: 0;
}
.lm-action-badge p {
color: #777;
font-size: 0.9rem;
margin: 0 0 0 10px;
}
.lm-action-badge h4 {
color: #888;
font-size: 0.7rem;
margin: 0 0 0 10px;
}
/* Action/Badge Button Containers */
.lm-actions{ display:grid; gap:10px; }
/* 1️⃣ Full width (always one per row) */
.lm-actions.one-col{ grid-template-columns:1fr; }
/* 2️⃣ Two-up on larger screens, vertical on smaller */
.lm-actions.two-col{ grid-template-columns:1fr; }
@media (min-width: 720px){
.lm-actions.two-col{ grid-template-columns:1fr 1fr; }
}
/* 3️⃣ Three-up on larger screens, vertical on smaller */
.lm-actions.three-col{ grid-template-columns:1fr; }
@media (min-width: 960px){
.lm-actions.three-col{ grid-template-columns:repeat(3, 1fr); }
}
/* 5️⃣ Five-up (inline on all screen sizes) */
.lm-actions.five-col {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
/* Optional: tweak for very small screens (avoid overflow) */
@media (max-width: 480px) {
.lm-actions.five-col {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
}
/* --- WEEKLY ATTENDANCE GRID --- */
.lm-weekgrid-wrap {
margin: 12px 0;
overflow-x: auto;
}
table.lm-weekgrid {
width: 100%;
table-layout: fixed; /* equal column widths */
border-collapse: collapse;
border: 1px solid #c8d3ee;
background: #fff;
}
.lm-weekgrid thead th {
text-align: center;
font-weight: 600;
font-size: 1rem;
padding: 10px 8px;
background: #f6f8ff;
border: 1px solid #c8d3ee;
white-space: nowrap;
}
/* Make 2nd and 3rd header rows (dates and counts) smaller and lighter */
.lm-weekgrid thead tr:not(:first-child) th {
font-size: 0.9rem;
font-weight: 400;
padding: 5px 8px;
}
.monday, .lm-weekgrid thead th.monday{background: #EBF3FF;}
.tuesday, .lm-weekgrid thead th.tuesday{background: #F8EBFF;}
.wednesday, .lm-weekgrid thead th.wednesday{background: #FFEBFB;}
.thursday, .lm-weekgrid thead th.thursday{background: #FFEBEB;}
.friday, .lm-weekgrid thead th.friday{background: #FFFDEB;}
/* Weekday header formatting */
.lm-weekgrid th.day-header {
text-align: center;
vertical-align: middle;
padding: 8px 6px;
}
.lm-weekgrid th .day-name {
font-size: 1em;
font-weight: 600;
line-height: 1.2;
}
.lm-weekgrid th .day-date {
font-size: 0.85em;
color: #666;
line-height: 1.2;
margin-top: 2px;
}
.lm-weekgrid td {
border: 1px solid #c8d3ee;
padding: 0;
text-align: center;
vertical-align: middle;
width: calc(100% / 5); /* ensures equal width fallback */
}
.lm-weekgrid tbody td {
height: 30px;
padding: 0;
}
.lm-weekgrid td.present{ background:#fff; }
.lm-weekgrid td.present:hover,
.lm-weekgrid td.present:focus-within{ background:var(--item-hover,#F1FEE6); }
.lm-weekgrid td.waitlist{ background:#FEFFC5; }
.lm-weekgrid td.toddler{ background:#EFFDFF; }
.lm-weekgrid td.starting{ background:#E5FFF2; }
.lm-weekgrid td.leaving{ background:#FFF0E5; }
/* make the link transparent and full-width */
.lm-weekgrid td.present > a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 12px;
background: transparent;
text-decoration: none;
color: #1a1a1a;
}
/* ABSENT tile */
.lm-weekgrid .absent {
background: #E7EFF7;
height: 29px;
}
/* Responsive tweaks */
@media (max-width: 600px) {
.lm-weekgrid thead th {
font-size: 12px;
padding: 2px 4px;
}
/* Slightly smaller on small screens for the date/count rows */
.lm-weekgrid thead tr:not(:first-child) th {
font-size: 11px;
font-weight: 400; /* reinforce just in case */
}
.lm-weekgrid .present > a {
padding: 2px 6px;
font-size: 12px;
}
.lm-weekgrid .absent {
height: 29px;
}
}
/* =========================================================
Weekly schedule attendance cells
========================================================= */
.lm-weekgrid tbody td.schedule-cell {
padding: 0;
vertical-align: middle;
}
/*
* Present-cell links fill the entire cell. This makes the full
* coloured area clickable rather than only the name text.
*/
.lm-weekgrid tbody td.schedule-cell.present > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 34px;
padding: 0 8px;
box-sizing: border-box;
color: inherit;
text-align: center;
text-decoration: none;
}
.lm-weekgrid tbody td.schedule-cell.present > a:hover,
.lm-weekgrid tbody td.schedule-cell.present > a:focus-visible {
text-decoration: none;
}
/* Status 1: Active; status 2: Probation */
.lm-weekgrid tbody td.schedule-status-active {
background-color: #FFFFFF;
}
/* Status 3: Vacation; status 28: Offered */
.lm-weekgrid tbody td.schedule-status-vacation {
background-color: #FAEBFF;
}
/* Status 9: Paused */
.lm-weekgrid tbody td.schedule-status-paused {
background-color: #FFFFDF;
}
/*
* Statuses:
* 10 Suspended
* 11 Departed without notice
* 12 Departed
* 13 Removed
* 14 Graduated
* 15 Over ratio
* 16 Leaving soon
* 26 Changing soon
* 27 Leaving without notice
* 29 Graduating soon
*/
.lm-weekgrid tbody td.schedule-status-departing {
background-color: #FFF0DF;
}
/* Status 17: Starting soon */
.lm-weekgrid tbody td.schedule-status-starting {
background-color: #DFFFE7;
}
/* Fallback for any unrecognized status */
.lm-weekgrid tbody td.schedule-status-default {
background-color: #FFFFFF;
}
/*
* Toddler colour takes priority over status colours.
* Keep this rule after all status rules.
*/
.lm-weekgrid tbody td.schedule-child-toddler {
background-color: #DFFCFF;
}
/* Empty weekday cell */
.lm-weekgrid tbody td.schedule-cell-absent {
background-color: transparent;
}
.lm-weekgrid tbody td.schedule-cell-absent .absent {
min-height: 34px;
}
/* Empty schedule message */
.lm-weekgrid tbody td.lm-schedule-empty {
padding: 20px;
text-align: center;
}
/* --- WEEK NAVIGATION LINKS --- */
.lm-weeknav {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0 14px 0;
padding: 4px 0;
}
.lm-weeknav-link {
color: #1a1a1a;
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
padding: 6px 10px;
border-radius: 8px;
transition: background 0.2s ease, color 0.2s ease;
}
.lm-weeknav-link:hover,
.lm-weeknav-link:focus {
background: var(--item-hover, #F1FEE6);
color: #000;
}
.lm-weeknav-link.current {
font-weight: 600;
background: #f6f8ff;
border: 1px solid #c8d3ee;
padding: 6px 14px;
border-radius: 8px;
}
/* ---
@media (max-width: 600px) {
.lm-weeknav {
flex-direction: column;
gap: 6px;
text-align: center;
}
.lm-weeknav-link {
display: inline-block;
width: 100%;
}
}
--- */
/* --- PROFILE CARD --- */
.lm-profile{
display:grid;
grid-template-columns:260px minmax(0, 1fr);
gap:16px;
align-items:start;
margin:14px 0;
}
.lm-profile > * { min-width: 0; }
.lm-profile-photo a{
display:block;
width:260px;
height:260px;
border:1px solid #c8d3ee;
border-radius:12px;
overflow:hidden;
background:#fff;
box-shadow:0 6px 14px rgba(20,30,60,.06);
}
.lm-profile-photo {
transition: transform 0.25s ease;
}
.lm-profile-photo:hover {
transform: scale(1.03);
}
.lm-profile-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* --- IMAGE UPLOAD PROGRESS BAR --- */
.lm-progress{
width:100%;
height:10px;
border-radius:999px;
background:rgba(0,0,0,0.08);
overflow:hidden;
}
.lm-progress-bar{
height:100%;
border-radius:999px;
background: var(--drawer-bg);
transition: width .15s linear;
}
.lm-crop-stage{
width:100%;
}
.cropper-view-box,
.cropper-face{
border-radius:0 !important; /* ensure square look */
}
/* --- STRIPED PROGRESS BAR --- */
/* Clickable progress field */
.lm-progress-field{
display:grid;
grid-template-columns:24px minmax(0, 1fr);
gap:10px;
align-items:center;
padding:6px;
margin:10px 0;
background:#ffffff;
border:1px solid #c8d3ee;
border-radius:10px;
color:inherit;
text-decoration:none;
cursor:pointer;
transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lm-progress-field:hover,
.lm-progress-field:focus-visible{
background:var(--item-hover, #F1FEE6);
color:inherit;
outline:none;
box-shadow:0 4px 10px rgba(20,30,60,.08);
}
.lm-progress-field:active{
transform:scale(.995);
}
.lm-progress-field-icon{
width:24px;
height:24px;
display:block;
flex:0 0 24px;
border-radius:6px;
}
.lm-progress-field-body{
min-width:0;
display:grid;
gap:5px;
}
.lm-progress-field .lm-label{
margin:0;
cursor:pointer;
}
/* =========================================
STRIPED PROGRESS BAR
========================================= */
.lm-striped-progress {
width: 100%;
min-height: 10px;
height: 16px;
background: rgba(0,0,0,0.08);
border: 2px solid #FFFF;
border-radius: 999px;
overflow: hidden;
}
.lm-striped-progress-bar {
height: 100%;
width: var(--progress, 0%);
border-radius: 999px;
transition:
width .25s ease,
background-color .25s ease;
background-color: var(--progress-color, #d93a3a);
background-image:
repeating-linear-gradient(
45deg,
rgba(255,255,255,.35) 0,
rgba(255,255,255,.35) 8px,
rgba(255,255,255,.12) 8px,
rgba(255,255,255,.12) 16px
);
}
/* 5% color increments */
.lm-striped-progress-bar.p0 { --progress-color:#8B0000; }
.lm-striped-progress-bar.p5 { --progress-color:#A50000; }
.lm-striped-progress-bar.p10 { --progress-color:#C21807; }
.lm-striped-progress-bar.p15 { --progress-color:#D6330F; }
.lm-striped-progress-bar.p20 { --progress-color:#E25822; }
.lm-striped-progress-bar.p25 { --progress-color:#F06A1F; }
.lm-striped-progress-bar.p30 { --progress-color:#F57C00; }
.lm-striped-progress-bar.p35 { --progress-color:#FB8C00; }
.lm-striped-progress-bar.p40 { --progress-color:#FFA000; }
.lm-striped-progress-bar.p45 { --progress-color:#FFC107; }
.lm-striped-progress-bar.p50 { --progress-color:#FFEB3B; }
.lm-striped-progress-bar.p55 { --progress-color:#D4E157; }
.lm-striped-progress-bar.p60 { --progress-color:#9CCC65; }
.lm-striped-progress-bar.p65 { --progress-color:#66BB6A; }
.lm-striped-progress-bar.p70 { --progress-color:#43A047; }
.lm-striped-progress-bar.p75 { --progress-color:#2EAD71; }
.lm-striped-progress-bar.p80 { --progress-color:#26A69A; }
.lm-striped-progress-bar.p85 { --progress-color:#29B6F6; }
.lm-striped-progress-bar.p90 { --progress-color:#1E88E5; }
.lm-striped-progress-bar.p95 { --progress-color:#4169E1; }
.lm-striped-progress-bar.p100 { --progress-color:#245DE0; }
/* User Profiles */
.lm-prof-card{
background:#ffffffb8;
border:1px solid #ffffffb8;
border-radius:12px;
padding: 0;
min-width:0;
}
.lm-prof-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding-bottom: 8px;
}
.lm-prof-head > *{ min-width:0; } /* Let children shrink inside the flex row */
.lm-prof-name{
margin:0;
font-size:1.5rem;
color:#1f284a;
line-height:1.2;
flex:1 1 auto; /* takes remaining space, can shrink */
min-width:0; /* required for truncation in flex */
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
padding-left: 10px;
}
.lm-prof-name .first{ font-weight:700; }
.lm-prof-name .last{ font-weight:400; }
/* Reuse your header icon style for the 3-dots trigger */
.lm-prof-menu .header-text-link{ margin-left:auto; }
/* Menu: don’t let it stretch */
.lm-prof-menu{ flex:0 0 auto; }
/* Fields list */
.lm-prof-fields{
display:grid;
gap:0;
margin-top:8px;
}
.lm-prof-row{
display:grid;
grid-template-columns:100px 1fr;
gap:12px;
padding:10px;
border-bottom:1px solid #e6ecff;
}
/* Clickable profile rows */
.lm-prof-fields a.lm-prof-link{
display:block;
background:#FFFFFF; /* default white for linked rows */
text-decoration:none;
color:inherit;
transition: background .15s ease, box-shadow .15s ease;
padding: 0 10px;
border-bottom:1px solid #e6ecff;
}
.lm-prof-fields a.lm-prof-link:hover,
.lm-prof-fields a.lm-prof-link:focus-visible{
background: var(--item-hover, #F1FEE6); /* hover color */
cursor: pointer;
outline: none;
}
/* Ensure the inner row keeps its grid/padding when wrapped */
.lm-prof-fields a.lm-prof-link .lm-prof-row{
display:grid;
grid-template-columns:100px 1fr;
gap:12px;
padding:10px 0;
border-bottom:1px solid #e6ecff;
}
.lm-prof-fields a.lm-prof-link .lm-prof-row:last-child{ border-bottom:none; }
.lm-prof-label{
font-weight:600;
color:#4b5776;
}
.lm-prof-value{
color:var(--page-text,#1a1a1a);
}
.lm-prof-sub{
margin-top:2px;
font-size:.85em;
color:#6a758f;
}
/* Make linked rows feel interactive */
.lm-prof-value a{
color:#1473CC;
font-weight:600;
text-decoration:none;
}
.lm-prof-value a:hover{ color:#2D90ED; }
/* Responsive: stack photo above info */
@media (max-width: 960px){
.lm-profile{ grid-template-columns:1fr; }
.lm-profile-photo a{ width:100%; max-width:360px; margin:0 auto; }
.lm-prof-row{ grid-template-columns:100px 1fr; }
}
.yes, .no {
font-weight: 600;
font-size: 1em;
text-decoration: none;
}
.yes { color: #25AE88;}
.no { color: #D75A4A;}
/* --- ENROLLMENT BLOCK --- */
.enroll-block{
--enroll-divider: #c8d3ee;
--enroll-on: #CFEFBA; /* green fill for attending days */
--enroll-wl: #FCFB90; /* yellow fill for waitlisted days */
--enroll-vac: #D6F1FE; /* blue fill for vacation days */
background:#fff;
border:1px solid var(--enroll-divider);
border-radius:12px;
overflow:hidden; /* gives a single rounded outer frame */
}
/* rows inside the block become a tight grid without gaps */
.enroll-block .enroll-row{
margin-top:0 !important; /* ignore inline margins from current markup */
gap:0 !important; /* make every cell touch */
display:grid; /* (keeps your two-col/five-col templates) */
}
/* each cell draws only its top/right borders; wrapper supplies outside border */
.enroll-block .enroll-row .lm-action{
border:0; /* neutralize default */
border-top:1px solid var(--enroll-divider);
border-right:1px solid var(--enroll-divider);
border-radius:0; /* square inner corners so cells touch */
}
/* no top border for the first grid row (avoids double line with wrapper) */
.enroll-block .enroll-row--top .lm-action{ border-top:0; }
/* last cell in any row doesn't draw a right divider (wrapper provides it) */
.enroll-block .enroll-row .lm-action:last-child{ border-right:0; }
/* weekday highlights */
.enroll-block .enroll-row .enroll-day--on{
background:var(--enroll-on);
}
/* keep hover consistent but subtle for highlighted days */
.enroll-block .enroll-row .enroll-day--on:hover,
.enroll-block .enroll-row .enroll-day--on:focus-visible{
filter:brightness(0.98);
}
/* make the titles/labels look centered and calm in the grid cells */
.enroll-block .enroll-row .lm-action .label{
width:100%;
text-align:center;
font-weight:400;
}
/* ---------- Enrollment block: small-screen fixes ---------- */
/* Trigger when .two-col collapses to a single column */
@media (max-width: 719.98px){
/* No inner right borders when stacked (wrapper supplies the outer border) */
.enroll-block .enroll-row.enroll-row--top .lm-action,
.enroll-block .enroll-row.enroll-row--bottom .lm-action{
border-right: 0 !important;
}
/* Put a divider between the stacked items: the 2nd item draws a top border.
This visually becomes the "bottom border" for the first item. */
.enroll-block .enroll-row.enroll-row--top .lm-action + .lm-action,
.enroll-block .enroll-row.enroll-row--bottom .lm-action + .lm-action{
border-top: 1px solid var(--enroll-divider) !important;
}
/* Ensure the very first cell of the top row still has no top border */
.enroll-block .enroll-row--top .lm-action:first-child{
border-top: 0 !important;
}
}
/* Avoid a double right border on the last weekday cell */
.enroll-block .enroll-row--mid .lm-action:nth-child(5){
border-right: 0;
}
/* Keep the weekday row inline (always 5 columns) */
.enroll-block .enroll-row--mid { /* the Mon–Fri row */
grid-template-columns: repeat(5, 1fr) !important;
}
/* ── NEW: very top row (status + menu) ───────────────────────── */
.enroll-block .enroll-row--verytop { /* one column grid already */
gap: 0 !important;
}
.enroll-block .enroll-row--verytop .lm-action {
/* override the generic inner-cell borders for the first row */
border: 0; /* no top/right/left: avoids double top */
border-bottom: 1px solid var(--enroll-divider);/* single divider between verytop and next row */
border-radius: 0;
display: flex;
align-items: center;
justify-content: space-between; /* left status, right menu link */
padding-block: 10px; /* keep your original vertical rhythm */
}
/* Prevent hover effect and cursor change for the top status row */
.enroll-block .enroll-row--verytop,
.enroll-block .enroll-row--verytop .lm-action,
.enroll-block .enroll-row--verytop .lm-action:hover,
.enroll-block .enroll-row--verytop .lm-action:focus-visible {
background: #fff !important; /* stays white even on hover */
cursor: default !important; /* no hand/pointer cursor */
pointer-events: none; /* optional: disables clicking entirely */
}
/* Allow the right-side link (menu button) to still work */
.enroll-block .enroll-row--verytop .header-text-link {
pointer-events: auto; /* re-enable clicks on the link */
cursor: pointer; /* normal link cursor */
}
/* status text color (green by default) */
.enroll-status {
padding-left: 12px;
font-size: 1.1rem;
color: var(--enroll-status, #1e9b52); /* "Active" green */
font-weight: 600;
}
/* Optional variants for other states (use when needed) */
.enroll-status.is-pending { color: #FFA939; } /* orange */
.enroll-status.is-inactive { color: #c53838; } /* red */
.enroll-status.is-vacation { color: #269CEE; } /* blue */
/* Keep weekday row always inline (5 columns) */
.enroll-block .enroll-row--mid { grid-template-columns: repeat(5, 1fr) !important; }
/* Right-edge guard for Fri cell (no inner double border) */
.enroll-block .enroll-row--mid .lm-action:nth-child(5){ border-right: 0; }
/* Small-screen fixes for the two-col rows (unchanged behavior) */
@media (max-width: 719.98px){
.enroll-block .enroll-row.enroll-row--top .lm-action,
.enroll-block .enroll-row.enroll-row--bottom .lm-action{
border-right: 0 !important;
}
.enroll-block .enroll-row.enroll-row--top .lm-action + .lm-action,
.enroll-block .enroll-row.enroll-row--bottom .lm-action + .lm-action{
border-top: 1px solid var(--enroll-divider) !important;
}
.enroll-block .enroll-row--top .lm-action:first-child{ border-top: 0 !important; }
}
/* --- FORMS --- */
:root{
--lm-field-h: 44px;
--lm-radius: 10px;
--lm-gap: 10px;
--lm-border: #b9c6eb;
--lm-border-strong:#8ea1d9;
--lm-bg: #fff;
--lm-bg-muted:#f7f9ff;
--lm-text:#1a1a1a;
--lm-placeholder:#6a758f;
--lm-focus: #5b7de0; /* focus ring */
--lm-danger:#c65353;
--lm-success:#2f8f57;
}
/* Form wrapper */
.lm-form{
display:grid;
gap: 16px;
}
/* Field block */
.lm-field{
display:grid;
gap:6px;
}
.lm-label{
font-weight:600;
font-size:0.9em;
padding-left: 5px;
}
.lm-label-red{
color: #D83D3D;
font-style: italic;
font-weight:400;
font-size: 0.8em;
}
.lm-label-green{
color: #1E9B52;
font-style: italic;
font-weight:400;
font-size: 0.8em;
}
.lm-label-blue{
color: #1473CC;
font-style: italic;
font-weight:500;
font-size: 0.9em;
}
.lm-hint{
font-size:12px;
color:#4b5776;
}
.lm-error{
font-size:12px;
color:var(--lm-danger);
}
/* Common input shell */
.lm-input,
.lm-select,
.lm-textarea,
.lm-file,
.lm-button{
font:inherit;
color:var(--lm-text);
}
/* Text-like inputs */
.lm-input{
height:var(--lm-field-h);
width:100%;
padding:0 12px;
border:1px solid var(--lm-border);
border-radius:var(--lm-radius);
background:var(--lm-bg);
outline:none;
}
.lm-input::placeholder{ color:var(--lm-placeholder); }
.lm-input:focus{
border-color:var(--lm-border-strong);
box-shadow:0 0 0 3px color-mix(in oklab, var(--lm-focus) 30%, transparent);
}
/* Textarea: vertical resize only */
.lm-textarea {
width:100%;
min-height:110px;
padding:10px 12px;
border:1px solid var(--lm-border);
border-radius:var(--lm-radius);
background:var(--lm-bg);
outline:none;
resize:vertical; /* height only */
}
.lm-textarea:focus{
border-color:var(--lm-border-strong);
box-shadow:0 0 0 3px color-mix(in oklab, var(--lm-focus) 30%, transparent);
}
.lm-textarea-medium {
min-height:220px;
}
.lm-textarea-tall {
min-height:330px;
}
/* Select (dropdown) */
.lm-select{
height:var(--lm-field-h);
width:100%;
padding:0 36px 0 12px; /* room for arrow */
border:1px solid var(--lm-border);
border-radius:var(--lm-radius);
background:
linear-gradient(to bottom, var(--lm-bg), var(--lm-bg)) padding-box,
url("data:image/svg+xml;utf8,") no-repeat right 12px center / 14px;
appearance:none;
outline:none;
}
.lm-select:focus{
border-color:var(--lm-border-strong);
box-shadow:0 0 0 3px color-mix(in oklab, var(--lm-focus) 30%, transparent);
}
.lm-date,
.lm-time{
height: var(--lm-field-h);
width: 100%;
padding: 0 12px;
border: 1px solid var(--lm-border);
border-radius: var(--lm-radius);
background: var(--lm-bg);
color: var(--lm-text);
font: inherit;
outline: none;
}
/* Same focus style as .lm-input */
.lm-date:focus,
.lm-time:focus{
border-color: var(--lm-border-strong);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--lm-focus) 30%, transparent);
}
/* Optional: show subtle icon + give room for the native picker button */
.lm-date,
.lm-time{
padding-right: 42px; /* room for picker icon/button */
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px 18px;
}
/* Calendar icon */
.lm-date{
background-image: url("data:image/svg+xml;utf8,");
}
/* Clock icon */
.lm-time{
background-image: url("data:image/svg+xml;utf8,");
}
/* Make the native picker button consistent (Chromium/Safari) */
.lm-date::-webkit-calendar-picker-indicator,
.lm-time::-webkit-calendar-picker-indicator{
opacity: 0; /* hide default icon (we use our own) */
cursor: pointer;
width: 42px; /* clickable area aligns with padding-right */
height: 100%;
}
/* Keep the built-in clear/spin buttons from looking “off” (Chromium) */
.lm-date::-webkit-clear-button,
.lm-time::-webkit-clear-button,
.lm-date::-webkit-inner-spin-button,
.lm-time::-webkit-inner-spin-button{
display: none;
}
/* Disabled matches your system */
.lm-date:disabled,
.lm-time:disabled{
opacity: .6;
cursor: not-allowed;
}
/* Small screens: slightly tighter padding (optional) */
@media (max-width: 420px){
.lm-date,
.lm-time{
padding-left: 10px;
padding-right: 38px;
background-position: right 10px center;
}
}
/* --- BUTTONS --- */
.lm-button{
display:inline-flex; align-items:center; justify-content:center;
gap:8px; padding:0 20px; height:var(--lm-field-h);
border-radius:var(--lm-radius);
border:0;
background:#04AA6D; color:#fff; font-weight:600; cursor:pointer;
}
.lm-button:hover{ filter:brightness(1.1); color: #FFF; }
.lm-button.secondary{
background:var(--lm-bg);
color:#1f284a;
border:1px solid var(--lm-border);
}
.lm-button-delete{
background: #D83D3D;
}
.lm-button-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 18px;
border:none;
border-radius:10px;
background:transparent;
color:#5B6C8F;
font-size:1rem;
font-weight:500;
cursor:pointer;
transition:background .15s ease, color .15s ease;
}
.lm-button-secondary:hover{
background:#EEF4FF;
color:#2D4F91;
}
.lm-button-secondary:active{
background:#E2ECFF;
}
/* File input (native button) */
input[type="file"].lm-file{
height:var(--lm-field-h);
padding:0 8px;
border:1px solid var(--lm-border);
border-radius:var(--lm-radius);
background:var(--lm-bg);
}
input[type="file"].lm-file::file-selector-button{
height:calc(var(--lm-field-h) - 8px);
margin:4px;
padding:0 12px;
border-radius:8px;
border:1px solid var(--lm-border);
background:var(--lm-bg-muted);
cursor:pointer;
}
/* Image input: give it consistent size if used */
input[type="image"].lm-image{
width:var(--lm-field-h); height:var(--lm-field-h);
border-radius:10px; border:1px solid var(--lm-border);
object-fit:cover; background:#fff;
}
/* Date/time/month/week/color/number/email/etc share the same .lm-input class */
input[type="color"].lm-input{
padding:0; width:var(--lm-field-h); /* square swatch */
}
/* Range slider */
input[type="range"].lm-range{
width:100%; height: var(--lm-field-h);
background:transparent;
}
input[type="range"].lm-range:focus{ outline:none; }
/* WebKit */
input[type="range"].lm-range::-webkit-slider-runnable-track{
height:6px; border-radius:999px; background:var(--lm-border);
}
input[type="range"].lm-range::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none;
width:18px; height:18px; border-radius:50%;
background:#A2B3E7; margin-top:-6px; border:2px solid #fff; box-shadow:0 0 0 1px var(--lm-border);
}
/* Firefox */
input[type="range"].lm-range::-moz-range-track{
height:6px; border-radius:999px; background:var(--lm-border);
}
input[type="range"].lm-range::-moz-range-thumb{
width:18px; height:18px; border-radius:50%;
background:#A2B3E7; border:2px solid #fff; box-shadow:0 0 0 1px var(--lm-border);
}
/* Large Checkbox & Radio (equal height to input) */
.lm-check, .lm-radio{
display:inline-grid; grid-auto-flow:column; align-items:center; gap:10px;
cursor:pointer; user-select:none;
}
.lm-check input, .lm-radio input{ position:absolute; opacity:0; pointer-events:none; }
.lm-check .box, .lm-radio .dot{
width:var(--lm-field-h); height:var(--lm-field-h);
border:1px solid var(--lm-border); border-radius:10px; background:#fff;
display:grid; place-items:center; transition:.15s ease;
}
.lm-radio .dot{ border-radius:50%; }
.lm-check .box::after{
content:""; width:14px; height:8px; border:3px solid transparent; border-left-color:#fff; border-bottom-color:#fff; transform:rotate(-45deg) translateY(-1px); opacity:0;
}
.lm-radio .dot::after{
content:""; width:14px; height:14px; border-radius:50%; background:#fff; opacity:0;
}
/* Checked state */
.lm-check input:checked + .box{
background:#04AA6D; border-color:#04AA6D; box-shadow:0 0 0 3px color-mix(in oklab, var(--lm-focus) 25%, transparent);
}
.lm-check input:checked + .box::after{ opacity:1; }
.lm-radio input:checked + .dot{
background:#04AA6D; border-color:#04AA6D; box-shadow:0 0 0 3px color-mix(in oklab, var(--lm-focus) 25%, transparent);
}
.lm-radio input:checked + .dot::after{ opacity:1; }
/* Toggle switch */
.lm-toggle{
display:inline-grid;
grid-auto-flow:column;
align-items:center;
gap:10px;
cursor:pointer;
user-select:none;
}
.lm-toggle input{
position:absolute;
opacity:0;
pointer-events:none;
}
.lm-toggle .track{
width:64px;
height:var(--lm-field-h);
background:#E8F7E3; /* light green when LEFT */
border:1px solid #6BCB25;
border-radius:999px;
position:relative;
transition:.2s ease;
}
.lm-toggle .knob{
position:absolute;
top:50%;
translate:0 -50%;
width:calc(var(--lm-field-h) - 8px);
height:calc(var(--lm-field-h) - 8px);
left:4px;
border-radius:999px;
background:#6BCB25; /* GREEN when left */
box-shadow:0 1px 2px rgba(0,0,0,.1);
transition:.2s ease;
}
/* RIGHT / checked state */
.lm-toggle input:checked + .track{
background:#FFE5E5; /* light red */
border-color:#D83D3D;
}
.lm-toggle input:checked + .track .knob{
left:calc(100% - (var(--lm-field-h) - 8px) - 4px);
background:#D83D3D; /* RED when right */
}
/* Inline groups (for checkboxes/radios) */
.lm-inline{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.lm-inline-center {
flex: 1 1 100%;
display: flex;
justify-content: center;
}
.lm-inline-right {
flex: 1 1 100%;
display: flex;
justify-content: flex-end;
}
/* --- PAYMENT LOCK TOGGLE --- */
.lm-toggle-row{
display:flex;
align-items:center;
gap:12px;
min-height:var(--lm-field-h);
padding:10px 12px;
border:1px solid var(--lm-border);
border-radius:var(--lm-radius);
background:#fff;
}
.lm-toggle{
position:relative;
width:58px;
height:32px;
flex:0 0 58px;
border:1px solid var(--lm-border);
border-radius:999px;
background:#e9eef7;
cursor:pointer;
padding:0;
transition:background .15s ease, border-color .15s ease;
}
.lm-toggle:hover{
filter:brightness(.98);
}
.lm-toggle:focus-visible{
outline:none;
border-color:var(--lm-border-strong);
box-shadow:0 0 0 3px color-mix(in oklab, var(--lm-focus) 30%, transparent);
}
.lm-toggle-knob{
position:absolute;
top:3px;
left:3px;
width:24px;
height:24px;
border-radius:50%;
background:#fff;
box-shadow:0 2px 6px rgba(20,30,60,.18);
transition:left .15s ease;
}
.lm-toggle.is-on{
background:#449FE4;
border-color:#2D90ED;
}
.lm-toggle.is-on .lm-toggle-knob{
left:29px;
}
.lm-toggle-status{
font-weight:600;
color:var(--page-text);
}
/* ================================
SuperCheck — full-width clickable row
Keeps original checkbox appearance from your .lm-check styles
================================ */
.lm-supercheck{
display:flex;
align-items:center;
width:100%;
min-height: var(--lm-field-h);
cursor:pointer;
user-select:none;
/* row padding only (no border / no card) */
padding: 6px 10px;
border-radius: var(--lm-radius);
background: transparent;
}
/* Keep your hover highlight */
.lm-supercheck:hover{
/* background: var(--item-hover, #F1FEE6);*/
background: #FFF;
}
/* Remove any row-level focus styling (NOT the checkbox itself) */
.lm-supercheck:focus,
.lm-supercheck:focus-within,
.lm-supercheck:active{
outline: none !important;
box-shadow: none !important;
border: none !important;
}
/* Hide the real checkbox (same pattern as .lm-check) */
.lm-supercheck input{
position:absolute;
opacity:0;
pointer-events:none;
}
/* ✅ Re-apply your ORIGINAL checkbox visuals (copied from .lm-check .box) */
.lm-supercheck .box{
width: var(--lm-field-h);
height: var(--lm-field-h);
flex: 0 0 var(--lm-field-h);
border: 1px solid var(--lm-border);
border-radius: 10px;
background: #fff;
display: grid;
place-items: center;
transition: .15s ease;
}
/* The checkmark (copied from .lm-check .box::after) */
.lm-supercheck .box::after{
content:"";
width:14px;
height:8px;
border:3px solid transparent;
border-left-color:#fff;
border-bottom-color:#fff;
transform:rotate(-45deg) translateY(-1px);
opacity:0;
}
/* Checked state (copied from .lm-check input:checked + .box) */
.lm-supercheck input:checked + .box{
background:#04AA6D;
border-color:#04AA6D;
box-shadow:0 0 0 3px color-mix(in oklab, var(--lm-focus) 25%, transparent);
}
.lm-supercheck input:checked + .box::after{
opacity:1;
}
/* Optional icon (24x24) */
.lm-supercheck .icon{
width:24px;
height:24px;
flex:0 0 24px;
display:block;
object-fit:contain;
border-radius:6px;
/* 10px from checkbox */
margin-left:10px;
}
/* Text */
.lm-supercheck .text{
/* 10px from icon (or from checkbox if you omit icon and use .no-icon below) */
margin-left:10px;
text-align:left;
flex:1 1 auto;
min-width:0;
}
/* If you have no icon, add class="lm-supercheck no-icon" */
.lm-supercheck.no-icon .text{
margin-left:10px; /* 10px from checkbox */
}
/* ================================
Weekly inline superchecks (Mon–Fri)
- 5 equal columns, fill parent width
- label wraps the whole cell (clickable)
- day text: right on large, above on small
- checkbox visuals match .lm-check/.lm-supercheck
================================ */
.lm-weekchecks{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:10px;
width:100%;
}
/* Each cell is a label so the whole thing toggles the checkbox */
.lm-weekcheck{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
min-height: var(--lm-field-h);
padding: 8px 10px;
border:1px solid #c8d3ee;
border-radius:12px;
background:#fff;
cursor:pointer;
user-select:none;
transition: background .15s ease, filter .15s ease, border-color .15s ease;
}
.lm-weekcheck:hover{
background: var(--item-hover, #F1FEE6);
}
/* Hide real checkbox (same pattern as your .lm-check / .lm-supercheck) */
.lm-weekcheck input{
position:absolute;
opacity:0;
pointer-events:none;
}
/* Reuse your checkbox look */
.lm-weekcheck .box{
width: var(--lm-field-h);
height: var(--lm-field-h);
flex: 0 0 var(--lm-field-h);
border: 1px solid var(--lm-border);
border-radius: 10px;
background: #fff;
display:grid;
place-items:center;
transition: .15s ease;
}
.lm-weekcheck .box::after{
content:"";
width:14px;
height:8px;
border:3px solid transparent;
border-left-color:#fff;
border-bottom-color:#fff;
transform:rotate(-45deg) translateY(-1px);
opacity:0;
}
/* Checked state (copied from .lm-check input:checked + .box) */
.lm-weekcheck input:checked + .box{
background:#04AA6D;
border-color:#04AA6D;
box-shadow:0 0 0 3px color-mix(in oklab, var(--lm-focus) 25%, transparent);
}
.lm-weekcheck input:checked + .box::after{ opacity:1; }
.lm-weekcheck .day{
font-weight:600;
color:#4b5776;
line-height:1;
}
/* Small screens: stack label above checkbox */
@media (max-width: 720px){
.lm-weekcheck{
flex-direction:column;
gap:6px;
padding:10px 6px;
}
.lm-weekcheck .day{
order:-1; /* puts text above checkbox */
font-size: 0.9em;
}
}
/* Optional: ultra-small screens — reduce gap a hair */
@media (max-width: 420px){
.lm-weekchecks{ gap:8px; }
.lm-weekcheck{ padding:10px 4px; }
}
/* Disabled/readonly */
.lm-disabled,
.lm-input:disabled, .lm-select:disabled, .lm-textarea:disabled, .lm-button:disabled,
input[type="range"].lm-range:disabled{
opacity:.6; cursor:not-allowed;
}
/* Validation helpers (optional) */
.lm-valid{ border-color:var(--lm-success) !important; }
.lm-invalid{ border-color:var(--lm-danger) !important; }
.lm-grid-1, .lm-grid-2, .lm-grid-3 {
padding-bottom: 10px;
}
/* Compact two-column layout option */
@media (min-width: 720px){
.lm-grid-2{
display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
}
/* --- FORM GRID LAYOUTS --- */
.lm-grid-2,
.lm-grid-3{
display:grid;
gap:16px;
align-items:start;
}
/* Default mobile-first stacking */
.lm-grid-2{
grid-template-columns:1fr;
}
.lm-grid-3{
grid-template-columns:1fr;
}
/* Two-column layout on tablets and larger */
@media (min-width: 720px){
.lm-grid-2{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
/* Optional intermediate layout */
.lm-grid-3{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}
/* Full three-column layout on desktop */
@media (min-width: 960px){
.lm-grid-3{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
}
/* Prevent overflow issues inside grids */
.lm-grid-2 > *,
.lm-grid-3 > *{
min-width:0;
}
/* --- Prevent file input from expanding the grid / page width --- */
/* Allow grid items to shrink below their content's min-content width */
.lm-grid-2 > .lm-field { min-width: 0; }
/* Also safe to set on any field container */
.lm-field { min-width: 0; }
/* Make the file input respect the container width */
input[type="file"].lm-file{
width: 100%;
max-width: 100%;
display: block; /* avoid inline sizing quirks */
overflow: hidden; /* keep long filenames from affecting layout */
}
/* Tame the native button so it can't force overflow */
input[type="file"].lm-file::file-selector-button{
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* Safari/WebKit prefix (kept harmless elsewhere) */
input[type="file"].lm-file::-webkit-file-upload-button{
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* Optional: if you *ever* see horizontal scroll on tiny screens, keep it hidden */
main { overflow-x: hidden; }
/* --- COMMENTS --- */
.lm-comments{
margin-top:16px;
display:grid;
gap:14px;
}
/* Single comment row */
.lm-comment{
display:grid;
grid-template-columns:40px 1fr;
gap:10px;
}
/* Reuse your global .avatar sizing; ensure object-fit */
.lm-comment .avatar{
width:40px; height:40px; border-radius:50%; object-fit:cover; display:block;
}
/* Chat bubble */
.lm-cmt-bubble{
position:relative;
background:#fff;
border:1px solid #c8d3ee;
border-radius:12px;
padding:10px 12px;
box-shadow:0 6px 14px rgba(20,30,60,.06);
}
/* Arrow pointing to avatar (border + fill for a crisp edge) */
.lm-cmt-bubble::before{
content:"";
position:absolute;
left:-8px; top:16px;
width:0; height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid #c8d3ee; /* border color */
}
.lm-cmt-bubble::after{
content:"";
position:absolute;
left:-6px; top:17px;
width:0; height:0;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
border-right:7px solid #fff; /* fill color */
}
/* Header + body inside bubble */
.lm-cmt-head{
display:flex;
align-items:baseline;
gap:8px;
font-weight:700;
color:#1f284a;
font-size:14px;
margin:0 0 4px 0;
}
.lm-cmt-time{
font-weight:600;
font-size:12px;
color:#6a758f;
letter-spacing:.1px;
white-space:nowrap;
}
.lm-cmt-body{ color:var(--page-text, #333); }
.lm-cmt-body p{ margin:0; line-height:1.45; }
/* Actions row aligns under both avatar + bubble */
.lm-cmt-actions{
grid-column:1 / -1;
display:flex;
justify-content:flex-end;
gap:12px;
padding-right: 12px;
}
.lm-cmt-bubble,
.lm-cmt-editor{
transition:opacity .15s ease;
}
/* --- COMMENT ACTION ICONS --- */
.lm-cmt-actions{
display:flex;
align-items:center;
gap:4px;
}
.lm-cmt-action-icon{
width:24px;
height:24px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px;
text-decoration:none;
}
.lm-cmt-action-icon:hover,
.lm-cmt-action-icon:focus-visible{
background:rgba(0,0,0,0.08);
outline:none;
}
.lm-cmt-action-icon img{
width:12px;
height:12px;
display:block;
}
.lm-cmt-edit-form {
min-width: 0;
}
.lm-cmt-editor-inline {
margin-bottom: 8px;
}
.lm-cmt-edit-postbar {
grid-column: auto;
justify-content: flex-end;
gap: 8px;
margin: 0;
}
/* --- COMMENT DATE HOVER --- */
.lm-cmt-date{
opacity:0;
visibility:hidden;
transition:opacity .15s ease;
}
.lm-comment:hover .lm-cmt-date,
.lm-comment:focus-within .lm-cmt-date{
opacity:1;
visibility:visible;
}
@media (max-width: 520px){
.lm-cmt-head{
flex-wrap:wrap;
}
.lm-cmt-time{
font-size:12px;
}
}
.lm-cmt-actions a{
font-size:12px;
color:#1473CC;
text-decoration:none;
font-weight:600;
}
.lm-cmt-actions a:hover{ color:#2D90ED; }
/* Composer */
.lm-cmt-compose{
margin-top:6px;
display:grid;
grid-template-columns:40px 1fr;
gap:10px;
}
/* Wrapper to draw the bubble arrow for the composer */
.lm-cmt-editor{
position:relative;
}
.lm-cmt-editor::before{
content:"";
position:absolute;
left:-8px; top:16px;
width:0; height:0;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid #c8d3ee;
}
.lm-cmt-editor::after{
content:"";
position:absolute;
left:-6px; top:17px;
width:0; height:0;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
border-right:7px solid #fff;
}
/* Custom comment textarea (separate from .lm-textarea) */
.lm-cmt-textarea{
width:100%;
min-height:120px;
resize:vertical; /* height only */
padding:10px 12px;
border:1px solid #c8d3ee;
border-radius:12px;
background:#fff;
font:inherit;
color:var(--page-text, #1a1a1a);
outline:none;
box-shadow:0 6px 14px rgba(20,30,60,.06);
}
.lm-cmt-textarea::placeholder{ color:#6a758f; }
.lm-cmt-textarea:focus{
border-color:#8ea1d9;
box-shadow:0 0 0 3px color-mix(in oklab, var(--lm-focus, #5b7de0) 30%, transparent);
}
/* Post bar */
.lm-cmt-postbar{
grid-column:1 / -1;
display:flex;
justify-content:flex-end;
margin-right: 12px;
}
/* Small screens: let actions wrap neatly if needed */
@media (max-width: 420px){
.lm-cmt-actions{ flex-wrap:wrap; gap:8px; }
}
/* --- PASSWORD STRENGTH METER --- */
/* A11y helper */
.sr-only{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}
/* Meter shell */
.lm-pw-meter{
display:grid; gap:8px;
background:#fff; border:1px solid var(--lm-border,#b9c6eb);
border-radius: var(--lm-radius, 10px);
padding:10px 12px;
}
/* Segmented bar */
.lm-pw-bar{
display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
}
.lm-pw-bar .seg{
height:8px; border-radius:999px; background:#e6ecff; /* base rail */
border:1px solid #d6defa;
}
/* Active segments inherit color from state */
.lm-pw-meter[data-score="0"] .seg.active{ background:#ffe8e8; border-color:#f3b3b3; }
.lm-pw-meter[data-score="1"] .seg.active{ background:#ffd9b5; border-color:#f2b277; } /* weak (orange) */
.lm-pw-meter[data-score="2"] .seg.active{ background:#fff2b8; border-color:#ead989; } /* fair (amber) */
.lm-pw-meter[data-score="3"] .seg.active{ background:#e7fbe9; border-color:#bfe8c8; } /* good (green) */
.lm-pw-meter[data-score="4"] .seg.active{ background:#d6f7e0; border-color:#9fe5b6; } /* strong (deeper green) */
/* Text row */
.lm-pw-text{
display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center;
color:var(--page-text,#1a1a1a);
}
.lm-pw-text .hint{ font-size:12px; color:#6a758f; }
/* Status coloring for label */
.lm-pw-meter[data-score="0"] #pw-strength-text{ color:#6b1d1d; }
.lm-pw-meter[data-score="1"] #pw-strength-text{ color:#9a4a00; }
.lm-pw-meter[data-score="2"] #pw-strength-text{ color:#7a6700; }
.lm-pw-meter[data-score="3"] #pw-strength-text{ color:#165c2c; }
.lm-pw-meter[data-score="4"] #pw-strength-text{ color:#0f4a22; }
/* Compact on small screens */
@media (max-width: 480px){
.lm-pw-meter{ padding:8px 10px; }
}
/* --- PASSWORD EYE TOGGLE --- */
.lm-input-wrap{
position:relative;
display:block; /* keep layout stable */
}
.lm-input-wrap > .lm-input{
padding-right: 42px; /* room for the eye button */
}
/* The eye button */
.lm-eye{
position:absolute;
top:50%;
right:8px;
transform:translateY(-50%);
width:32px; height:32px;
border:none;
padding:0;
background:transparent;
border-radius:8px;
display:grid;
place-items:center;
cursor:pointer;
}
.lm-eye:hover{ background:rgba(0,0,0,.06); }
.lm-eye:focus-visible{
outline:3px solid color-mix(in oklab, var(--lm-focus, #5b7de0) 40%, transparent);
outline-offset:2px;
}
.lm-eye svg{ width:20px; height:20px; display:block; }
/* Swap icons based on pressed state */
.lm-eye .eye-open{ display:block; }
.lm-eye .eye-closed{display:none; }
.lm-eye[aria-pressed="true"] .eye-open{ display:none; }
.lm-eye[aria-pressed="true"] .eye-closed{display:block; }
/* Opt out per-field if needed:
*/
/* --- LABEL / VALUE ROWS (200px label + flexible value) --- */
.lm-kv{
background:#fff;
border:1px solid #c8d3ee;
border-radius:12px;
overflow:hidden; /* keeps row dividers clean with rounded corners */
}
.lm-kv-row{
display:grid;
grid-template-columns: 150px minmax(0, 1fr);
gap:12px;
padding:10px 12px;
border-bottom:1px solid #e6ecff; /* same family as your table row borders */
align-items:start;
}
.lm-kv-row:last-child{
border-bottom:none;
}
.lm-kv-label{
font-size:1em;
font-weight:600;
color:#4b5776; /* matches your label tone */
line-height:1.35;
}
.lm-kv-value{
font-size:1em;
font-weight:400;
color:var(--page-text, #333);
line-height:1.5;
min-width:0; /* allow wrap/ellipsis patterns */
overflow-wrap:anywhere;
}
/* Optional: “clickable rows” variant (like your profile links) */
.lm-kv-row.is-link{
cursor:pointer;
transition: background .15s ease, filter .15s ease;
}
.lm-kv-row.is-link:hover,
.lm-kv-row.is-link:focus-visible{
background:var(--item-hover, #F1FEE6);
outline:none;
}
/* Responsive: keep label readable, allow it to shrink a bit on small screens */
@media (max-width: 720px){
.lm-kv-row{
grid-template-columns: 160px minmax(0, 1fr);
}
}
@media (max-width: 420px){
.lm-kv-row{
grid-template-columns: 1fr; /* stack label over value on tiny screens */
gap:6px;
}
.lm-kv-label{ font-size:1.05em; }
}
/* --- PAGINATION --- */
.lm-pagination{
display:flex; flex-wrap:wrap; gap:8px;
justify-content:center; align-items:center;
margin:12px 0 12px 0; user-select:none;
}
.lm-page{
display:inline-flex; align-items:center; justify-content:center;
min-width:36px; height:36px; padding:0 12px;
border:1px solid #c8d3ee; border-radius:10px;
background:#fff; color:#1a1a1a; text-decoration:none;
font-weight:700; line-height:1;
transition:background .15s ease, filter .15s ease, border-color .15s ease;
}
.lm-page:hover{ background:var(--item-hover); }
.lm-page:focus-visible{
outline:3px solid color-mix(in oklab, var(--lm-focus, #5b7de0) 40%, transparent);
outline-offset:2px;
}
.lm-page.is-active{
background:#A2B3E7; color:#fff; border-color:#8ea1d9;
}
.lm-page.is-disabled{
opacity:.5; cursor:default; pointer-events:none;
}
/* Optional: tighten on very small screens */
@media (max-width:420px){
.lm-page{ padding:0 10px; min-width:32px; height:34px; }
}
/* --- HORIZONTAL TIMELINE --- */
.lm-timeline{
--tl-on: #BCF4C0;
--tl-off:#CBD4EF;
--tl-ring:#c8d3ee;
--tl-size: 52px;
--tl-icon: 24px;
position: relative;
margin: 14px 0 18px 0;
padding: 16px 12px 12px 12px;
background: #fff;
border: 1px solid var(--tl-ring);
border-radius: 12px;
display: grid;
grid-template-columns: repeat(5, 1fr); /* ✅ 5 steps */
align-items: start;
gap: 10px;
}
/* the “rail” behind the circles */
.lm-timeline-line{
position: absolute;
left: 12px;
right: 12px;
top: calc(16px + (var(--tl-size) / 2));
height: 8px;
border-radius: 999px;
background: var(--tl-off);
z-index: 0;
}
/* each step container */
.lm-step{
position: relative;
z-index: 1;
display: grid;
justify-items: center;
gap: 8px;
}
/* the circle */
.lm-step-circle{
width: var(--tl-size);
height: var(--tl-size);
border-radius: 999px;
border: 1px solid var(--tl-ring);
background: var(--tl-off);
display: grid;
place-items: center;
box-shadow: 0 6px 14px rgba(20,30,60,.06);
}
.lm-step-circle img{
width: var(--tl-icon);
height: var(--tl-icon);
display: block;
}
.lm-step-label{
font-size: 0.9em;
font-weight: 600;
color: #4b5776;
text-align: center;
white-space: nowrap;
}
.lm-step.is-done .lm-step-circle{
background: var(--tl-on);
}
/* ✅ 5-step rail fill:
done=2 → 20%, done=3 → 40%, done=4 → 60%, done=5 → 80%, all done → 100% */
.lm-timeline:has(.lm-step.is-done:nth-of-type(1)) .lm-timeline-line{ background: var(--tl-off); }
.lm-timeline:has(.lm-step.is-done:nth-of-type(2)) .lm-timeline-line{
background: linear-gradient(to right,
var(--tl-on) 0%,
var(--tl-on) 20%,
var(--tl-off) 20%,
var(--tl-off) 100%
);
}
.lm-timeline:has(.lm-step.is-done:nth-of-type(3)) .lm-timeline-line{
background: linear-gradient(to right,
var(--tl-on) 0%,
var(--tl-on) 40%,
var(--tl-off) 40%,
var(--tl-off) 100%
);
}
.lm-timeline:has(.lm-step.is-done:nth-of-type(4)) .lm-timeline-line{
background: linear-gradient(to right,
var(--tl-on) 0%,
var(--tl-on) 60%,
var(--tl-off) 60%,
var(--tl-off) 100%
);
}
.lm-timeline:has(.lm-step.is-done:nth-of-type(5)) .lm-timeline-line{
background: linear-gradient(to right,
var(--tl-on) 0%,
var(--tl-on) 80%,
var(--tl-off) 80%,
var(--tl-off) 100%
);
}
/* all 5 done */
.lm-timeline:has(.lm-step.is-done:nth-of-type(5)):has(.lm-step.is-done:nth-of-type(4)) .lm-timeline-line{
background: var(--tl-on);
}
/* If only the first step is done, keep the whole rail off */
.lm-timeline:has(.lm-step.is-done:nth-of-type(1)):not(:has(.lm-step.is-done:nth-of-type(2))) .lm-timeline-line{
background: var(--tl-off);
}
/* Responsive */
@media (max-width: 720px){
.lm-timeline{
grid-template-columns: repeat(5, minmax(0, 1fr)); /* ✅ 5 steps */
padding: 14px 10px 10px 10px;
}
.lm-step-label{
font-size: 0.82em;
}
}
@media (max-width: 420px){
.lm-step-label{ display:none; }
}
/* --- HORIZONTAL TIMELINE END--- */
/* --- MODALS --- */
body.modal-open {
overflow-y: scroll; /* forces scrollbar to remain visible */
position: fixed; /* prevents actual scrolling */
width: 100%; /* avoids content shift */
}
.lm-modal{
position:fixed;
inset:0;
z-index:200; /* above drawer (120) and scrim (110) */
display:none; /* hidden by default */
}
.lm-modal[aria-hidden="false"]{ display:block; }
.lm-modal .lm-modal-backdrop{
position:absolute; inset:0;
background:rgba(0,0,0,.45);
backdrop-filter:saturate(80%) blur(2px);
}
.lm-modal .lm-modal-wrap{
position:relative;
min-width:600px;
max-width: 860px;
width: min(860px, calc(100% - 24px));
margin: min(7vh, 48px) auto;
background:#fff;
border:1px solid #c8d3ee;
border-radius:16px;
box-shadow:0 24px 60px rgba(20,30,60,.25);
padding:16px 16px 12px 16px;
pointer-events:auto;
animation: lmModalIn .18s ease-out;
}
/* “Compact” on small screens */
@media (max-width: 620px){
.lm-modal .lm-modal-wrap{ min-width:auto; }
}
.lm-modal .lm-modal-head{
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin: 2px 2px 10px;
}
.lm-modal .lm-modal-title{
margin:0; font-size:1.15rem; font-weight:600; color:#1f284a;
}
.lm-modal .lm-modal-x{
border:none; background:transparent; cursor:pointer;
width:36px; height:36px; border-radius:10px;
display:grid; place-items:center; line-height:0;
}
.lm-modal .lm-modal-x:hover{ background:rgba(0,0,0,.06); }
.lm-modal .lm-modal-x svg{ width:20px; height:20px; }
.lm-modal .lm-modal-body{
color:var(--page-text,#1a1a1a);
line-height:1.45;
padding: 6px 2px 2px;
}
.lm-modal .lm-modal-actions{
margin-top:14px;
display:flex; justify-content:flex-end; gap:10px;
}
/* Hide close button for type-2 (non-dismissible) */
.lm-modal[data-dismissible="false"] .lm-modal-x{ display:none; }
/* Simple entrance */
@keyframes lmModalIn{
from{ transform:translateY(6px); opacity:0; }
to{ transform:translateY(0); opacity:1; }
}
/* --- IMAGE UPLOAD DRAG N DROP BOX --- */
.lm-uploader{
display:grid;
grid-template-columns: 120px minmax(0, 1fr);
gap:12px;
background:#fff;
border:1px solid var(--lm-border, #b9c6eb);
border-radius:12px;
padding:12px;
box-shadow:0 6px 14px rgba(20,30,60,.06);
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Hover like your tables/actions */
.lm-uploader:hover{
background: var(--item-hover, #F1FEE6);
}
/* Focus ring when interacting inside */
.lm-uploader:focus-within{
border-color: var(--lm-border-strong, #8ea1d9);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--lm-focus, #5b7de0) 30%, transparent);
}
/* Drag-over state */
.lm-uploader.is-dragover{
background: var(--item-hover, #F1FEE6);
border-color: var(--lm-border-strong, #8ea1d9);
}
/* Preview area */
.lm-uploader-preview{
width:120px;
height:120px;
border-radius:12px;
border:1px solid #c8d3ee;
background:#fff;
overflow:hidden;
display:grid;
place-items:center;
}
.lm-uploader-preview img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* Right side layout */
.lm-uploader-meta{
min-width:0;
display:grid;
gap:10px;
}
.lm-uploader-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.lm-uploader-title{
min-width:0;
}
.lm-uploader-name{
font-weight:700;
color:#1f284a;
line-height:1.2;
}
.lm-uploader-sub{
font-size:12px;
color:#6a758f;
margin-top:2px;
}
/* Buttons row */
.lm-uploader-actions{
display:flex;
gap:8px;
flex:0 0 auto;
}
.lm-uploader-btn{
height: var(--lm-field-h, 44px);
padding: 0 14px;
border-radius: 10px;
}
/* File name line */
.lm-uploader-file{
background:#fff;
border:1px solid #c8d3ee;
border-radius:10px;
padding:10px 12px;
overflow:hidden;
}
.lm-uploader-file-label{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color: var(--page-text, #333);
font-weight:600;
font-size: 0.95em;
}
/* Native input hidden but accessible */
.lm-uploader-input{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
/* Remove button subtle disabled state */
.lm-uploader-remove:disabled{
opacity:.6;
cursor:not-allowed;
}
/* Mobile: stack */
@media (max-width: 560px){
.lm-uploader{
grid-template-columns: 1fr;
}
.lm-uploader-preview{
width:100%;
height:220px;
}
.lm-uploader-top{
flex-direction:column;
align-items:stretch;
}
.lm-uploader-actions{
justify-content:flex-end;
flex-wrap:wrap;
}
}
/* --- PIE CHART --- */
.pie-figure{
max-width: 100%;
padding: 16px;
border: 1px solid #e6e6e6;
border-radius: 12px;
background: #fff;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.pie-figure figcaption{
font-weight: 600;
margin-bottom: 12px;
}
.pie-chart{
/* the pie itself is drawn via ::before using this custom prop */
--size: 220px;
--pie: conic-gradient(#ddd 0 100%);
--ring: 0px; /* set to e.g. 28px if you want a donut hole */
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.pie-chart::before{
content: "";
width: var(--size);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--pie);
/* centers the pie above the legend */
margin: 0 auto 10px auto;
/* optional donut hole */
-webkit-mask: radial-gradient(circle, transparent calc(50% - var(--ring)), #000 calc(50% - var(--ring)));
mask: radial-gradient(circle, transparent calc(50% - var(--ring)), #000 calc(50% - var(--ring)));
}
.pie-chart li{
display: grid;
grid-template-columns: 14px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid #f0f0f0;
border-radius: 10px;
}
.pie-chart li::before{
content: "";
width: 14px;
height: 14px;
border-radius: 4px;
background: var(--slice, #999);
}
.pie-chart strong{
font-weight: 600;
}
.pie-chart .meta{
font-variant-numeric: tabular-nums;
opacity: 0.8;
}
.pie-total{
margin-top: 10px;
font-weight: 500;
}
/* --- FOOTER --- */
footer{
margin-top:auto;
width:100%;
background:#CFD9F1;
padding:16px 12px;
color:#FFFFFF;
}
footer .footer-body{
max-width:1200px;
margin:0 auto;
text-align:center;
font-size:12px;
}
@media (max-width: 900px){
main{grid-template-columns:1fr}
aside{order:2}
section{order:1}
}
.lm-range-value {
display: inline-block;
margin-left: 8px;
font-weight: 600;
color: var(--text-muted, #555);
}
.lm-range {
width: 100%;
margin-top: 10px;
}
.lm-range-scale {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-top: 10px;
font-size: 0.8rem;
color: #666;
}
.lm-range-scale span {
text-align: center;
line-height: 1.2;
}
/* --- QUIZ LIST --- */
.lm-quiz-list{
display:grid;
gap:10px;
margin:12px 0;
}
.lm-quiz-row{
display:grid;
grid-template-columns:64px minmax(0, 1fr) auto;
align-items:center;
gap:12px;
padding:12px;
background:#fff;
border:1px solid #c8d3ee;
border-radius:12px;
text-decoration:none;
color:#1a1a1a;
transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lm-quiz-row:hover,
.lm-quiz-row:focus-visible{
background:var(--item-hover, #F1FEE6);
color:#1a1a1a;
outline:none;
box-shadow:0 6px 14px rgba(20,30,60,.06);
}
.lm-quiz-icon{
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 50px;
}
.lm-quiz-icon img{
width:50px;
height:50px;
object-fit:cover;
border-radius:10px;
display:block;
border:1px solid #d8e1f2;
background:#fff;
}
.lm-quiz-main{
min-width:0;
}
.lm-quiz-name{
font-size:1rem;
font-weight:600;
color:#1f284a;
line-height:1.25;
margin:0;
}
.lm-quiz-desc{
font-size:0.9rem;
color:#6a758f;
margin-top:4px;
line-height:1.4;
}
.lm-quiz-meta{
display:grid;
grid-template-columns:repeat(2, auto);
gap:16px;
align-items:center;
justify-content:end;
text-align:right;
}
.lm-quiz-meta-item{
display:flex;
flex-direction:column;
gap:2px;
}
.lm-quiz-meta-label{
font-size:12px;
color:#6a758f;
font-weight:400;
}
.lm-quiz-meta-value{
font-size:14px;
font-weight:600;
color:#333;
}
.lm-empty-state{
margin:12px 0 0 0;
background:#fff;
border:1px solid #c8d3ee;
border-radius:12px;
padding:12px;
}
@media (max-width: 720px){
.lm-quiz-row{
grid-template-columns:64px 1fr;
align-items:start;
}
.lm-quiz-meta{
grid-column:2 / 3;
justify-content:start;
text-align:left;
margin-top:6px;
gap:14px;
}
}
/* --- Quiz Question Remove Button --- */
.lm-action-row{
position:relative;
display:flex;
align-items:center;
width:100%;
}
.lm-action-row .lm-action{
padding-right:52px;
}
.lm-action-remove{
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
width:30px;
height:30px;
border:none;
border-radius:8px;
background:transparent;
display:grid;
place-items:center;
cursor:pointer;
opacity:0;
pointer-events:none;
transition:opacity .15s ease, background .15s ease;
}
.lm-action-row:hover .lm-action-remove,
.lm-action-row:focus-within .lm-action-remove{
opacity:1;
pointer-events:auto;
}
.lm-action-remove:hover,
.lm-action-remove:focus-visible{
background:rgba(0,0,0,0.08);
outline:none;
}
.lm-action-remove svg{
width:18px;
height:18px;
display:block;
}
.lm-button.danger{
background:#D9534F;
color:#fff;
}
.lm-button.danger:hover{
filter:brightness(0.96);
}
.lm-button.secondary{
background:#fff;
color:#333;
border:1px solid #c8d3ee;
}
.quiz-question-row {
cursor: grab;
}
.quiz-question-row:active {
cursor: grabbing;
}
.quiz-question-row.is-dragging {
opacity: 0.55;
}
.quiz-question-row.is-saving .lm-action {
opacity: 0.7;
}
.quiz-question-drag-handle {
width: 24px;
height: 24px;
flex: 0 0 24px;
opacity: 0.55;
cursor: grab;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.quiz-question-drag-handle::before {
content: "☰";
font-size: 18px;
line-height: 1;
}
.accb-total-row td {
font-weight: 600;
text-align: center;
padding: 14px 16px;
border-top: 2px solid #ddd;
}
.lm-hidden {
display: none !important;
}
.lm-comment.is-editing .lm-cmt-actions {
display: none !important;
}
.lm-cmt-editor[hidden],
.lm-cmt-postbar[hidden] {
display: none !important;
}
.lm-save-structure-btn {
display: none;
}
/* =========================================================
STARTING / DEPARTING TRANSITION TABLES
========================================================= */
.transition-table {
table-layout: auto;
}
/* Avatar column */
.transition-table .transition-avatar-col,
.transition-table td.transition-avatar {
width: 64px;
min-width: 64px;
text-align: center;
}
/* Keep the transition date readable */
.transition-table .transition-date-col,
.transition-table td.first,
.transition-table td.last {
white-space: nowrap;
}
/* Loading and empty-result messages */
.transition-table .transition-loading-cell {
text-align: center;
}
/* =========================================================
MOBILE TRANSITION TABLE (for starting.php and departing.php
Show only Avatar, Name and First/Last Class
========================================================= */
@media (max-width: 720px) {
/*
* Hide:
* - Start Date / End Date
* - Status
*/
.transition-table .transition-secondary-date-col,
.transition-table .transition-status-col,
.transition-table tbody td.start,
.transition-table tbody td.end,
.transition-table tbody td.status {
display: none;
}
/*
* With only three columns visible, the table can fit inside
* the screen without needing horizontal scrolling.
*/
.transition-table-wrap {
overflow-x: hidden;
}
.transition-table {
width: 100%;
table-layout: fixed;
}
.transition-table .transition-avatar-col,
.transition-table td.transition-avatar {
width: 58px;
min-width: 58px;
padding-left: 8px;
padding-right: 8px;
}
.transition-table .transition-name-col {
width: auto;
}
.transition-table .transition-date-col {
width: 116px;
}
.transition-table tbody td.name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.transition-table tbody td.first,
.transition-table tbody td.last {
width: 116px;
white-space: nowrap;
}
.transition-table thead th,
.transition-table tbody td {
padding: 9px 8px;
}
.transition-table .avatar {
width: 38px;
height: 38px;
}
}
/* Extra-small phones */
@media (max-width: 420px) {
.transition-table .transition-avatar-col,
.transition-table td.transition-avatar {
width: 52px;
min-width: 52px;
padding-left: 6px;
padding-right: 6px;
}
.transition-table .transition-date-col,
.transition-table tbody td.first,
.transition-table tbody td.last {
width: 96px;
}
.transition-table thead th,
.transition-table tbody td {
padding: 8px 6px;
font-size: 13px;
}
.transition-table .avatar {
width: 36px;
height: 36px;
}
.transition-table .sort-ind {
display: none;
}
}
/* Inquiry parent/guardian contact card */
.lm-contact-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
border-radius: 12px;
overflow: hidden;
}
.lm-contact-row {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 14px 16px;
}
/* Divider between Name and Phone */
.lm-contact-row:nth-child(2) {
border-left: 1px solid rgba(31, 40, 74, 0.12);
}
/* Email occupies the full second row */
.lm-contact-email {
grid-column: 1 / -1;
border-top: 1px solid rgba(31, 40, 74, 0.12);
}
.lm-contact-icon {
display: block;
width: 24px;
height: 24px;
flex: 0 0 24px;
object-fit: contain;
}
.lm-contact-content {
min-width: 0;
flex: 1 1 auto;
}
.lm-contact-label {
margin-bottom: 2px;
color: #6a758f;
font-size: 12px;
line-height: 1.2;
}
.lm-contact-value {
overflow-wrap: anywhere;
}
/* Reuses the existing .header-text-link button appearance */
.lm-copy-email {
flex: 0 0 32px;
padding: 0;
border: 0;
background: transparent;
}
/* Stack Name, Phone, and Email on smaller screens */
@media (max-width: 600px) {
.lm-contact-card {
grid-template-columns: 1fr;
}
.lm-contact-email {
grid-column: 1;
}
.lm-contact-row:nth-child(2) {
border-left: 0;
}
.lm-contact-row + .lm-contact-row {
border-top: 1px solid rgba(31, 40, 74, 0.12);
}
}