:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.08);
  --nav:#0b1220;
  --nav2:#0f1a2d;
  --navText:rgba(255,255,255,.82);
  --navMuted:rgba(255,255,255,.55);
  --shadow:0 8px 24px rgba(15,23,42,.06);
}

html,body{height:100%;}
body{background:var(--bg); color:var(--text);}

.app-shell{display:flex; min-height:100vh;}

/* Sidenav (Paces-style structure) */
.sidenav{width:260px; background:linear-gradient(180deg,var(--nav),var(--nav2)); color:var(--navText); position:sticky; top:0; height:100vh; display:flex; flex-direction:column;}
.sidenav__logo{display:flex; align-items:center; gap:10px; padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.06);}
.logo-mark{width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-weight:700;}
.logo-text__title{font-weight:700; letter-spacing:.2px;}
.logo-text__sub{font-size:12px; color:var(--navMuted); margin-top:-2px;}
.sidenav__scroll{flex:1; overflow:auto; padding:12px 10px;}
.sidenav__footer{margin-top:auto; padding:12px 18px; border-top:1px solid rgba(255,255,255,.06);}

/* Side nav (Paces-style list) */
.sidenav .side-nav{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px;}
.sidenav .side-nav-title{font-size:11px; color:var(--navMuted); letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:14px 12px 8px; pointer-events:none;}
.sidenav .side-nav-item{padding:0;}
.sidenav .side-nav-link{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--navText); text-decoration:none; font-size:14px; transition:background .15s, color .15s;}
.sidenav .side-nav-link:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidenav .side-nav-link.active{background:rgba(255,255,255,.12); color:#fff;}
.sidenav .side-nav-link .menu-icon{display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.sidenav .side-nav-link .menu-icon i{font-size:18px; opacity:.92;}
.sidenav .side-nav-link .menu-text{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sidenav .side-nav-link .menu-arrow{margin-left:auto; width:16px; height:16px; opacity:.6; transition:transform .2s; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='rgba(255,255,255,.7)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16'/%3E%3C/svg%3E") center/contain no-repeat;}
.sidenav .side-nav-link[aria-expanded="true"] .menu-arrow{transform:rotate(-180deg);}
.sidenav .side-nav-item > .side-nav-link[aria-expanded="true"]{background:rgba(255,255,255,.12); color:#fff;}
.sidenav .collapse{visibility:visible;}
.sidenav .collapse:not(.show){display:none;}
.sidenav .collapse.show{display:block;}
.sidenav .sub-menu{list-style:none; padding:0 0 8px 0; margin:0; display:flex; flex-direction:column; gap:2px;}
.sidenav .sub-menu .side-nav-link{padding:8px 12px 8px 38px; font-size:13px; color:var(--navMuted);}
.sidenav .sub-menu .side-nav-link .menu-icon{display:none;}
.sidenav .sub-menu .side-nav-link:hover{color:#fff;}
.sidenav .sub-menu .side-nav-link.active{color:#fff; background:rgba(255,255,255,.08);}

/* Main */
.app-main{flex:1; display:flex; flex-direction:column; min-width:0;}

/* Topbar */
.topbar{height:64px; background:var(--panel); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 16px; box-shadow:0 1px 0 rgba(15,23,42,.02); position:sticky; top:0; z-index:1020;}
.topbar__left{display:flex; align-items:center; gap:12px; min-width:0; flex:1;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{width:26px; height:26px; border-radius:8px;}
.brand__text{font-weight:700;}

.search{display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; min-width:280px; background:#fff;}
.search input{border:0; outline:0; width:100%; font-size:14px;}
.search i{color:var(--muted);}

.topbar__right{display:flex; align-items:center; gap:8px;}
.icon-btn{width:36px; height:36px; border-radius:12px; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; position:relative;}
.icon-btn i{font-size:18px; color:var(--muted);}
.icon-btn:hover{box-shadow:var(--shadow);}
.icon-btn--notify{position:relative;}
.notification-badge{position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px; font-size:11px; font-weight:700; line-height:18px; text-align:center; color:#fff; background:#ef4444; border-radius:9px; border:2px solid var(--panel);}
.notification-badge.d-none{display:none !important;}
.topbar-divider{width:1px; height:20px; background:var(--border);}
.topbar-lang{font-size:13px; font-weight:600; color:var(--text);}
.topbar-lang__flag{width:20px; height:14px; border-radius:2px; object-fit:cover;}

.profile{display:flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--border); border-radius:14px; background:#fff; text-decoration:none; color:inherit;}
.profile:hover{color:inherit;}
.profile--trigger{cursor:pointer;}
button.profile{font:inherit; text-align:left;}
.profile__avatar{width:36px; height:36px; border-radius:50%; background:#0f172a; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0;}
.profile__meta{line-height:1.1; min-width:0;}
.profile__name{font-size:13px; font-weight:700;}
.profile__role{font-size:12px; color:var(--muted);}
.profile__chevron{margin-left:4px; font-size:14px; color:var(--muted);}

/* Hide Bootstrap's default dropdown arrow when using custom chevron */
.drop-arrow-none.dropdown-toggle::after{display:none;}

/* User dropdown (Paces-style) */
.user-dropdown__menu{min-width:220px; padding:0; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow); margin-top:8px;}
.user-dropdown__header{padding:12px 14px; font-size:13px;}
.user-dropdown__item{display:flex; align-items:center; padding:10px 14px; font-size:14px; color:var(--text);}
.user-dropdown__item:hover{background:rgba(15,23,42,.04);}
.user-dropdown__item i{font-size:18px; color:var(--muted); flex-shrink:0;}
.dropdown-divider{margin:4px 0;}

.content{padding:16px;}

.page-title{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.page-title h2,.page-title h4,.page-title .h4{font-size:1.25rem; font-weight:700; margin:0 0 4px 0;}
.breadcrumbs{font-size:12px; color:var(--muted);}
.breadcrumbs span{margin:0 6px; opacity:.6;}
.page-title__actions{flex-shrink:0;}

/* Cards */
.card{border:1px solid var(--border); border-radius:12px; box-shadow:0 1px 3px rgba(15,23,42,.04);}
.card-header--clean{background:transparent; border-bottom:1px solid var(--border); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.card-title{font-weight:800; font-size:14px; margin:0;}
.card-subtitle{font-size:12px; color:var(--muted); margin-top:2px;}

.tile .card-body{padding:16px;}
.tile__row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.tile__label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.7px;}
.tile__value{font-size:26px; font-weight:800; margin-top:6px;}
.tile__sub{font-size:12px; margin-top:2px;}
.tile__icon{width:44px; height:44px; border-radius:16px; background:rgba(15,23,42,.04); display:flex; align-items:center; justify-content:center;}
.tile__icon i{font-size:20px; color:#0f172a; opacity:.85;}

.table thead th{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px;}
.table td{font-size:14px;}

.activity{display:flex; flex-direction:column; gap:14px;}
.activity__item{display:flex; gap:12px; align-items:flex-start;}
.activity__icon{width:34px; height:34px; border-radius:14px; background:rgba(15,23,42,.04); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.activity__icon i{font-size:18px; color:#0f172a; opacity:.8;}
.activity__title{font-weight:700; font-size:13px;}
.activity__meta{font-size:12px; color:var(--muted);}

.footer-note{margin-top:18px; text-align:center; color:var(--muted); font-size:12px;}

/* Responsive topbar & sidenav (professional responsive layout) */
@media (max-width: 991.98px) {
  .topbar{padding:0 12px;}
  .topbar__left{flex-wrap:nowrap; gap:0;}
  .topbar__right{gap:6px;}
  .sidenav-toggle-button{
    width:40px; height:40px; border-radius:50%; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0; border:none; background:var(--bs-primary, #0d6efd) !important;
  }
  .sidenav-toggle-button i{font-size:20px; color:#fff;}
  .icon-btn{width:40px; height:40px; border-radius:50%; border:none; background:transparent;}
  .icon-btn:hover{background:rgba(15,23,42,.04);}
  .profile{padding:0; border:none; background:transparent;}
  .profile:hover{background:transparent;}
  .profile__avatar{width:40px; height:40px; border-radius:50%;}
}

@media (max-width: 575.98px) {
  .topbar{padding:0 10px;}
  .topbar-lang__code{display:none;}
}

/* Sidenav offcanvas on mobile/tablet */
@media (max-width: 991.98px) {
  .sidenav{
    position:fixed; top:0; left:0; bottom:0; z-index:1050;
    width:260px; margin-left:-260px; transition:margin-left .25s ease, box-shadow .25s ease;
    box-shadow:none;
  }
  body.sidebar-enable .sidenav{
    margin-left:0; box-shadow:8px 0 24px rgba(0,0,0,.15);
  }
  .sidenav-close-button{
    display:flex !important; position:absolute; top:12px; right:12px;
    width:36px; height:36px; align-items:center; justify-content:center;
    border:none; background:rgba(255,255,255,.1); border-radius:10px;
    color:var(--navText); cursor:pointer; z-index:10;
  }
  .sidenav-close-button:hover{background:rgba(255,255,255,.18); color:#fff;}
}

/* Hide sidenav close button on desktop */
@media (min-width: 992px) {
  .sidenav-close-button{display:none !important;}
}

/* Backdrop when sidebar is open */
.sidebar-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.4);
  z-index:1040; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
body.sidebar-enable .sidebar-backdrop{
  opacity:1; visibility:visible;
}

/* Page header & content responsive (professional layout) */
@media (max-width: 991.98px) {
  .content{padding:12px 16px;}
  .page-title{flex-direction:column; align-items:stretch; gap:12px;}
  .page-title__actions{width:100%;}
  .page-title__actions .btn{width:100%; justify-content:center;}
  .container-fluid{padding-left:0; padding-right:0;}
}

@media (max-width: 575.98px) {
  .content{padding:12px;}
  .page-title h2,.page-title h4{font-size:1.125rem;}
  .card-header--clean{padding:12px 14px;}
  .card-body{padding:14px !important;}
  .table-responsive{margin:0 -14px;}
  .table-responsive .table{margin:0;}
  .btn-success.rounded-pill{padding:10px 16px; font-size:14px;}
}

/* Modals */
.modal-overlay{position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:center; justify-content:center; z-index:1050; padding:16px;}
.modal-overlay--open{display:flex;}
.modal-drawer{margin-left:auto; max-width:520px;}
.modal-card{background:var(--panel); border-radius:18px; box-shadow:var(--shadow); width:100%; max-width:520px; border:1px solid var(--border);}
.modal-header{padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px;}
.modal-title{margin:0; font-size:16px; font-weight:700;}
.modal-close{border:0; background:transparent; color:var(--muted);}
.modal-body{padding:16px 18px; max-height:70vh; overflow:auto;}
.modal-footer{padding:12px 18px 16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px;}
.modal-error{font-size:13px; color:#b91c1c; margin-top:8px;}

/* Table actions & pagination */
.table-actions{display:flex; gap:6px; justify-content:flex-end;}
.pagination-bar{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-size:13px; color:var(--muted);}
.pagination-bar .btn{font-size:13px; padding:4px 10px;}

/* Toasts */
#toast-container{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:1100;}
.toast{background:#0f172a; color:#fff; padding:8px 12px; border-radius:999px; font-size:13px; box-shadow:var(--shadow); opacity:0.95; transition:opacity .2s ease, transform .2s ease;}
.toast--success{background:#15803d;}
.toast--error{background:#b91c1c;}
.toast--info{background:#0f172a;}
.toast--hide{opacity:0; transform:translateY(4px);}