*{box-sizing:border-box}
:root{--deep:#004a35;--green:#006b45;--bright:#0c8b58;--line:#c9ded3;--ink:#102d25}
html,body{margin:0;width:100%;height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink)}
.display{height:100vh;overflow:hidden;background-image:linear-gradient(90deg,rgba(0,53,39,.12),rgba(0,53,39,.02)),var(--school-bg);background-size:cover;background-position:center center;background-repeat:no-repeat}
.topbar{height:14vh;min-height:82px;max-height:132px;background:linear-gradient(105deg,#004a35 0%,#006044 55%,rgba(0,75,52,.96) 100%);color:#fff;display:grid;grid-template-columns:1.3fr .75fr 1fr;align-items:center;padding:0 2.1vw;border-bottom:4px solid #b5d86a;gap:16px}
.brand{display:flex;align-items:center;gap:17px;min-width:0}
.crest{width:62px;height:66px;flex:0 0 62px;border:2px solid #d8e56c;border-radius:16px 16px 20px 20px;display:grid;place-items:center;color:#f1ed9c;font-size:34px;background:linear-gradient(145deg,#08734d,#00412f);box-shadow:inset 0 0 0 3px #ffffff20}
.brand h1{font-size:clamp(19px,2.15vw,36px);line-height:1.05;margin:0 0 7px;white-space:nowrap}
.brand p{margin:0;font-size:clamp(11px,1vw,18px);white-space:nowrap}
.header-center{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:clamp(24px,2.7vw,44px);line-height:.9;color:#fff;text-shadow:0 2px 8px #002c20}
.header-center em{display:block;color:#f2dc45;font-size:.48em;margin-top:9px;font-weight:bold}
.clock{justify-self:end;display:flex;align-items:center;gap:12px;white-space:nowrap}
.calendar-mark{font-size:32px;color:#fff}
.date-wrap{display:flex;flex-direction:column;font-size:clamp(11px,1vw,17px);gap:4px}
.date-wrap small{font-size:.9em;color:#e3f2e9}
.clock strong{font-size:clamp(27px,3vw,49px);line-height:1}
.clock>small{align-self:center;font-size:12px}
.layout{height:77vh;display:grid;grid-template-columns:37% minmax(12%,1fr) 33%;gap:0;padding:1.5vh 1.2vw 1vh;align-items:stretch}
.panel,.class-card{background:rgba(255,255,255,.94);border:1px solid rgba(0,111,72,.34);border-radius:20px;box-shadow:0 8px 24px rgba(0,45,32,.2)}
.agenda{padding:1.35vw;display:flex;flex-direction:column;min-height:0;backdrop-filter:blur(2px)}
.section-title{display:flex;align-items:center;gap:15px;border-bottom:1px solid #cbded5;padding-bottom:12px}
.big-icon{font-size:clamp(34px,3.2vw,54px);color:#006341}
.section-title h2{font-size:clamp(21px,2.05vw,34px);margin:0;color:#064d38}
.section-title p{margin:4px 0 0;font-size:clamp(13px,1.2vw,20px)}
.agenda-list{overflow:hidden;flex:1}
.agenda-item{display:flex;gap:12px;align-items:center;padding:1.15vh 0;border-bottom:1px solid #d5e3dc;min-height:0}
.datebox{width:24%;min-width:74px;background:linear-gradient(145deg,#00854e,#004d38);color:white;border-radius:12px;padding:12px 5px;text-align:center;box-shadow:inset 0 1px 0 #ffffff30}
.datebox b{display:block;font-size:clamp(13px,1.3vw,22px);margin-bottom:5px}
.datebox span{font-size:clamp(10px,.9vw,15px)}
.event{min-width:0}
.event h3{font-size:clamp(13px,1.25vw,21px);margin:0 0 7px;color:#101c17}
.event p{font-size:clamp(10px,.95vw,16px);margin:0;color:#42564e;white-space:normal}
.event i{font-style:normal;color:#94a99e;padding:0 4px}
.quote{font-style:italic;color:#00583b;font-size:clamp(12px,1.1vw,18px);padding-top:10px;text-align:center;font-weight:600}
.center-open-space{min-width:0}
.schedules{display:flex;flex-direction:column;gap:1vh;min-height:0;padding-left:.45vw}
.schedule-heading{background:linear-gradient(90deg,#005b3e,#07834f);color:white;padding:12px 14px;border-radius:12px;font-weight:bold;font-size:clamp(13px,1.2vw,20px);box-shadow:0 4px 12px #002b1d30}
.schedule-heading span{float:right;font-weight:normal;font-size:.82em}
.class-card{overflow:hidden;flex:1;min-height:0;background:rgba(255,255,255,.95)}
.class-card h3{margin:0;background:linear-gradient(90deg,#00623f,#13945a);color:white;padding:9px 14px;font-size:clamp(14px,1.25vw,21px)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:clamp(4px,.55vh,8px) 8px;border-bottom:1px solid #dce8e2;font-size:clamp(9px,.86vw,15px);white-space:nowrap}
th{background:#e4f1e9;color:#164b38}
.empty{text-align:center;color:#73877d;padding:12px}
.ticker{height:9vh;min-height:52px;background:linear-gradient(90deg,#004b36,#00603f);color:white;display:flex;align-items:center;overflow:hidden;border-top:3px solid #b2d66b}
.ticker>strong{padding:0 22px;font-size:clamp(13px,1.3vw,22px);white-space:nowrap;display:flex;align-items:center;gap:8px}
.ticker-window{overflow:hidden;white-space:nowrap;flex:1;background:#f5fbf7;color:#123e2e;padding:12px 0}
.ticker-text{display:inline-block;padding-left:100%;font-size:clamp(13px,1.1vw,19px);font-weight:bold;animation:scroll 32s linear infinite}
.ticker:after{content:"Ahlussunnah Wal Jamaah";font-family:Georgia,serif;font-style:italic;font-size:clamp(13px,1.25vw,21px);padding:0 20px;white-space:nowrap}
@keyframes scroll{to{transform:translateX(-100%)}}
.login-bg,.admin-bg{background:#eef5f0;min-height:100vh}
.login-bg{display:grid;place-items:center}
.login-card{width:min(420px,92vw);padding:32px;background:#fff;border-radius:20px;box-shadow:0 12px 40px #1235;display:flex;flex-direction:column;gap:12px}
.login-card h1,.login-card p{text-align:center;margin:0}
.crest.large{margin:auto;background:#006341;width:70px;height:70px}
.login-card input,.admin-card input,.admin-card select,.admin-card textarea{width:100%;padding:11px;border:1px solid #cbd9d1;border-radius:8px;font:inherit}
.login-card button,.admin-card button{padding:12px;border:0;border-radius:8px;background:#006341;color:#fff;font-weight:bold;cursor:pointer;margin-top:8px}
.login-card a{text-align:center;color:#006341;margin-top:8px}
.admin-top{background:#00563b;color:white;padding:18px 4vw;display:flex;justify-content:space-between}
.admin-top a{color:white;margin-left:20px}
.admin-wrap{max-width:1450px;margin:28px auto;padding:0 20px}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.admin-card{background:white;border-radius:14px;padding:20px;box-shadow:0 4px 18px #0022;min-width:0}
.admin-card h2{margin-top:0;color:#005b3e}
.admin-card form:not(.inline){display:flex;flex-direction:column;gap:8px}
.admin-card label{font-weight:bold;font-size:14px;margin-top:5px}
.admin-card button{align-self:flex-start;padding:10px 18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.table-scroll{overflow:auto;max-height:260px;margin-top:15px}
.manage-table{min-width:420px}
.manage-table td,.manage-table th{font-size:13px;padding:8px}
.manage-table a{color:#006341}
.inline{display:inline}
.inline button{padding:5px 8px;margin:2px}
.danger{background:#a52c2c!important}
.success,.alert{padding:12px;border-radius:8px;margin:12px 0}
.success{background:#d9f4e4;color:#075b36}
.alert{background:#ffe1df;color:#8d1717}
.hint{color:#60746a;font-size:13px}
@media(max-width:900px){.display{height:auto;min-height:100vh;overflow:auto;background-attachment:fixed}.topbar{height:auto;max-height:none;padding:12px;grid-template-columns:1fr auto}.header-center{display:none}.brand h1{white-space:normal}.clock{gap:7px}.clock strong{font-size:22px}.layout{height:auto;grid-template-columns:1fr;padding:12px;gap:14px}.agenda{min-height:440px}.center-open-space{display:none}.schedules{padding:0}.class-card{min-height:160px}.ticker{height:55px}.ticker:after{display:none}.admin-grid{grid-template-columns:1fr}}

/* Penyempurnaan visual TV Display */
.display{background-color:#dcebe2}
.panel,.class-card{backdrop-filter:blur(5px);border-color:rgba(0,105,68,.28)}
.agenda{box-shadow:0 12px 34px rgba(0,45,32,.22)}
.class-card{box-shadow:0 7px 22px rgba(0,45,32,.18)}
.class-card tbody tr:nth-child(even){background:rgba(239,248,243,.68)}
.class-card tbody tr:hover{background:#e3f4e9}
.datebox{background:linear-gradient(145deg,#07965b 0%,#00513a 100%)}
.ticker{box-shadow:0 -4px 20px rgba(0,45,32,.12)}
@media(min-width:1200px){.agenda-item{padding-top:1.3vh;padding-bottom:1.3vh}.event h3{letter-spacing:-.02em}}

/* Logo madrasah yang dapat diganti dari dashboard */
.brand-logo{width:66px;height:70px;object-fit:contain;flex:0 0 66px;background:rgba(255,255,255,.10);border:1px solid #d8e56c;border-radius:12px;padding:4px}
.ticker-slogan{font-family:Georgia,serif;font-style:italic;font-size:clamp(12px,1.2vw,20px);padding:0 20px;white-space:nowrap;color:#fff}
@media(max-width:900px){.brand-logo{width:48px;height:52px;flex-basis:48px}.ticker-slogan{display:none}}

/* V4: ticker memakai seluruh lebar footer, tanpa slogan kanan */
.ticker{width:100%;display:flex;gap:0}
.ticker>strong{flex:0 0 auto}
.ticker-window{flex:1 1 auto;min-width:0;width:100%}
.ticker-text{animation-duration:48s}
.ticker:after{content:none!important;display:none!important}
.ticker-slogan{display:none!important}

/* V5 hard reset: hilangkan slogan kanan dan gunakan seluruh footer untuk running text */
.ticker::after,.ticker:after{content:none!important;display:none!important;width:0!important;padding:0!important;margin:0!important}
.ticker-slogan{display:none!important;visibility:hidden!important;width:0!important;padding:0!important}
.ticker{display:flex!important;width:100%!important;overflow:hidden!important}
.ticker-window{display:block!important;flex:1 1 0!important;width:auto!important;max-width:none!important;min-width:0!important}
.ticker-text{white-space:nowrap;min-width:max-content;animation:scroll 55s linear infinite!important}