#dir-filter .module-filter-title {
  display: grid;
  grid-template-columns: 40px auto;
  grid-template-rows: 22px 18px;
  column-gap: 10px;
  align-content: start;
  align-items: center;
  justify-content: start;
  height: 130px;
  padding: 30px 24px 0 30px;
}
#dir-filter .module-filter-title::before {
  content: "";
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: url("/assets/panel-icons/people.svg") center/21px no-repeat, linear-gradient(135deg,#2f8b5d,#55ad81);
  box-shadow: 0 4px 12px #276a492b;
}
#dir-filter .module-filter-title strong { font: 650 18px/22px Inter,"Segoe UI",sans-serif; color: #202c3c }
#dir-filter .module-filter-title::after { content: "Filterlər"; color: #71839b; font: 11px/18px Inter,"Segoe UI",sans-serif }
#dir-filter .filter-block > label { color: #35455d; font-weight: 500 }
#dir-filter .filter-block input[data-text] { padding-right: 34px; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23929da7' stroke-width='2'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E") right 10px center/15px no-repeat }
#dir-filter .filter-collapse {
  width: 38px; height: 38px; min-height: 38px; top: calc(var(--header) + 30px);
  left: calc(var(--rail) + var(--filter) - 54px);
  background: white; color: #2f8b5d; border: 1px solid #a7d6b9; border-radius: 12px;
}
#dir-filter .filter-collapse.is-collapsed { left: var(--rail) }
.directory-main > .notice-tools { height: 115px; padding: 45px 0 30px; align-items: start }
.directory-main .notice-actions { display: flex; align-items: center; gap: 8px }
.directory-main .notice-actions button {
  height: 40px; min-height: 40px; padding: 0; border-radius: 10px; background: white;
  border: 1px solid #a3d2b6; color: #26744d; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.directory-main .notice-actions [data-table-columns] { width: 40px }
.directory-main .notice-actions [data-export] { width: 54px }
.directory-main .notice-actions [data-add] { width: 153px; gap: 8px; margin-left: 15px }
.dir-glyph { width: 18px; height: 18px; vertical-align: middle }
.directory-main .bb-table-scroll { border-radius: 8px; scrollbar-gutter: stable }
.directory-main .dir-table { width: 990px; min-width: 100%; table-layout: fixed; border-collapse: collapse }
.dir-table th, .dir-table td { padding: 10px 15px }
.dir-table thead th { background: #2f8b5d; color: white; height: 59px; font-weight: 600; border-right: 1px solid #e1eee7 }
.dir-table th:first-child { width: 60px }
.dir-table th[data-col="name"], .dir-table th[data-col="email"] { width: 200px }
.dir-table th[data-col="role"], .dir-table th[data-col="employee"] { width: 150px }
.dir-table th[data-col="status"] { width: 130px }
.dir-table th[data-col="select"] { width: 100px }
.dir-table tbody td { height: 55px; color: #243248; border-bottom: 1px solid #e9edf1; background: white }
.dir-table tr:nth-child(even) td { background: #f7f8fa }
.dir-table tbody tr:hover td { background: #deebe2 }
.dir-person { display: flex; align-items: center; gap: 10px }
.dir-person img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover }
.dir-status { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50% }
.dir-status.online { background: #e9f6ee }
.dir-status.offline { background: #f3f4f5; color: #788391 }
.dir-table .bb-eye { display: inline-grid; place-items: center; height: 30px; width: 30px; border: 0; padding: 0; color: #526777; background: transparent }
.directory-main .bb-pages[hidden] { display: none }
.directory-card .pl-dialog { width: min(700px,94vw) }
.directory-card .pl-dialog-content { padding: 40px 50px; max-height: 86vh }
.directory-card dl > div { display: flex; align-items: flex-start; justify-content: space-between; min-height: 45px; border-color: #9e9e9e56; margin-bottom: 15px; font-size: 16px }
.directory-card dd { text-align: right }
.directory-card .dir-remove { float: right }
.directory-form .pl-dialog { width: min(420px,94vw) }
.directory-form .pl-dialog-content { padding: 0; max-height: 85vh }
.directory-form h2 { margin: 0; padding: 18px 24px; font-size: 16px; background: #55ab80; color: white }
.directory-form form { padding: 24px; gap: 16px }
.directory-form input:not([type=checkbox]), .directory-form select { height: 40px }
@media(max-width:650px) {
  .directory-card .pl-dialog-content { padding: 24px }
  .directory-main .notice-actions [data-add] { margin-left: 0; width: 130px }
}