:root {
    --theme-body-bg: #edf2f8;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f8fbff;
    --theme-accent: #2563eb;
    --theme-accent-strong: #1d4ed8;
    --theme-text: #1f2937;
    --theme-muted: #6b7280;
    --theme-border: rgba(37, 99, 235, 0.16);
    --theme-sidebar-bg: #e5edf8;
    --theme-sidebar-border: rgba(37, 99, 235, 0.14);
    --theme-sidebar-active: #ffffff;
    --theme-section: #64748b;
    --theme-card-shadow: 0 18px 40px rgba(37, 99, 235, 0.08);
}

body {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, var(--theme-body-bg) 100%);
    color: var(--theme-text);
}

.page-wrapper > .navbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.navbar-vertical {
    background: linear-gradient(180deg, #f1f6fd 0%, var(--theme-sidebar-bg) 100%);
    border-right: 1px solid var(--theme-sidebar-border);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.45);
}

.navbar-vertical .navbar-brand a,
.navbar-brand,
.navbar-brand a {
    color: var(--theme-text);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.nav-section-title {
    margin: 1rem 0 0.5rem;
    padding: 0 0.75rem;
    color: var(--theme-section);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    list-style: none;
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.15rem 0.5rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    color: var(--theme-text);
    transition: all 0.2s ease;
}

.navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(37, 99, 235, 0.08);
    color: var(--theme-accent-strong);
}

.navbar-nav .nav-link.active {
    background: var(--theme-sidebar-active);
    border-color: rgba(37, 99, 235, 0.14);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
    color: var(--theme-accent-strong);
}

.sidebar-icon {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--theme-accent);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.sidebar-icon-dashboard {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v4h-7zM13 10h7v10h-7zM4 13h7v7H4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v4h-7zM13 10h7v10h-7zM4 13h7v7H4z'/%3E%3C/svg%3E");
}

.sidebar-icon-users {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm8 1a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM2 20a7 7 0 0 1 14 0H2zm13 0a5 5 0 0 1 7 0h-7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm8 1a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM2 20a7 7 0 0 1 14 0H2zm13 0a5 5 0 0 1 7 0h-7z'/%3E%3C/svg%3E");
}

.sidebar-icon-roles {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2 5 5v6c0 5.1 2.9 9.8 7 11 4.1-1.2 7-5.9 7-11V5l-7-3zm0 4 3 1.3V11l-3 1.7L9 11V7.3L12 6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2 5 5v6c0 5.1 2.9 9.8 7 11 4.1-1.2 7-5.9 7-11V5l-7-3zm0 4 3 1.3V11l-3 1.7L9 11V7.3L12 6z'/%3E%3C/svg%3E");
}

.sidebar-icon-permissions {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 3a5 5 0 0 0-4.58 7L2 17.41V22h4.59L8 20.59 9.41 22H12v-2.59L13.41 18H16l1-1 1.58-1.59A5 5 0 1 0 14 3zm0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 3a5 5 0 0 0-4.58 7L2 17.41V22h4.59L8 20.59 9.41 22H12v-2.59L13.41 18H16l1-1 1.58-1.59A5 5 0 1 0 14 3zm0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/%3E%3C/svg%3E");
}

.sidebar-icon-notifications {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a4 4 0 0 0-4 4v1.2A7 7 0 0 1 5 13v3l-2 2v1h18v-1l-2-2v-3a7 7 0 0 1-3-5.8V6a4 4 0 0 0-4-4zm0 20a3 3 0 0 0 2.82-2H9.18A3 3 0 0 0 12 22z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a4 4 0 0 0-4 4v1.2A7 7 0 0 1 5 13v3l-2 2v1h18v-1l-2-2v-3a7 7 0 0 1-3-5.8V6a4 4 0 0 0-4-4zm0 20a3 3 0 0 0 2.82-2H9.18A3 3 0 0 0 12 22z'/%3E%3C/svg%3E");
}

.sidebar-icon-settings {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m19.14 12.94.04-.94-.04-.94 2-1.55-1.9-3.29-2.35.49a7.37 7.37 0 0 0-1.63-.94L14.5 2h-5l-.76 2.71c-.58.23-1.12.54-1.63.94l-2.35-.49-1.9 3.29 2 1.55-.04.94.04.94-2 1.55 1.9 3.29 2.35-.49c.5.4 1.05.71 1.63.94L9.5 22h5l.76-2.71c.58-.23 1.12-.54 1.63-.94l2.35.49 1.9-3.29-2-1.55zM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m19.14 12.94.04-.94-.04-.94 2-1.55-1.9-3.29-2.35.49a7.37 7.37 0 0 0-1.63-.94L14.5 2h-5l-.76 2.71c-.58.23-1.12.54-1.63.94l-2.35-.49-1.9 3.29 2 1.55-.04.94.04.94-2 1.55 1.9 3.29 2.35-.49c.5.4 1.05.71 1.63.94L9.5 22h5l.76-2.71c.58-.23 1.12-.54 1.63-.94l2.35.49 1.9-3.29-2-1.55zM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5z'/%3E%3C/svg%3E");
}

.sidebar-icon-profile {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5z'/%3E%3C/svg%3E");
}

.sidebar-icon-logs {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 2h9l5 5v15H6zM14 3.5V8h4.5zM9 12h8v2H9zm0 4h8v2H9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 2h9l5 5v15H6zM14 3.5V8h4.5zM9 12h8v2H9zm0 4h8v2H9z'/%3E%3C/svg%3E");
}

.sidebar-icon-logout {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 3H5v18h5v-2H7V5h3zm1.59 4L10.17 8.41 13.76 12l-3.59 3.59L11.59 17 17 11.59zm-1.59 4h11v2H10z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 3H5v18h5v-2H7V5h3zm1.59 4L10.17 8.41 13.76 12l-3.59 3.59L11.59 17 17 11.59zm-1.59 4h11v2H10z'/%3E%3C/svg%3E");
}

.sidebar-icon-module {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m12 2 8 4.5v11L12 22 4 17.5v-11zm0 2.3L7 6.9l5 2.8 5-2.8zm-6 4.3v7.7l5 2.8v-7.7zm13 0-5 2.8v7.7l5-2.8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m12 2 8 4.5v11L12 22 4 17.5v-11zm0 2.3L7 6.9l5 2.8 5-2.8zm-6 4.3v7.7l5 2.8v-7.7zm13 0-5 2.8v7.7l5-2.8z'/%3E%3C/svg%3E");
}

.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), var(--theme-surface));
    border: 1px solid var(--theme-border);
    border-left: 4px solid var(--theme-accent);
    border-radius: 1.15rem;
    box-shadow: var(--theme-card-shadow);
    overflow: hidden;
}

.card-header {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.05), rgba(255, 255, 255, 0));
    border-bottom: 1px solid rgba(37, 99, 235, 0.08);
}

.card-header .card-title {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--theme-text);
}

.card-header .card-title::before {
    content: "";
    width: 1rem;
    height: 1rem;
    display: inline-block;
    border-radius: 0.35rem;
    background: linear-gradient(135deg, var(--theme-accent), #7fb0ff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.btn-primary {
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-strong));
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--theme-accent-strong), var(--theme-accent));
}

.btn-outline-primary {
    border-color: rgba(37, 99, 235, 0.25);
    color: var(--theme-accent-strong);
}

.btn-outline-primary:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--theme-accent-strong);
}

.table,
.text-muted,
.small {
    color: var(--theme-muted);
}

.alert-success,
.alert-danger {
    border-radius: 0.9rem;
}