.widget-home {
    height: 160px;
}
.nav-profile-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.hamburger-button {
    background-color: #344767; 
    border-color: #344767; 
    box-shadow: 3px 3px 5px 0px rgb(0 0 0 / 25%);
}
.nav.metismenu li i {
    font-size: 18px;
}
.btn-change-branch {
    color: #7c899a !important;
    padding-top: 18px !important;
}
.scanQRcode{
    font-size: 25px;
    margin-right: 10px;
    color: #7c899a;
    cursor: pointer;
}
.scanWork {
    width: 190px !important;
    border: none;
    background: transparent;
    border-bottom: dashed 1px #7c899a;
    margin-right: 10px;color: #7c899a;
    border-radius: 0px !important;
    padding: 8px 12px 4px 12px !important;
}
.nav-logout {
    padding-bottom: 0px;
    color: #7c899a;
}
.row-header {
    margin-bottom: 80px !important;
}
.col-header-menu {
    padding-top: 33px;
}
.btn-header-menu {
    margin-bottom: 10px;
}
.row-widget {
    margin-left: -5px;
    margin-right: -5px;
    margin-top: -70px;
}
.widget-style1 {
    border-radius: 10px;
    /*backdrop-filter: saturate(200%) blur(30px);*/
    background-color: hsla(0,0%,100%,.8) !important;
    box-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.9),0 20px 27px 0 rgba(0,0,0,.05) !important;
    /*background: rgba(255, 255, 255, .15);*/
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .25);
}
.ibox-icon-filter {
    margin-top: 1px;
    margin-right: 15px;
    font-size: 18px;
    margin-left: 10px;
}
.ibox-image-nav-work {
    margin-bottom: -10px;
    border-radius: .428rem .428rem 0 0 !important;
}
.ibox-image-nav-work img {
    width: 100%;
    height: 270px;
    border-radius: 15px 15px 0 0;
    padding: 10px;
    object-fit: fill;
}
.ibox-detail-nav-work {
    border-radius: 0px 0px .428rem .428rem !important;
}
.btn-nav-work {
    font-size: 20px;
    padding: 7px 12px;
    border-radius: 50%;
    border: 4px solid;
}
.title-nav-work {
    font-weight: bold;
    font-size: 21px;
}
.icon-nav-work {
    background-color: gray;
    box-shadow: -2px -2px 4px 0px #fff, 5px 5px 5px 0px rgba(0,0,0,0.25);
    position: initial;
    margin-bottom: 15px;
}
#nav_work hr {
    border-top: 2px dashed rgba(0,0,0,.1);
    margin-top: 40px;
    margin-bottom: 20px;
}
.work-outstanding-amount {
    margin-top: 15px !important;
    margin-bottom: 0px !important;
    font-size: 35px;
    font-weight: bold;
}
.work-total-amount {
    margin-top: 15px !important;
    margin-bottom: 0px !important;
}
.work-image-other {
    border-radius: .25rem;
    box-shadow: -2px -2px 4px 0px #fff, 5px 5px 5px 0px rgba(0,0,0,0.25);
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.fs-10 {
    font-size:10px !important;
}
.fs-11 {
    font-size:11px !important;
}
.fs-12 {
    font-size:12px !important;
}
.fs-13 {
    font-size:13px !important;
}
.fs-14 {
    font-size:14px !important;
}
.fs-15 {
    font-size:15px !important;
}
.fs-16 {
    font-size:16px !important;
}
.fs-17 {
    font-size:17px !important;
}
.fs-18 {
    font-size:18px !important;
}
.fs-19 {
    font-size:19px !important;
}
.fs-20 {
    font-size:20px !important;
}
.fs-21 {
    font-size:21px !important;
}
.fs-22 {
    font-size:22px !important;
}
.fs-23 {
    font-size:23px !important;
}
.fs-24 {
    font-size:24px !important;
}
.fs-25 {
    font-size:25px !important;
}
.fs-26 {
    font-size:26px !important;
}
.fs-27 {
    font-size:27px !important;
}
.fs-28 {
    font-size:28px !important;
}
.fs-29 {
    font-size:29px !important;
}
.fs-30 {
    font-size:30px !important;
}
.fs-31 {
    font-size:31px !important;
}
.fs-32 {
    font-size:32px !important;
}
.fs-33 {
    font-size:33px !important;
}
.fs-34 {
    font-size:34px !important;
}
.fs-35 {
    font-size:35px !important;
}
.fs-36 {
    font-size:36px !important;
}
.fs-37 {
    font-size:37px !important;
}
.fs-38 {
    font-size:38px !important;
}
.fs-39 {
    font-size:39px !important;
}
.fs-40 {
    font-size:40px !important;
}
.heading-work {
    margin-bottom: 10px;
}
.heading-work-user {
    display: inline-block;
}
.heading-history {
    display: inline-block;
    text-align: right;
    padding: 0px;
    margin-top: 20px;
    color:white;    
}
.heading-history i {
    font-size: 58px;
}
.heading-history-detail {
    padding: 0px 15px 0px 15px;
    color:white;
}
.heading-history-detail h2 {
    margin-bottom: 0px;
    margin-top: 5px;
    color:white;
}
.status-icon {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 20px;
}
.d-content {
    display: contents !important;
}
.work-col-1 {
    margin-bottom: 15px;
}
.work-col-2 {
    margin-top:-8px;
    margin-bottom: 15px;
}
.work-col-3 {
    margin-top:-8px;
    margin-bottom: 15px;
}
.expends-number {
    margin-top:-8px;
    margin-bottom: 15px;
}
.btn-EditComment {
    border-radius: 50%;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 0;
}
.label-tab {
    border-radius:0.25rem;
    padding: 1px 8px;
    font-size: 12px !important;
    font-weight: 400;
    font-family: 'Prompt', sans-serif;
    margin-left: 5px;
}
.status-text {
    font-size: 13px; 
    color: #676a6c;
    margin-top: 10px;
    margin-left: 11px;
    writing-mode: vertical-lr;
    height: max-content;
}
.timeline-status {
    cursor: pointer;
    box-shadow: -2px -2px 4px 0px #fff, 5px 5px 5px 0px rgba(0,0,0,0.25);
}
.margin {
    margin-right: 35px;
}
.work-incomplete {
    border-left: dotted 4px gray;
    padding-left: 15px;
}
.work-complete {
    border-left: dotted 4px #1ab394;
    padding-left: 15px;
}
.profile-image img {
    width: 105px;
    height: 105px;
}
.profile-info {
    margin-left: 145px;
}
#map {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 4px !important;
}
#signatureArea {
    border: 2px solid #ccc;
    margin: 0 auto;
    display: block;
}
.work-row-blue {
    border-left: 10px solid #0F6CBD !important;
}
.work-row-yellow {
    border-left: 10px solid #f8ac59 !important;
}
.work-row-red {
    border-left: 10px solid #ed5565 !important;
}
.work-row-green {
    border-left: 10px solid #1ab394 !important;
}
.row-work.active {
    background-color: #0F6CBD25;
    border-width: 3px;
    border-style: dashed;
    border-color: #0F6CBD;
}
.row-work.work-row-yellow.active {
    background-color:rgba(248, 172, 89, 0.145) !important;
    border-color: #f8ac59 !important;
}
.row-work.work-row-red.active {
    background-color:rgba(237, 86, 101, 0.145) !important;
    border-color: #ed5565 !important;
}
.row-work.work-row-green.active {
    background-color: rgba(26, 179, 148, 0.145) !important;
    border-color: #1ab394 !important;
}
.btn-set-branch {
    background: #344767 !important;
    border-color: #344767 !important;
}
.btn-set-branch:hover:active:focus {
    background: #344767 !important;
    border-color: #344767 !important;
}
.row-work {
    border-left: 10px solid #fff;
}
.scanWork:focus {
    background: transparent !important;
}
@media (max-width: 351px), (min-width: 380px) and (max-width: 470px), (min-width: 920px) and (max-width: 1040px) {
    .txt-logout {
        display: none;
    }
}
@media screen and (min-width: 351px) and (max-width: 380px) {
    .nav.navbar-top-links li.li-logout {
        display: none;
    }
}
@media screen and (max-width: 370px) {
    .txtAddActivity {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    .div-declare {
        display: block !important;
    }
    .div-signature {
        display: none;
    }
    div.divCalendar .fc-header-toolbar {
        font-size: 7px;
    }
}
@media screen and (min-width: 481px) and (max-width: 960px) {    
    div.divCalendar .fc-header-toolbar {
        font-size: 10px;
    }
}
@media screen and (max-width: 500px) {
    .txtSpareService {
        display: none;
    }
    .txtAddService {
        display: none;
    }
    .txtPayment {
        display: none;
    }
    .work-col-1 .profile-image {
        display: none;
    }
    .work-col-1 .profile-info {
        margin-left: 0;
    }
    .work-col-1 .profile-info .product-detail {
        display: none;
    }
}
@media screen and (max-width: 530px) {
    .txtAddSparepart {
        display: none;
    }
}
@media screen and (max-width: 620px) {
    .txtEditCustomer {
        display: none;
    }
    .txtEditProduct {
        display: none;
    }
    .txtTabInModal {
        display: none;
    }
    .txtTabIndex {
        display: none;
    }
    .txtClear, .txtNewSparePart {
        display: none;
    }
}
@media screen and (max-width: 690px) {
    .colCalendar {
        display: none;
    }
}
@media screen and (max-width: 730px) {
    .createInfo {
        display: none;
    }
}
@media screen and (max-width: 880px) {
    .headingColRight, .title-sparepart-list-detail {
        display: none;
    }
}
@media screen and (max-width: 960px) {
    .txtDowload {
        display: none;
    }
    .txtAddImg {
        display: none;
    }
}
@media screen and (max-width: 992px) {
    .header-user-detail {
        display: none;
    }
}
@media screen and (max-width: 1199px) {
    .title-sparepart-list {
        color: #344767 !important;
    }
}
@media screen and (max-width: 1340px) {
    #footer_data {
        display: none;
    }
}
.border-dashed {
    border: dashed 1px #ddd;
}
.form-group label {
    font-weight: 700;
}
.label-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 23px;      /* ปรับได้ตามใจ */
    height: 23px;     /* ให้เท่ากับ width */
}
.widget-work-form {
    border: 2px solid;
}
.btn-modal-submit {
    color: #fff;
    background-color: #344767;
    border-color: #344767;
    width: 80%;
}
.btn-modal-submit:hover {
    color: #fff;
    background-color: #25324a;
    border-color: #25324a;
}
.btn-modal-close {
    color: #fff;
    background-color: #ed5565;
    border-color: #ed5565;
    width: 20%;
}
.btn-modal-close:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}
.new-work-code {
    font-weight: bold;
    font-size: 35px;
}
.wd_footer {    
    padding-bottom: 9px;
}
.text-blue {
    color: #344767 !important;
}
.text-green {
    color: #1ab394 !important;
}
select[readonly] {
    pointer-events: none;
}
.user-col-branch-service {
    border-right: 4px dotted white;
    display: table;
    margin-bottom: 20px;
}
#smallCalendar .heading .row {
    min-height: 35px;
}
.countToday {
    margin: 0 4px;
    padding: 0px 8px 0px 8px;
    background-color: #f8ac59;
    color: #FFFFFF;
    border-radius: 5px;
}
.countTomorrow {
    margin: 0 4px;
    padding: 0px 8px 0px 8px;
    background-color: #344767;
    color: #FFFFFF;
    border-radius: 5px;
}
div.box-activity li.list-label-primary.show {
    border-left: 7px solid #1ab394;
    padding-left: 17px;
}
div.box-activity li.list-label-warning.show {
    border-left: 7px solid #f8ac59;
    padding-left: 17px;
}
div.box-activity li.list-label-danger.show {
    border-left: 7px solid #ed5565;
    padding-left: 17px;    
}
.txt-widget {
    cursor: pointer;
}
.txt-widget.active {
    color : #0F6CBD !important;
    text-decoration: underline dashed 3px;
    text-underline-offset: 8px;
}
.row-sparepart-red.active {
    background-color: rgba(237, 86, 101, 0.145);
    border: 3px dashed #ed5565;
}
.row-sparepart-green.active {
    background-color: rgba(26, 179, 148, 0.145);
    border: 3px dashed #1ab394;
}
.btn-create {
    background: rgba(255,255,255,.15);
    color: #fff;
    border-radius: 999px;
    padding: .6rem 1.2rem;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.25);
    transition: all .25s ease;
}
.btn-create:hover {
    background: #fff;
    color: #0F6CBD;
}
/*.widget-style1 {
    background: rgba(255,255,255,0.85);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.widget-style1:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
}*/
/* Loading เครื่องซักผ้าแบบ overlay */
/*.Loading {
    width: 100%;
    height: 240px;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}*/
/*.Loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 10;
}
.Loading.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.loader {
    width: 120px;
    height: 150px;
    background-color: #344767;
    background-repeat: no-repeat;
    background-image: linear-gradient(#ddd 50%, #bbb 51%),
                      linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd),
                      radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
                      radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
                      radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%);
    background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;
    background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;
    position: relative;
    border-radius: 6%;
    animation: shake 3s ease-in-out infinite;
    transform-origin: 50% 95%;
}
.loader:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 100%;
    width: 7px;
    height: 5px;
    background: #aaa;
    border-radius: 0 0 4px 4px;
    box-shadow: 102px 0 #aaa;
}
.loader:after {
    content: "";
    position: absolute;
    width: 95px;
    height: 95px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 20px;
    background-color: #bbdefb;
    background-image: 
                      linear-gradient( to right, #0004 0%, #0004 49%, #0000 50%, #0000 100% ),
                      linear-gradient(135deg, #64b5f6 50%, #607d8b 51%);
    background-size: 30px 100%, 90px 80px;
    border-radius: 50%;
    background-repeat: repeat, no-repeat;
    background-position: 0 0;
    box-sizing: border-box;
    border: 10px solid #DDD;
    box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;
    animation: spin 3s ease-in-out infinite;
}
.loader,
.loader:after {
    will-change: transform;
}
.Loading:not(.show) .loader,
.Loading:not(.show) .loader:after {
    animation-play-state: paused;
}
@keyframes spin {
    0% { transform: rotate(0deg) }
    50% { transform: rotate(360deg) }
    75% { transform: rotate(750deg) }
    100% { transform: rotate(1800deg) }
}*/
/*@keyframes shake {
    65%, 80%, 88%, 96% { transform: rotate(0.5deg) }
    50%, 75%, 84%, 92% { transform: rotate(-0.5deg) }
    0%, 50%, 100%  { transform: rotate(0) }
}*/
/*@keyframes shake {
    60%, 80%, 95% { transform: translateX(1.8px); }
    70%, 90% { transform: translateX(-1.8px); }
    0%, 100% { transform: translateX(0); }
}*/
/* ===== Fullscreen blur overlay ===== */
.Loading {
    position: absolute;
    inset: 0;
    border-radius: 10px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /*background: rgba(255,255,255,.35);*/
    background: #f9f9f935;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 9999;
}
.Loading.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* ===== Logo loader ===== */
.loader {
    width: 125px;
    height: 125px;

    background-image: url("../img/logo.png");
    background-color: #0F6CBD;
    background-size: 80%;
    /*background-size: contain;*/
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 50%;
    background-color: rgba(255,255,255,.55);

    box-shadow:
        0 20px 40px rgba(0,0,0,.18),
        inset 0 0 0 1px rgba(255,255,255,.45);

    animation: logoFloat 1.8s ease-in-out infinite;
    will-change: transform, opacity;
}
.Loading:not(.show) .loader {
    animation-play-state: paused;
}
/* ===== Subtle floating animation ===== */
@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: .9;
    }
    50% {
        transform: translateY(-6px) scale(1.03);
        opacity: 1;
    }
}
/* ═══════════════════════════════════════════════════════
   Toastr Glassmorphism Theme — Frosted Glass Style
   ═══════════════════════════════════════════════════════ */

/* ─── Container ─── */
#toast-container {
    margin-top: 12px;
}

/* ─── Base Toast — Frosted Glass ─── */
#toast-container > div {
    min-width: 360px;
    max-width: 430px;
    padding: 10px 2px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    opacity: 1 !important;
    overflow: hidden;
    position: relative;

    /* Glassmorphism core */
    background: rgba(255,255,255,.55) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        0 8px 32px rgba(0,0,0,.08),
        0 2px 8px rgba(0,0,0,.04),
        inset 0 1px 0 rgba(255,255,255,.6) !important;

    /* Entry animation */
    -webkit-animation: glassSlideIn .35s cubic-bezier(.16,1,.3,1);
    animation: glassSlideIn .35s cubic-bezier(.16,1,.3,1);
}

@-webkit-keyframes glassSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(40px) scale(.96);
        transform: translateX(40px) scale(.96);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1);
    }
}
@keyframes glassSlideIn {
    from { opacity: 0; transform: translateX(40px) scale(.96); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ─── Accent bar (left edge) ─── */
#toast-container > div::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
}
#toast-container > .toast-success::before {
    background: linear-gradient(180deg, #1ab394, #34d399);
    box-shadow: 0 0 12px rgba(26,179,148,.4);
}
#toast-container > .toast-info::before {
    background: linear-gradient(180deg, #3b82f6, #60a5fa);
    box-shadow: 0 0 12px rgba(59,130,246,.4);
}
#toast-container > .toast-warning::before {
    background: linear-gradient(180deg, #f59e0b, #fbbf24);
    box-shadow: 0 0 12px rgba(245,158,11,.4);
}
#toast-container > .toast-error::before {
    background: linear-gradient(180deg, #ed5565, #f87171);
    box-shadow: 0 0 12px rgba(237,85,101,.4);
}

/* Error shake */
#toast-container > .toast-error {
    -webkit-animation: glassSlideIn .35s cubic-bezier(.16,1,.3,1), glassShake .5s .35s ease-in-out;
    animation: glassSlideIn .35s cubic-bezier(.16,1,.3,1), glassShake .5s .35s ease-in-out;
}
@-webkit-keyframes glassShake {
    0%, 100% { -webkit-transform: translateX(0); }
    25%      { -webkit-transform: translateX(-5px); }
    50%      { -webkit-transform: translateX(5px); }
    75%      { -webkit-transform: translateX(-3px); }
}
@keyframes glassShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    50%      { transform: translateX(5px); }
    75%      { transform: translateX(-3px); }
}

/* ─── Type-specific glass tint ─── */
#toast-container > .toast-success {
    background: rgba(236,253,245,.65) !important;
    border-color: rgba(26,179,148,.2) !important;
}
#toast-container > .toast-info {
    background: rgba(239,246,255,.65) !important;
    border-color: rgba(59,130,246,.2) !important;
}
#toast-container > .toast-warning {
    background: rgba(255,251,235,.65) !important;
    border-color: rgba(245,158,11,.2) !important;
}
#toast-container > .toast-error {
    background: rgba(254,242,242,.65) !important;
    border-color: rgba(237,85,101,.2) !important;
}

/* ─── Title ─── */
#toast-container > div .toast-title {
    font-size: 13px;
    font-weight: 700;
    padding: 10px 40px 10px 18px;
    margin: 0;
    line-height: 1;
    letter-spacing: -.2px;
}
#toast-container > .toast-success .toast-title { color: #065f46; }
#toast-container > .toast-info .toast-title    { color: #1e40af; }
#toast-container > .toast-warning .toast-title { color: #92400e; }
#toast-container > .toast-error .toast-title   { color: #991b1b; }

/* ─── Message (Custom HTML) ─── */
#toast-container > div .toast-message {
    padding: 12px 18px 14px;
    font-size: 13px;
    color: #344767;
    line-height: 1;
}

/* ═══════ Custom Layout Inside Message ═══════ */
.noti-toast {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 12px;
}

/* ─── Icon — Frosted pill ─── */
.noti-toast__icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    position: relative;
}
/* Glass shine overlay on icon */
.noti-toast__icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,.35), transparent);
    pointer-events: none;
}

.toast-success .noti-toast__icon { background: linear-gradient(135deg, #1ab394, #34d399); box-shadow: 0 4px 14px rgba(26,179,148,.35); }
.toast-info    .noti-toast__icon { background: linear-gradient(135deg, #3b82f6, #60a5fa); box-shadow: 0 4px 14px rgba(59,130,246,.35); }
.toast-warning .noti-toast__icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 4px 14px rgba(245,158,11,.35); }
.toast-error   .noti-toast__icon { background: linear-gradient(135deg, #ed5565, #f87171); box-shadow: 0 4px 14px rgba(237,85,101,.35); }

/* ─── Body ─── */
.noti-toast__body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
}

.noti-toast__title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.toast-success .noti-toast__title { color: #1ab394; }
.toast-info    .noti-toast__title { color: #3b82f6; }
.toast-warning .noti-toast__title { color: #d97706; }
.toast-error   .noti-toast__title { color: #ed5565; }

.noti-toast__msg {
    font-size: 13px;
    color: #344767;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.noti-toast__time {
    font-size: 11px;
    color: #8392ab;
    margin-top: 6px;
}
.noti-toast__time i {
    margin-right: 3px;
    font-size: 10px;
}

/* ─── Close Button — Frosted circle ─── */
#toast-container > div button.toast-close-button {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    font-size: 18px !important;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #8392ab;
    text-shadow: none;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    cursor: pointer;
}
#toast-container > div:hover button.toast-close-button {
    opacity: 1;
}
#toast-container > div button.toast-close-button:hover {
    background: rgba(255,255,255,.9);
    color: #344767;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/* ─── Progress Bar — Glass style ─── */
#toast-container > div .toast-progress {
    height: 3px;
    border-radius: 0 0 16px 16px;
    opacity: .35;
}
#toast-container > .toast-success .toast-progress { background: linear-gradient(90deg, #1ab394, #34d399); }
#toast-container > .toast-info .toast-progress    { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
#toast-container > .toast-warning .toast-progress { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
#toast-container > .toast-error .toast-progress   { background: linear-gradient(90deg, #ed5565, #f87171); }

/* ─── Hover — Lift & brighten ─── */
#toast-container > div:hover {
    background: rgba(255,255,255,.72) !important;
    box-shadow:
        0 12px 40px rgba(0,0,0,.12),
        0 4px 12px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

/* ─── Stacking gap ─── */
#toast-container > div + div {
    margin-top: 8px;
}

/* ─── Responsive ─── */
@media (max-width: 480px) {
    #toast-container {
        margin-top: 8px;
        right: 8px !important;
        left: 8px !important;
    }
    #toast-container > div {
        min-width: auto;
        max-width: none;
        width: 100%;
        border-radius: 14px !important;
    }
    .noti-toast__icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 14px;
    }
}

/* ─── Dark mode support (optional) ─── */
@media (prefers-color-scheme: dark) {
    #toast-container > div {
        background: rgba(30,41,59,.65) !important;
        border-color: rgba(255,255,255,.1) !important;
        box-shadow:
            0 8px 32px rgba(0,0,0,.3),
            inset 0 1px 0 rgba(255,255,255,.08) !important;
    }
    #toast-container > .toast-success { background: rgba(6,78,59,.45) !important; }
    #toast-container > .toast-info    { background: rgba(30,58,138,.45) !important; }
    #toast-container > .toast-warning { background: rgba(120,53,15,.45) !important; }
    #toast-container > .toast-error   { background: rgba(127,29,29,.45) !important; }

    .noti-toast__msg { color: #e2e8f0; }
    .noti-toast__time { color: #94a3b8; }

    #toast-container > div .toast-title,
    .noti-toast__title { color: #e2e8f0 !important; }

    #toast-container > div button.toast-close-button {
        color: #94a3b8;
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.1);
    }
    #toast-container > div button.toast-close-button:hover {
        background: rgba(255,255,255,.15);
        color: #e2e8f0;
    }

    #toast-container > div:hover {
        background: rgba(30,41,59,.8) !important;
    }
}