Blame for static/css/dda-modernist-admin.css

/* ============================================================
   Modernist admin theme (Claude Design redesign) — applied to the
   three RBAC configuration screens: Admin Menu, Admin Modules,
   Roles & Users. Same visual language as the #tab-home dashboard
   reskin in dda.css: flat surfaces, hairline dividers, sharp
   corners, one accent color, Archivo for headings. Reuses the
   shared --dm-* tokens declared at :root in dda.css — nothing is
   redeclared here.

   Scoping: every rule is qualified by one of the three page
   container ids (#tab-admin-menu / #tab-admin-modules /
   #tab-admin-roles-users) or, for the modal dialogs that live
   outside those containers in the DOM, by the modal's own id
   (each id below is unique to one of these three pages). Nothing
   here touches the bare/global .card, .btn-primary, .table rules.
   ============================================================ */

/* ---------------------------------------------------------------
   Page heading
   --------------------------------------------------------------- */
#tab-admin-menu .dda-hero h1,
#tab-admin-modules .dda-hero h1,
#tab-admin-roles-users .dda-hero h1 {
  font-family: var(--dm-font);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--dm-ink);
}

/* ---------------------------------------------------------------
   Flat surfaces — cards and modal panels lose the soft shadow /
   rounded corners in favor of a hairline border, same treatment
   as the dashboard cards.
   --------------------------------------------------------------- */
#tab-admin-menu .card,
#tab-admin-modules .card,
#tab-admin-roles-users .card,
#menu-item-modal .dda-modal-panel,
#module-modal .dda-modal-panel,
#module-view-modal .dda-modal-panel,
#role-modal .dda-modal-panel,
#perm-modal .dda-modal-panel,
#user-modal .dda-modal-panel {
  background: var(--dm-surface);
  border: 1px solid var(--dm-line);
  border-radius: 0;
  box-shadow: none;
}

#tab-admin-menu .card-header,
#tab-admin-modules .card-header,
#tab-admin-roles-users .card-header,
#menu-item-modal .card-header,
#module-modal .card-header,
#module-view-modal .card-header,
#role-modal .card-header,
#perm-modal .card-header,
#user-modal .card-header {
  border-bottom: 1px solid var(--dm-line);
}

/* ---------------------------------------------------------------
   Buttons — flat accent instead of the app-wide purple gradient,
   sharp corners, Archivo weight. Scoped to these pages/modals only.
   --------------------------------------------------------------- */
#tab-admin-menu .btn,
#tab-admin-modules .btn,
#tab-admin-roles-users .btn,
#menu-item-modal .btn,
#module-modal .btn,
#module-view-modal .btn,
#role-modal .btn,
#perm-modal .btn,
#user-modal .btn {
  border-radius: 0;
  font-family: var(--dm-font);
  font-weight: 700;
}
#tab-admin-menu .btn-primary,
#tab-admin-modules .btn-primary,
#tab-admin-roles-users .btn-primary,
#menu-item-modal .btn-primary,
#module-modal .btn-primary,
#role-modal .btn-primary,
#perm-modal .btn-primary,
#user-modal .btn-primary {
  background: var(--dm-accent);
}
#tab-admin-menu .btn-primary:hover,
#tab-admin-modules .btn-primary:hover,
#tab-admin-roles-users .btn-primary:hover,
#menu-item-modal .btn-primary:hover,
#module-modal .btn-primary:hover,
#role-modal .btn-primary:hover,
#perm-modal .btn-primary:hover,
#user-modal .btn-primary:hover {
  background: var(--dm-accent-hover);
  filter: none;
  box-shadow: none;
}
#tab-admin-menu .btn-secondary,
#tab-admin-modules .btn-secondary,
#tab-admin-roles-users .btn-secondary,
#menu-item-modal .btn-secondary,
#module-modal .btn-secondary,
#module-view-modal .btn-secondary,
#role-modal .btn-secondary,
#perm-modal .btn-secondary,
#user-modal .btn-secondary {
  background: transparent;
  border-color: var(--dm-line);
  color: var(--dm-ink);
}
#tab-admin-menu .btn-secondary:hover,
#tab-admin-modules .btn-secondary:hover,
#tab-admin-roles-users .btn-secondary:hover,
#menu-item-modal .btn-secondary:hover,
#module-modal .btn-secondary:hover,
#module-view-modal .btn-secondary:hover,
#role-modal .btn-secondary:hover,
#perm-modal .btn-secondary:hover,
#user-modal .btn-secondary:hover {
  background: var(--dm-bg);
  border-color: var(--dm-line);
}
#tab-admin-menu .btn-danger,
#tab-admin-modules .btn-danger,
#tab-admin-roles-users .btn-danger {
  border-radius: 0;
}
#tab-admin-menu .btn-ghost,
#tab-admin-modules .btn-ghost,
#tab-admin-roles-users .btn-ghost {
  color: var(--dm-accent);
}
#tab-admin-menu .btn-ghost:hover,
#tab-admin-modules .btn-ghost:hover,
#tab-admin-roles-users .btn-ghost:hover {
  background: var(--dm-accent-100);
  color: var(--dm-accent-hover);
}

/* ---------------------------------------------------------------
   Status / system badges — sharpen the pill corners and switch to
   the accent palette instead of green/red.
   --------------------------------------------------------------- */
#tab-admin-menu .dda-status-badge,
#tab-admin-modules .dda-status-badge,
#tab-admin-roles-users .dda-status-badge {
  border-radius: 2px;
}
#tab-admin-menu .dda-status-badge.is-active,
#tab-admin-modules .dda-status-badge.is-active,
#tab-admin-roles-users .dda-status-badge.is-active {
  background: var(--dm-accent-100);
  color: var(--dm-accent-hover);
}
#tab-admin-menu .dda-status-badge.is-inactive,
#tab-admin-modules .dda-status-badge.is-inactive,
#tab-admin-roles-users .dda-status-badge.is-inactive {
  background: var(--dm-line);
  color: var(--dm-ink-muted);
}
#tab-admin-roles-users .dda-badge-system {
  border-radius: 2px;
  border-color: var(--dm-line);
  color: var(--dm-ink-muted);
}

/* ---------------------------------------------------------------
   Search inputs / select toolbars — flat hairline fields.
   --------------------------------------------------------------- */
#tab-admin-modules .dda-search,
#tab-admin-roles-users .dda-search,
#tab-admin-modules .dda-table-toolbar select,
#tab-admin-roles-users .dda-table-toolbar select {
  border-radius: 0;
  border: 1px solid var(--dm-line);
  background: var(--dm-surface);
  color: var(--dm-ink);
}
#tab-admin-modules .dda-table-toolbar,
#tab-admin-roles-users .dda-table-toolbar {
  color: var(--dm-ink-muted);
}

/* ---------------------------------------------------------------
   Tables — uppercase hairline headers, same technique as the
   dashboard's .dda-reports-table override (reused verbatim here
   since Modules/Users render into the same table class).
   --------------------------------------------------------------- */
#tab-admin-modules .dda-reports-table th,
#tab-admin-roles-users .dda-reports-table th {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dm-ink-muted);
  border: none;
  border-bottom: 2px solid var(--dm-line);
  background: transparent;
}
#tab-admin-modules .dda-reports-table td,
#tab-admin-roles-users .dda-reports-table td {
  border: none;
  border-bottom: 1px solid var(--dm-line);
}
#tab-admin-modules .dda-reports-table tbody tr:hover,
#tab-admin-roles-users .dda-reports-table tbody tr:hover {
  background: var(--dm-bg);
}

#perm-modal .dda-perm-matrix th {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dm-ink-muted);
  border: none;
  border-bottom: 2px solid var(--dm-line);
  background: transparent;
}
#perm-modal .dda-perm-matrix td {
  border: none;
  border-bottom: 1px solid var(--dm-line);
}
#perm-modal .dda-perm-matrix input[type="checkbox"],
#role-modal input[type="checkbox"],
#menu-item-modal input[type="checkbox"],
#user-modal input[type="checkbox"] {
  accent-color: var(--dm-accent);
}

/* ---------------------------------------------------------------
   Pagination — flat, sharp corners, accent active state instead
   of the app-wide gradient pill.
   --------------------------------------------------------------- */
#tab-admin-modules .pagination button,
#tab-admin-roles-users .pagination button {
  border-radius: 0;
  border-color: var(--dm-line);
}
#tab-admin-modules .pagination button:hover:not(:disabled),
#tab-admin-roles-users .pagination button:hover:not(:disabled) {
  background: var(--dm-accent-100);
  border-color: var(--dm-accent);
  color: var(--dm-ink);
}
#tab-admin-modules .pagination button.active,
#tab-admin-roles-users .pagination button.active {
  background: var(--dm-accent);
  color: #fff;
  border-color: var(--dm-accent);
}

/* ---------------------------------------------------------------
   Admin Menu — menu item list rendered as a fused hairline list
   (same "1px gap on a line-colored background" technique the
   dashboard KPI grid uses) instead of individually bordered,
   rounded, shadowed rows.
   --------------------------------------------------------------- */
#tab-admin-menu .dda-admin-2col {
  grid-template-columns: 1.4fr 1fr;
}
#tab-admin-menu .dda-menu-list {
  gap: 1px;
  background: var(--dm-line);
  border: 1px solid var(--dm-line);
}
#tab-admin-menu .dda-menu-item-row {
  border: none;
  border-radius: 0;
  background: var(--dm-surface);
}
#tab-admin-menu .dda-menu-item-row.is-child {
  background: var(--dm-bg);
}
#tab-admin-menu .dda-menu-item-order button {
  border-radius: 0;
  border-color: var(--dm-line);
  background: var(--dm-surface);
}
#tab-admin-menu .dda-menu-item-order button:hover:not(:disabled) {
  color: var(--dm-accent);
  border-color: var(--dm-accent);
}
#tab-admin-menu .dda-menu-item-meta code {
  background: var(--dm-bg);
  border-radius: 0;
}

/* Instructions panel */
#tab-admin-menu .dda-admin-side-panel code {
  background: var(--dm-bg);
  border-radius: 0;
  color: var(--dm-accent);
}

/* Module Keys — rendered as a row of flat chips instead of a
   stacked list, matching the mockup's tag row. */
#tab-admin-menu .dda-module-keys {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#tab-admin-menu .dda-module-keys code {
  background: var(--dm-bg);
  border: 1px solid var(--dm-line);
  border-radius: 0;
  color: var(--dm-ink);
  align-self: auto;
}

/* ---------------------------------------------------------------
   Roles & Users — role hierarchy as a fused hairline list, wider
   ratio for the users column to match the mockup's proportions.
   --------------------------------------------------------------- */
#tab-admin-roles-users .dda-admin-2col-roles {
  grid-template-columns: 1fr 1.4fr;
}
#tab-admin-roles-users .dda-role-list {
  gap: 1px;
  background: var(--dm-line);
  border: 1px solid var(--dm-line);
}
#tab-admin-roles-users .dda-role-card {
  border: none;
  border-radius: 0;
  background: var(--dm-surface);
}
#tab-admin-roles-users .dda-role-card.is-inactive {
  background: var(--dm-bg);
}

/* ---------------------------------------------------------------
   Form fields inside these pages' modals — flat hairline inputs
   instead of the app-wide rounded/shadowed style.
   --------------------------------------------------------------- */
#menu-item-modal input[type="text"],
#menu-item-modal select,
#module-modal input[type="text"],
#module-modal select,
#role-modal input[type="text"],
#role-modal input[type="number"],
#user-modal input[type="text"],
#user-modal input[type="email"],
#user-modal input[type="password"],
#user-modal input[type="tel"],
#user-modal select {
  border-radius: 0;
  border-color: var(--dm-line);
}
#menu-item-modal input[type="text"]:focus,
#menu-item-modal select:focus,
#module-modal input[type="text"]:focus,
#module-modal select:focus,
#role-modal input[type="text"]:focus,
#role-modal input[type="number"]:focus,
#user-modal input[type="text"]:focus,
#user-modal input[type="email"]:focus,
#user-modal input[type="password"]:focus,
#user-modal input[type="tel"]:focus,
#user-modal select:focus {
  border-color: var(--dm-accent);
  box-shadow: 0 0 0 3px var(--dm-accent-100);
}
#user-modal .dda-phone-input {
  border-radius: 0;
  border-color: var(--dm-line);
}
#user-modal .dda-phone-input:focus-within {
  border-color: var(--dm-accent);
  box-shadow: 0 0 0 3px var(--dm-accent-100);
}