@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --modern-ink: #1f2937;
    --modern-muted: #6b7280;
    --modern-bg: #f8fafc;
    --modern-panel: #ffffff;
    --modern-panel-strong: #ffffff;
    --modern-green: #3b82f6;
    --modern-green-dark: #1d4ed8;
    --modern-green-soft: #eff6ff;
    --modern-gold: #60a5fa;
    --modern-red: #ef4444;
    --modern-line: #e5e7eb;
    --modern-shadow: 0 18px 45px rgba(30, 41, 59, 0.13);
    --modern-radius: 22px;
    --primary: var(--modern-green);
    --secondary: #6b7280;
    --success: #22c55e;
    --danger: var(--modern-red);
    --background: var(--modern-bg);
    --text: var(--modern-ink);
    --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --secondary-gradient: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    --success-gradient: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --danger-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    --info-gradient: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-border: #e5e7eb;
    --glass-shadow: var(--modern-shadow);
    --bg-primary: var(--modern-bg);
    --bg-secondary: #eff6ff;
    --bg-tertiary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.88);
    --text-primary: var(--modern-ink);
    --text-secondary: var(--modern-muted);
    --text-muted: var(--modern-muted);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background:
        radial-gradient(circle at 15% 15%, rgba(96, 165, 250, 0.18), transparent 28rem),
        radial-gradient(circle at 92% 5%, rgba(59, 130, 246, 0.16), transparent 24rem),
        linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important;
    color: var(--modern-ink) !important;
}

.content,
.container {
    animation: modernRise 0.45s ease-out both;
}

.content {
    padding: 34px !important;
}

.modern-page-title,
.card h2,
.header-title h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    letter-spacing: -0.03em;
}

.modern-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    margin-bottom: 22px;
    padding: 30px;
    border: 1px solid var(--modern-line);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(29, 78, 216, 0.94), rgba(59, 130, 246, 0.88)),
        radial-gradient(circle at 90% 20%, rgba(96, 165, 250, 0.35), transparent 16rem);
    color: #ffffff;
    box-shadow: var(--modern-shadow);
}

.modern-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
}

.modern-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #dbeafe;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.modern-hero h1,
.modern-page-title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: inherit;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;
}

.modern-hero p {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.08rem;
}

.modern-hero-actions,
.modern-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.modern-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.modern-stat {
    padding: 18px;
    border: 1px solid var(--modern-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 30px rgba(30, 41, 59, 0.08);
}

.modern-stat strong {
    display: block;
    color: var(--modern-green-dark);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 2rem;
    line-height: 1;
}

.modern-stat span {
    display: block;
    margin-top: 8px;
    color: var(--modern-muted);
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.card,
.form-container,
.search-container,
.table-container,
.tab-navigation,
.tab-content.active,
.message,
.enhanced-header,
.user-profile,
.quick-actions,
.recent-activities,
.system-status,
.admin-header,
.welcome-section,
.content-card,
.data-card,
.filter-section,
.modal-content {
    border: 1px solid var(--modern-line) !important;
    border-radius: var(--modern-radius) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: var(--modern-shadow) !important;
}

.card {
    padding: 24px !important;
}

.dashboard,
.admin-container,
.main-content,
.admin-main {
    background: transparent !important;
    color: var(--modern-ink) !important;
}

.main-content,
.admin-main {
    padding: 34px !important;
}

.enhanced-header,
.welcome-section {
    margin-bottom: 24px !important;
    padding: 28px !important;
}

.enhanced-header h1,
.welcome-section h1,
.section-title,
.header h1,
.card h2,
.content-card h2,
.data-card h2 {
    color: var(--modern-green-dark) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.enhanced-header p,
.welcome-section p,
.activity-time,
.user-role,
.breadcrumb,
.breadcrumb-item,
.card p {
    color: var(--modern-muted) !important;
}

.header-stat,
.status-item {
    border: 1px solid var(--modern-line) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.68) !important;
    color: var(--modern-ink) !important;
}

.header-stat-number,
.stat-number,
.stat-card p {
    color: var(--modern-green-dark) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
}

.stat-icon,
.activity-icon,
.user-avatar,
.card-icon {
    background: var(--modern-green-soft) !important;
    color: var(--modern-green-dark) !important;
    box-shadow: none !important;
}

.stat-card::before {
    background: linear-gradient(90deg, var(--modern-green), var(--modern-green-dark)) !important;
}

.actions-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 14px !important;
}

.action-btn,
.update-btn,
.logout-btn,
.sidebar-toggle,
.welcome-actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--modern-green), var(--modern-green-dark)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.18) !important;
    text-decoration: none !important;
}

.action-btn {
    min-height: 70px !important;
    padding: 16px 18px !important;
}

.activity-list,
.nav-menu {
    list-style: none !important;
}

.activity-item {
    border-bottom: 1px solid rgba(31, 41, 55, 0.1) !important;
}

.activity-item:hover {
    background: var(--modern-green-soft) !important;
}

.status-indicator {
    background: #22c55e !important;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14) !important;
}

.search-form,
.form-container form,
.search-container form {
    display: grid;
    gap: 12px;
}

.search-form {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    align-items: end;
    margin-top: 18px !important;
    padding: 18px;
    border: 1px solid var(--modern-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.66);
}

.form-container form {
    grid-template-columns: 1.5fr 1fr 150px 190px;
    align-items: start;
}

input,
select,
textarea,
.form-input {
    min-height: 44px;
    border: 1px solid rgba(59, 130, 246, 0.18) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: var(--modern-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    outline: none;
}

select[multiple] {
    min-height: 168px;
    padding: 10px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus {
    border-color: var(--modern-green) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12) !important;
}

.field-help {
    display: block;
    margin-top: 6px;
    color: var(--modern-muted);
    font-size: 0.88rem;
}

.btn,
button,
.tab-button,
.back-link {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

.btn,
td button {
    width: auto !important;
}

.form-container .btn,
.search-form .btn,
.search-container .btn {
    width: 100% !important;
}

td .btn,
td button {
    margin: 3px !important;
    padding: 8px 12px !important;
}

.btn,
button[type="submit"] {
    border: 0 !important;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.18);
}

.btn:hover,
button:hover {
    transform: translateY(-1px) !important;
}

.btn-add,
.btn-search,
.btn-primary,
.tab-button.active {
    background: linear-gradient(135deg, var(--modern-green), var(--modern-green-dark)) !important;
    color: #ffffff !important;
}

.btn-edit,
.btn-secondary,
.btn-receipt {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.btn-delete,
.btn-danger {
    background: var(--modern-red) !important;
    color: #fff !important;
}

.btn-devolver,
.btn-extend {
    background: var(--modern-gold) !important;
    color: #0b2a5b !important;
}

table,
.data-table {
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--modern-line) !important;
    border-radius: 18px !important;
    background: var(--modern-panel-strong) !important;
}

th,
.data-table th {
    border: 0 !important;
    background: #1d4ed8 !important;
    color: #ffffff !important;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

td,
.data-table td {
    border-width: 0 0 1px 0 !important;
    border-color: rgba(31, 41, 55, 0.1) !important;
    vertical-align: top;
}

tr:nth-child(even),
.data-table tr:nth-child(even) {
    background: #f1f5f9 !important;
}

tr:hover {
    background: var(--modern-green-soft) !important;
}

.category-chip {
    font-weight: 700;
}

.category-chip {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--modern-green-soft);
    color: var(--modern-green-dark);
}

.qty-badge {
    display: inline-flex;
    min-width: 36px;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af;
    font-weight: 800;
}

.qty-badge.is-empty {
    background: #fee2e2;
    color: #b91c1c;
}

.capa-img {
    width: 48px;
    height: 68px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(30, 41, 59, 0.18);
}

.modern-empty,
.error,
.success {
    padding: 14px 16px;
    border-radius: 16px;
}

.error {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.success {
    background: #dcfce7 !important;
    color: #15803d !important;
}

.pagination a {
    border-radius: 999px !important;
    background: #ffffff;
}

.pagination a.active {
    background: var(--modern-green-dark) !important;
    color: #ffffff !important;
}

.sidebar {
    background:
        linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%) !important;
    box-shadow: 8px 0 28px rgba(29, 78, 216, 0.18) !important;
}

.logo h1,
.sidebar-header h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.logo p,
.sidebar-header p {
    color: rgba(255, 255, 255, 0.72) !important;
}

.sidebar-module {
    display: inline-flex;
    margin-top: 10px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #dbeafe;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nav-link,
.sidebar-nav ul li a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.admin-header .nav-link,
.main-nav .nav-link,
.breadcrumb a,
.breadcrumb-item {
    color: var(--modern-green-dark) !important;
}

.admin-header .nav-link.active,
.main-nav .nav-link.active,
.admin-header .nav-link:hover,
.main-nav .nav-link:hover {
    background: var(--modern-green-dark) !important;
    color: #ffffff !important;
}

.admin-header .logo,
.logo-section .logo {
    color: var(--modern-green-dark) !important;
}

.admin-header .user-profile,
.user-menu .user-profile {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.sidebar-nav ul li a {
    border-radius: 14px !important;
}

.sidebar-nav ul li a.active,
.sidebar-nav ul li a:hover,
.nav-link.active,
.nav-link:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    transform: translateX(3px) !important;
}

.header {
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 1px solid var(--modern-line) !important;
    box-shadow: 0 12px 30px rgba(30, 41, 59, 0.08) !important;
}

.header-title h1,
.header-title i {
    color: var(--modern-green-dark) !important;
}

.back-link {
    background: var(--modern-green-dark) !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
}

.tab-navigation {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
    padding: 12px !important;
    margin-bottom: 22px !important;
}

.tab-button {
    background: #ffffff !important;
    color: var(--modern-green-dark) !important;
    border: 1px solid var(--modern-line) !important;
    padding: 12px 18px !important;
}

.card-icon {
    background: var(--modern-green-soft) !important;
    color: var(--modern-green-dark) !important;
}

.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px !important;
}

.stat-card {
    border: 1px solid var(--modern-line) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: var(--modern-ink) !important;
    box-shadow: 0 10px 24px rgba(30, 41, 59, 0.08) !important;
}

.stat-number {
    color: var(--modern-green-dark) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.stat-label,
.form-label {
    color: var(--modern-muted) !important;
}

.admin-login-page {
    min-height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
}

.admin-login-page .container {
    position: relative;
    overflow: hidden;
    width: min(100%, 420px) !important;
    padding: 34px !important;
    border: 1px solid var(--modern-line) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: var(--modern-shadow) !important;
}

.admin-login-page .container::before {
    content: "Admin";
    position: absolute;
    top: 18px;
    right: 22px;
    color: rgba(59, 130, 246, 0.14);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 3.4rem;
    font-weight: 700;
    pointer-events: none;
}

.admin-login-page h2 {
    color: var(--modern-green-dark) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.admin-login-page .logo {
    max-width: 116px !important;
    border-radius: 20px;
}

@keyframes modernRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1100px) {
    .modern-hero,
    .modern-stats {
        grid-template-columns: 1fr;
    }

    .form-container form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 18px !important;
    }

    .main-content,
    .admin-main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 18px !important;
    }

    .sidebar {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 0 0 24px 24px;
    }

    body {
        display: block !important;
    }

    .modern-hero {
        padding: 22px;
    }
}

.sidebar.sidebar-physical {
    --physical-sidebar-width: 262px;
    box-sizing: border-box !important;
    width: var(--physical-sidebar-width) !important;
    min-height: 100vh !important;
    height: 100vh !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    padding: 0 !important;
    overflow: hidden auto !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 !important;
    background:
        linear-gradient(145deg, rgba(96, 165, 250, 0.6) 0 16%, transparent 16.4%),
        linear-gradient(135deg, #3b82f6 0%, #1e3a8a 45%, #0b1020 100%) !important;
    box-shadow: 12px 0 36px rgba(15, 23, 42, 0.28) !important;
    color: #f4f9ff !important;
}

.sidebar.sidebar-physical::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(140deg, transparent 0 58%, rgba(96, 165, 250, 0.18) 58.4% 61%, transparent 61.4%),
        linear-gradient(320deg, transparent 0 48%, rgba(59, 130, 246, 0.24) 48.3% 52%, transparent 52.4%);
    pointer-events: none;
}

.sidebar.sidebar-physical::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 104px;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

.sidebar-physical .physical-brand,
.sidebar-physical .physical-profile,
.sidebar-physical .physical-nav {
    position: relative;
    z-index: 1;
}

.sidebar-physical .physical-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    padding: 0 22px;
    background: linear-gradient(90deg, rgba(29, 78, 216, 0.95), rgba(96, 165, 250, 0.7));
}

.sidebar-physical .physical-brand-mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-weight: 900;
    line-height: 1;
}

.sidebar-physical .physical-brand-name {
    color: #ffffff;
    font-size: 1.03rem;
    font-weight: 900;
}

.sidebar-physical .physical-profile {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 18px 20px 20px !important;
    border: 0 !important;
    text-align: left !important;
    animation: none !important;
}

.sidebar-physical .physical-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background:
        repeating-linear-gradient(45deg, #0b1020 0 4px, #3b82f6 4px 8px);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
    color: #e9f2ff;
}

.sidebar-physical .physical-user {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sidebar-physical .physical-user strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-physical .physical-user small {
    color: rgba(232, 240, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 700;
}

.sidebar-physical .physical-user-arrow {
    color: rgba(232, 240, 255, 0.64);
    font-size: 0.72rem;
}

.sidebar-physical .physical-nav {
    padding: 12px 0 22px !important;
}

.sidebar-physical .physical-menu-label {
    margin: 0 20px 8px;
    color: rgba(226, 238, 255, 0.72);
    font-size: 0.74rem;
    font-weight: 800;
}

.sidebar-physical .physical-nav ul {
    display: grid;
    gap: 2px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-physical .physical-nav li {
    padding: 0 14px !important;
}

.sidebar-physical .physical-nav a {
    position: relative;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 4px !important;
    color: rgba(246, 250, 255, 0.9) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease !important;
}

.sidebar-physical .physical-nav a i {
    width: 22px !important;
    color: rgba(246, 250, 255, 0.92) !important;
    font-size: 1rem !important;
    text-align: center;
}

.sidebar-physical .physical-nav a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-physical .physical-nav a:hover,
.sidebar-physical .physical-nav a.active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.sidebar-physical .physical-nav a.active::after {
    content: "";
    position: absolute;
    right: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14);
}

.sidebar-physical .physical-nav-separator {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.sidebar-physical + .content,
.sidebar-physical ~ .content,
.sidebar-physical + .main-content,
.sidebar-physical ~ .main-content {
    margin-left: 262px !important;
    width: auto !important;
}

@media (max-width: 980px) {
    .sidebar.sidebar-physical {
        --physical-sidebar-width: 78px;
        width: var(--physical-sidebar-width) !important;
    }

    .sidebar-physical .physical-brand {
        justify-content: center;
        padding: 0;
    }

    .sidebar-physical .physical-brand-name,
    .sidebar-physical .physical-user,
    .sidebar-physical .physical-user-arrow,
    .sidebar-physical .physical-menu-label,
    .sidebar-physical .physical-nav a span {
        display: none !important;
    }

    .sidebar-physical .physical-profile {
        display: flex !important;
        justify-content: center;
        padding: 18px 0 !important;
    }

    .sidebar-physical .physical-nav li {
        padding: 0 12px !important;
    }

    .sidebar-physical .physical-nav a {
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 44px;
        padding: 8px !important;
    }

    .sidebar-physical .physical-nav a.active::after {
        right: 7px;
    }

    .sidebar-physical + .content,
    .sidebar-physical ~ .content,
    .sidebar-physical + .main-content,
    .sidebar-physical ~ .main-content {
        margin-left: 78px !important;
    }
}

@media (max-width: 768px) {
    .sidebar.sidebar-physical {
        position: fixed !important;
        width: 78px !important;
        height: 100vh !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    .sidebar-physical + .content,
    .sidebar-physical ~ .content,
    .sidebar-physical + .main-content,
    .sidebar-physical ~ .main-content {
        width: auto !important;
        margin-left: 78px !important;
        padding: 18px !important;
    }
}