/* ============================================================
   Theme Overrides - Unified Brand Design System
   Brand Primary: #0A2463 (Deep Navy)
   ============================================================ */

/* --- 1. CSS Variables (for modern browsers) --- */
:root {
    /* Brand Colors */
    --color-primary: #0A2463;
    --color-primary-hover: #0D2D7A;
    --color-primary-light: #12308C;
    --color-primary-dark: #071A45;
    --color-primary-bg: #0A2463;
    --color-accent: #1A3F8B;
    --color-accent-light: #2B55B5;

    /* Neutral Colors */
    --color-text-primary: #1A1A2E;
    --color-text-secondary: #555555;
    --color-text-muted: #888888;
    --color-border: #D0D5DD;
    --color-border-light: #E6E9EE;
    --color-bg-page: #F5F7FA;
    --color-bg-white: #FFFFFF;
    --color-bg-hover: #EDF0F7;

    /* Typography */
    --font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --font-size-nav: 15px;
    --font-size-title: 18px;
    --font-size-body: 14px;
    --font-size-small: 12px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 50%;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(10, 36, 99, 0.08);
    --shadow-md: 0 4px 12px rgba(10, 36, 99, 0.1);
    --shadow-lg: 0 8px 24px rgba(10, 36, 99, 0.12);
    --shadow-focus: 0 0 0 3px rgba(10, 36, 99, 0.2);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
}

/* --- 2. Typography Hierarchy --- */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Navigation font size */
#wrap,
#content ul li a,
.main-menu > li > a,
.menu_link,
.menu_link_select {
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-medium);
}

/* Login title */
.login-02,
.login-03,
.login-user {
    font-size: var(--font-size-title);
}

/* Body text */
div,
.datalist_data_li,
.controls_tb_li,
p,
td {
    font-size: var(--font-size-body);
    line-height: 1.6;
}

/* Auxiliary text */
.menu_end_center_txt,
.adtxtvalue,
.copy,
.address,
span.help-text,
.txtMarquee-top a,
.txtMarquee-top span {
    font-size: var(--font-size-small);
    line-height: 1.5;
}

/* --- 3. Navigation Bar --- */
#wrap {
    background: var(--color-primary) !important;
    height: 44px;
    box-shadow: var(--shadow-sm);
}

#content ul {
    height: 44px;
}

#content ul li {
    height: 44px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: background var(--transition-fast);
}

#content ul li a {
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-medium);
    line-height: 44px;
    transition: all var(--transition-fast);
}

#content ul li:hover {
    background: rgba(255, 255, 255, 0.1);
}

#content ul li:hover a {
    color: #FFFFFF;
}

#slider {
    background: var(--color-primary-hover) !important;
    height: 44px;
}

/* --- 4. Buttons --- */
/* Primary Buttons */
.controls_tb_li_bnt,
.controls_tb_li_bnt1,
.login-inp,
#ImageButton1 {
    background: var(--color-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: #FFFFFF !important;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.controls_tb_li_bnt:hover,
.controls_tb_li_bnt1:hover,
.login-inp:hover,
#ImageButton1:hover {
    background: var(--color-primary-hover) !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.controls_tb_li_bnt:active,
.controls_tb_li_bnt1:active,
.login-inp:active,
#ImageButton1:active {
    background: var(--color-primary-dark) !important;
    transform: translateY(0);
    box-shadow: none;
}

/* Orange accent buttons */
.controls_tb_li_bnt_orange {
    background: #E67E22 !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
}

.controls_tb_li_bnt_orange:hover {
    background: #D35400 !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* General button style overrides */
.button.color,
.button.grey:hover {
    background: var(--color-primary) !important;
    border-bottom: 1px solid var(--color-primary-dark) !important;
    border-radius: var(--radius-sm);
}

.button.color:hover {
    background: var(--color-primary-hover) !important;
    box-shadow: var(--shadow-md);
}

/* --- 5. Form Inputs --- */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select,
.controls_tb_li_textbox,
.controls_tb_li_select,
.textbox {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 14px !important;
    font-size: var(--font-size-body) !important;
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background: var(--color-bg-white);
    transition: all var(--transition-fast);
    height: auto !important;
    line-height: 1.5 !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus,
.controls_tb_li_textbox:focus,
.controls_tb_li_select:focus,
.textbox:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

/* Select dropdowns */
.controls_tb_li_select,
select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px !important;
}

/* --- 6. Login Page --- */
.login-page {
    background: rgba(10, 36, 99, 0.6) !important;
    backdrop-filter: blur(4px);
}

.login-user,
.login-02,
.login-03 {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg);
}

#user,
#password,
#lcode,
#mail,
#mobile {
    width: 200px !important;
    height: 38px !important;
    margin-top: 16px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 0 14px !important;
    font-size: var(--font-size-body) !important;
    transition: all var(--transition-fast);
}

#user:focus,
#password:focus,
#lcode:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
}

.login-inp,
#ImageButton1 {
    width: 222px !important;
    height: 42px !important;
    line-height: 42px !important;
    font-size: 16px !important;
    border-radius: var(--radius-md) !important;
    margin-top: 20px;
}

.lo-yh,
.lo-mm {
    color: var(--color-text-muted);
}

/* --- 7. Data List / Table Improvements --- */
.datalist {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.datalist_head {
    background: var(--color-bg-page) !important;
    border-bottom: 2px solid var(--color-primary) !important;
    height: 36px;
    line-height: 36px;
}

.datalist_head_title {
    line-height: 36px;
    height: 36px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.datalist_data_li {
    line-height: 36px;
    height: 36px;
    border-bottom: 1px solid var(--color-border-light) !important;
    transition: background var(--transition-fast);
}

.datalist_data_li:hover,
.datalist_data_li_over {
    background: var(--color-bg-hover) !important;
    color: var(--color-primary) !important;
}

/* --- 8. Tab Controls --- */
.tselect,
.dltabv1sel {
    background: var(--color-primary) !important;
    color: #FFFFFF !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-weight: var(--font-weight-medium);
}

.tnoselect,
.dltabv1nosel {
    background: var(--color-bg-page) !important;
    color: var(--color-text-secondary) !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: all var(--transition-fast);
}

.tnoselect:hover,
.dltabv1nosel:hover {
    background: #E0E4ED !important;
    color: var(--color-text-primary) !important;
}

/* --- 9. Cards & Content Blocks --- */
.about_us {
    border-top: 3px solid var(--color-primary) !important;
}

.page_main_binand_bar {
    background: var(--color-bg-page);
    border-bottom: 2px solid var(--color-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}

.page_main_binand_bar B {
    color: var(--color-primary);
}

/* --- 10. Footer --- */
.footer {
    border-top: 2px solid var(--color-primary) !important;
}

.footer_phone {
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-bold);
}

/* --- 11. Link Styles --- */
a {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

/* --- 12. Scroll to Top --- */
#scrolltotop {
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
    opacity: 0.8;
    transition: all var(--transition-normal);
}

#scrolltotop:hover {
    opacity: 1;
    box-shadow: var(--shadow-md);
}

/* --- 13. Pagination --- */
.pagination ul li a {
    border-radius: var(--radius-sm);
    background: var(--color-bg-page);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-fast);
}

.pagination ul li a:hover,
.pagination .current {
    background: var(--color-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--color-primary) !important;
}

/* --- 14. Notice / Announcement Box --- */
#gonggaoheadli,
.tabtitle {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--color-bg-page);
}

#gonggaodiv,
.tabcontent {
    border: 1px solid var(--color-border-light);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* --- 15. Slider Indicators --- */
.slideBox1 .hd ul li {
    background: rgba(10, 36, 99, 0.3);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}

.slideBox1 .hd ul li.on {
    background: var(--color-primary) !important;
}

/* --- 16. Checkbox / Radio Styling --- */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    vertical-align: middle;
    margin-right: 6px;
}

/* --- 17. Top Bar --- */
.top {
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-light);
}

.l-top li {
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
    transition: color var(--transition-fast);
}

.l-top li:hover {
    color: var(--color-primary);
}

/* --- 18. Left Menu --- */
.menu_left li,
.ulmenu li {
    background: var(--color-bg-page);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-light);
    transition: all var(--transition-fast);
    font-size: var(--font-size-body);
}

.menu_left li:hover,
.ulmenu li:hover {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* --- 19. Verification Code / CAPTCHA Module --- */

/*
    Root cause of misalignment:
    - .loginContent td { float:left; padding-top:15px; } breaks flex inside td
    - style.css #lcode { margin-top:20px; } adds uneven top space
    - style.css #cod { margin-top:20px; margin-left:15px; } shifts image down
    Fix: override ALL legacy properties with !important, force identical height + vertical-align
*/

/* ===================================================
   A. Reset ALL legacy CAPTCHA styles that cause offset
   =================================================== */

/* Kill the margin-top that pushes input & image out of alignment */
#lcode { margin-top: 0 !important; }
#cod   { margin-top: 0 !important; margin-left: 0 !important; }

/* Prevent loginContent td float from breaking captcha-box flex */
.loginContent td:has(.captcha-box) {
    float: none !important;
    padding-top: 15px;          /* keep same vertical rhythm as other rows */
    vertical-align: middle;
}

/* ===================================================
   B. captcha-box — the alignment container
   =================================================== */
.captcha-box {
    display: flex;
    align-items: center;         /* vertically center input + image */
    gap: 10px;                   /* consistent 10px gap */
    flex-wrap: nowrap;
    line-height: 1;
    vertical-align: middle;
}

/* ===================================================
   C. CAPTCHA input field — single source of truth
   =================================================== */
.captcha-box input[type="text"],
input.captcha-input {
    box-sizing: border-box;
    width: 120px !important;
    height: 40px !important;
    max-height: 40px !important;
    line-height: 38px !important;
    border: 1px solid #D0D5DD !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #1A1A2E;
    background: #FFFFFF;
    outline: none;
    letter-spacing: 3px;
    vertical-align: middle !important;
    display: inline-block;
    flex-shrink: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.captcha-box input[type="text"]:focus,
input.captcha-input:focus {
    border-color: #0A2463 !important;
    box-shadow: 0 0 0 3px rgba(10, 36, 99, 0.15);
}

/* ===================================================
   D. CAPTCHA image — single source of truth (matches input height)
   =================================================== */
.captcha-box img,
img.captcha-img {
    box-sizing: border-box;
    width: 100px;
    height: 40px;
    max-height: 40px !important;
    max-width: 100px !important;
    line-height: 1;
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    padding: 0;
    margin: 0 !important;
    cursor: pointer;
    background: #FFFFFF;
    display: block;
    flex-shrink: 0;
    vertical-align: middle !important;
    object-fit: contain;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.captcha-box img:hover,
img.captcha-img:hover {
    border-color: #C9D8F2;
    box-shadow: 0 0 0 3px rgba(10, 36, 99, 0.08);
}

.captcha-box img:active,
img.captcha-img:active {
    border-color: #0A2463;
}

/* Refresh fade animation */
img.captcha-img.refreshing,
.captcha-box img.refreshing {
    opacity: 0.6;
}

/* ===================================================
   E. login.aspx — legacy table layout overrides
   =================================================== */

/* The loginContent table uses float:left on td — reset for our row */
.loginContent table tr:has(.captcha-box) td {
    float: none !important;
    padding-top: 15px;
}

.loginContent input#lcode {
    width: 100px !important;
    height: 40px !important;
    max-height: 40px !important;
    line-height: 38px !important;
    border: 1px solid #D0D5DD !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    display: inline-block;
}

.loginContent input#lcode:focus {
    border-color: #0A2463 !important;
    box-shadow: 0 0 0 3px rgba(10, 36, 99, 0.15);
}

.loginContent img#code {
    width: 100px !important;
    height: 40px !important;
    max-height: 40px !important;
    border: 1px solid #D0D5DD !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    vertical-align: middle !important;
    display: inline-block;
}

.loginContent img#code:hover {
    border-color: #C9D8F2;
}

/* ===================================================
   F. Default.aspx — login-card CAPTCHA
   =================================================== */
/* Reset legacy margin-top for new login card inputs */
.login-card #user,
.login-card #password {
    margin-top: 0 !important;
    width: 100% !important;
    height: 38px !important;
}

.login-card .captcha-box {
    gap: 10px;
}

.login-card input#lcode,
.login-card .login-input.captcha-input {
    flex: 1 1 auto !important;
    min-width: 0;
    height: 40px !important;
    max-height: 40px !important;
    border-radius: 6px !important;
}

.login-card img#cod,
.login-card .captcha-img {
    width: 100px !important;
    height: 40px !important;
    max-height: 40px !important;
    border: 1px solid #e0e0e0;
    border-radius: 6px !important;
    flex-shrink: 0;
}

.login-card img#cod:hover,
.login-card .captcha-img:hover {
    border-color: #C9D8F2;
}

/* ===================================================
   G. Register page CAPTCHA (Register2.aspx etc.)
   =================================================== */
input#txb_CheckCoder {
    width: 120px !important;
    height: 40px !important;
    max-height: 40px !important;
    line-height: 38px !important;
    border: 1px solid #D0D5DD !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

input#txb_CheckCoder:focus {
    border-color: #0A2463 !important;
    box-shadow: 0 0 0 3px rgba(10, 36, 99, 0.15);
}

/* ===================================================
   H. Find-name dialog CAPTCHA (Default.aspx popup)
   =================================================== */
img#imgcode1 {
    width: 100px !important;
    height: 40px !important;
    max-height: 40px !important;
    border: 1px solid #D0D5DD !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    vertical-align: middle !important;
}

img#imgcode1:hover {
    border-color: #C9D8F2;
}

input#imgcode1txt {
    width: 80px !important;
    height: 40px !important;
    max-height: 40px !important;
    line-height: 38px !important;
    border: 1px solid #D0D5DD !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

input#imgcode1txt:focus {
    border-color: #0A2463 !important;
}

/* ===================================================
   I. Legacy compat — misc verification code areas
   =================================================== */
.login-yzm input {
    height: 40px !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
}

.verifi {
    color: #0A2463;
    font-weight: 500;
    font-size: 12px;
}

/* --- 20. Loading / Overlay --- */
.login-page {
    transition: opacity var(--transition-normal);
}

/* --- 21. Responsive Typography --- */
@media screen and (max-width: 1200px) {
    #content ul li a {
        font-size: 13px;
        padding: 0 8px;
    }
}

/* --- 22. Focus Visible for Accessibility --- */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --- 23. Selection Color --- */
::selection {
    background: rgba(10, 36, 99, 0.15);
    color: var(--color-primary);
}

/* --- 24. Smooth Scrolling --- */
html {
    scroll-behavior: smooth;
}

/* --- 25. Contact Info Links --- */
.link_way span {
    border-color: var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.link_way span:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: scale(1.03);
}

/* --- Float Sidebar - Gradient Blue --- */
.float-sidebar {
    background: linear-gradient(180deg, rgba(46,106,176,0.7) 0%, rgba(10,77,104,0.8) 100%) !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 28px rgba(10,40,80,0.3) !important;
    width: 64px !important;
    backdrop-filter: blur(8px) !important;
}
.float-sidebar-item {
    border-top-color: rgba(255,255,255,0.15) !important;
}
.float-sidebar-item:hover {
    background: rgba(255,255,255,0.18) !important;
    border-radius: 12px !important;
}
.float-sidebar-icon {
    color: #fff !important;
}
.float-sidebar-label {
    color: rgba(255,255,255,0.85) !important;
    font-size: 10px !important;
}
.float-sidebar-item:hover .float-sidebar-label {
    color: #fff !important;
}
.float-sidebar-popup {
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
}
.float-sidebar-mini {
    background: rgba(46,106,176,0.7) !important;
    border-radius: 30px 0 0 30px !important;
    box-shadow: 0 4px 28px rgba(10,40,80,0.3) !important;
    backdrop-filter: blur(8px) !important;
}
.float-sidebar-mini:hover {
    background: rgba(10,77,104,0.8) !important;
}