/* =================================================
   LIGHT MODE CSS - ใช้สำหรับโหมดสว่างเท่านั้น
   ================================================= */

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 1) inset !important;
    -webkit-text-fill-color: #333 !important;
}

.form_search{
    background: transparent;
    width:100%;
    height:30px;
    outline: none;
    border:none;
    color:#004080;
}
.form_search::placeholder{
    color:#808080;
}

.bg_search{
    height:50px; 
    background: #ffffff;
    padding:3px;
    border-radius:13px;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
}
.bg_search_in{
    height:100%;
    background: linear-gradient(35deg, rgba(245, 245, 245, 1) 0%, rgba(219, 219, 219, 1) 30%, rgba(232, 232, 232, 1) 30%);
    background-size: 120% 120%;
    background-position:right;
    padding:5px 8px;
    border-radius:10px;
    transition: background 0.28s ease;
}
.bg_search_in:hover{
    background-position:left;
}

/* BTN MENU - Light Mode */
.btn_menu{
    position:relative;
    display: inline-block;
    overflow: hidden;
    width:210px;
    height:140px;
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 80%);
    border:1px solid rgba(243, 243, 243, 1);
    padding:3px;
    box-shadow: 0 2px 6px rgba(16,24,40,0.04);
    border-radius: 30px;
    margin:0 2px 2px 0;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-radius .28s ease, background .28s ease, box-shadow .35s ease, width .28s ease, height .28s ease;
}
.btn_menu:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(33,140,251,0.12);
}
.btn_menu.list-view {
    border-radius: 20px;
    width:308px;
    height:70px;
}

.btn_menu_in{
    width:100%;
    height:100%;
    background: linear-gradient(180deg, rgba(245, 250, 255,1) 0%, rgba(255, 255, 255,1) 100%);
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    border-radius: 27px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    transition: background 0.28s ease, box-shadow 0.28s ease, border-radius .28s ease;
}
.btn_menu_in.list-view {
    border-radius: 17px;
}

.btn_menu_in:hover{
    background: linear-gradient(180deg, rgba(235, 245, 255,1) 0%, rgba(248, 252, 255,1) 100%);
    box-shadow: 0 12px 30px rgba(33,140,251,0.15);
}

.icon_pic{
    position:relative;
    max-height:60px;
    max-width:90px;
    z-index:1000;
}
.icon_pic.list-view {
    max-width: 60px;
    max-height: 60px;
}

.text_btn_topic{
    position:relative;
    z-index:1000;
    font-size:12pt;
    font-family: Poppins-Medium;
    background: linear-gradient(90deg, #218cfb 0%, #df47a5 50%, #ff850b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.text_btn_detail{
    position:relative;
    z-index:1000;
    color:#006699;
    font-size:10pt;
    font-family: Kanit-Light;
    transition: background-color 5000s ease-in-out 0s;
}

input::placeholder {
    color: #808080;
    font-size:12pt;
    font-family: IBMPlexSansThai-Light;
}

.icon_other_user_hover .user_name {
    color: #ffffff;
}

.input-login{
    color:#333333;
}

.bg_input_login{
    background:rgba(255, 255, 255, 0.9); 
    border-bottom:2px solid rgba(45, 136, 255, 1);
    border-top:2px solid rgba(200, 200, 200, 0.9);
    border-left:2px solid rgba(200, 200, 200, 0.9);
    border-right:2px solid rgba(200, 200, 200, 0.9);
}

.btn_other_account{
    color:#ffffff;
}

.other_account_btn{
    color:rgba(255,255,255,0.6);
}
.other_account_btn:hover{
    color: #ffffff;
}

.icon_lock{
    height:30px; width:30px; border-radius:50%; background:rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:center;
}

.in_clock{
    color:#ffffff;
}

.in_clock_date{
    color:#ffffff;
}

.form_search{
    background: transparent;
    width:100%;
    height:30px;
    outline: none;
    border:none;
    color:#004080;
}
.form_search::placeholder{
    color:#808080;
}

.bg_search{
    height:50px; 
    background: #ffffff;
    padding:3px;
    border-radius:13px;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
}

.bg_search_in{
    height:100%;
    background: linear-gradient(35deg, rgba(245, 245, 245, 1) 0%, rgba(219, 219, 219, 1) 30%, rgba(232, 232, 232, 1) 30%);
    background-size: 120% 120%;
    background-position:right;
    padding:5px 8px;
    border-radius:10px;
    transition: background 0.28s ease;
}
.bg_search_in:hover{
    background-position:left;
}

/* BTN MENU - Light Mode */
.btn_menu{
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,1) 80%);
    border:1px solid rgba(243, 243, 243, 1);
}

.btn_menu_in{
    background: linear-gradient(180deg, rgba(245, 250, 255,1) 0%, rgba(255, 255, 255,1) 100%);
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.btn_menu_in:hover{
    background: linear-gradient(180deg, rgba(235, 245, 255,1) 0%, rgba(248, 252, 255,1) 100%);
    box-shadow: 0 12px 30px rgba(33,140,251,0.15);
}

.text_btn_topic{
    background: linear-gradient(90deg, #218cfb 0%, #df47a5 50%, #ff850b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.text_btn_detail{
    color:#006699;
}