/* MY AREA v88 — contrast and readability audit for Cahaya + Malam. */
:root{
  --read-ink:#132b24;
  --read-body:#425a51;
  --read-muted:#60756c;
  --read-border:#d7e2dc;
  --read-surface:#ffffff;
  --read-soft:#f3f7f4;
}

body{color:var(--read-ink)}
main p,main li,main td,main label,dialog p,dialog li,dialog label{color:var(--read-body)}
main small,main em,dialog small,dialog em,.muted-copy,.wa-status{color:var(--read-muted)}
h1,h2,h3,h4,h5,h6,strong,b,.field{color:var(--read-ink)}

.rail-card,.stat,.approval-card,.worker-card,.profile-card,.review-card,
.service-admin-card,.task-card,.document-sheet,.operation-card,.schedule-day,
.booking-row,.participant-section,.runner-choice,.course-worker-card,
.course-schedule-manager,.course-schedule-form,.course-session-row,
.selected-course,.visitor-stats,.market-listing-card,.market-form-section,
.market-safety,.market-reservation-list article,.arena-cards article,
.arena-coming,.arena-lobby-head>button,.arena-players article,.arena-result,
.booking-gate-dialog,.ad-empty,.fixed-schedule-card>div,.status-detail>div{
  color:var(--read-ink);
}

.rail-card p,.stat p,.approval-card p,.worker-card p,.profile-card p,
.review-card p,.service-admin-card p,.task-card p,.document-sheet p,
.operation-card p,.schedule-day p,.booking-row p,.participant-section p,
.runner-choice p,.course-worker-card p,.course-schedule-manager p,
.course-schedule-form p,.course-session-row p,.selected-course p,
.visitor-stats p,.market-listing-card p,.market-form-section p,
.market-safety p,.arena-cards article p,.arena-coming p,.arena-result p,
.booking-gate-dialog p,.ad-empty p,.fixed-schedule-card p,.status-detail p{
  color:var(--read-body)!important;
}

input,textarea,select{
  color:#173028!important;
  background:#fff!important;
  border-color:#cbd9d2!important;
}
input::placeholder,textarea::placeholder{color:#71847b!important;opacity:1}
input:disabled,textarea:disabled,select:disabled{color:#53685f!important;background:#edf2ef!important;opacity:1}
.search input{background:transparent!important}

.notice,.booking-rule,.note-card,.template-hint,.course-editor-note,
.admin-sync-notice,.term-note{
  color:#29493e!important;
}
.notice b,.booking-rule b,.note-card b,.template-hint b,.course-editor-note b{color:#17352b!important}
.pill,.service-state,.coming-badge,.category-name{font-weight:800}
.text-button{color:#176b51!important}
.danger-text,.error-msg{color:#a2352c!important}
table,th,td{color:var(--read-ink)}
th{color:#435d53!important;background:#f1f5f2!important}
.btn:not(.primary):not(.whatsapp){color:#24483b}
.btn:disabled,.slot:disabled{opacity:.78}

.banner,.banner h1,.banner h2,.banner h3,.banner p,.banner span,
.msia-market-hero,.msia-market-hero h1,.msia-market-hero h2,.msia-market-hero p,
.admin-explainer,.admin-explainer *{color:#f7fbf9!important}
.banner h2 span,.market-kicker,.admin-explainer b{color:#efd48b!important}

html[data-theme="malam"]{
  --read-ink:#f2f8f5;
  --read-body:#cadbd4;
  --read-muted:#a9beb5;
  --read-border:#355047;
  --read-surface:#10231d;
  --read-soft:#152c25;
}
html[data-theme="malam"] body,
html[data-theme="malam"] main{background:#081711!important;color:var(--read-ink)!important}
html[data-theme="malam"] header{background:rgba(9,27,21,.94)!important;border-color:#29473d!important}
html[data-theme="malam"] .breadcrumb,
html[data-theme="malam"] .breadcrumb b{color:#dceae4!important}
html[data-theme="malam"] h1,
html[data-theme="malam"] h2,
html[data-theme="malam"] h3,
html[data-theme="malam"] h4,
html[data-theme="malam"] h5,
html[data-theme="malam"] h6,
html[data-theme="malam"] strong,
html[data-theme="malam"] b,
html[data-theme="malam"] .field{color:#f2f8f5!important}
html[data-theme="malam"] main p,
html[data-theme="malam"] main li,
html[data-theme="malam"] main td,
html[data-theme="malam"] main label,
html[data-theme="malam"] dialog p,
html[data-theme="malam"] dialog li,
html[data-theme="malam"] dialog label{color:#cadbd4!important}
html[data-theme="malam"] main small,
html[data-theme="malam"] main em,
html[data-theme="malam"] dialog small,
html[data-theme="malam"] dialog em,
html[data-theme="malam"] .muted-copy,
html[data-theme="malam"] .wa-status{color:#afc3ba!important}

html[data-theme="malam"] .rail-card,
html[data-theme="malam"] .stat,
html[data-theme="malam"] .approval-card,
html[data-theme="malam"] .worker-card,
html[data-theme="malam"] .profile-card,
html[data-theme="malam"] .review-card,
html[data-theme="malam"] .service-admin-card,
html[data-theme="malam"] .task-card,
html[data-theme="malam"] .document-sheet,
html[data-theme="malam"] .operation-card,
html[data-theme="malam"] .schedule-day,
html[data-theme="malam"] .booking-row,
html[data-theme="malam"] .participant-section,
html[data-theme="malam"] .runner-choice,
html[data-theme="malam"] .course-worker-card,
html[data-theme="malam"] .course-schedule-manager,
html[data-theme="malam"] .course-schedule-form,
html[data-theme="malam"] .course-session-row,
html[data-theme="malam"] .selected-course,
html[data-theme="malam"] .visitor-stats,
html[data-theme="malam"] .market-listing-card,
html[data-theme="malam"] .market-form-section,
html[data-theme="malam"] .market-safety,
html[data-theme="malam"] .market-reservation-list article,
html[data-theme="malam"] .arena-cards article,
html[data-theme="malam"] .arena-coming,
html[data-theme="malam"] .arena-lobby-head>button,
html[data-theme="malam"] .arena-players article,
html[data-theme="malam"] .arena-result,
html[data-theme="malam"] .booking-gate-dialog,
html[data-theme="malam"] .ad-empty,
html[data-theme="malam"] .fixed-schedule-card>div,
html[data-theme="malam"] .status-detail>div{
  background:#10231d!important;
  color:#f2f8f5!important;
  border-color:#355047!important;
}

html[data-theme="malam"] dialog,
html[data-theme="malam"] .dialog-body,
html[data-theme="malam"] .info-copy{background:#0c1e18!important;color:#f2f8f5!important}
html[data-theme="malam"] .dialog-head{background:#142d25!important;border-color:#39564d!important}
html[data-theme="malam"] input,
html[data-theme="malam"] textarea,
html[data-theme="malam"] select{
  color:#f4faf7!important;
  background:#091a15!important;
  border-color:#46645a!important;
  color-scheme:dark;
}
html[data-theme="malam"] input::placeholder,
html[data-theme="malam"] textarea::placeholder{color:#9cb1a8!important;opacity:1}
html[data-theme="malam"] input:disabled,
html[data-theme="malam"] textarea:disabled,
html[data-theme="malam"] select:disabled{color:#b7cac2!important;background:#172d25!important;opacity:1}
html[data-theme="malam"] option{background:#091a15!important;color:#f4faf7!important}
html[data-theme="malam"] .search{background:#10251e!important;border-color:#3c5a50!important}
html[data-theme="malam"] .search input{background:transparent!important}

html[data-theme="malam"] .notice,
html[data-theme="malam"] .booking-rule,
html[data-theme="malam"] .note-card,
html[data-theme="malam"] .template-hint,
html[data-theme="malam"] .course-editor-note,
html[data-theme="malam"] .admin-sync-notice{
  background:#18352b!important;
  color:#e2efe9!important;
  border-color:#416256!important;
}
html[data-theme="malam"] .notice *,
html[data-theme="malam"] .booking-rule *,
html[data-theme="malam"] .note-card *,
html[data-theme="malam"] .template-hint *,
html[data-theme="malam"] .course-editor-note *{color:#e9f4ef!important}
html[data-theme="malam"] .pill.amber,
html[data-theme="malam"] .pending-copy{background:#3b301a!important;color:#ffe2a0!important;border-color:#80662b!important}
html[data-theme="malam"] .pill:not(.amber){background:#1b3a30!important;color:#d9eee5!important;border-color:#426559!important}
html[data-theme="malam"] .text-button,
html[data-theme="malam"] a:not(.btn){color:#8fe1c4!important}
html[data-theme="malam"] .danger-text,
html[data-theme="malam"] .error-msg{color:#ff9f94!important}
html[data-theme="malam"] table{background:#10231d!important;color:#edf7f3!important;border-color:#355047!important}
html[data-theme="malam"] th{background:#173028!important;color:#dbe9e3!important;border-color:#3b594f!important}
html[data-theme="malam"] td{color:#d4e4de!important;border-color:#2f4a41!important}
html[data-theme="malam"] .btn:not(.primary):not(.whatsapp){background:#19362c!important;color:#eef8f4!important;border-color:#4a695e!important}
html[data-theme="malam"] .btn:disabled,
html[data-theme="malam"] .slot:disabled{color:#aebfb8!important;background:#1a2d26!important;border-color:#3a5048!important;opacity:.82}
html[data-theme="malam"] .mobile-nav{background:rgba(8,24,18,.97)!important;border-color:#365047!important}
html[data-theme="malam"] .main-footer{color:#abc0b7!important}

/* Preserve intentional high-contrast promotional surfaces. */
html[data-theme="malam"] .banner,
html[data-theme="malam"] .banner *,
html[data-theme="malam"] .msia-market-hero,
html[data-theme="malam"] .msia-market-hero *,
html[data-theme="malam"] .admin-explainer,
html[data-theme="malam"] .admin-explainer *{color:#f7fbf9!important}
html[data-theme="malam"] .banner h2 span,
html[data-theme="malam"] .market-kicker,
html[data-theme="malam"] .admin-explainer b{color:#efd48b!important}

@media(max-width:620px){
  main p,main li,dialog p,dialog li{line-height:1.6}
  .btn,.slot,input,textarea,select{font-size:max(14px,1em)}
}

/* v89 — targeted fixes from mobile booking screenshots. */
dialog .dialog-head{
  background:linear-gradient(135deg,#092b22,#0e4a3a)!important;
  border-color:#2e6252!important;
}
dialog .dialog-head .eyebrow{color:#ffd978!important}
dialog .dialog-head h2{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.18)}
dialog .dialog-head p{color:#f1dda2!important}
dialog .dialog-head .close{background:#ffffff1c!important;color:#ffe29a!important;border-color:#ffffff35!important}

.stepper span{color:#64776e!important;border-color:#cfdad4!important}
.stepper span.current{color:#075d46!important;border-color:#087158!important;font-weight:850!important}

.availability-customer{
  background:#f4f8f5!important;
  border-color:#bfcfc6!important;
}
.availability-customer .field,
.availability-customer .field>b{color:#17372e!important}
.availability-customer .field small{color:#536b60!important;font-weight:550!important}
.availability-customer select{background:#082a21!important;color:#fff!important;border-color:#315d4f!important;font-weight:750!important}
.availability-customer .slot{background:#fff!important;color:#193a30!important;border-color:#789187!important;opacity:1!important}
.availability-customer .slot:hover{background:#e7f2ec!important;border-color:#17684f!important}
.availability-customer .slot.selected{background:#0b674e!important;color:#fff!important;border-color:#0b674e!important;font-weight:800!important}

.course-choice-field{background:#fffdf8!important;border-color:#cdbf9f!important;color:#17372e!important}
.course-choice-field .course-choice-main b{color:#17372e!important;font-weight:850!important}
.course-choice-field .course-choice-main small{color:#52675e!important}
.course-choice-field .course-session-choice{border-color:#cfc6b4!important}
.course-choice-field .course-session-choice legend{color:#465d53!important;font-weight:850!important}
.course-choice-field .course-session-choice label{background:#fff!important;color:#29483d!important;border-color:#cfc6b4!important}
.course-choice-field .course-session-choice label span{color:#29483d!important}
.course-choice-field .course-session-choice input:disabled+span{opacity:1!important;color:#52675e!important}
.course-choice-field .course-session-choice input:disabled{opacity:.72!important}
.course-method{color:#185343!important;background:#e2f0e9!important}
.course-method.online{color:#234f9b!important;background:#e4edff!important}
.course-method.hybrid{color:#76500e!important;background:#fff0cf!important}

html[data-theme="malam"] dialog .dialog-head{
  background:linear-gradient(135deg,#071e18,#0c3e31)!important;
}
html[data-theme="malam"] .stepper span{color:#a9bbb4!important;border-color:#3b554c!important}
html[data-theme="malam"] .stepper span.current{color:#8ee2c3!important;border-color:#63c9a7!important}
html[data-theme="malam"] .availability-customer{
  background:#10231d!important;
  color:#f3f8f6!important;
  border-color:#48655b!important;
}
html[data-theme="malam"] .availability-customer .field,
html[data-theme="malam"] .availability-customer .field>b{color:#f3f8f6!important}
html[data-theme="malam"] .availability-customer .field small{color:#b8cbc3!important}
html[data-theme="malam"] .availability-customer select{background:#071c16!important;color:#fff!important;border-color:#547166!important}
html[data-theme="malam"] .availability-customer .slot{background:#19342b!important;color:#eaf5f0!important;border-color:#526f64!important}
html[data-theme="malam"] .availability-customer .slot:hover{background:#21483a!important;border-color:#80c8ae!important}
html[data-theme="malam"] .availability-customer .slot.selected{background:#d7bb72!important;color:#10271f!important;border-color:#d7bb72!important}

html[data-theme="malam"] .course-choice-field{
  background:#10231d!important;
  color:#f2f8f5!important;
  border-color:#4b665d!important;
}
html[data-theme="malam"] .course-choice-field .course-choice-main b{color:#f3f8f6!important}
html[data-theme="malam"] .course-choice-field .course-choice-main small{color:#b6c9c1!important}
html[data-theme="malam"] .course-choice-field .course-session-choice{border-color:#486158!important}
html[data-theme="malam"] .course-choice-field .course-session-choice legend{color:#c8d9d2!important}
html[data-theme="malam"] .course-choice-field .course-session-choice label{background:#172f27!important;color:#eaf5f0!important;border-color:#4b665d!important}
html[data-theme="malam"] .course-choice-field .course-session-choice label span,
html[data-theme="malam"] .course-choice-field .course-session-choice input:disabled+span{color:#dbeae4!important;opacity:1!important}

/* v90 — course review summary: every label and schedule stays legible. */
.course-review-card{padding:14px!important;background:#f7faf8!important;border:1px solid #b9cbc2!important;border-radius:13px!important;color:#17372e!important}
.course-review-head{margin-bottom:10px!important}
.course-review-head small{color:#526b60!important;font-weight:900!important;letter-spacing:.08em!important}
.course-review-head b{color:#123f32!important;font-weight:900!important}
.course-review-head button{background:#fff8e8!important;color:#63460d!important;border-color:#a97e29!important;font-weight:850!important}
.course-review-row{background:#fff!important;border-color:#b9cbc2!important}
.course-review-row span{color:#17372e!important;font-weight:850!important}
.course-review-row strong{color:#075f47!important;font-weight:900!important}
html[data-theme="malam"] .course-review-card{background:#10271f!important;border-color:#527066!important;color:#f3f8f6!important}
html[data-theme="malam"] .course-review-head small{color:#b9cec5!important}
html[data-theme="malam"] .course-review-head b{color:#fff!important}
html[data-theme="malam"] .course-review-head button{background:#4b3a17!important;color:#ffe29a!important;border-color:#c59b42!important}
html[data-theme="malam"] .course-review-row{background:#17342a!important;border-color:#557167!important}
html[data-theme="malam"] .course-review-row span{color:#f2f8f5!important}
html[data-theme="malam"] .course-review-row strong{color:#9ff0d2!important}

/* v91 — complete night-mode contrast for the course booking journey. */
html[data-theme="malam"] #bookingDialog,
html[data-theme="malam"] #bookingDialog .dialog-body{
  background:#071b15!important;
  color:#f3f8f6!important;
}
html[data-theme="malam"] #bookingDialog form>h3{color:#fff!important}
html[data-theme="malam"] #bookingDialog .notice{
  background:#17372d!important;
  color:#eaf5f0!important;
  border-color:#75c6aa!important;
}
html[data-theme="malam"] #bookingDialog .course-choice-field.selected{
  background:#173c30!important;
  border-color:#83d4b7!important;
  box-shadow:0 0 0 1px #83d4b733!important;
}
html[data-theme="malam"] #bookingDialog .course-checkmark{
  background:#0d211a!important;
  border-color:#789489!important;
}
html[data-theme="malam"] #bookingDialog .course-choice-field.selected .course-checkmark{
  background:#71c9aa!important;
  color:#082119!important;
  border-color:#71c9aa!important;
}
html[data-theme="malam"] #bookingDialog .course-session-choice label:has(input:checked){
  background:#244c3e!important;
  border-color:#8bdbbe!important;
}
html[data-theme="malam"] #bookingDialog .course-session-choice input{accent-color:#84dfbd!important}
html[data-theme="malam"] #bookingDialog .course-review-card,
html[data-theme="malam"] #bookingDialog .status-detail,
html[data-theme="malam"] #bookingDialog .status-detail>div,
html[data-theme="malam"] #bookingDialog .participant-section,
html[data-theme="malam"] #bookingDialog .fixed-schedule-card{
  background:#102a21!important;
  color:#f4faf7!important;
  border-color:#56766a!important;
}
html[data-theme="malam"] #bookingDialog .status-detail b,
html[data-theme="malam"] #bookingDialog .participant-section b,
html[data-theme="malam"] #bookingDialog .fixed-schedule-card b,
html[data-theme="malam"] #bookingDialog .fixed-schedule-card strong{color:#fff!important}
html[data-theme="malam"] #bookingDialog .participant-section small,
html[data-theme="malam"] #bookingDialog .fixed-schedule-card small{color:#bed2ca!important}
html[data-theme="malam"] #bookingDialog .field,
html[data-theme="malam"] #bookingDialog .field legend{color:#eef8f4!important}
html[data-theme="malam"] #bookingDialog .field>small{color:#b9cec5!important}
html[data-theme="malam"] #bookingDialog .field input,
html[data-theme="malam"] #bookingDialog .field select,
html[data-theme="malam"] #bookingDialog .field textarea{
  background:#0c241c!important;
  color:#fff!important;
  border-color:#557469!important;
}
html[data-theme="malam"] #bookingDialog .field input::placeholder,
html[data-theme="malam"] #bookingDialog .field textarea::placeholder{color:#9fb6ad!important;opacity:1!important}
html[data-theme="malam"] #bookingDialog .approval-check{color:#edf7f3!important}
html[data-theme="malam"] #bookingDialog .course-method{background:#264b3e!important;color:#bdf1de!important}
html[data-theme="malam"] #bookingDialog .course-method.online{background:#223b69!important;color:#d5e3ff!important}
html[data-theme="malam"] #bookingDialog .course-method.hybrid{background:#5a431d!important;color:#ffe3a0!important}

/* v92 — neutralise the legacy .status-detail div background inside course summary. */
#bookingDialog .status-detail .course-review-head,
#bookingDialog .status-detail .course-review-head>div{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  border-radius:0!important;
}
html[data-theme="malam"] #bookingDialog .status-detail .course-review-head,
html[data-theme="malam"] #bookingDialog .status-detail .course-review-head>div{
  background:transparent!important;
  color:#f4faf7!important;
}

/* v97 — login cards must stay readable in night mode. */
html[data-theme="malam"] .login-choice-card{
  background:#163329!important;
  border-color:#45675b!important;
  color:#f4faf7!important;
}
html[data-theme="malam"] .login-choice-card:hover{
  background:#1b3d31!important;
  border-color:#d1ad5a!important;
}
html[data-theme="malam"] .login-choice-card b,
html[data-theme="malam"] .customer-login-choice b{color:#fff!important}
html[data-theme="malam"] .login-choice-card small,
html[data-theme="malam"] .customer-login-choice small{color:#c4d8d0!important}
html[data-theme="malam"] .login-choice-arrow{color:#f2cf74!important}
html[data-theme="malam"] .customer-login-choice{
  background:#10271f!important;
  border-color:#45675b!important;
}
html[data-theme="malam"] .customer-login-actions .btn:not(.primary){
  background:#1c3c31!important;
  color:#fff!important;
  border-color:#55766a!important;
}