/* ===============================
   DARK MODE v3
   Auto: prefers-color-scheme
   Override:
      html.dark-mode
      html.light-mode
==================================*/

:root{
--d-bg:#111827;
--d-card:#111827;
--d-card2:#1f2937;
--d-border:#2b3648;
--d-text:#e5e7eb;
--d-muted:#94a3b8;
--d-primary:#3b82f6;
--d-primary2:#6366f1;
--d-success:#22c55e;
--d-danger:#fb7185;
--d-purple:#8b5cf6;
--d-shadow:0 12px 30px rgba(0,0,0,.45);
}

@media (prefers-color-scheme:dark){
html:not(.light-mode){color-scheme:dark;}
html:not(.light-mode) body,
html:not(.light-mode) .login-page{background:var(--d-bg);color:var(--d-text);}
html:not(.light-mode) :is(table,.login-box,.static-card,.static-box){background:var(--d-card);color:var(--d-text);border-color:var(--d-border);box-shadow:var(--d-shadow);}
html:not(.light-mode) :is(td,th,.static-table td,.static-table th){border-color:var(--d-border);}
html:not(.light-mode) table tr:first-child td{background:linear-gradient(135deg,var(--d-primary2),var(--d-primary));color:#fff;}
html:not(.light-mode) table tr:nth-child(2) td{background:#172554;color:#fca5a5;}
html:not(.light-mode) :is(.order-row,.order-row td,.ok){background:var(--d-card);}
html:not(.light-mode) :is(.order-row:hover,.order-row:hover td,.static-table tbody tr:hover td){background:var(--d-card2)!important;}
html:not(.light-mode) :is(.new-order,.new-order td){background:#173522!important;}
html:not(.light-mode) .user-name{color:#f9a8d4;}
html:not(.light-mode) .price{color:var(--d-danger);}
html:not(.light-mode) :is(.address,.info,.ip,.refer,.static-card small){color:var(--d-muted);}
html:not(.light-mode) a{color:#7dd3fc;}
html:not(.light-mode) a:hover{color:#bfdbfe;}
html:not(.light-mode) :is(input,#searchPhone,.input-group input){
background:#0b1220;color:#fff;border-color:#475569;}
html:not(.light-mode) input::placeholder{color:#7c8ba1;}
html:not(.light-mode) .input-group i{color:#94a3b8;}
html:not(.light-mode) :is(button,.tab-btn,#loadMore,.login-btn,input[type=submit]){
color:#fff;}
html:not(.light-mode) .tab-btn{
background:#1e293b;border-color:#475569;color:#e5e7eb;}
html:not(.light-mode) .tab-btn:hover{background:#2b3648;}
html:not(.light-mode) .tab-btn.active{background:var(--d-primary);border-color:var(--d-primary);}
html:not(.light-mode) .tab-btn.static.active{background:var(--d-purple);border-color:var(--d-purple);}
html:not(.light-mode) .tab-btn.unread.active{background:var(--d-success);border-color:var(--d-success);}
html:not(.light-mode) .viewmore{
background:#1e293b;color:#fff;border-color:#475569;}
html:not(.light-mode) .logout{background:#b91c1c;}
html:not(.light-mode) .logout:hover{background:#991b1b;}
html:not(.light-mode) .login-page{
background:linear-gradient(135deg,#111827,#111827);}
html:not(.light-mode) .login-icon{
background:linear-gradient(135deg,var(--d-primary),var(--d-primary2));}
html:not(.light-mode) .login-box h2{color:#fff;}
html:not(.light-mode) .login-box p{color:var(--d-muted);}
html:not(.light-mode) .static-icon{
background:#1e293b;color:#a5b4fc;}
html:not(.light-mode) .static-box h3{color:#fff;}
html:not(.light-mode) .static-box h3 i{color:#a78bfa;}
html:not(.light-mode) .static-table thead th{
background:#1e3a8a;color:#fff;border-bottom-color:#475569;}
html:not(.light-mode) .static-table tbody tr:first-child td{
background:var(--d-card)!important;color:inherit;}
html:not(.light-mode) .static-table td:nth-child(3){
color:var(--d-danger)!important;font-weight:600;}
html:not(.light-mode) #backTop{
background:linear-gradient(135deg,var(--d-primary),var(--d-primary2));
box-shadow:0 10px 28px rgba(59,130,246,.35);}
}

html.dark-mode{color-scheme:dark;}
html.dark-mode body,
html.dark-mode .login-page{background:var(--d-bg);color:var(--d-text);}
html.dark-mode :is(table,.login-box,.static-card,.static-box){background:var(--d-card);color:var(--d-text);border-color:var(--d-border);box-shadow:var(--d-shadow);}
html.dark-mode :is(td,th,.static-table td,.static-table th){border-color:var(--d-border);}
html.dark-mode table tr:first-child td{background:linear-gradient(135deg,var(--d-primary2),var(--d-primary));color:#fff;}
html.dark-mode table tr:nth-child(2) td{background:#172554;color:#fca5a5;}
html.dark-mode :is(.order-row,.order-row td,.ok){background:var(--d-card);}
html.dark-mode :is(.order-row:hover,.order-row:hover td,.static-table tbody tr:hover td){background:var(--d-card2)!important;}
html.dark-mode :is(.new-order,.new-order td){background:#173522!important;}

html.dark-mode .user-name{color:#f9a8d4;}
html.dark-mode .price{color:var(--d-danger);}
html.dark-mode :is(.address,.info,.ip,.refer,.static-card small){color:var(--d-muted);}
html.dark-mode a{color:#7dd3fc;}
html.dark-mode :is(input,#searchPhone,.input-group input){background:#0b1220;color:#fff;border-color:#475569;}
html.dark-mode .tab-btn{background:#1e293b;border-color:#475569;color:#e5e7eb;}
html.dark-mode .tab-btn:hover{background:#2b3648;}
html.dark-mode .tab-btn.active{background:var(--d-primary);border-color:var(--d-primary);}
html.dark-mode .tab-btn.static.active{background:var(--d-purple);border-color:var(--d-purple);}
html.dark-mode .tab-btn.unread.active{background:var(--d-success);border-color:var(--d-success);}
html.dark-mode .viewmore{background:#1e293b;color:#fff;border-color:#475569;}
html.dark-mode .logout{background:#b91c1c;}
html.dark-mode .login-page{background:linear-gradient(135deg,#111827,#111827);}
html.dark-mode .login-icon{background:linear-gradient(135deg,var(--d-primary),var(--d-primary2));}
html.dark-mode .login-box h2{color:#fff;}
html.dark-mode .login-box p{color:var(--d-muted);}
html.dark-mode .static-icon{background:#1e293b;color:#a5b4fc;}
html.dark-mode .static-box h3{color:#fff;}
html.dark-mode .static-box h3 i{color:#a78bfa;}
html.dark-mode .static-table thead th{background:#1e3a8a;color:#fff;border-bottom-color:#475569;}
html.dark-mode .static-table td:nth-child(3){color:var(--d-danger)!important;font-weight:600;}
html.dark-mode #backTop{background:linear-gradient(135deg,var(--d-primary),var(--d-primary2));box-shadow:0 10px 28px rgba(59,130,246,.35);}


/* ===== Dashboard polish ===== */
@media (prefers-color-scheme:dark){
html:not(.light-mode) .static-card,
html:not(.light-mode) .static-box,
html:not(.light-mode) .login-box,
html:not(.light-mode) .tab-btn,
html:not(.light-mode) button{
transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
html:not(.light-mode) .static-card:hover,
html:not(.light-mode) .static-box:hover{
transform:translateY(-1px);
box-shadow:0 10px 30px rgba(0,0,0,.35);
}
}
html.dark-mode .static-card,
html.dark-mode .static-box,
html.dark-mode .login-box,
html.dark-mode .tab-btn,
html.dark-mode button{
transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
html.dark-mode .static-card:hover,
html.dark-mode .static-box:hover{
transform:translateY(-1px);
box-shadow:0 10px 30px rgba(0,0,0,.35);
}



/* ===== Extra polish ===== */
@media (prefers-color-scheme:dark){
html:not(.light-mode) :is(input,#searchPhone,.input-group input,input[type=password]){
background:#0b1220;color:#fff;border-color:#475569;}
html:not(.light-mode) input:focus,
html:not(.light-mode) #searchPhone:focus,
html:not(.light-mode) .input-group input:focus{
border-color:var(--d-primary);
box-shadow:0 0 0 4px rgba(59,130,246,.25);}
html:not(.light-mode) .count{background:rgba(255,255,255,.18);}
html:not(.light-mode) #clearSearch,
html:not(.light-mode) .fa-magnifying-glass{color:#94a3b8!important;}
html:not(.light-mode) .order-id{color:#f9a8d4;}
html:not(.light-mode) button:hover{background:#2563eb;}
html:not(.light-mode) .login-box{
background:rgba(17,24,39,.92);
backdrop-filter:blur(12px);}
}

html.dark-mode :is(input,#searchPhone,.input-group input,input[type=password]){
background:#0b1220;color:#fff;border-color:#475569;}
html.dark-mode input:focus,
html.dark-mode #searchPhone:focus,
html.dark-mode .input-group input:focus{
border-color:var(--d-primary);
box-shadow:0 0 0 4px rgba(59,130,246,.25);}
html.dark-mode .count{background:rgba(255,255,255,.18);}
html.dark-mode #clearSearch,
html.dark-mode .fa-magnifying-glass{color:#94a3b8!important;}
html.dark-mode .order-id{color:#f9a8d4;}
html.dark-mode button:hover{background:#2563eb;}
html.dark-mode .login-box{
background:rgba(17,24,39,.92);
backdrop-filter:blur(12px);}