.admin-management-content { padding-top: 26px; }
.management-top { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 30px; }
.management-top h1, .management-top p, .management-top small { margin: 0; }
.management-top h1 { font-size: 30px; }
.management-top p { margin-top: 8px; font-weight: 800; }
.management-top span, .management-top small { color: var(--muted); }
.management-top small { display: block; margin-top: 8px; font-size: 14px; }
.management-actions { display: flex; gap: 14px; }
.management-actions button, .admin-filter button, .admin-table button, .admin-table-footer button, .admin-table-footer select, .security-card button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font-weight: 800;
}
.management-actions button { display: inline-flex; height: 44px; align-items: center; gap: 9px; padding: 0 18px; }
.management-actions .primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--green-bright), var(--green)); }

.admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.admin-metrics article { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; min-height: 128px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(23,44,39,.05); }
.admin-metrics article > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 12px; }
.admin-metrics p, .admin-metrics small { margin: 0; }
.admin-metrics p { color: #4f5e59; font-weight: 800; }
.admin-metrics strong { display: block; margin: 10px 0 12px; font-size: 28px; }
.admin-metrics small { color: #4f5e59; font-weight: 800; }

.admin-filter { display: grid; grid-template-columns: 1.2fr .75fr .75fr auto auto; gap: 18px; align-items: center; margin-bottom: 18px; }
.admin-filter label > span { position: relative; display: block; }
.admin-filter input, .admin-filter select { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 7px; background: #fff; outline: 0; }
.admin-filter input { padding: 0 42px 0 14px; }
.admin-filter select { padding: 0 14px; }
.admin-filter label > span i { position: absolute; right: 12px; top: 11px; color: var(--muted); }
.admin-filter button { display: inline-flex; height: 42px; justify-content: center; align-items: center; gap: 9px; padding: 0 22px; }
.admin-filter button:last-child { color: var(--green); border-color: rgba(15,159,99,.42); }

.management-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.admin-table { padding: 0; overflow: hidden; }
.admin-table h2 { height: 62px; margin: 0; padding: 20px 22px 0; font-size: 18px; }
.admin-table .table-scroll { max-width: 100%; overflow-x: auto; }
.admin-table table { min-width: 1120px; }
.admin-table th { background: #fbfcfc; }
.admin-table td, .admin-table th { padding: 15px 18px; vertical-align: middle; }
.admin-table td small { display: block; margin-top: 5px; color: var(--muted); }
.admin-name { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; min-width: 210px; }
.admin-name b em { display: inline-flex; margin-left: 8px; padding: 4px 8px; border-radius: 6px; color: var(--green); background: #eaf9f2; font-style: normal; font-size: 12px; }
.role, .status { display: inline-flex; padding: 6px 10px; border-radius: 7px; font-style: normal; font-weight: 900; white-space: nowrap; }
.role.super { color: #884fe2; background: #f1e8ff; }
.role.admin { color: #1e80c7; background: #e8f3ff; }
.role.warehouse { color: #1590ad; background: #e7f8fb; }
.role.cs { color: #c68100; background: #fff4d8; }
.role.marketing { color: #e23983; background: #ffe9f3; }
.role.finance { color: #d66d22; background: #fff0e8; }
.role.viewer { color: #5f6d67; background: #eef2f2; }
.status.active { color: var(--green); background: #eaf9f2; }
.status.inactive { color: #e34b5b; background: #ffe9ee; }
.admin-table td:last-child { display: flex; gap: 8px; align-items: center; }
.admin-table td button { display: grid; width: 34px; height: 34px; place-items: center; }
.admin-table-footer { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px 20px; border-top: 1px solid var(--line); }
.admin-table-footer p { margin: 0; color: #4f5e59; }
.admin-table-footer div { display: flex; gap: 10px; align-items: center; }
.admin-table-footer button, .admin-table-footer select { min-width: 38px; height: 38px; padding: 0 12px; }
.admin-table-footer button.active { color: #fff; background: var(--green); }

.management-side { display: grid; gap: 18px; }
.roles-card, .security-card { padding: 22px; }
.roles-card h2, .security-card h2 { margin: 0 0 20px; font-size: 18px; }
.roles-card p { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; margin: 18px 0; }
.roles-card p > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; }
.roles-card b small, .security-card small { display: block; margin-top: 6px; color: var(--muted); font-weight: 700; }
.roles-card em { font-style: normal; font-weight: 900; }
.cyan { color: #0e9bb1; background: #e7f8fb; }
.pink { color: #e23983; background: #ffe9f3; }
.orange { color: #d66d22; background: #fff0e8; }
.gray { color: #5f6d67; background: #eef2f2; }
.security-card p { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; margin: 18px 0; }
.security-card p > span { color: var(--green); }
.security-card button { display: inline-flex; width: 100%; height: 42px; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; color: var(--green); border-color: rgba(15,159,99,.42); }

@media (max-width: 1500px) { .management-grid { grid-template-columns: 1fr; } }
@media (max-width: 1200px) { .admin-metrics { grid-template-columns: repeat(2,1fr); } .admin-filter { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) {
  .management-top { align-items: flex-start; flex-direction: column; }
  .management-actions { width: 100%; flex-direction: column; }
  .management-actions button { justify-content: center; }
  .admin-metrics, .admin-filter { grid-template-columns: 1fr; }
  /* Rows per page footer — scroll horizontal */
  .admin-table-footer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    white-space: nowrap;
  }
  .admin-table-footer::-webkit-scrollbar { display: none; }
  .admin-table-footer p { flex-shrink: 0; }
  .admin-table-footer div {
    flex-shrink: 0;
    flex-wrap: nowrap;
    align-items: center;
  }
}