* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:#82c9ef; font-family:Arial,sans-serif; color:#2f1d10; }
a { color: inherit; }
.login-wrap { max-width:520px; margin:70px auto; background:#fff5e4; border:5px solid #5b321b; border-radius:18px; padding:25px; box-shadow:0 8px 25px rgba(0,0,0,.25); }
.login-wrap h1 { margin:0 0 8px; color:#4b2915; font-family:Georgia,serif; text-align:center; }
.login-wrap p { text-align:center; font-weight:bold; color:#41651f; }
.login-wrap input[type=password] { width:100%; padding:13px; border-radius:10px; border:2px solid #8b6b4a; font-size:16px; margin:10px 0; }
.login-wrap button, .login-wrap a { display:inline-block; width:100%; border:0; border-radius:10px; padding:12px; font-weight:bold; text-align:center; text-decoration:none; cursor:pointer; }
.login-wrap button { background:#41651f; color:white; } .login-wrap a { background:#5b321b; color:white; margin-top:10px; }
.error-box,.notice { max-width:1050px; margin:8px auto; color:white; padding:10px; border-radius:10px; text-align:center; font-weight:bold; }
.error-box { background:#a51f1f; } .notice { background:#41651f; }
.command-top { position:sticky; top:0; z-index:9999; background:linear-gradient(180deg,#fff5e4,#f4deb9); border-bottom:5px solid #5b321b; box-shadow:0 4px 14px rgba(0,0,0,.22); padding:10px; }
.command-inner { max-width:1220px; margin:0 auto; display:grid; grid-template-columns:260px 1fr; gap:12px; align-items:start; }
.command-title h1 { margin:0; font-family:Georgia,serif; color:#4b2915; font-size:26px; line-height:1; }
.command-title div { color:#41651f; font-weight:bold; letter-spacing:1px; margin-top:3px; }
.command-form { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:end; }
.command-form label { display:flex; flex-direction:column; font-size:12px; font-weight:bold; color:#5b321b; }
.command-form input[type=date], .command-form input[type=text], .command-form select { padding:9px; border:2px solid #8b6b4a; border-radius:8px; background:#fff; color:#3b2414; font-weight:bold; }
.command-form .checks { display:flex; gap:8px; flex-wrap:wrap; align-items:center; max-width:420px; }
.command-form .checks label { flex-direction:row; gap:4px; align-items:center; }
.btn { border:0; border-radius:9px; padding:10px 13px; text-decoration:none; color:white; font-weight:bold; cursor:pointer; background:#5b321b; display:inline-block; }
.btn.green { background:#41651f; } .btn.orange { background:#bd6228; } .btn.red { background:#9b1f1f; }
.range-strip { max-width:1120px; margin:14px auto 8px; background:#fff5e4; border:4px solid #5b321b; border-radius:16px; padding:12px 16px; display:flex; gap:10px; justify-content:space-between; align-items:center; box-shadow:0 4px 12px rgba(0,0,0,.18); font-weight:bold; }
.range-strip .badge { background:#41651f; color:white; padding:8px 12px; border-radius:999px; }
.layout { max-width:1220px; margin:0 auto 90px; display:grid; grid-template-columns:250px 1fr; gap:14px; align-items:start; }
.sidebar { position:sticky; top:122px; background:#fff5e4; border:4px solid #5b321b; border-radius:14px; padding:10px; max-height:calc(100vh - 145px); overflow:auto; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.sidebar h3 { margin:0 0 8px; color:#4b2915; font-family:Georgia,serif; }
.side-link { display:block; padding:8px; margin:4px 0; border-radius:8px; text-decoration:none; background:#f4deb9; color:#4b2915; font-weight:bold; font-size:12px; border:1px solid #8b6b4a; }
.side-link:hover { background:#41651f; color:white; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:1050px; margin:12px auto; }
.stat-card { background:#fff5e4; border:3px solid #5b321b; border-radius:12px; padding:12px; text-align:center; box-shadow:0 3px 8px rgba(0,0,0,.14); }
.stat-card .num { font-size:28px; font-family:Georgia,serif; font-weight:bold; color:#41651f; }
.stat-card .label { font-size:12px; font-weight:bold; color:#5b321b; }
.utility-panel { background:#fff5e4; border:4px solid #5b321b; border-radius:14px; padding:14px; margin:16px auto; max-width:1050px; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.utility-panel h2 { margin:0 0 10px; color:#4b2915; font-family:Georgia,serif; }
.result-card { border:2px solid #8b6b4a; border-radius:10px; margin:8px 0; padding:10px; background:white; }
.cover-page, .toc-page, .month-page { width:8.5in; min-height:11in; margin:16px auto 30px; background:radial-gradient(circle at top,rgba(255,255,255,.84),rgba(255,247,232,.96)),#fff5e4; border:6px solid #5b321b; border-radius:14px; padding:.45in; position:relative; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,.22); page-break-after:always; break-after:page; }
.cover-page h1 { font-family:Georgia,serif; color:#4b2915; text-align:center; font-size:42px; margin:1.2in 0 10px; }
.cover-page h2 { text-align:center; color:#41651f; letter-spacing:2px; }
.cover-page .school-year { text-align:center; font-size:26px; margin-top:28px; font-weight:bold; color:#5b321b; }
.cover-tree { width:220px; height:220px; display:block; margin:50px auto 0; }
.toc-page h2, .month-page h2 { font-family:Georgia,serif; color:#4b2915; text-align:center; font-size:30px; }
.toc-list { columns:2; column-gap:35px; font-weight:bold; }
.toc-list a { display:block; padding:6px 0; color:#4b2915; text-decoration:none; border-bottom:1px dotted #8b6b4a; break-inside:avoid; }
.week-shell { width:8.5in; margin:16px auto 30px; page-break-after:always; break-after:page; }
.week-marker { background:#5b321b; color:#fff5e4; border-radius:12px 12px 0 0; padding:9px 14px; font-weight:bold; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.week-marker a { color:white; background:#41651f; text-decoration:none; border-radius:8px; padding:6px 10px; font-size:12px; }
.week-marker .empty-note { background:#bd6228; color:white; border-radius:999px; padding:5px 9px; font-size:12px; }
.page-number { position:absolute; bottom:8px; right:18px; color:#5b321b; font-weight:bold; font-size:11px; z-index:10; }
.planner-page { width:8.5in; min-height:11in; background:radial-gradient(circle at top,rgba(255,255,255,.78),rgba(255,247,232,.95)),#fff5e4; border:6px solid #5b321b; border-top:0; border-radius:0 0 14px 14px; padding:.15in .18in .12in .18in; position:relative; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,.22); }
.leaves-top { position:absolute; top:-18px; left:0; right:0; height:50px; background:radial-gradient(ellipse at 7% 30%,rgba(87,74,39,.24) 0 7px,transparent 8px),radial-gradient(ellipse at 15% 10%,rgba(87,74,39,.21) 0 8px,transparent 9px),radial-gradient(ellipse at 83% 10%,rgba(87,74,39,.22) 0 8px,transparent 9px),radial-gradient(ellipse at 92% 30%,rgba(87,74,39,.24) 0 7px,transparent 8px); opacity:.9; }
.root-watermark { position:absolute; left:82px; top:205px; width:390px; height:560px; opacity:.10; pointer-events:none; }
.bottom-roots { position:absolute; left:0; right:0; bottom:0; height:40px; background:linear-gradient(20deg,transparent 45%,rgba(63,34,17,.55) 47%,transparent 49%),linear-gradient(-20deg,transparent 45%,rgba(63,34,17,.50) 47%,transparent 49%),linear-gradient(8deg,transparent 45%,rgba(63,34,17,.42) 47%,transparent 49%),#5b321b; background-size:85px 42px; }
.planner-picture-layer { position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; pointer-events:none; }
.floating-picture { position:absolute; z-index:1; min-width:35px; min-height:35px; pointer-events:none; }
.floating-picture img { width:100%; height:100%; display:block; object-fit:contain; }
.header { position:relative; z-index:2; display:grid; grid-template-columns:98px 1fr 112px; gap:6px; align-items:center; margin-bottom:6px; }
.tree-logo { width:88px; height:88px; }
.title-area { text-align:center; white-space:nowrap; overflow:hidden; }
.title-line { display:flex; align-items:baseline; justify-content:center; gap:8px; white-space:nowrap; }
.title-main { font-family:Georgia,serif; color:#4b2915; font-size:30px; font-weight:bold; letter-spacing:1px; line-height:1; }
.title-sub { color:#41651f; font-size:12px; font-weight:bold; letter-spacing:2px; white-space:nowrap; }
.brand { text-align:center; font-weight:bold; color:#444; line-height:1.05; }
.brand .ut { color:#d84b25; font-size:22px; } .brand .rgv { color:#555; font-size:22px; } .brand .ehs { display:block; color:#333; font-size:17px; margin-top:3px; } .brand .small-brand { font-size:7px; margin-top:4px; }
.week-title { position:relative; z-index:2; text-align:right; font-weight:bold; color:#4b2915; font-size:14px; margin:0 24px 6px 0; }
.week-title span { border-bottom:2px solid #4b2915; padding:0 12px 3px; font-size:17px; }
.main-layout { position:relative; z-index:2; display:grid; grid-template-columns:58% 40%; gap:12px; }
.days-column { border:2px solid #4b2915; border-radius:7px; overflow:hidden; background:rgba(255,255,255,.52); }
.day-row { display:grid; grid-template-columns:92px 1fr; min-height:86px; height:auto; border-bottom:2px solid #4b2915; }
.day-row:last-child { border-bottom:0; }
.day-label { background:linear-gradient(180deg,#6a3b1f,#3d1f0e); color:white; text-align:center; font-weight:bold; padding:8px 4px; font-size:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; }
.day-label small { font-size:10px; font-weight:normal; margin-top:4px; line-height:1.1; }
.day-entry { padding:6px 8px; }
.holiday { display:inline-block; background:#f4d99d; border:1px dashed #8a4c1e; border-radius:8px; padding:3px 7px; color:#6b350d; font-size:11px; font-weight:bold; margin-bottom:4px; }
.editable { width:100%; min-height:58px; height:auto; border:0; background:repeating-linear-gradient(to bottom,transparent 0,transparent 22px,rgba(165,122,76,.28) 23px); overflow:visible; font-size:12px; font-family:Arial,sans-serif; line-height:1.25; padding:0 4px; color:#222; text-align:left; word-wrap:break-word; overflow-wrap:break-word; }
.editable img { max-width:160px; height:auto; border:2px dashed #a51f1f; }
.editable ul,.editable ol { margin:4px 0 4px 22px; padding-left:18px; list-style-position:outside; }
.editable li { margin:2px 0; padding-left:2px; }
.side-column { display:flex; flex-direction:column; gap:11px; }
.side-box { border:2px solid #4b2915; border-radius:7px; background:rgba(255,255,255,.58); overflow:hidden; }
.side-box h3 { margin:0; background:linear-gradient(180deg,#6a3b1f,#3d1f0e); color:white; text-align:center; padding:7px; font-size:17px; }
.priorities .editable { min-height:135px; } .todo .editable { min-height:190px; } .notes .editable { min-height:132px; }
.footer-text { position:relative; z-index:2; margin-top:5px; text-align:center; font-family:Georgia,serif; font-size:12px; color:#4b2915; border-top:1px solid #8b6b4a; padding-top:5px; white-space:nowrap; }
.empty-watermark { position:absolute; top:115px; right:18px; z-index:3; background:rgba(189,98,40,.92); color:white; border-radius:999px; padding:7px 11px; font-weight:bold; font-size:12px; }
.month-grid { display:grid; grid-template-columns:repeat(7,1fr); border:2px solid #5b321b; margin-top:20px; }
.month-grid div { min-height:70px; border:1px solid #8b6b4a; padding:5px; font-size:12px; background:rgba(255,255,255,.6); }
.month-grid .head { min-height:28px; background:#5b321b; color:white; text-align:center; font-weight:bold; }
.picture-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.picture-card { background:white; border:2px solid #8b6b4a; border-radius:10px; padding:8px; text-align:center; }
.picture-card img { max-width:100%; height:115px; object-fit:contain; }
.restore-box { border:2px dashed #a51f1f; padding:10px; border-radius:10px; background:#fff; }
@media(max-width:900px){ .command-inner,.layout{grid-template-columns:1fr;} .sidebar{position:relative; top:auto; max-height:none;} .command-form{justify-content:stretch;} .command-form label,.command-form button,.command-form a{flex:1 1 160px;} .range-strip{margin:10px 8px; flex-direction:column; align-items:flex-start;} .week-shell,.planner-page,.cover-page,.toc-page,.month-page{width:calc(100% - 16px);} .planner-page{min-height:11in; padding:12px;} .header{grid-template-columns:1fr; text-align:center;} .tree-logo{margin:auto;} .title-line{flex-direction:column; gap:4px;} .title-main{font-size:34px;} .title-sub{font-size:15px; letter-spacing:1px;} .main-layout{grid-template-columns:1fr;} .week-title{text-align:center; margin-right:0;} .day-row{grid-template-columns:1fr; height:auto;} .day-label{font-size:15px; padding:8px;} .stats-grid{grid-template-columns:repeat(2,1fr); margin:8px;} .picture-gallery{grid-template-columns:repeat(2,1fr);} }
@media print { @page{size:letter portrait; margin:.12in;} html,body{width:8.5in; background:white!important; margin:0!important; padding:0!important;} .command-top,.range-strip,.week-marker,.error-box,.notice,.sidebar,.stats-grid,.utility-panel{display:none!important;} .layout{display:block; max-width:none; margin:0;} .cover-page,.toc-page,.month-page{width:8.25in; min-height:10.75in; margin:0 auto!important; border-radius:0; box-shadow:none; border:4px solid #5b321b; page-break-after:always; break-after:page;} .week-shell{width:8.25in; margin:0 auto!important; page-break-after:always; break-after:page;} .planner-page{width:8.25in; min-height:10.75in; height:auto; margin:0 auto!important; border-radius:0; box-shadow:none; border:4px solid #5b321b; padding:.10in .14in .08in .14in; overflow:visible;} .header{grid-template-columns:82px 1fr 100px; gap:5px; margin-bottom:4px;} .tree-logo{width:72px; height:72px;} .title-main{font-size:25px;} .title-sub{font-size:10px; letter-spacing:1px;} .brand .ut,.brand .rgv{font-size:18px;} .brand .ehs{font-size:15px;} .brand .small-brand{font-size:6px;} .week-title{font-size:12px; margin-bottom:4px;} .week-title span{font-size:15px;} .main-layout{grid-template-columns:58% 40%; gap:9px;} .day-row{grid-template-columns:82px 1fr; min-height:77px; height:auto;} .day-label{font-size:11px; padding:5px 3px;} .day-label small{font-size:8px;} .day-entry{padding:4px 6px;} .editable{min-height:48px; height:auto; font-size:10px; line-height:1.2; background:repeating-linear-gradient(to bottom,transparent 0,transparent 17px,rgba(165,122,76,.28) 18px)!important; overflow:visible;} .editable ul,.editable ol{margin:2px 0 2px 16px; padding-left:14px;} .side-column{gap:7px;} .side-box h3{padding:5px; font-size:15px;} .priorities .editable{min-height:112px;} .todo .editable{min-height:160px;} .notes .editable{min-height:106px;} .footer-text{font-size:10px; margin-top:4px; padding-top:4px;} .bottom-roots{height:30px;} .empty-watermark{display:none!important;} }
/* ============================================================
FINAL PRINT-ONLY WHITE BACKGROUND REPAIR
Prints only booklet pages and removes all gray/blue preview layers.
============================================================ */
@media print {
@page {
size: letter portrait;
margin: 0.12in;
}
html,
body {
width: 8.5in !important;
min-width: 8.5in !important;
margin: 0 !important;
padding: 0 !important;
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
filter: none !important;
opacity: 1 !important;
box-shadow: none !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
body::before,
body::after,
html::before,
html::after {
content: none !important;
display: none !important;
}
/* Hide every management-center screen element. */
.command-top,
.range-strip,
.stats-grid,
.utility-panel,
.sidebar,
.error-box,
.notice,
.week-marker,
.btn,
.restore-box,
.picture-gallery,
.result-card {
display: none !important;
}
/* Remove layout wrappers that can print as gray blocks. */
.layout {
display: block !important;
width: 8.5in !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
.layout > main,
main {
display: block !important;
width: 8.5in !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Each generated page gets a real solid background. */
.cover-page,
.toc-page,
.month-page,
.week-shell,
.planner-page {
filter: none !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
box-shadow: none !important;
text-shadow: none !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.cover-page,
.toc-page,
.month-page {
display: block !important;
width: 8.25in !important;
min-width: 8.25in !important;
max-width: 8.25in !important;
min-height: 10.75in !important;
margin: 0 auto !important;
padding: 0.45in !important;
background: #fff5e4 !important;
background-color: #fff5e4 !important;
background-image: none !important;
border: 4px solid #5b321b !important;
border-radius: 0 !important;
page-break-after: always !important;
break-after: page !important;
overflow: visible !important;
}
.week-shell {
display: block !important;
width: 8.25in !important;
min-width: 8.25in !important;
max-width: 8.25in !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
page-break-after: always !important;
break-after: page !important;
overflow: visible !important;
}
.planner-page {
display: block !important;
width: 8.25in !important;
min-width: 8.25in !important;
max-width: 8.25in !important;
min-height: 10.75in !important;
height: auto !important;
margin: 0 auto !important;
padding: 0.10in 0.14in 0.08in 0.14in !important;
background: #fff5e4 !important;
background-color: #fff5e4 !important;
background-image: none !important;
border: 4px solid #5b321b !important;
border-radius: 0 !important;
overflow: visible !important;
isolation: isolate !important;
}
/* Remove decorative translucent layers that can rasterize gray. */
.planner-page::before,
.planner-page::after,
.week-shell::before,
.week-shell::after,
.cover-page::before,
.cover-page::after,
.toc-page::before,
.toc-page::after,
.month-page::before,
.month-page::after {
content: none !important;
display: none !important;
}
.leaves-top,
.root-watermark,
.bottom-roots {
display: none !important;
}
/* Force all interior sections to opaque printable colors. */
.header,
.week-title,
.main-layout,
.days-column,
.side-column,
.side-box,
.day-row,
.day-entry,
.editable,
.month-grid,
.month-grid div {
filter: none !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.header,
.week-title,
.main-layout,
.day-entry,
.editable {
background-color: transparent !important;
background-image: none !important;
}
.days-column,
.side-box {
background: #fffdf8 !important;
background-color: #fffdf8 !important;
background-image: none !important;
}
.day-label,
.side-box h3,
.month-grid .head {
background: #5b321b !important;
background-color: #5b321b !important;
background-image: none !important;
color: #ffffff !important;
}
.editable {
background:
repeating-linear-gradient(
to bottom,
transparent 0,
transparent 17px,
rgba(165,122,76,.28) 18px
) !important;
}
.planner-picture-layer,
.floating-picture,
.floating-picture img,
img,
svg,
canvas {
filter: none !important;
opacity: 1 !important;
mix-blend-mode: normal !important;
background: transparent !important;
box-shadow: none !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.empty-watermark {
display: none !important;
}
}
/* ============================================================
MATCHING ORIGINAL PLANNER.PHP VISUAL DESIGN
Keeps the management-center functions while making every
generated weekly page match the current Rooted in Excellence
planner header, weekly rows, and lower panels.
============================================================ */
.planner-page {
background:#fffaf0 !important;
border-color:#5b321b !important;
}
.leaves-top,.root-watermark,.bottom-roots { display:none !important; }
.header {
display:grid !important;
grid-template-columns:105px minmax(0,1fr) 150px !important;
gap:12px !important;
align-items:center !important;
min-height:122px !important;
margin:0 0 8px !important;
padding:9px 14px !important;
overflow:visible !important;
border:1px solid #ddb77d !important;
border-radius:12px !important;
background:linear-gradient(180deg,#fffefb,#fff9ed) !important;
box-shadow:0 5px 14px rgba(73,43,18,.10) !important;
}
.realistic-tree-emblem {
width:88px !important;height:88px !important;
display:flex !important;align-items:center !important;justify-content:center !important;
justify-self:start !important;overflow:hidden !important;
border-radius:50% !important;
filter:drop-shadow(0 3px 4px rgba(74,43,17,.16));
}
.realistic-tree-emblem img { width:100% !important;height:100% !important;object-fit:contain !important;display:block !important; }
.title-area {
min-width:0 !important;min-height:108px !important;
display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
gap:2px !important;padding:2px 8px !important;text-align:center !important;overflow:visible !important;
}
.header-program { color:#9b4517 !important;font:900 11px/1.15 Arial,Helvetica,sans-serif !important;letter-spacing:2.2px !important;text-transform:uppercase !important;margin:0 0 3px !important; }
.title-main { color:#442614 !important;font-family:Georgia,"Times New Roman",serif !important;font-size:38px !important;font-weight:800 !important;font-style:italic !important;line-height:.98 !important;letter-spacing:-.5px !important;white-space:nowrap !important;text-shadow:0 1px 0 #fff8eb,0 2px 2px rgba(72,37,13,.16) !important; }
.title-sub { color:#184f34 !important;font:800 10px/1.15 Arial,Helvetica,sans-serif !important;letter-spacing:2.5px !important;margin-top:4px !important;white-space:nowrap !important; }
.header-tagline { color:#6b351e !important;font-family:Georgia,"Times New Roman",serif !important;font-size:11px !important;font-weight:600 !important;font-style:italic !important;margin-top:3px !important; }
.weekly-planner-small { position:relative !important;color:#bd7b20 !important;font:900 8px/1 Arial,Helvetica,sans-serif !important;letter-spacing:3px !important;margin-top:6px !important;padding:0 52px !important;white-space:nowrap !important; }
.weekly-planner-small:before,.weekly-planner-small:after { content:"";position:absolute;top:50%;width:42px;height:10px;border-top:2px solid #d39125;border-radius:50%;opacity:.9; }
.weekly-planner-small:before { left:0;transform:rotate(-4deg); }
.weekly-planner-small:after { right:0;transform:rotate(4deg); }
.brand { justify-self:end !important;width:138px !important;min-height:96px !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;padding:7px 9px 8px !important;border:1px solid #dfbf86 !important;border-radius:12px !important;background:rgba(255,255,255,.72) !important;box-shadow:0 3px 10px rgba(77,46,20,.08) !important;line-height:1 !important; }
.brand-utrgv { white-space:nowrap !important; }
.brand .ut,.brand .rgv { font-family:Georgia,"Times New Roman",serif !important;font-size:22px !important;font-weight:800 !important; }
.brand .ut { color:#c15d1b !important; }.brand .rgv { color:#4b2a1b !important; }
.brand .ehs { display:block !important;color:#174c31 !important;font:900 16px/1 Arial,Helvetica,sans-serif !important;margin-top:5px !important; }
.brand-program { color:#4b2a1b !important;font:700 12px/1.1 Georgia,"Times New Roman",serif !important;margin-top:3px !important; }
.brand-divider { width:85%;height:1px;margin:7px 0 5px;background:linear-gradient(90deg,transparent,#c9a56d,transparent); }
.brand .small-brand { color:#5f2d18 !important;font:800 6.5px/1.25 Arial,Helvetica,sans-serif !important;letter-spacing:.15px !important;text-align:center !important;margin:0 !important; }
.week-title { margin:4px 0 9px !important;text-align:center !important;color:#5a2f19 !important;font-weight:800 !important;background:transparent !important; }
.week-title span { color:#3c2415 !important;font-family:Georgia,"Times New Roman",serif !important;border-bottom:2px solid #c85f1d !important;padding:0 10px 4px !important; }
.final-main-layout { display:block !important;position:relative !important;z-index:2 !important; }
.final-days { width:100% !important;overflow:hidden !important;border:1px solid #c48a4f !important;border-radius:10px !important;background:#fffdf8 !important; }
.final-day-row { display:grid !important;grid-template-columns:135px 1fr !important;min-height:67px !important;height:auto !important;border-bottom:1px solid #c9a77c !important; }
.final-day-row:last-child { border-bottom:0 !important; }
.day-label { background:linear-gradient(180deg,#8b4720,#3e1d0c) !important;color:#fff6e8 !important;font-size:13px !important;padding:7px 4px !important; }
.day-label small { color:#fff !important;font-size:10px !important; }
.day-entry { padding:5px 9px !important;background:#fffdf8 !important; }
.final-day-row .editable { min-height:54px !important;font-size:11px !important;line-height:1.25 !important;background:repeating-linear-gradient(to bottom,#fffdf8 0,#fffdf8 20px,#eadfcd 21px) !important; }
.final-lower-grid { display:grid !important;grid-template-columns:1.25fr 1fr 1fr !important;gap:10px !important;margin-top:10px !important; }
.final-lower-grid .side-box { min-height:155px !important;overflow:hidden !important;border:1px solid #ddb77d !important;border-radius:10px !important;background:#fffdf8 !important; }
.final-lower-grid .side-box h3 { margin:0 !important;padding:8px 9px !important;color:#442614 !important;text-align:center !important;font-size:12px !important;border-bottom:1px solid #ead9bd !important;background:#fffaf0 !important; }
.final-lower-grid .editable { min-height:118px !important;padding:8px 9px !important;font-size:11px !important;background:#fffdf8 !important; }
.final-inspiration { background:radial-gradient(circle at 75% 25%,rgba(196,108,45,.18),transparent 45%),linear-gradient(145deg,#fff8e8,#f1ddc7) !important; }
.footer-text { color:#5b321b !important;border-top-color:#c9a56d !important; }
@media(max-width:900px){
.header{grid-template-columns:1fr !important;row-gap:8px !important;padding:14px 12px !important;}
.realistic-tree-emblem{justify-self:center !important;width:82px !important;height:82px !important;}
.title-area{min-height:0 !important;padding:4px 5px !important;}
.title-main{font-size:32px !important;white-space:normal !important;}
.title-sub{font-size:9px !important;letter-spacing:1.6px !important;white-space:normal !important;}
.brand{justify-self:center !important;}
.final-lower-grid{grid-template-columns:1fr !important;}
}
@media print{
.header{grid-template-columns:92px minmax(0,1fr) 128px !important;min-height:104px !important;padding:7px 10px !important;box-shadow:none !important;}
.realistic-tree-emblem{width:72px !important;height:72px !important;}
.title-main{font-size:30px !important;}
.title-sub{font-size:8px !important;letter-spacing:1.8px !important;}
.header-program{font-size:8px !important;}
.header-tagline{font-size:9px !important;}
.brand{min-height:78px !important;width:118px !important;}
.final-day-row{grid-template-columns:112px 1fr !important;min-height:61px !important;}
.final-day-row .editable{min-height:48px !important;font-size:10px !important;}
.final-lower-grid{gap:7px !important;margin-top:7px !important;}
.final-lower-grid .side-box{min-height:135px !important;}
.final-lower-grid .editable{min-height:99px !important;font-size:10px !important;}
}
/* ============================================================
FINAL PLANNERMON PROPORTION REPAIR
Uses the same wide proportions as planner.php and prevents the
header, week title, day rows, and right-hand panels from colliding.
============================================================ */
@media screen {
.layout {
max-width: 1540px !important;
grid-template-columns: 250px minmax(0, 1fr) !important;
padding: 0 14px !important;
}
.layout > main,
main {
min-width: 0 !important;
}
.week-shell {
width: 1180px !important;
max-width: 100% !important;
margin: 18px auto 34px !important;
}
.planner-page {
width: 1180px !important;
max-width: 100% !important;
min-height: 820px !important;
height: auto !important;
padding: 18px 20px 26px !important;
overflow: hidden !important;
border: 5px solid #5b321b !important;
border-top: 0 !important;
}
.header {
grid-template-columns: 125px minmax(480px, 1fr) 155px !important;
column-gap: 24px !important;
min-height: 138px !important;
padding: 12px 20px !important;
overflow: hidden !important;
}
.realistic-tree-emblem {
width: 98px !important;
height: 98px !important;
}
.title-area {
min-width: 0 !important;
min-height: 112px !important;
padding: 2px 10px !important;
}
.header-program {
font-size: 11px !important;
letter-spacing: 2.2px !important;
}
.title-main {
font-size: 42px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.title-sub {
font-size: 11px !important;
letter-spacing: 2.7px !important;
white-space: nowrap !important;
}
.header-tagline {
font-size: 11px !important;
}
.weekly-planner-small {
font-size: 8px !important;
padding: 0 58px !important;
}
.brand {
width: 145px !important;
min-height: 98px !important;
}
.week-title {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
margin: 7px 0 12px !important;
font-size: 13px !important;
white-space: nowrap !important;
}
.week-title span {
display: inline-block !important;
min-width: 390px !important;
padding: 0 16px 5px !important;
font-size: 18px !important;
white-space: nowrap !important;
}
.final-main-layout {
display: grid !important;
grid-template-columns: minmax(0, 1.45fr) minmax(360px, .92fr) !important;
gap: 14px !important;
align-items: stretch !important;
width: 100% !important;
}
.final-days {
min-width: 0 !important;
width: 100% !important;
}
.final-day-row {
grid-template-columns: 135px minmax(0, 1fr) !important;
min-height: 82px !important;
}
.final-day-row .editable {
min-height: 68px !important;
}
.final-lower-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
margin: 0 !important;
min-width: 0 !important;
}
.final-lower-grid .side-box {
min-height: 0 !important;
height: auto !important;
}
.final-lower-grid .side-box h3 {
position: static !important;
display: block !important;
width: 100% !important;
max-width: none !important;
white-space: normal !important;
line-height: 1.2 !important;
padding: 9px 12px !important;
color: #fff8ed !important;
background: linear-gradient(180deg,#71391c,#45200e) !important;
border-bottom: 1px solid #c99a68 !important;
}
.final-lower-grid .editable {
min-height: 150px !important;
height: calc(100% - 39px) !important;
background: repeating-linear-gradient(to bottom,#fffdf8 0,#fffdf8 25px,#eadfcd 26px) !important;
}
.planner-picture-layer {
overflow: hidden !important;
}
.floating-picture {
z-index: 1 !important;
}
.header,
.week-title,
.final-main-layout,
.footer-text {
position: relative !important;
z-index: 3 !important;
}
}
@media screen and (max-width: 1240px) {
.layout {
display: block !important;
max-width: 1210px !important;
}
.sidebar {
position: relative !important;
top: auto !important;
max-height: none !important;
margin: 0 auto 14px !important;
}
.week-shell,
.planner-page {
width: calc(100vw - 30px) !important;
}
}
@media screen and (max-width: 900px) {
.header {
grid-template-columns: 1fr !important;
}
.title-main {
font-size: 32px !important;
white-space: normal !important;
}
.title-sub {
white-space: normal !important;
}
.week-title {
display: block !important;
white-space: normal !important;
text-align: center !important;
}
.week-title span {
display: block !important;
min-width: 0 !important;
margin-top: 5px !important;
white-space: normal !important;
}
.final-main-layout {
grid-template-columns: 1fr !important;
}
.final-lower-grid .editable {
min-height: 120px !important;
height: auto !important;
}
}
@media print {
@page { size: letter landscape; margin: .12in; }
html, body {
width: 11in !important;
min-width: 11in !important;
}
.layout,
.layout > main,
main {
width: 10.75in !important;
max-width: 10.75in !important;
}
.week-shell,
.planner-page {
width: 10.75in !important;
min-width: 10.75in !important;
max-width: 10.75in !important;
}
.planner-page {
min-height: 8.2in !important;
padding: .12in .16in .18in !important;
}
.header {
grid-template-columns: 1.05in minmax(0,1fr) 1.42in !important;
min-height: 1.12in !important;
padding: .08in .13in !important;
}
.realistic-tree-emblem {
width: .78in !important;
height: .78in !important;
}
.title-main { font-size: 30px !important; }
.title-sub { font-size: 8px !important; }
.header-program { font-size: 8px !important; }
.header-tagline { font-size: 8px !important; }
.brand { width: 1.2in !important; min-height: .78in !important; }
.week-title { margin: .04in 0 .08in !important; }
.week-title span { min-width: 3.4in !important; font-size: 14px !important; }
.final-main-layout {
display: grid !important;
grid-template-columns: minmax(0,1.48fr) minmax(3.15in,.9fr) !important;
gap: .10in !important;
}
.final-day-row {
grid-template-columns: 1.05in minmax(0,1fr) !important;
min-height: .69in !important;
}
.final-day-row .editable { min-height: .54in !important; }
.final-lower-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: repeat(3,minmax(0,1fr)) !important;
gap: .08in !important;
margin: 0 !important;
}
.final-lower-grid .side-box h3 {
position: static !important;
color: #ffffff !important;
background: #5b321b !important;
font-size: 9px !important;
padding: 5px 6px !important;
}
.final-lower-grid .editable {
min-height: .98in !important;
height: calc(100% - 27px) !important;
}
}
div#container
{
width: 800px;
position: relative;
margin: 0 auto 0 auto;
text-align: left;
}
body
{
background-color: #87CEFA;
background-image: url('images/bckgrnd.png');
background-attachment: fixed;
background-position: left top;
background-repeat: no-repeat;
background-size: 100% 100%;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 11px;
line-height: 1.1875;
margin: 0;
text-align: center;
}