/* Bypass konflik Tailwind: Memaksa panel yang memiliki class 'hidden' agar benar-benar hilang */
    #adminDashboardContent.hidden,
    #adminSettingsPanel.hidden,
    #monthlyReportPanel.hidden,
    #userManagerPanel.hidden,
    .app-panel.hidden {
        display: none !important;
    }


/* ===== Extracted from original index.html ===== */


/* =========================================================
   CLINIC THEME ENGINE v2
   Single source of truth
========================================================= */

:root {

    /* Theme Core */
    --clinic-primary:#A96580;
    --clinic-primary-dark:#7D4961;
    --clinic-primary-soft:#F4E6EC;

    --clinic-accent:#C79A52;

    --clinic-bg:#FBF7F5;
    --clinic-bg-soft:#F7F1EE;
    --clinic-bg-soft-2:#FAF5F2;

    --clinic-surface:#FFFFFF;

    --clinic-text:#4D2942;
    --clinic-muted:#68746C;

    --clinic-border:rgba(169,101,128,.16);

    --clinic-shadow:rgba(77,41,66,.08);

    --clinic-gold:#B08328;
    --clinic-gold-soft:#DCBE6C;

}

html:not(.theme-ready) body{
    visibility:hidden;
}

html.theme-ready body{
    visibility:visible;
}
/* GLOBAL BASE */

html{
    background:var(--clinic-bg);
    font-size:90%;
}


body{
    background:var(--clinic-bg);
    color:var(--clinic-text);
    font-family:'Inter',sans-serif;
}
/* =========================================================
   GLOBAL RESET
========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}


html,
body{

    width:100%;
    max-width:100%;

    overflow-x:hidden;

}


body{

    font-family:'Inter',sans-serif;

    background:
        var(--clinic-bg);

    color:
        var(--clinic-text);

}


/*
   Jangan pakai zoom browser.
   Ini hanya mengecilkan layout utama.
*/

#publicApp,
#staffApp{

    zoom:.9;

}


/* Desktop sedikit lebih kecil */

@media(min-width:1200px){

    #publicApp,
    #staffApp{

        zoom:.80;

    }

}


/* Mobile normal */

@media(max-width:767px){

    #publicApp,
    #staffApp{

        zoom:1;

    }

}



/* =========================================================
   TYPOGRAPHY
========================================================= */

.font-serif{

    font-family:
    'Fraunces',
    serif;

}



/* =========================================================
   BACKGROUND SYSTEM
========================================================= */


.clinic-public-bg {
background:
radial-gradient(
circle at 8% 12%,
color-mix(in srgb,var(--clinic-primary) 18%,transparent),
transparent 30%
),
radial-gradient(
circle at 94% 18%,
color-mix(in srgb,var(--clinic-accent) 20%,transparent),
transparent 28%
),
linear-gradient(
135deg,
var(--clinic-bg),
var(--clinic-primary-soft),
var(--clinic-bg)
);
}



.clinic-soft-card{

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.96),
        color-mix(
            in srgb,
            var(--clinic-primary-soft)
            35%,
            white
        )
    );


    border:

    1px solid
    var(--clinic-border);

}



.clinic-glass{

    background:
    rgba(255,255,255,.78);


    backdrop-filter:
    blur(12px);


    -webkit-backdrop-filter:
    blur(12px);

}



/* =========================================================
   HEADER RULE
========================================================= */


.header-rule{
height:3px;
background:
linear-gradient(
90deg,
transparent,
var(--clinic-gold),
var(--clinic-gold-soft),
var(--clinic-gold),
transparent
);
}



/* =========================================================
   SCROLLBAR
========================================================= */


::-webkit-scrollbar{

width:8px;

}


::-webkit-scrollbar-track{

background:transparent;

}


::-webkit-scrollbar-thumb{

background:

var(--clinic-primary-soft);

border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

background:

var(--clinic-primary);

}



/* =========================================================
   FORM
========================================================= */


input:focus,
select:focus,
textarea:focus{


box-shadow:

0 0 0 3px

color-mix(

in srgb,

var(--clinic-primary)

15%,

transparent

);


border-color:

var(--clinic-primary)!important;


}



/* =========================================================
   IMAGE SAFETY
========================================================= */


img,
video,
iframe,
svg{

max-width:100%;

}



input,
select,
textarea,
button{

max-width:100%;

}



/* =========================================================
   SLIDER
========================================================= */

.public-slide {
    min-height: 460px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide-fade {
    animation: slideFade 0.45s ease-out;
}

@keyframes slideFade {
    from {
        opacity: 0.35;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* =========================================================
   PRINT A4
========================================================= */

@page {
    size: A4 portrait;
    /* Margin 0 memaksa browser membuang header & footer URL bawaan */
    margin: 0mm !important; 
}

@media print {
    /* 1. Pengaturan Dasar Halaman */
    html, body {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* 2. Sembunyikan Semua Elemen Aplikasi Selain Area Cetak */
    body > *:not(#printArea) {
        display: none !important;
    }

    #staffApp, #publicApp, .no-print {
        display: none !important;
    }

    /* 3. Pengaturan Area Cetak Utama */
    #printArea {
        display: block !important;
        position: relative !important;
        left: 0;
        top: 0;
        width: 100%;
        background: white !important;
        color: #000 !important;
        font-family: Arial, sans-serif !important;
    }

    /* 4. Pengaturan Halaman dan Margin Kertas */
    .print-page {
        padding: 15mm 15mm 20mm 15mm; /* Atas 15mm, Kanan 15mm, Bawah 20mm, Kiri 15mm */
        box-sizing: border-box;
        min-height: 100vh;
        position: relative;
        z-index: 1;
        width: 100%;
        background-color: white !important;
    }

    /* 5. Paksa Warna & Watermark Tetap Dicetak oleh Browser */
    #printArea * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}


/* =========================================================
   CLINIC THEME ENGINE v2
   COMPONENT OVERRIDE
========================================================= */


/* =========================================================
   HEADER
========================================================= */


.clinic-header{


background:

linear-gradient(

135deg,

color-mix(
in srgb,
var(--clinic-bg) 96%,
white
),

color-mix(
in srgb,
var(--clinic-primary-soft) 88%,
white
)

)!important;


color:

var(--clinic-text)!important;


border-bottom:

1px solid

var(--clinic-border);


box-shadow:

0 10px 30px

var(--clinic-shadow)!important;


}



.clinic-header .text-white{

color:

var(--clinic-text)!important;

}



.clinic-header .text-primary-100,
.clinic-header .text-primary-100\/90{


color:

color-mix(
in srgb,
var(--clinic-text) 70%,
white
)!important;


}



.clinic-header .bg-white\/10{


background:

rgba(255,255,255,.65)!important;


}



.clinic-header .border-white\/15{


border-color:

var(--clinic-border)!important;


}



.clinic-header .bg-ink\/60{


background:

rgba(255,255,255,.75)!important;


border-color:

var(--clinic-border)!important;


}



/* =========================================================
   BUTTON SYSTEM
========================================================= */


.bg-primary-700,
.bg-primary-600,
.bg-primary-800{


background:

var(--clinic-primary)!important;


}


.hover\:bg-primary-700:hover,
.hover\:bg-primary-600:hover{


background:

var(--clinic-primary-dark)!important;


}




.text-primary-700,
.text-primary-800,
.text-primary-900{


color:

var(--clinic-primary-dark)!important;


}



.bg-primary-50{


background:

var(--clinic-primary-soft)!important;


}



.border-primary-200{


border-color:

color-mix(
in srgb,
var(--clinic-primary)
30%,
white
)!important;


}



/* gold */

.text-gold-600,
.text-gold-800{


color:

var(--clinic-accent)!important;


}


.bg-gold-50{


background:

color-mix(
in srgb,
var(--clinic-primary-soft)
75%,
white
)!important;


}


.bg-gold-500{


background:

var(--clinic-accent)!important;


}



.hover\:bg-gold-600:hover{


background:

color-mix(
in srgb,
var(--clinic-accent)
80%,
black
)!important;


}



/* =========================================================
   PUBLIC HOME SLIDER
========================================================= */


#homeSlider{


background:


linear-gradient(

135deg,

var(--clinic-primary-dark),

var(--clinic-primary),

color-mix(
in srgb,
var(--clinic-primary)
60%,
white
)

)!important;


}



#homeSlider .bg-gradient-to-r{


background-image:


linear-gradient(

90deg,

color-mix(
in srgb,
var(--clinic-text)
80%,
transparent
),

color-mix(
in srgb,
var(--clinic-primary-dark)
45%,
transparent
),
transparent
)!important;
}
#homeSlider .bg-white\/10{
background:
rgba(255,255,255,.18)!important;
}
#homeSlider .border-white\/20{
border-color:

rgba(255,255,255,.35)!important;


}



#homeSlider button{


background:

color-mix(
in srgb,
var(--clinic-primary-dark)
50%,
transparent
)!important;


border:

1px solid rgba(255,255,255,.25);


}



#homeSlider button:hover{


background:

color-mix(
in srgb,
var(--clinic-primary-dark)
70%,
transparent
)!important;


}




/* =========================================================
   STAFF PANEL
========================================================= */


#staffApp{


background:


radial-gradient(

circle at 5% 8%,

color-mix(
in srgb,
var(--clinic-primary)
15%,
transparent
),

transparent 30%

),


linear-gradient(

135deg,

var(--clinic-bg),

var(--clinic-primary-soft)

)!important;



color:

var(--clinic-text)!important;


}




#staffApp .bg-white{


background:

rgba(255,255,255,.88)!important;


}




#staffApp .bg-paper{


background:

color-mix(
in srgb,
var(--clinic-bg)
85%,
var(--clinic-primary-soft)
)!important;


}




#staffApp .border-line{


border-color:

var(--clinic-border)!important;


}



#staffApp .shadow-sm{


box-shadow:


0 12px 34px

var(--clinic-shadow)!important;


}



/* card */

#staffApp .rounded-3xl{


border-color:

var(--clinic-border);


}



/* input */

#staffApp input,
#staffApp select,
#staffApp textarea{


background:

rgba(255,255,255,.92);


color:

var(--clinic-text);
}
/* =========================================================
   STATUS / SLATE BUTTON
========================================================= */


#staffApp .bg-slate-100{


background:

color-mix(
in srgb,
var(--clinic-primary-soft)
70%,
white
)!important;
}
#staffApp .hover\:bg-slate-200:hover{
background:
color-mix(
in srgb,
var(--clinic-primary-soft)
90%,
var(--clinic-primary)
)!important;
}
/* =========================================================
   SOFT SECTION
========================================================= */
.clinic-soft-section{
background:
rgba(255,255,255,.60);
border:
1px solid
var(--clinic-border);
}
/* =========================================================
   REMOVE OLD DARK MEDICAL STYLE
========================================================= */
.islamic-bg{
background:
var(--clinic-primary-dark)!important;
background-image:none!important;
}
/* =========================================================
   LOGO SMOOTH LOAD
========================================================= */
#publicLogoBox img,
#adminLogoBox img,
#brandPreviewLogo img{
transition:
opacity .25s ease;
}
/* =========================================================
   END THEME ENGINE v2
========================================================= */



/* ===== Extracted from original index.html ===== */

/* === Professional unified header === */
:root{
  --app-header-height: 72px;
  --app-header-padding-x: clamp(18px, 2.5vw, 32px);
}

.app-header,
header.app-header,
.main-header,
header[class*="sticky"]{
  min-height: var(--app-header-height);
  box-sizing: border-box;
}

.app-header > *,
.main-header > *{
  min-height: inherit;
}

/* Header yang menjadi pembungkus navigasi/panel */
header.sticky,
header.fixed{
  min-height: var(--app-header-height);
  box-sizing: border-box;
}

/* Samakan spacing horizontal dan vertical */
.app-header .container,
.main-header .container,
header.sticky > .container,
header.fixed > .container{
  min-height: var(--app-header-height);
  padding-left: var(--app-header-padding-x);
  padding-right: var(--app-header-padding-x);
  display: flex;
  align-items: center;
}

/* Hindari judul panel mengubah tinggi header */
.app-panel > header,
.app-panel header{
  min-height: var(--app-header-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Konsistensi typography judul */
.app-panel header h1,
.app-panel header h2,
.app-panel header h3{
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0;
}

/* Responsive: sedikit lebih compact di layar kecil */
@media (max-width: 767px){
  :root{ --app-header-height: 64px; }
  .app-header .container,
  .main-header .container,
  header.sticky > .container,
  header.fixed > .container{
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ===== Extracted from original index.html ===== */

html.theme-loading *,
html.theme-loading {
    transition:none!important;
}
/* =========================================================
   RESERVATION THEME ADAPTER
   mengikuti Clinic Theme Setting
========================================================= */


/* panel kiri reservasi */
#reservasi .clinic-soft-card {

    background:
    linear-gradient(
        145deg,
        color-mix(
            in srgb,
            var(--clinic-surface) 94%,
            var(--clinic-primary-soft)
        ),
        var(--clinic-primary-soft)
    ) !important;

    border-color:
    color-mix(
        in srgb,
        var(--clinic-primary) 18%,
        transparent
    ) !important;

}


/* dekorasi lingkaran */
#reservasi .bg-rose-200\/25 {

    background:
    color-mix(
        in srgb,
        var(--clinic-primary-soft) 60%,
        transparent
    ) !important;

}


#reservasi .bg-primary-100\/35 {

    background:
    color-mix(
        in srgb,
        var(--clinic-primary-soft) 75%,
        transparent
    ) !important;

}


/* icon utama */
#reservasi .reservation-icon {

    background:
    linear-gradient(
        145deg,
        var(--clinic-primary),
        var(--clinic-primary-dark)
    ) !important;

}


/* tulisan label */
#reservasi .reservation-label {

    color:
    var(--clinic-primary) !important;

}


/* icon kecil */
#reservasi .reservation-badge,
#reservasi span.bg-\[\#F1DFE6\] {

    background:
    var(--clinic-primary-soft) !important;

    color:
    var(--clinic-primary) !important;

}


/* card benefit */
#reservasi .bg-white\/70 {

    background:
    color-mix(
        in srgb,
        var(--clinic-surface) 80%,
        var(--clinic-primary-soft)
    ) !important;


    border-color:
    color-mix(
        in srgb,
        var(--clinic-primary) 15%,
        transparent
    ) !important;

}


/* tombol kirim */
#reservasi button[type="submit"] {

    background:
    linear-gradient(
        135deg,
        var(--clinic-primary),
        var(--clinic-primary-dark)
    ) !important;

}


#reservasi button[type="submit"]:hover {

    filter:brightness(.94);

}


/* tombol cek status */
#reservasi button.bg-ink {

    background:
    var(--clinic-text) !important;

}


/* badge sukses */
#reservasi #reservationSuccess {

    background:
    var(--clinic-primary-soft) !important;

    border-color:
    color-mix(
        in srgb,
        var(--clinic-primary) 30%,
        transparent
    ) !important;

}
.reservation-submit{

background:
linear-gradient(
135deg,
var(--clinic-primary),
var(--clinic-primary-dark)
)!important;

}
.reservation-check{

background:var(--clinic-text)!important;

}

.reservation-check:hover{

filter:brightness(.9);

}

.clinic-reservation .reservation-icon{
    background:var(--clinic-primary);
}


.clinic-reservation .reservation-label{
    color:var(--clinic-primary);
}


.clinic-reservation .reservation-badge{
    background:var(--clinic-primary-soft);
    color:var(--clinic-primary);
}


.clinic-reservation .reservation-card{
    background:color-mix(
        in srgb,
        var(--clinic-primary-soft) 70%,
        white
    );
}