/* ==========================================================================
   ALL DISCOUNT - ธีมแบรนด์ น้ำเงินกรมท่า + ทอง (ให้เข้ากับโลโก้)
   โหลดต่อจาก style.css

   เทมเพลตสร้างสีทั้งเว็บจาก "ตัวแปรกลาง" ใน style.css ไม่ได้เขียนสีตรง rule
   ไฟล์นี้จึงเปลี่ยนที่ตัวแปรเป็นหลัก แล้วค่อยเขียนทับเฉพาะจุดที่ตัวแปรเอื้อมไม่ถึง
   ========================================================================== */

:root,
html.light-mode,
html.dark-mode {
    /* ---- สเกลสีที่ดูดมาจากโลโก้ ---- */
    --ad-navy-900: #00112B;
    --ad-navy-800: #001A3D;
    --ad-navy-700: #002450;
    --ad-navy-600: #003066;
    --ad-navy-500: #004890;
    --ad-navy-400: #0A5FC0;
    --ad-sky-200: #9DC3EA;

    --ad-gold-100: #F7E9C0;
    --ad-gold-300: #F0D07A;
    --ad-gold-500: #D8A848;
    --ad-gold-600: #C1902F;
    --ad-gold-700: #A87C24;

    --ad-ink: #EAF2FB;        /* ตัวหนังสือบนพื้นน้ำเงิน */
    --ad-ink-dim: #A9C4E4;
    --ad-ink-dark: #14263F;   /* ตัวหนังสือบนการ์ดขาว */
    --ad-hairline: rgba(216, 168, 72, .22);
    --ad-hairline-soft: rgba(157, 195, 234, .16);

    /* ---- ตัวแปรกลางของเทมเพลต ---- */
    --finwallapp-theme-color: #D8A848;
    --finwallapp-theme-color-grad-1: #F0D07A;
    --finwallapp-theme-color-grad-2: #D8A848;
    --finwallapp-theme-color-grad-3: #A87C24;

    --finwallapp-theme-text: #ffffff;
    --finwallapp-theme-text-primary: #EAF2FB;
    --finwallapp-theme-text-secondary: #A9C4E4;
    --finwallapp-theme-text-secondary-light: #C7DAF0;
    --finwallapp-theme-bordercolor: rgba(216, 168, 72, .22);

    --finwallapp-header: transparent;
    --finwallapp-header-active: #001A3D;
    --finwallapp-footer: #001A3D;
    --finwallapp-sidebar: #002450;

    /* การ์ดคงพื้นขาวไว้ตามเดิม (CSS รายหน้าเขียนพื้นขาว/อักษรเข้มไว้เยอะ
       ถ้าเปลี่ยนการ์ดเป็นน้ำเงินจะได้การ์ดคนละสีปนกันทั้งเว็บ) */
    --finwallapp-card-color: #ffffff;
    --finwallapp-card-text: #14263F;

    --finwallapp-page-bg-1: #002450;
    --finwallapp-page-bg-2: #001A3D;
    --finwallapp-page-bg-3: #00112B;
    --finwallapp-page-text: #EAF2FB;
    --finwallapp-page-link: #F0D07A;
}

/* ==========================================================================
   1. พื้นหลังหน้าเว็บ
   ========================================================================== */

body,
.loader-wrap,
.theme-light-radial-gradient {
    background: var(--ad-navy-800);
    background: radial-gradient(ellipse at 30% 22%,
            var(--ad-navy-600) 0%,
            var(--ad-navy-800) 46%,
            var(--ad-navy-900) 100%);
    background-attachment: fixed;
    color: var(--ad-ink);
}

/* ตัวหนังสือที่ลอยอยู่บนพื้นน้ำเงินตรงๆ */
body > main,
main .row > .col,
h1, h2, h3, h4, h5, h6 {
    color: inherit;
}

.text-secondary {
    color: var(--ad-ink-dim) !important;
}

.text-muted {
    color: var(--ad-ink-dim) !important;
}

hr {
    border-color: var(--ad-hairline);
    opacity: 1;
}

/* ==========================================================================
   2. พื้นผิวสีขาว - บังคับให้ตัวหนังสือกลับมาเข้ม
      (body เป็นสีอ่อนแล้ว ถ้าไม่ดึงกลับ ตัวหนังสือในการ์ดจะขาวบนขาว)
   ========================================================================== */

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item,
.toast,
.popover,
.accordion-body,
.accordion-button,
.trust-strip,
.news-card,
.notification-card,
.empty-notifications,
.certi-item,
.info-badge,
.payout-info,
.trade-action,
#chart-container {
    color: var(--ad-ink-dark);
}

.card .text-secondary,
.modal-content .text-secondary,
.notification-card .text-secondary,
.trust-strip .text-secondary,
.certi-item .text-secondary,
.card .text-muted,
.modal-content .text-muted,
.notification-card .text-muted {
    color: #5A6B84 !important;
}

.card {
    border: 1px solid rgba(0, 42, 92, .10);
    box-shadow: 0 10px 30px rgba(0, 12, 32, .28);
}

/* ---- การ์ดที่พื้นเป็นน้ำเงินเข้มอยู่แล้ว ต้องยกเว้นจากกฎด้านบน ---- */
.card.bg-gradient-user-info,
.user-summary-card {
    color: #ffffff;
    border-color: rgba(216, 168, 72, .30);
}

.card.bg-gradient-user-info .text-secondary,
.card.bg-gradient-user-info .text-muted,
.user-summary-card .text-secondary,
.user-summary-card .text-muted {
    color: rgba(234, 242, 251, .72) !important;
}

.card.bg-gradient-user-info a,
.user-summary-card a {
    color: var(--ad-gold-300);
}

/* ==========================================================================
   3. ส่วนหัวของหน้า
   ========================================================================== */

.header {
    background: transparent !important;
    color: var(--ad-ink);
    border-bottom: 1px solid var(--ad-hairline);
}

.header a,
.header .text-color-theme {
    color: var(--ad-gold-300);
}

.header h5,
.header h1,
.header .logo-small h5 {
    color: var(--ad-ink) !important;
}

/* โลโก้เล็กบนหัวเว็บ - ใส่วงแหวนทองจางให้เข้ากับตัวโลโก้ */
.logo-small img {
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(216, 168, 72, .38), 0 4px 14px rgba(0, 12, 32, .45);
}

/* โลโก้ใหญ่ตอนโหลดหน้า */
.logo-wallet img {
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .5));
}

.loader-wrap .text-secondary {
    color: var(--ad-gold-300) !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
}

/* ==========================================================================
   4. เมนูซ้าย
   ========================================================================== */

.sidebar-wrap.sidebar-overlay .sidebar,
.sidebar-wrap.sidebar-pushcontent .sidebar,
.sidebar-wrap.sidebar-fullmenu {
    background-color: var(--ad-navy-700) !important;
    background-image: linear-gradient(180deg, #002E63 0%, #001A3D 100%);
    border-right: 1px solid var(--ad-hairline);
    color: var(--ad-ink);
}

.sidebar-wrap .sidebar,
.sidebar-wrap .sidebar .nav .nav-item .nav-link {
    color: var(--ad-ink);
}

.sidebar-wrap .sidebar hr {
    border-color: var(--ad-hairline);
    opacity: 1;
}

/* ==========================================================================
   5. ปุ่ม
   ========================================================================== */

.btn-default {
    background: linear-gradient(180deg, var(--ad-gold-300) 0%, var(--ad-gold-500) 55%, var(--ad-gold-600) 100%);
    border: 0;
    color: #2A1B00;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 6px 18px rgba(216, 168, 72, .28);
}

.btn-default:active,
.btn-default:hover,
.btn-default:focus {
    color: #2A1B00;
    background: linear-gradient(180deg, var(--ad-gold-100) 0%, var(--ad-gold-300) 55%, var(--ad-gold-500) 100%);
}

.btn-default:disabled {
    background: rgba(216, 168, 72, .28);
    color: rgba(42, 27, 0, .55);
    box-shadow: none;
}

/* ปุ่มรอง - โปร่งขอบทอง ใช้บนพื้นน้ำเงิน */
.btn-outline-theme,
.btn-light {
    background: rgba(240, 208, 122, .10);
    border: 1px solid var(--ad-gold-500);
    color: var(--ad-gold-300);
}

.btn-outline-theme:hover,
.btn-light:hover {
    background: rgba(240, 208, 122, .18);
    color: var(--ad-gold-100);
}

/* ==========================================================================
   6. ลิงก์
   ========================================================================== */

a {
    color: var(--ad-gold-300);
}

a:hover {
    color: var(--ad-gold-100);
}

.card a,
.modal-content a,
.notification-card a {
    color: var(--ad-navy-500);
}

.card a:hover,
.modal-content a:hover {
    color: var(--ad-navy-400);
}

/* ==========================================================================
   7. ฟอร์ม
      input ของเทมเพลตเป็นพื้นโปร่ง + เส้นใต้ ตัวมันเลยรับสีจากพื้นที่วางอยู่
      บนพื้นน้ำเงินต้องเป็นตัวอักษรสว่าง / ในการ์ดขาวต้องกลับมาเข้ม
   ========================================================================== */

.form-control {
    color: var(--ad-ink);
    border-color: var(--ad-hairline);
}

.form-control::placeholder {
    color: rgba(169, 196, 228, .55);
}

.form-control:focus {
    color: var(--ad-ink);
    border-color: var(--ad-gold-500);
    box-shadow: 0 1px 0 0 var(--ad-gold-500);
}

/* select เป็นข้อยกเว้น: Bootstrap ให้พื้นขาวเสมอ ต่างจาก input ที่เทมเพลต
   ทำพื้นโปร่ง ถ้าใช้ตัวหนังสือสว่างเหมือนกันจะกลายเป็นขาวบนขาว */
.form-select {
    color: var(--ad-ink-dark);
    background-color: #ffffff;
    border-color: rgba(0, 42, 92, .18);
}

.form-select:focus {
    color: var(--ad-ink-dark);
    border-color: var(--ad-gold-500);
    box-shadow: 0 0 0 .18rem rgba(216, 168, 72, .25);
}

.form-floating > .form-select ~ label {
    color: #5A6B84;
}

/* ไอคอนปฏิทิน/นาฬิกาของเบราว์เซอร์เป็นสีเข้ม จมหายบนพื้นน้ำเงิน
   จึงกลับสีให้สว่าง ยกเว้นตอนอยู่ในการ์ดขาวที่พื้นยังสว่างอยู่แล้ว */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(88%) sepia(10%) saturate(700%) hue-rotate(185deg) brightness(103%);
    cursor: pointer;
}

.card input[type="date"]::-webkit-calendar-picker-indicator,
.card input[type="time"]::-webkit-calendar-picker-indicator,
.card input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.modal-content input[type="date"]::-webkit-calendar-picker-indicator,
.modal-content input[type="time"]::-webkit-calendar-picker-indicator {
    filter: none;
}

.form-group.form-floating > label,
.form-control-label,
label {
    color: var(--ad-ink-dim);
}

/* ในการ์ด / โมดัล พื้นเป็นสีขาว */
.card .form-control,
.card .form-select,
.modal-content .form-control,
.modal-content .form-select {
    color: var(--ad-ink-dark);
    border-color: rgba(0, 42, 92, .18);
}

.card .form-control::placeholder,
.modal-content .form-control::placeholder {
    color: #93A3B8;
}

.card .form-group.form-floating > label,
.card .form-control-label,
.card label,
.modal-content .form-control-label,
.modal-content label {
    color: #5A6B84;
}

/* ==========================================================================
   8. แถบเมนูล่าง (โครงสีอยู่ใน footer.php ด้วย)
   ========================================================================== */

.footer {
    background: linear-gradient(180deg, #002450 0%, #00112B 100%) !important;
    border-top: 1px solid var(--ad-hairline);
    box-shadow: 0 -6px 24px rgba(0, 8, 22, .55);
}

/* ==========================================================================
   9. จิปาถะ
   ========================================================================== */

.badge.bg-theme,
.bg-theme {
    background-color: var(--ad-gold-500) !important;
    color: #2A1B00 !important;
}

.text-theme,
.text-color-theme {
    color: var(--ad-gold-300) !important;
}

.divider,
.border,
.border-top,
.border-bottom {
    border-color: var(--ad-hairline) !important;
}

/* ตารางที่วางบนพื้นน้ำเงินโดยตรง */
main > .container-fluid > .row > .col table:not(.card table) {
    color: var(--ad-ink);
}

.table {
    --bs-table-color: inherit;
    --bs-table-striped-color: inherit;
}

/* scrollbar ให้เข้าโทน */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ad-navy-900);
}

::-webkit-scrollbar-thumb {
    background: rgba(216, 168, 72, .38);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(216, 168, 72, .58);
}

/* เลือกข้อความ */
::selection {
    background: rgba(216, 168, 72, .32);
    color: #ffffff;
}

/* ==========================================================================
   10. หน้า login / สมัครสมาชิก / รีเซ็ตรหัสผ่าน
       เดิมฟอร์มลอยอยู่กลางพื้นน้ำเงินโล่งๆ ไม่มีอะไรยึดสายตา
       จึงจับใส่การ์ดพร้อมโลโก้ และเติมแสงเรืองจางๆ ให้จอกว้างไม่ดูว่างเปล่า
   ========================================================================== */

body[data-page="signin"]::before,
body[data-page="signup"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 42% at 50% 20%, rgba(216, 168, 72, .12) 0%, rgba(216, 168, 72, 0) 70%),
        radial-gradient(72% 55% at 50% 104%, rgba(10, 95, 192, .22) 0%, rgba(10, 95, 192, 0) 70%);
}

body[data-page="signin"] > main,
body[data-page="signup"] > main {
    position: relative;
    z-index: 1;
}

.auth-card {
    max-width: 430px;
    margin: 0 auto;
    padding: 34px 30px 28px;
    border-radius: 22px;
    background: linear-gradient(180deg, #063062 0%, #021B3D 100%);
    border: 1px solid rgba(216, 168, 72, .28);
    box-shadow:
        0 26px 60px rgba(0, 8, 22, .55),
        inset 0 1px 0 rgba(255, 255, 255, .07);
}

.auth-brand {
    text-align: center;
    margin-bottom: 20px;
}

.auth-brand-logo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(216, 168, 72, .45), 0 10px 26px rgba(0, 8, 22, .6);
}

.auth-brand-name {
    margin: 14px 0 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .13em;
    color: #ffffff;
}

.auth-title {
    margin: 0 0 20px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ad-ink-dim);
}

/* ช่องกรอกในการ์ด: เปลี่ยนจากเส้นใต้เปล่าๆ เป็นกล่องมีพื้น
   พื้นเป็นสีทึบ (ไม่ใช่ rgba) เพราะต้องเอาไปใช้ซ้ำกับ autofill ให้สีตรงกันเป๊ะ */
.auth-card .form-floating > .form-control {
    background-color: #0B2E5B;
    border: 1px solid rgba(157, 195, 234, .22);
    border-radius: 12px;
    padding-left: 14px;
    padding-right: 14px;
    color: var(--ad-ink);
}

.auth-card .form-floating > .form-control:focus {
    background-color: #0E3568;
    border-color: var(--ad-gold-500);
    box-shadow: 0 0 0 3px rgba(216, 168, 72, .15);
}

.auth-card .form-floating > label {
    padding-left: 14px;
    padding-right: 14px;
    transform-origin: left center;
    color: rgba(169, 196, 228, .88);
}

/* rule เดิมของเทมเพลตรีเซ็ต padding ซ้าย-ขวาเป็น 0 ตอน label ลอยขึ้น
   ต้องใส่กลับ ไม่งั้นตัวหนังสือจะไปชิดขอบกล่อง */
.auth-card .form-floating > .form-control:focus ~ label,
.auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
    padding: 5px 14px var(--finwallapp-padding) 14px;
    transform: scale(.85) translateY(-.5rem) translateX(.1rem);
    transform-origin: left center;
}

/* Chrome autofill ยัดพื้นหลังของตัวเองทับ ทำให้ตัวหนังสือกับ label จมหาย
   กันด้วยการวาดเงา inset สีเดียวกับพื้นช่องกรอก แล้วบังคับสีตัวอักษร */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--ad-ink);
    -webkit-box-shadow: 0 0 0 1000px #0B2E5B inset;
    box-shadow: 0 0 0 1000px #0B2E5B inset;
    caret-color: var(--ad-ink);
    border-radius: 12px;
    transition: background-color 100000s ease-in-out 0s;
}

.auth-card .form-floating > .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0E3568 inset, 0 0 0 3px rgba(216, 168, 72, .15);
    box-shadow: 0 0 0 1000px #0E3568 inset, 0 0 0 3px rgba(216, 168, 72, .15);
}

.auth-card .btn-default {
    border-radius: 12px;
    padding: .78rem 1rem;
    font-size: 1rem;
}

.auth-alt {
    margin: 18px 0 0;
    text-align: center;
    font-size: .92rem;
    color: var(--ad-ink-dim);
}

.auth-alt a {
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: 26px 20px 22px;
        border-radius: 18px;
    }

    .auth-brand-logo {
        width: 74px;
        height: 74px;
    }

    .auth-brand-name {
        font-size: 1.15rem;
    }
}