/* Claude-inspired warm UI theme
   Scope: visual styling only. No behavior or layout logic changes. */
:root {
    --claude-bg: #f7f2ea;
    --claude-bg-soft: #fbf7f0;
    --claude-surface: rgba(255, 252, 246, 0.92);
    --claude-surface-solid: #fffaf2;
    --claude-border: rgba(90, 74, 58, 0.14);
    --claude-border-strong: rgba(90, 74, 58, 0.24);
    --claude-text: #2f2a24;
    --claude-muted: #7b6f63;
    --claude-accent: #c15f3c;
    --claude-accent-dark: #9e482e;
    --claude-accent-soft: rgba(193, 95, 60, 0.12);
    --claude-green: #5f7f62;
    --claude-shadow: 0 18px 55px rgba(76, 55, 38, 0.10);
    --claude-shadow-sm: 0 8px 24px rgba(76, 55, 38, 0.08);
    --claude-radius: 18px;
    --claude-radius-sm: 12px;
}

html, body {
    background:
        radial-gradient(circle at 18% 8%, rgba(193, 95, 60, 0.08), transparent 30%),
        radial-gradient(circle at 86% 16%, rgba(95, 127, 98, 0.08), transparent 26%),
        linear-gradient(180deg, var(--claude-bg) 0%, #efe7da 100%) !important;
    color: var(--claude-text) !important;
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", "Microsoft YaHei", serif !important;
}

body[data-leftbar-theme="dark"], .wrapper, .content-page, .content, .container-fluid {
    background: transparent !important;
}

.left-side-menu {
    background: rgba(255, 250, 242, 0.88) !important;
    border-right: 1px solid var(--claude-border) !important;
    box-shadow: 12px 0 40px rgba(76, 55, 38, 0.07) !important;
    backdrop-filter: blur(18px);
}

.side-nav-title {
    color: var(--claude-text) !important;
    -webkit-text-fill-color: var(--claude-text) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--claude-border) !important;
    letter-spacing: .04em;
    font-weight: 600 !important;
}

.side-nav-link {
    color: var(--claude-muted) !important;
    border-left: 0 !important;
    border-radius: 14px !important;
    margin: 0.18rem 0.75rem !important;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.side-nav-link:hover,
.side-nav-item.active > .side-nav-link,
.side-nav .side-nav-link[aria-expanded="true"] {
    background: var(--claude-accent-soft) !important;
    color: var(--claude-accent-dark) !important;
    transform: translateX(2px) !important;
    box-shadow: none !important;
}

.side-nav-link i,
.side-nav-link:hover i {
    color: inherit !important;
    transform: none !important;
}

.side-nav-second-level {
    background: rgba(255, 252, 246, 0.72) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.side-nav-second-level li a {
    color: var(--claude-muted) !important;
    border-radius: 10px !important;
}

.side-nav-second-level li a:hover {
    color: var(--claude-accent-dark) !important;
    background: var(--claude-accent-soft) !important;
}

.navbar-custom {
    background: rgba(255, 250, 242, 0.78) !important;
    border-bottom: 1px solid var(--claude-border) !important;
    box-shadow: 0 10px 35px rgba(76, 55, 38, 0.06) !important;
    backdrop-filter: blur(18px);
}

.navbar-custom .topnav-menu .nav-link,
.navbar-custom .button-menu-mobile,
.navbar-custom .nav-user,
.account-user-name,
.account-position {
    color: var(--claude-text) !important;
}

.card, .layui-card, .panel, .modal-content, .dropdown-menu {
    background: var(--claude-surface) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: var(--claude-radius) !important;
    box-shadow: var(--claude-shadow-sm) !important;
    color: var(--claude-text) !important;
}

.card:hover, .layui-card:hover {
    transform: translateY(-1px) !important;
    border-color: var(--claude-border-strong) !important;
    box-shadow: var(--claude-shadow) !important;
}

.card-header, .card-footer, .layui-card-header, .modal-header, .modal-footer, .noti-title {
    background: rgba(255, 250, 242, 0.66) !important;
    border-color: var(--claude-border) !important;
    color: var(--claude-text) !important;
}

h1, h2, h3, h4, h5, h6, .page-title, .card-title, .layui-card-header {
    color: var(--claude-text) !important;
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", "Microsoft YaHei", serif !important;
    font-weight: 650 !important;
}

p, label, .text-muted, .help-block, small, .breadcrumb-item, .notify-details small {
    color: var(--claude-muted) !important;
}

a { color: var(--claude-accent-dark) !important; }
a:hover { color: var(--claude-accent) !important; }

.btn, .layui-btn, button, input[type="button"], input[type="submit"] {
    border-radius: 999px !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.btn-primary, .layui-btn:not(.layui-btn-primary), .layui-btn-normal, #submit_login {
    background: var(--claude-accent) !important;
    border-color: var(--claude-accent) !important;
    color: #fffaf2 !important;
    box-shadow: 0 8px 20px rgba(193, 95, 60, 0.20) !important;
}

.btn-primary:hover, .layui-btn:not(.layui-btn-primary):hover, .layui-btn-normal:hover, #submit_login:hover {
    background: var(--claude-accent-dark) !important;
    border-color: var(--claude-accent-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 28px rgba(193, 95, 60, 0.24) !important;
}

.btn-secondary, .btn-light, .layui-btn-primary {
    background: rgba(255, 250, 242, 0.88) !important;
    border: 1px solid var(--claude-border-strong) !important;
    color: var(--claude-text) !important;
    box-shadow: none !important;
}

.btn-secondary:hover, .btn-light:hover, .layui-btn-primary:hover {
    background: var(--claude-accent-soft) !important;
    color: var(--claude-accent-dark) !important;
    transform: translateY(-1px) !important;
}

.form-control, .layui-input, .layui-textarea, input, select, textarea {
    background: rgba(255, 252, 246, 0.84) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: 14px !important;
    color: var(--claude-text) !important;
    box-shadow: none !important;
}

.form-control:focus, .layui-input:focus, .layui-textarea:focus, input:focus, select:focus, textarea:focus {
    border-color: rgba(193, 95, 60, 0.52) !important;
    box-shadow: 0 0 0 4px rgba(193, 95, 60, 0.12) !important;
    outline: none !important;
}

.table, table, .layui-table {
    background: var(--claude-surface) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: var(--claude-radius-sm) !important;
    overflow: hidden;
    box-shadow: var(--claude-shadow-sm) !important;
    color: var(--claude-text) !important;
}

thead, .layui-table thead tr, .table thead th {
    background: rgba(238, 225, 209, 0.74) !important;
    color: var(--claude-text) !important;
    border-color: var(--claude-border) !important;
}

tbody tr, .layui-table tbody tr {
    background: rgba(255, 252, 246, 0.55) !important;
    transition: background .15s ease !important;
}

tbody tr:hover, .layui-table tbody tr:hover {
    background: rgba(193, 95, 60, 0.07) !important;
    transform: none !important;
}

td, th, .layui-table td, .layui-table th {
    border-color: var(--claude-border) !important;
}

.badge, .layui-badge, .noti-icon-badge {
    border-radius: 999px !important;
    background: var(--claude-accent) !important;
    color: #fffaf2 !important;
    box-shadow: none !important;
}

.dropdown-item:hover, .notify-item:hover {
    background: var(--claude-accent-soft) !important;
    color: var(--claude-accent-dark) !important;
}

/* Keep topbar dropdowns above cards, tables, and sticky containers */
.navbar-custom,
.topbar,
.topbar-right-menu,
.notification-list {
    position: relative;
}

.navbar-custom,
.topbar-right-menu {
    z-index: 1040 !important;
}

.navbar-custom .dropdown-menu,
.topbar-dropdown-menu,
.profile-dropdown,
.dropdown-menu-right.dropdown-menu-animated,
.notification-list .dropdown-menu {
    z-index: 99999 !important;
}

.alert, .layui-layer, .layui-layer-dialog {
    border-radius: var(--claude-radius) !important;
    border: 1px solid var(--claude-border) !important;
    box-shadow: var(--claude-shadow) !important;
}

/* Login pages share these selectors */
#LAY-user-login {
    background:
        radial-gradient(circle at 20% 20%, rgba(193, 95, 60, 0.15), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(95, 127, 98, 0.12), transparent 28%),
        linear-gradient(135deg, #f7f2ea 0%, #eadfce 100%) !important;
}

#LAY-user-login::before {
    background: rgba(71, 49, 34, 0.06) !important;
}

.login-main {
    background: rgba(255, 250, 242, 0.86) !important;
    border: 1px solid var(--claude-border) !important;
    border-radius: 24px !important;
    box-shadow: var(--claude-shadow) !important;
    opacity: 1 !important;
    backdrop-filter: blur(18px);
}

.login-title {
    background: none !important;
    -webkit-text-fill-color: var(--claude-text) !important;
    color: var(--claude-text) !important;
    letter-spacing: .02em;
}

.login-subtitle, .login-icon, .remember-row {
    color: var(--claude-muted) !important;
}

.login-links a, .login-footer a, .back-btn {
    color: var(--claude-accent-dark) !important;
}

.login-footer {
    color: var(--claude-muted) !important;
}

@media (max-width: 768px) {
    .card, .layui-card, .panel, .modal-content, .dropdown-menu {
        border-radius: 16px !important;
    }

    .side-nav-link {
        margin-left: .5rem !important;
        margin-right: .5rem !important;
    }
}