/* ==========================================================================
   YuanSheng Navigation - Auth pages + User Center visual enhancement
   Incremental override layer: keeps original markup / fields / submit logic.
   Loaded AFTER the page inline styles, so equal-specificity rules win.
   Theme: blue-family upgrade (gradients, glass, soft shadows, rounded).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Design tokens (re-declare so the whole user area shares one blue system)
   -------------------------------------------------------------------------- */
:root {
    --primary-color: #2f6bff;
    --primary-hover: #4d86ff;
    --primary-active: #1f4fd8;
    --uc-blue: #2f6bff;
    --uc-blue-deep: #1f4fd8;
    --uc-sky: #38bdf8;
    --uc-grad: linear-gradient(135deg, #2f6bff 0%, #3f8bff 55%, #38bdf8 100%);
    --uc-line: #e6eefb;
    --uc-text: #1a2340;
    --uc-muted: #7c8aa5;
    --uc-shadow-sm: 0 4px 14px rgba(24, 70, 160, 0.08);
    --uc-shadow-md: 0 10px 28px rgba(24, 70, 160, 0.10);
    --uc-shadow-lg: 0 24px 60px rgba(24, 70, 160, 0.18);
}

/* --------------------------------------------------------------------------
   1. Page background (shared by auth pages and user center)
   -------------------------------------------------------------------------- */
body {
    background-color: #eef3fd !important;
    background-image:
        radial-gradient(1100px 620px at 10% -8%, rgba(56, 189, 248, 0.22), transparent 60%),
        radial-gradient(900px 560px at 100% 0%, rgba(47, 107, 255, 0.18), transparent 62%),
        linear-gradient(170deg, #f2f7ff 0%, #eaf1fd 48%, #edf3ff 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    color: var(--uc-text);
}

/* ==========================================================================
   A. AUTH PAGES  (user/login.php, user/register.php)
   ========================================================================== */

/* Card shell */
.auth-card {
    border-radius: 24px !important;
    box-shadow: 0 30px 70px rgba(24, 70, 160, 0.20), 0 6px 18px rgba(24, 70, 160, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Left brand panel */
.auth-brand {
    background: linear-gradient(155deg, #1f4fd8 0%, #2f6bff 46%, #3fb6f5 100%) !important;
}

.auth-brand::before {
    width: 340px !important;
    height: 340px !important;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.02) 62%, transparent 70%) !important;
}

.auth-brand::after {
    background: rgba(255, 255, 255, 0.06) !important;
}

.auth-brand-icon {
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 14px 30px rgba(6, 30, 80, 0.28);
}

.auth-brand h2 {
    letter-spacing: 0.5px;
}

/* Form area */
.auth-form-title {
    color: #16204a;
}

.auth-form-sub {
    color: var(--uc-muted);
}

/* Inputs */
.form-control {
    border: 1.5px solid #dbe6f7;
    border-radius: 11px;
    background-color: #f8fbff;
}

.form-control:focus {
    border-color: var(--uc-blue);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.13);
}

.form-control::placeholder {
    color: #a8b6cf;
}

/* Primary action button (login / register submit) */
.btn-submit {
    background: var(--uc-grad);
    border-radius: 12px;
    box-shadow: 0 12px 26px rgba(47, 107, 255, 0.32);
}

.btn-submit:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(47, 107, 255, 0.42);
}

.btn-submit:active {
    transform: translateY(0);
}

.btn-submit:disabled {
    opacity: 0.65;
}

/* "Send code" button on the register page */
.btn-code {
    background: var(--uc-grad);
    border-radius: 11px;
    box-shadow: 0 8px 18px rgba(47, 107, 255, 0.24);
}

.btn-code:hover:not(:disabled) {
    opacity: 1;
    box-shadow: 0 10px 22px rgba(47, 107, 255, 0.34);
}

/* Outline / solid bootstrap buttons inside auth pages and modals */
.btn-outline-primary {
    color: var(--uc-blue);
    border-color: #c6dbff;
}

.btn-outline-primary:hover {
    background-color: #eef4ff;
    border-color: #9cc0ff;
    color: var(--uc-blue-deep);
}

.btn-outline-primary.active,
.btn-outline-primary:active {
    background-color: var(--uc-blue);
    border-color: var(--uc-blue);
    color: #fff;
}

.btn-primary {
    background: var(--uc-grad);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(47, 107, 255, 0.28);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #3f7dff 0%, #55a2ff 100%);
    border-color: transparent;
}

.btn-secondary {
    background: #eef2fa;
    color: #556178;
    border-radius: 11px;
}

.btn-secondary:hover {
    background: #e2e9f6;
}

/* Footer links */
.auth-footer a {
    color: var(--uc-blue);
}

/* Alerts */
.alert {
    border-radius: 12px;
    box-shadow: var(--uc-shadow-sm);
}

/* Quick login */
.quick-login-btn {
    border-color: #dbe6f7;
    background: #f8fbff;
    box-shadow: 0 2px 8px rgba(24, 70, 160, 0.06);
}

.quick-login-btn:hover {
    background: #eef4ff;
    border-color: #9cc0ff;
    box-shadow: 0 6px 16px rgba(47, 107, 255, 0.18);
}

/* Simple modal cards */
.simple-modal-card {
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(10, 30, 70, 0.28);
}

/* ==========================================================================
   B. USER CENTER  (header.php + index / articles / wallet / revenue /
      withdraw / profile)
   ========================================================================== */

/* -- Top navigation -------------------------------------------------------- */
.user-navbar {
    background: linear-gradient(115deg, #1f4fd8 0%, #2f6bff 48%, #3fb6f5 130%) !important;
    box-shadow: 0 6px 22px rgba(18, 55, 130, 0.28);
}

.user-navbar .navbar-brand {
    letter-spacing: 0.5px;
}

.user-avatar {
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: #fff;
    box-shadow: 0 4px 12px rgba(6, 30, 80, 0.25);
}

.btn-return-site {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.btn-return-site:hover {
    background: rgba(255, 255, 255, 0.28);
}

.btn-logout {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.42);
}

.btn-logout:hover {
    background: rgba(255, 255, 255, 0.34);
}

/* -- Sidebar --------------------------------------------------------------- */
.sidebar {
    border-radius: 16px;
    border: 1px solid var(--uc-line);
    box-shadow: var(--uc-shadow-md);
    padding: 0.75rem 0;
    overflow: hidden;
}

.sidebar-menu a {
    margin: 3px 10px;
    border-radius: 10px;
    padding: 0.72rem 1rem;
    color: #566178;
}

.sidebar-menu a:hover {
    background: #eef4ff;
    color: var(--uc-blue);
}

.sidebar-menu a.active {
    background: var(--uc-grad);
    color: #fff;
    border-right: none;
    box-shadow: 0 8px 18px rgba(47, 107, 255, 0.30);
}

.sidebar-menu a i {
    font-size: 19px;
}

/* -- Mobile menu ----------------------------------------------------------- */
.mobile-menu {
    box-shadow: 6px 0 26px rgba(10, 30, 70, 0.20);
}

.mobile-menu-header {
    background: linear-gradient(115deg, #1f4fd8 0%, #2f6bff 60%, #3fb6f5 140%);
}

.mobile-menu-body .sidebar-menu a {
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid #f1f5fb;
}

.mobile-menu-body .sidebar-menu a.active {
    border-radius: 0;
    box-shadow: none;
}

/* -- Content cards --------------------------------------------------------- */
.content-card {
    border-radius: 16px;
    border: 1px solid var(--uc-line);
    box-shadow: var(--uc-shadow-md);
    overflow: hidden;
}

.content-card-header {
    background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
    border-bottom: 1px solid var(--uc-line);
    padding: 1.15rem 1.5rem;
}

.content-card-title {
    color: #1f2f52;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-card-title i {
    color: var(--uc-blue);
}

.content-card-body {
    padding: 1.5rem;
}

/* -- Stat cards (layout untouched, only color / depth upgraded) ------------ */
.stat-card {
    border-radius: 14px !important;
    box-shadow: 0 12px 26px rgba(24, 70, 160, 0.16);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(24, 70, 160, 0.22);
}

.stat-card.primary {
    background: linear-gradient(135deg, #2f6bff 0%, #4f9dff 100%) !important;
}

.stat-card.success {
    background: linear-gradient(135deg, #17a2e8 0%, #45c8f2 100%) !important;
}

.stat-card.warning {
    background: linear-gradient(135deg, #5566ea 0%, #8b9bf7 100%) !important;
}

.stat-card.danger {
    background: linear-gradient(135deg, #2bb6d6 0%, #6ad6ea 100%) !important;
}

.stat-card.info {
    background: linear-gradient(135deg, #4a7dff 0%, #7aa8ff 100%) !important;
}

.stats-section-title {
    color: #26324f;
}

.stats-section-title i {
    color: var(--uc-blue);
}

/* -- Buttons --------------------------------------------------------------- */
.btn-outline-secondary {
    color: #61708c;
    border-color: #d7e1f2;
}

.btn-outline-secondary:hover {
    background-color: #eef2fa;
    border-color: #c3d3ee;
    color: #46536e;
}

/* -- Forms ----------------------------------------------------------------- */
.form-select {
    border: 1.5px solid #dbe6f7;
    border-radius: 11px;
    background-color: #f8fbff;
}

.form-select:focus {
    border-color: var(--uc-blue);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.13);
}

.form-label {
    color: #3a4763;
    font-weight: 600;
}

/* -- Tables ---------------------------------------------------------------- */
.table > :not(caption) > * > * {
    border-color: #eef3fb;
}

.table thead th {
    background: #f5f9ff;
    color: #40507a;
    font-weight: 600;
    border-bottom: 1px solid #e2ecfa;
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f3f8ff;
}

/* -- Badges ---------------------------------------------------------------- */
.badge {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.42em 0.72em;
}

/* -- Notifications --------------------------------------------------------- */
.alert.alert-success,
.alert.alert-danger,
.alert.alert-warning,
.alert.alert-info {
    border: 1px solid transparent;
}

/* ==========================================================================
   C. Small-screen refinements (keep original breakpoints behaviour)
   ========================================================================== */
@media (max-width: 768px) {
    .auth-card {
        border-radius: 18px !important;
    }

    .sidebar,
    .content-card {
        border-radius: 14px;
    }

    .content-card-header {
        padding: 1rem;
    }

    .content-card-body {
        padding: 1rem;
    }
}