/* RBAC UI — Compact + Responsive overrides */

/* ============= همه‌ی screens (compact mode) ============= */
:root {
  --compact-padding: 8px;
}

/* Card کوچک‌تر */
.ant-card {
  border-radius: 8px !important;
}
.ant-card-body {
  padding: 12px !important;
}
.ant-card-head {
  min-height: 40px !important;
  padding: 0 12px !important;
}
.ant-card-head-title {
  padding: 8px 0 !important;
  font-size: 14px !important;
}

/* Page header کم پشت‌تر */
.ant-page-header {
  padding: 8px 16px !important;
}

/* Table compact */
.ant-table-thead > tr > th {
  padding: 8px 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #f5f7fa !important;
}
.ant-table-tbody > tr > td {
  padding: 8px 8px !important;
  font-size: 13px !important;
}

/* Buttons */
.ant-btn {
  font-size: 13px !important;
  padding: 4px 12px !important;
  height: 32px !important;
  border-radius: 6px !important;
}
.ant-btn-sm {
  height: 26px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
}

/* Form items فاصله کم‌تر */
.ant-form-item {
  margin-bottom: 12px !important;
}
.ant-form-item-label > label {
  font-size: 13px !important;
  height: 28px !important;
}

/* Input/Select */
.ant-input, .ant-select-selector, .ant-input-number {
  font-size: 13px !important;
}
.ant-input {
  padding: 4px 11px !important;
}

/* Tag */
.ant-tag {
  font-size: 12px !important;
  padding: 1px 7px !important;
  margin: 2px !important;
}

/* Avatar */
.ant-avatar {
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
}

/* Pagination */
.ant-pagination-item {
  min-width: 28px !important;
  height: 28px !important;
  line-height: 26px !important;
  font-size: 12px !important;
}
.ant-pagination-prev, .ant-pagination-next {
  min-width: 28px !important;
  height: 28px !important;
  line-height: 26px !important;
}

/* Modal */
.ant-modal-header {
  padding: 12px 16px !important;
}
.ant-modal-title {
  font-size: 15px !important;
}
.ant-modal-body {
  padding: 16px !important;
}

/* Layout content padding تنظیم */
.ant-layout-content {
  margin: 16px !important;
  padding: 0 !important;
}

/* Sider header */
.ant-layout-sider .ant-menu-item {
  height: 38px !important;
  line-height: 38px !important;
  margin: 2px 0 !important;
  font-size: 13px !important;
}

/* Header (top) compact */
.ant-layout-header {
  height: 52px !important;
  line-height: 52px !important;
  padding: 0 16px !important;
}

/* ============= Mobile (< 768px) ============= */
@media (max-width: 768px) {
  /* Sider — drawer */
  .ant-layout-sider {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 1000 !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15) !important;
    transition: transform 0.3s ease !important;
    width: 220px !important;
    max-width: 220px !important;
    flex: 0 0 220px !important;
  }
  body:not(.sider-open) .ant-layout-sider {
    transform: translateX(100%) !important;
    pointer-events: none !important;
  }
  body.sider-open .ant-layout-sider {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  body.sider-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  .ant-layout > .ant-layout {
    margin-right: 0 !important;
  }

  /* Toggle button */
  .mobile-sider-toggle {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 1100 !important;
    width: 36px !important;
    height: 36px !important;
    background: #1677ff !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 18px !important;
  }

  /* Layout content tighter */
  .ant-layout-content {
    margin: 8px !important;
  }

  /* Header کوچک‌تر */
  .ant-layout-header {
    padding: 0 8px 0 52px !important;
    height: 48px !important;
    line-height: 48px !important;
  }

  /* Card padding کم‌تر */
  .ant-card-body {
    padding: 10px !important;
  }

  /* Table — افقی scroll */
  .ant-table-wrapper, .ant-table-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .ant-table {
    font-size: 12px !important;
  }
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 6px !important;
    white-space: nowrap !important;
  }

  /* Modal fullscreen */
  .ant-modal {
    max-width: calc(100vw - 12px) !important;
    margin: 6px !important;
    top: 6px !important;
    padding-bottom: 0 !important;
  }
  .ant-modal-content {
    border-radius: 8px !important;
  }
  .ant-modal-body {
    max-height: calc(100vh - 180px) !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }

  /* PageHeader */
  .ant-page-header {
    padding: 8px 12px !important;
  }
  .ant-page-header-heading-title {
    font-size: 16px !important;
  }

  /* Form */
  .ant-form-item-label > label {
    font-size: 12px !important;
  }

  /* Pagination */
  .ant-pagination {
    flex-wrap: wrap !important;
    text-align: center !important;
  }
  .ant-pagination-options {
    display: none !important;
  }

  /* تگ‌ها در table compact */
  .ant-table-tbody .ant-tag {
    margin: 1px !important;
    font-size: 11px !important;
    padding: 0 5px !important;
  }
}

/* Hide toggle on desktop */
@media (min-width: 769px) {
  .mobile-sider-toggle { display: none !important; }
}

/* ============= Tablet (768-1024px) ============= */
@media (min-width: 769px) and (max-width: 1024px) {
  .ant-layout-content { margin: 12px !important; }
  .ant-table { font-size: 12px !important; }
}