:root {
  --portal-primary: #3559e0;
  --portal-primary-dark: #2744ba;
  --portal-accent: #6f7bf7;
  --portal-success: #159a71;
  --portal-warning: #d68b1f;
  --portal-danger: #dc4b5d;
  --portal-sidebar: #11182b;
  --portal-sidebar-2: #18213a;
  --portal-card-radius: 1rem;
  --portal-shadow: 0 12px 30px rgba(20, 30, 55, .08);
}

body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-header { border-bottom: 1px solid rgba(128, 128, 128, .14); box-shadow: 0 4px 18px rgba(17, 24, 39, .04); }
.app-sidebar { background: linear-gradient(180deg, var(--portal-sidebar), var(--portal-sidebar-2)) !important; }
.sidebar-brand { border-bottom-color: rgba(255, 255, 255, .08) !important; }
.brand-link { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand-mark { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; background: linear-gradient(135deg, #6f7bf7, #3559e0); color: #fff; box-shadow: 0 8px 22px rgba(53, 89, 224, .4); flex: 0 0 auto; }
.brand-text { color: #fff; font-size: .98rem; }
.sidebar-user-panel { margin: .85rem .8rem 1rem; padding: .85rem; display: flex; align-items: center; gap: .75rem; border: 1px solid rgba(255,255,255,.08); border-radius: .9rem; background: rgba(255,255,255,.045); }
.sidebar-user-copy { min-width: 0; display: grid; }
.sidebar-user-copy strong { color: #fff; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-copy small { color: rgba(255,255,255,.55); font-size: .68rem; letter-spacing: .04em; }
.user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border-radius: .8rem; background: linear-gradient(135deg, #7c87ff, #3559e0); color: #fff; font-weight: 800; letter-spacing: .03em; box-shadow: 0 8px 20px rgba(53,89,224,.25); }
.user-avatar-sm { width: 2rem; height: 2rem; border-radius: .7rem; font-size: .74rem; }
.user-avatar-lg { width: 4.25rem; height: 4.25rem; border-radius: 1.2rem; font-size: 1.25rem; }
.portal-user-header { background: linear-gradient(135deg, #26355e, #3559e0) !important; color: #fff; min-height: 185px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.portal-user-header small { display: block; color: rgba(255,255,255,.72); margin-top: .35rem; }
.sidebar-menu .nav-header { color: rgba(255,255,255,.38); font-size: .67rem; letter-spacing: .11em; font-weight: 800; padding-top: 1.05rem; }
.sidebar-menu .nav-link { border-radius: .72rem; margin: .12rem .55rem; color: rgba(255,255,255,.72); }
.sidebar-menu .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-menu .nav-link.active { background: linear-gradient(135deg, rgba(111,123,247,.95), rgba(53,89,224,.98)); color: #fff; box-shadow: 0 8px 18px rgba(35, 62, 160, .35); }
.sidebar-menu .nav-treeview .nav-link { margin-left: 1.1rem; font-size: .9rem; }
.sidebar-menu .nav-treeview .nav-icon { font-size: .52rem !important; }

.app-content-header { padding-top: 1.45rem; padding-bottom: .9rem; }
.app-content-header h1 { font-weight: 760; letter-spacing: -.025em; font-size: clamp(1.55rem, 2vw, 2rem); }
.page-subtitle { color: var(--bs-secondary-color); margin-top: .25rem; }
.app-content { padding-bottom: 2rem; }
.breadcrumb { font-size: .82rem; }
.breadcrumb a { text-decoration: none; }

.card { border: 1px solid rgba(128, 128, 128, .12); border-radius: var(--portal-card-radius); box-shadow: var(--portal-shadow); overflow: hidden; }
.card-header { background: transparent; border-bottom-color: rgba(128,128,128,.12); padding: 1rem 1.15rem; font-weight: 700; }
.card-body { padding: 1.15rem; }
.card-footer { background: rgba(128,128,128,.025); border-top-color: rgba(128,128,128,.12); padding: 1rem 1.15rem; }
.card-title { font-weight: 750; }

.portal-stat { position: relative; min-height: 138px; color: #fff; border: 0; overflow: hidden; }
.portal-stat .card-body { position: relative; z-index: 2; padding: 1.25rem; }
.portal-stat .stat-label { font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.portal-stat .stat-value { font-size: 2rem; font-weight: 820; line-height: 1.15; margin-top: .45rem; }
.portal-stat .stat-icon { position: absolute; right: 1rem; bottom: .6rem; font-size: 4.2rem; opacity: .13; z-index: 1; }
.stat-primary { background: linear-gradient(135deg, #3559e0, #6f7bf7); }
.stat-success { background: linear-gradient(135deg, #0f8b68, #29b889); }
.stat-danger { background: linear-gradient(135deg, #c84155, #ef6a79); }
.stat-warning { background: linear-gradient(135deg, #bd7415, #e7a73c); }
.stat-info { background: linear-gradient(135deg, #197bba, #39a8db); }
.stat-dark { background: linear-gradient(135deg, #1b243b, #344365); }

.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .88rem .9rem; border-bottom-color: rgba(128,128,128,.13); vertical-align: middle; }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .055em; color: var(--bs-secondary-color); font-weight: 800; background: rgba(128,128,128,.035); white-space: nowrap; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: rgba(53,89,224,.035); }
.table-responsive { border-radius: inherit; }

.form-label, label { font-weight: 650; font-size: .84rem; margin-bottom: .45rem; }
.form-control, .form-select { min-height: 43px; border-radius: .72rem; border-color: rgba(128,128,128,.28); box-shadow: none; }
textarea.form-control { min-height: auto; }
.form-control:focus, .form-select:focus { border-color: rgba(53,89,224,.75); box-shadow: 0 0 0 .2rem rgba(53,89,224,.12); }
.input-group .form-control, .input-group .btn { min-height: 43px; }

.btn { border-radius: .7rem; font-weight: 700; padding: .58rem .9rem; }
.btn-sm { border-radius: .55rem; padding: .36rem .65rem; }
.btn-dark { background: var(--portal-primary); border-color: var(--portal-primary); }
.btn-dark:hover, .btn-dark:focus { background: var(--portal-primary-dark); border-color: var(--portal-primary-dark); }
.btn-primary { background: var(--portal-primary); border-color: var(--portal-primary); }
.btn-outline-dark { color: var(--portal-primary); border-color: rgba(53,89,224,.45); }
.btn-outline-dark:hover { background: var(--portal-primary); border-color: var(--portal-primary); }

.badge { border-radius: 999px; padding: .42em .7em; font-weight: 750; letter-spacing: .02em; }
.portal-alert { border: 0; border-radius: .85rem; box-shadow: 0 8px 22px rgba(17,24,39,.06); }
.notification-item { padding: .8rem 1rem; }
.notification-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .65rem; background: rgba(53,89,224,.1); color: var(--portal-primary); flex: 0 0 auto; }

.portal-actions { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.portal-section-title { font-weight: 760; margin: 0; font-size: 1.05rem; }
.portal-meta-list { display: grid; gap: .85rem; margin: 0; }
.portal-meta-row { display: grid; grid-template-columns: minmax(120px, .45fr) 1fr; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px dashed rgba(128,128,128,.2); }
.portal-meta-row:last-child { border-bottom: 0; padding-bottom: 0; }
.portal-meta-label { color: var(--bs-secondary-color); font-size: .8rem; font-weight: 700; }
.portal-meta-value { font-weight: 650; overflow-wrap: anywhere; }
.portal-empty { padding: 2.5rem 1rem; text-align: center; color: var(--bs-secondary-color); }
.portal-empty i { display: block; font-size: 2rem; margin-bottom: .5rem; opacity: .55; }
.portal-timeline { position: relative; margin-left: .5rem; padding-left: 1.4rem; }
.portal-timeline::before { content: ""; position: absolute; left: .22rem; top: .25rem; bottom: .25rem; width: 2px; background: rgba(53,89,224,.16); }
.portal-timeline-item { position: relative; padding-bottom: 1.25rem; }
.portal-timeline-item::before { content: ""; position: absolute; left: -1.47rem; top: .28rem; width: .62rem; height: .62rem; border-radius: 50%; background: var(--portal-primary); box-shadow: 0 0 0 4px rgba(53,89,224,.1); }
.portal-timeline-item:last-child { padding-bottom: 0; }

.pagination { gap: .25rem; }
.page-link { border-radius: .55rem !important; border-color: rgba(128,128,128,.16); color: var(--portal-primary); }
.active > .page-link { background: var(--portal-primary); border-color: var(--portal-primary); }
.app-footer { border-top-color: rgba(128,128,128,.12); font-size: .82rem; }

[data-bs-theme="dark"] .card { box-shadow: 0 14px 35px rgba(0,0,0,.18); }
[data-bs-theme="dark"] .table tbody tr:hover { background: rgba(111,123,247,.06); }

@media (max-width: 767.98px) {
  .app-content-header .breadcrumb { display: none; }
  .app-content-header { padding-top: 1rem; }
  .portal-meta-row { grid-template-columns: 1fr; gap: .2rem; }
  .portal-actions .btn { flex: 1 1 auto; }
  .table > :not(caption) > * > * { padding: .72rem; }
}