:root {
    --wa-bg: #f5f7fb;
    --wa-surface: #ffffff;
    --wa-surface-soft: #f8fafc;
    --wa-border: #e5e7eb;
    --wa-text: #111827;
    --wa-text-muted: #6b7280;
    --wa-sidebar: #0f172a;
    --wa-sidebar-soft: #1e293b;
    --wa-primary: #2563eb;
}

body {
    background: var(--wa-bg);
    color: var(--wa-text);
}

#content-wrapper,
#content {
    background: var(--wa-bg) !important;
}

.sidebar {
    background: var(--wa-sidebar) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow-x: hidden;
}

.sidebar .sidebar-brand {
    height: 4.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar .sidebar-brand .sidebar-brand-text {
    font-weight: 800;
    letter-spacing: .04em;
}

.sidebar .sidebar-heading {
    color: #94a3b8;
    font-size: .63rem;
    letter-spacing: .09em;
}

.sidebar .nav-item .nav-link {
    border-radius: .55rem;
    margin: 0 0 .2rem;
    color: #d1d5db;
    font-weight: 600;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .55rem;
    overflow: hidden;
}

.sidebar .nav-item {
    padding: 0 .5rem;
    box-sizing: border-box;
}

.sidebar .nav-item .nav-link i {
    color: #9ca3af;
    width: 1.1rem;
    flex: 0 0 1.1rem;
    text-align: center;
}

.sidebar .nav-item .nav-link span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link {
    background: var(--wa-sidebar-soft);
    color: #fff;
}

.sidebar .nav-item.active .nav-link i,
.sidebar .nav-item .nav-link:hover i {
    color: #fff;
}

.sidebar .collapse-inner {
    border-radius: .65rem;
    border: 1px solid var(--wa-border);
    overflow: hidden;
}

#accordionSidebar {
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.topbar {
    background: var(--wa-surface) !important;
    border: 1px solid var(--wa-border);
    border-radius: .85rem;
    margin: 1rem 1rem .5rem !important;
    box-shadow: none !important;
}

.topbar .btn {
    border-radius: .55rem;
}

.card {
    border: 1px solid var(--wa-border);
    border-radius: .9rem;
    box-shadow: none;
}

.card .card-header {
    background: var(--wa-surface-soft);
    border-bottom: 1px solid var(--wa-border);
    font-weight: 700;
}

.form-control {
    border-radius: .6rem;
    border-color: #d1d5db;
}

.form-control:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12);
}

.btn-primary,
.btn-success {
    background: var(--wa-primary);
    border-color: var(--wa-primary);
}

.btn-success:hover,
.btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.table {
    color: var(--wa-text);
}

.table thead th {
    background: var(--wa-surface-soft);
    border-top: 1px solid var(--wa-border);
    border-bottom: 1px solid var(--wa-border);
    color: #374151;
    font-weight: 700;
}

.content-wrapper .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

.sidebar .sidebar-divider {
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.note-editor.note-frame {
    border: 1px solid var(--wa-border);
    border-radius: .65rem;
    overflow: hidden;
}

.note-toolbar {
    background: var(--wa-surface-soft) !important;
    border-bottom: 1px solid var(--wa-border) !important;
}

.dropdown-menu {
    border: 1px solid var(--wa-border);
    border-radius: .65rem;
}

.wa-settings-card .card-header h5 {
    font-weight: 800;
}

.wa-settings-card .card-header .btn {
    margin-top: .25rem;
}

.wa-settings-form .note-editor.note-frame {
    background: #fff;
}

.wa-media-preview {
    margin-top: 10px;
    max-height: 120px;
}

.wa-media-preview img {
    border-radius: .5rem;
    border: 1px solid var(--wa-border);
    max-height: 120px;
}