* { box-sizing: border-box; }
:root{
  --blue:#005eb8;
  --blue-600:#005eb8;
  --blue-50:#e5f1fb;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#d1d5db;
  --bg:#f4f4f4;
  --white:#fff;
  --success:#1aa36f;
  --warn:#f59e0b;
  --danger:#dc2626;
  --dashboard-zoom: .9;
  --dashboard-zoom-width: 111.111vw;
  --dashboard-zoom-height: 111.111vh;
}

/* 0) Khóa cuộn ở root */
html { height: 100%; overflow: hidden; }

/* 1) Thân trang chiếm đúng 100vh */
body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height:1.4;
  background-color: var(--bg);
  color: var(--text);
  height: 100vh;              
  display: flex;
  flex-direction: column;
  overflow: hidden;           
}

body.dashboard-page{
  zoom: var(--dashboard-zoom);
  width: var(--dashboard-zoom-width);
  height: var(--dashboard-zoom-height);
}

/* 2) Phần thân dashboard ôm iframe */
.dashboard-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;          
}

/* 3) Iframe chiếm trọn phần còn lại */
iframe#contentFrame{
  flex: 1 1 auto;
  width: 100%;
  height: 100%;             
  border: none;
  background: #fff;
  display: block;
}


/* ============ Header ============ */
header {
  background-color: var(--blue);
  color: var(--white);
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 700;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
header .brand a{ color:var(--white); text-decoration:none; }

/* ============ Menu ngang ============ */
nav.menu {
  background-color: var(--blue-50);
  padding: 0 10px;
  display: block;
  border-bottom: 1px solid #cdd9e6;
}
nav.menu ul.menu-horizontal{
  margin:0; padding:0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
nav.menu ul.menu-horizontal > li{
  list-style:none; position:relative;
}
nav.menu a{
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 12px;
  color: var(--blue);
  text-decoration: none;
  font-size: 14px;
  border-radius: 4px;
}
nav.menu a:hover,
nav.menu a.active{
  background-color: var(--blue);
  color: var(--white);
}

/* ------ Dropdown (hover mở tự động) ------ */
.menu-horizontal .dropdown-menu{
  position:absolute;
  top: calc(100% + 1px);
  left: 100%;
  right: auto;
  transform: translateX(-50%);
  min-width: 240px;
  background: var(--white);
  color: var(--text);
  border:1px solid #e5e7eb;
  border-radius:6px;
  padding:6px 0;
  margin-top:0;
  box-shadow: 0 12px 20px rgba(0,0,0,.08);
  display:none;
  z-index:1000;
  white-space:nowrap;
}

.menu-horizontal .has-dropdown > a { cursor:pointer; }
.menu-horizontal .dropdown-menu li{ list-style:none; }
.menu-horizontal .dropdown-menu a{
  display:block; padding:8px 14px; color:inherit; text-decoration:none;
}
.menu-horizontal .dropdown-menu a:hover{
  background:#f3f4f6;
}/* nếu dropdown quá gần mép phải màn hình, vẫn ôm theo tab */
.menu-horizontal > li.has-dropdown:hover > .dropdown-menu{ display:block; }
.menu-horizontal > li.has-dropdown:last-child .dropdown-menu{
  left: 100%;
  right: auto;
  transform: translateX(-50%);
}

/* ============ Khối nội dung chung ============ */
.container{
  padding: 16px;
}

/* ============ Card / Panel ============ */
.panel{
  background: var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
}

.duty-view-backdrop{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.45);
}
.duty-view-modal{
  width:min(1180px,96vw);
  max-height:92vh;
  overflow:auto;
  background:#fff;
  border-radius:8px;
  box-shadow:0 24px 60px rgba(15,23,42,.28);
  padding:14px;
}
.duty-view-header,
.duty-view-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.duty-view-header{
  margin-bottom:10px;
  color:#0f172a;
  font-size:18px;
  font-weight:800;
}
.duty-view-toolbar{
  justify-content:space-between;
  margin-bottom:10px;
}
.duty-view-actions{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}
.duty-view-toolbar label{
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#334155;
  font-size:12px;
  font-weight:700;
}
.duty-view-toolbar input{
  height:36px;
  box-sizing:border-box;
  padding:6px 8px;
  border:1px solid #cbd5e1;
  border-radius:6px;
}
.duty-view-toolbar .btn{
  height:36px;
  box-sizing:border-box;
}
.duty-view-status{
  min-height:18px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
  margin-bottom:8px;
}
.duty-view-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(112px,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid #dbe3ef;
  border-radius:8px;
  background:#dbe3ef;
}
.duty-view-head,
.duty-view-cell{
  background:#fff;
  min-width:0;
}
.duty-view-head{
  padding:8px;
  color:#475569;
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.duty-view-cell{
  min-height:112px;
  padding:7px;
}
.duty-view-cell.muted{
  background:#f8fafc;
  color:#94a3b8;
}
.duty-view-date{
  margin-bottom:6px;
  color:#0f172a;
  font-size:12px;
  font-weight:800;
}
.duty-view-event{
  margin-top:4px;
  border-left:3px solid #2563eb;
  border-radius:6px;
  background:#eff6ff;
  color:#1e3a8a;
  padding:5px 6px;
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.duty-view-event.backup{
  border-left-color:#d97706;
  background:#fffbeb;
  color:#92400e;
}
.duty-view-event.exception{
  border-left-color:#dc2626;
  background:#fef2f2;
  color:#991b1b;
}

/* ============ Form bộ lọc ============ */
.form-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.form-col-2{ grid-column: span 2; }
.form-col-3{ grid-column: span 3; }
.form-col-4{ grid-column: span 4; }
.form-col-6{ grid-column: span 6; }
.form-col-12{ grid-column: span 12; }

.form-group label{
  display:block;
  font-size: 13px;
  color: var(--text);
  margin-bottom:6px;
}

.input,
select,
input[type="text"],
input[type="date"],
input[type="number"]{
  width:100%;
  height:34px;
  padding: 6px 10px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:14px;
  color:var(--text);
  background:#fff;
  outline:none;
  transition: border-color .15s ease;
}
input:focus, select:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(0,94,184,.12);
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; height:32px; padding:0 12px;
  border-radius:6px; border:1px solid transparent;
  font-size:14px; cursor:pointer; text-decoration:none;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-primary{
  background: var(--blue); color:#fff; border-color: var(--blue);
}
.btn-primary:hover{ filter:brightness(0.95); }
.btn-secondary{
  background:#e8eef6; color:#1f3b75; border-color:#d7e2f1;
}
.btn-secondary:hover{ background:#dfe8f6; }
.btn-danger{
  background: var(--danger); color:#fff; border-color: var(--danger);
}
.btn-warning{
  background: var(--warn); color:#111827; border-color: var(--warn);
}
.btn-success{
  background: var(--success); color:#fff; border-color: var(--success);
}

/* ============ Bảng dữ liệu ============ */
.table-wrap{
  background:#fff; border:1px solid var(--border);
  border-radius:8px; overflow:hidden;
}

table{
  width:100%; border-collapse: collapse; background:#fff;
}
thead th{
  background:#eaf2fb;
  color:#0f2f63;
  font-weight:700;
  border-bottom:1px solid var(--border);
  padding:10px 8px;
  font-size:14px;
  position:sticky; top:0; z-index:1; /* sticky header */
}
tbody td{
  padding:9px 8px; border-bottom:1px solid #edf0f4; font-size:14px;
}
tbody tr:hover{ background:#fbfdff; }
.table-empty{
  text-align:center; padding:18px; color:var(--muted);
}

/* cột có thể sort (nếu bạn thêm icon hoặc toggle class .sortable) */
th.sortable{ cursor:pointer; }
th.sortable:after{
  content:"⇅"; font-size:11px; margin-left:6px; color:#6b7280;
}
th.sortable.asc:after{ content:"↑"; }
th.sortable.desc:after{ content:"↓"; }

/* ============ Badge trạng thái ============ */
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:12px; font-weight:700;
}
.badge-nw{ background:#e1effe; color:#1e3a8a; }   /* New/Waiting */
.badge-inp{ background:#fff7ed; color:#9a3412; }  /* In process */
.badge-done{ background:#dcfce7; color:#166534; } /* Done */
.badge-cancel{ background:#fee2e2; color:#991b1b; } /* Cancel */

/* ============ Pagination ============ */
.pagination{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.pagination .page-btn{
  height:30px; min-width:34px; padding:0 8px;
  border:1px solid var(--border); background:#fff; border-radius:6px;
  font-size:13px; cursor:pointer;
}
.pagination .page-btn[disabled]{ opacity:.6; cursor:not-allowed; }
.pagination .page-btn.active{
  border-color: var(--blue); color:#fff; background: var(--blue);
}

/* ============ Helpers ============ */
.mt-8{ margin-top:8px; } .mt-12{ margin-top:12px; } .mt-16{ margin-top:16px; }
.mb-8{ margin-bottom:8px; } .mb-12{ margin-bottom:12px; } .mb-16{ margin-bottom:16px; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }
.text-right{ text-align:right; } .text-muted{ color:var(--muted); }


/* ============ Responsive ============ */
@media (max-width: 1200px){
  .form-col-3{ grid-column: span 4; }
  .form-col-2{ grid-column: span 3; }
}
@media (max-width: 992px){
  nav.menu ul.menu-horizontal{ gap:4px; }
  .form-grid{ grid-template-columns: repeat(6, 1fr); }
  .form-col-4{ grid-column: span 6; }
  .form-col-3{ grid-column: span 6; }
  .form-col-2{ grid-column: span 3; }
}
@media (max-width: 640px){
  .form-grid{ grid-template-columns: repeat(2, 1fr); }
  .form-col-6,.form-col-4,.form-col-3,.form-col-2{ grid-column: span 2; }
  header{ font-size:16px; padding:8px 12px; }
}

/* Đảm bảo dropdown nổi trên iframe */
nav.menu { position: relative; z-index: 10; }
.menu-horizontal .dropdown-menu { z-index: 1000; }

header .user-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
header .user-name {
  font-weight: 500;
}
.user-role-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 14px;
  background: #e5e7eb;
  color: #374151;
}
.user-role-badge.role-admin {
  background: #fee2e2;
  color: #b91c1c;
}
.user-role-badge.role-user {
  background: #e0f2fe;
  color: #0369a1;
}

/* ============ Dashboard Shell ============ */
.dashboard-topbar{
  position: relative;
  z-index: 20;
  background: linear-gradient(90deg, #0a57c6 0%, #0d839f 100%);
  box-shadow: 0 10px 26px rgba(10,87,198,.18);
  padding: 12px 16px;
  gap: 16px;
  color: #fff;
}

.dashboard-topbar .brand{
  flex: 1 1 auto;
  min-width: 260px;
}

.dashboard-topbar .brand a{
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding-left: 58px;
  padding-bottom: 14px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.1;
}

.dashboard-topbar .brand a::before{
  content:"≣";
  position:absolute;
  left:0;
  top:50%;
  width:42px;
  height:42px;
  border-radius:14px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  color:#fff;
  font-size:18px;
  font-weight:900;
}

.dashboard-topbar .brand a::after{
  content:"Dashboard";
  position:absolute;
  left:58px;
  bottom:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.dashboard-topbar .user-panel{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-left:auto;
  font-size:14px;
}

.dashboard-topbar .user-panel > a:first-child{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:800;
}

.dashboard-topbar #topUserName{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:15px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.dashboard-topbar #topUserRole{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.94);
  color:#1d4ed8;
}

.dashboard-topbar #topUserRole:empty{
  display:none;
}

.dashboard-topbar #topCenterSelect{
  width:320px !important;
  min-width:290px;
  max-width:430px;
  height:44px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid #cadced;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  color:#12304d;
  font-size:14px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.dashboard-topbar .btn{
  min-height:44px;
  height:44px;
  padding:0 16px;
  border-radius:14px;
  font-size:15px;
  font-weight:800;
  border:1px solid transparent;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.dashboard-topbar .btn:hover,
.dashboard-topbar #topCenterSelect:hover{
  transform:translateY(-1px);
}

.dashboard-topbar .btn.btn-secondary{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  color:#12304d;
  border-color:#cadced;
}

.dashboard-topbar .btn.btn-secondary:hover{
  background:#fff;
  border-color:#a8c7e1;
  box-shadow:0 10px 22px rgba(15,23,42,.1);
}

.dashboard-topbar .btn.btn-danger{
  background:linear-gradient(135deg,#df4b37 0%,#c72f1e 100%);
  color:#fff;
  border-color:transparent;
}

.dashboard-topbar .btn.btn-danger:hover{
  box-shadow:0 12px 24px rgba(199,47,30,.26);
}

.dashboard-topbar #topUserRole.role-admin{
  background:#fff2f2;
  border-color:rgba(255,255,255,.16);
  color:#c2410c;
}

.dashboard-topbar #topUserRole.role-user{
  background:#eef6ff;
  color:#1d4ed8;
}

.dashboard-menu{
  position:relative;
  z-index:15;
  padding:10px 16px 12px;
  background:linear-gradient(180deg,#eff8ff 0%,#e5f1fb 100%);
  border-bottom:1px solid #d6e7f3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.dashboard-menu ul.menu-horizontal{
  gap:10px;
}

.dashboard-menu ul.menu-horizontal > li{
  position:relative;
}

.dashboard-menu ul.menu-horizontal > li > a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 16px;
  border-radius:16px;
  border:1px solid transparent;
  background:transparent;
  color:#0b5b7e !important;
  font-size:15px;
  font-weight:800 !important;
  box-shadow:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.dashboard-menu ul.menu-horizontal > li > a:hover{
  background:rgba(255,255,255,.82);
  border-color:#d6e7f3;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
  transform:translateY(-1px);
}

.dashboard-menu ul.menu-horizontal > li > a.active,
.dashboard-menu ul.menu-horizontal > li.menu-active > a,
.dashboard-menu ul.menu-horizontal > li.has-dropdown.open > a{
  background:linear-gradient(135deg,#1663d8 0%,#38a7ef 100%);
  border-color:transparent;
  color:#fff !important;
  box-shadow:0 14px 28px rgba(22,99,216,.22);
}

.dashboard-menu ul.menu-horizontal > li > a .mi{
  width:34px;
  height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(22,99,216,.09);
  color:#1663d8;
  transition:background .16s ease, color .16s ease;
}

.dashboard-menu ul.menu-horizontal > li > a.active .mi,
.dashboard-menu ul.menu-horizontal > li.menu-active > a .mi,
.dashboard-menu ul.menu-horizontal > li.has-dropdown.open > a .mi,
.dashboard-menu ul.menu-horizontal > li > a:hover .mi{
  background:rgba(255,255,255,.18);
  color:inherit;
}

.dashboard-menu .has-dropdown > a::after{
  content:"▾";
  font-size:12px;
  margin-left:2px;
  opacity:.72;
}

.dashboard-menu .dropdown-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:280px;
  padding:10px;
  margin:0;
  background:linear-gradient(180deg,#ffffff 0%,#f8fcff 100%);
  color:#12304d;
  border:1px solid #d8e5f1;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(15,23,42,.14);
  display:block;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  white-space:nowrap;
}

.dashboard-menu .dropdown-menu li{
  list-style:none;
}

.dashboard-menu .dropdown-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  color:#12304d;
  font-size:14px;
  font-weight:700;
  background:transparent;
}

.dashboard-menu .dropdown-menu a .mi{
  width:32px;
  height:32px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#eef6ff;
  color:#1663d8;
}

.dashboard-menu .dropdown-menu a:hover,
.dashboard-menu .dropdown-menu a.active{
  background:linear-gradient(180deg,#eef8ff 0%,#e1f0fb 100%);
  border-color:#d6e7f3;
  color:#0b5b7e;
}

.dashboard-menu .dropdown-menu a:hover .mi,
.dashboard-menu .dropdown-menu a.active .mi{
  background:#dceeff;
}

.dashboard-menu .has-dropdown:hover > .dropdown-menu,
.dashboard-menu .has-dropdown:focus-within > .dropdown-menu,
.dashboard-menu .has-dropdown.open > .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.dashboard-menu .menu-horizontal > li:last-child .dropdown-menu{
  left:50%;
  right:auto;
  transform:translateX(-50%) translateY(8px);
}

@media (max-width: 1280px){
  .dashboard-topbar{
    padding-bottom:18px;
  }

  .dashboard-topbar .brand{
    width:100%;
  }

  .dashboard-topbar .user-panel{
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width: 960px){
  .dashboard-topbar{
    gap:12px;
    padding:12px;
  }

  .dashboard-topbar .brand a{
    font-size:18px;
    padding-left:52px;
  }

  .dashboard-topbar .brand a::before{
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .dashboard-topbar .brand a::after{
    left:52px;
  }

  .dashboard-topbar .user-panel{
    gap:10px;
  }

  .dashboard-topbar #topCenterSelect,
  .dashboard-topbar .btn{
    width:100%;
    max-width:none;
  }

  .dashboard-menu{
    padding:10px 12px 12px;
  }

  .dashboard-menu ul.menu-horizontal > li{
    width:100%;
  }

  .dashboard-menu ul.menu-horizontal > li > a{
    width:100%;
    justify-content:flex-start;
  }

  .dashboard-menu .dropdown-menu{
    position:static;
    min-width:0;
    width:100%;
    margin-top:8px;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    box-shadow:none;
    display:none;
  }

  .dashboard-menu .has-dropdown:hover > .dropdown-menu,
  .dashboard-menu .has-dropdown:focus-within > .dropdown-menu{
    display:none;
  }

  .dashboard-menu .has-dropdown.open > .dropdown-menu{
    display:block;
  }

  .dashboard-menu .menu-horizontal > li:last-child .dropdown-menu{
    right:auto;
  }
}

@media (max-width: 640px){
  .dashboard-topbar .brand a{
    font-size:16px;
    line-height:1.25;
  }

  .dashboard-topbar .user-panel > a:first-child,
  .dashboard-topbar #topUserName{
    width:100%;
  }
}

/* ============ Dashboard Shell V2 ============ */
.dashboard-topbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-height:50px;
  padding:6px 14px;
  background:linear-gradient(90deg, #0a57c6 0%, #0d839f 100%);
  box-shadow:0 10px 24px rgba(10,87,198,.18);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.dashboard-topbar .brand{
  flex:0 1 auto;
  min-width:0;
  width:auto;
}

.dashboard-topbar .brand a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding-left:46px;
  color:#fff;
  text-decoration:none;
  font-size:clamp(15px, 1.05vw, 17px);
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.05;
  white-space:nowrap;
}

.dashboard-topbar .brand a::before{
  content:"\f15c";
  position:absolute;
  left:0;
  top:50%;
  width:34px;
  height:34px;
  border-radius:12px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  color:#fff;
  font-family:"Font Awesome 7 Free";
  font-weight:900;
  font-size:15px;
}

.dashboard-topbar .brand a::after{
  content:none;
}

.dashboard-topbar .user-panel{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1 1 560px;
  min-width:0;
  width:auto;
  margin-left:auto;
  flex-wrap:wrap;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.dashboard-topbar .user-panel > a:first-child{
  color:rgba(255,255,255,.96);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.dashboard-topbar #topUserName,
.dashboard-topbar #topUserRole{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.dashboard-topbar #topUserName{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.16);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.dashboard-topbar #topUserName:empty,
.dashboard-topbar #topUserRole:empty,
.dashboard-topbar #topUserRole[hidden]{
  display:none;
}

.dashboard-topbar #topUserRole{
  min-height:28px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.94);
  color:#1d4ed8;
}

.dashboard-topbar #topUserRole.role-admin{
  background:#fff2eb;
  color:#b45309;
}

.dashboard-topbar #topUserRole.role-user{
  background:#eef6ff;
  color:#1d4ed8;
}

.dashboard-topbar #topCenterSelect{
  width:320px !important;
  min-width:260px;
  max-width:380px;
  height:34px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid #cadced;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  color:#12304d;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.dashboard-topbar .btn{
  min-height:34px;
  height:34px;
  padding:0 13px;
  border-radius:12px;
  border:1px solid transparent;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.dashboard-topbar .btn:hover,
.dashboard-topbar #topCenterSelect:hover{
  transform:translateY(-1px);
}

.dashboard-topbar .btn.btn-secondary{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  color:#12304d;
  border-color:#cadced;
}

.dashboard-topbar .btn.btn-secondary:hover{
  background:#fff;
  border-color:#a8c7e1;
  box-shadow:0 10px 22px rgba(15,23,42,.1);
}

.dashboard-topbar .btn.btn-danger{
  background:linear-gradient(135deg,#df4b37 0%,#c72f1e 100%);
  color:#fff;
  border-color:transparent;
}

.dashboard-topbar .btn.btn-danger:hover{
  box-shadow:0 12px 24px rgba(199,47,30,.26);
}

.dashboard-menu{
  padding:6px 14px 8px;
  background:linear-gradient(180deg,#eef5fb 0%,#e5eef8 100%);
  border-bottom:1px solid #d5e4ef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.dashboard-menu ul.menu-horizontal{
  gap:8px;
  flex-wrap:nowrap;
  overflow:visible;
}

.dashboard-menu ul.menu-horizontal > li{
  flex:0 0 auto;
  position:relative;
}

.dashboard-menu ul.menu-horizontal > li.has-dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:10px;
}

.dashboard-menu ul.menu-horizontal > li > a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid transparent;
  background:rgba(255,255,255,.72);
  color:#20456f !important;
  font-size:13px;
  font-weight:800 !important;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.dashboard-menu ul.menu-horizontal > li > a:hover{
  transform:translateY(-1px);
  border-color:#d3e2ee;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.dashboard-menu ul.menu-horizontal > li > a.active,
.dashboard-menu ul.menu-horizontal > li.menu-active > a,
.dashboard-menu ul.menu-horizontal > li.has-dropdown.open > a{
  background:linear-gradient(135deg,#1663d8 0%,#63a8ef 100%);
  border-color:transparent;
  color:#fff !important;
  box-shadow:0 14px 28px rgba(22,99,216,.22);
}

.dashboard-menu ul.menu-horizontal > li > a .mi{
  width:28px;
  height:28px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e8f0fb;
  color:#2b66c9;
  flex:0 0 28px;
  transition:background .16s ease, color .16s ease;
}

.dashboard-menu ul.menu-horizontal > li > a.active .mi,
.dashboard-menu ul.menu-horizontal > li.menu-active > a .mi,
.dashboard-menu ul.menu-horizontal > li.has-dropdown.open > a .mi,
.dashboard-menu ul.menu-horizontal > li > a:hover .mi{
  background:rgba(255,255,255,.18);
  color:inherit;
}

.dashboard-menu .has-dropdown > a::after{
  content:"\f078";
  margin-left:2px;
  font-family:"Font Awesome 7 Free";
  font-weight:900;
  font-size:10px;
  opacity:.7;
}

.dashboard-menu .dropdown-menu{
  position:absolute;
  top:calc(100% + 2px);
  left:0;
  min-width:228px;
  max-width:280px;
  padding:8px;
  margin:0;
  border:1px solid #d7e5ef;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 18px 40px rgba(15,23,42,.14);
  display:block;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  white-space:normal;
}

.dashboard-menu .dropdown-menu::before{
  content:none;
  display:none;
}

.dashboard-menu .menu-horizontal > li:last-child .dropdown-menu{
  left:0;
  right:auto;
  transform:translateY(8px);
}

.dashboard-menu .dropdown-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:38px;
  padding:7px 9px;
  border-radius:11px;
  border:1px solid transparent;
  color:#1f3656;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  background:transparent;
}

.dashboard-menu .dropdown-menu a .mi{
  width:26px;
  height:26px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 26px;
  background:#eef6ff;
  color:#2b66c9;
}

.dashboard-menu .dropdown-menu a:hover,
.dashboard-menu .dropdown-menu a.active{
  background:linear-gradient(180deg,#eef7ff 0%,#e4f0fb 100%);
  border-color:#d6e4ef;
  color:#0f5b7f;
}

.dashboard-menu .dropdown-menu a:hover .mi,
.dashboard-menu .dropdown-menu a.active .mi{
  background:#ddeefe;
}

.dashboard-menu .has-dropdown:hover > .dropdown-menu,
.dashboard-menu .has-dropdown:focus-within > .dropdown-menu,
.dashboard-menu .has-dropdown.open > .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.dashboard-menu .menu-horizontal > li:last-child:hover > .dropdown-menu,
.dashboard-menu .menu-horizontal > li:last-child:focus-within > .dropdown-menu,
.dashboard-menu .menu-horizontal > li:last-child.open > .dropdown-menu{
  transform:translateY(0);
}

@media (max-width: 1440px){
  .dashboard-topbar{
    gap:12px;
    padding:6px 12px;
  }

  .dashboard-topbar .brand a{
    font-size:16px;
  }
}

@media (max-width: 1360px){
  .dashboard-topbar{
    gap:10px;
    padding:6px 10px;
  }

  .dashboard-topbar .brand{
    width:auto;
    flex:0 1 auto;
  }

  .dashboard-topbar .brand a{
    min-height:32px;
    padding-left:42px;
    font-size:15px;
  }

  .dashboard-topbar .brand a::before{
    width:30px;
    height:30px;
    border-radius:10px;
    font-size:13px;
  }

  .dashboard-topbar .user-panel{
    width:auto;
    flex:1 1 500px;
    gap:6px;
    flex-wrap:nowrap;
  }

  .dashboard-topbar .user-panel > a:first-child,
  .dashboard-topbar #topUserName,
  .dashboard-topbar #topUserRole{
    font-size:11px;
  }

  .dashboard-topbar #topUserName,
  .dashboard-topbar #topUserRole{
    min-height:28px;
    padding:0 10px;
  }

  .dashboard-topbar #topCenterSelect{
    width:270px !important;
    min-width:220px;
    max-width:300px;
    height:32px;
    padding:0 10px;
    font-size:11px;
  }

  .dashboard-topbar .btn{
    min-height:32px;
    height:32px;
    padding:0 11px;
    border-radius:10px;
    font-size:11px;
  }
}

@media (max-width: 1180px){
  .dashboard-topbar .brand{
    width:100%;
    flex-basis:100%;
  }

  .dashboard-topbar .user-panel{
    justify-content:flex-start;
    flex-basis:100%;
    width:100%;
    flex-wrap:wrap;
  }
}

@media (max-width: 960px){
  .dashboard-topbar{
    padding:6px 12px;
  }

  .dashboard-topbar .brand a{
    font-size:15px;
    padding-left:42px;
  }

  .dashboard-topbar .brand a::before{
    width:30px;
    height:30px;
    border-radius:9px;
    font-size:13px;
  }

  .dashboard-topbar #topCenterSelect,
  .dashboard-topbar .btn{
    width:100% !important;
    max-width:none;
  }

  .dashboard-menu{
    padding:6px 12px 8px;
  }

  .dashboard-menu ul.menu-horizontal{
    flex-wrap:wrap;
  }

  .dashboard-menu ul.menu-horizontal > li{
    width:100%;
  }

  .dashboard-menu ul.menu-horizontal > li > a{
    width:100%;
    justify-content:flex-start;
  }

  .dashboard-menu .dropdown-menu{
    position:static;
    min-width:0;
    max-width:none;
    width:100%;
    margin-top:8px;
    box-shadow:none;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }

  .dashboard-menu .menu-horizontal > li:last-child .dropdown-menu{
    left:auto;
    right:auto;
    transform:none;
  }

  .dashboard-menu .has-dropdown:hover > .dropdown-menu,
  .dashboard-menu .has-dropdown:focus-within > .dropdown-menu{
    display:none;
  }

  .dashboard-menu .has-dropdown.open > .dropdown-menu{
    display:block;
  }
}

@media (max-width: 640px){
  .dashboard-topbar{
    gap:12px;
  }

  .dashboard-topbar .brand a{
    white-space:normal;
    line-height:1.15;
  }

  .dashboard-topbar .user-panel > a:first-child,
  .dashboard-topbar #topUserName,
  .dashboard-topbar #topUserRole{
    width:100%;
    justify-content:flex-start;
  }

  .dashboard-menu ul.menu-horizontal > li > a{
    font-size:14px;
  }
}