/* Access management screens — shared helper classes that replace inline
   styles across user/role/org list + form + detail templates. */

/* ── Layout ─────────────────────────────────────────────────────────── */
.am-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
.am-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.am-row {
    display: flex;
    gap: 0.5rem;
}
.am-row--end { justify-content: flex-end; }
.am-row--wrap { flex-wrap: wrap; }

@media (max-width: 768px) {
    .am-grid-2col { grid-template-columns: 1fr; }
}

/* ── Card body padding helpers ─────────────────────────────────────── */
.am-card-pad-lg { padding: 1.5rem; }

/* ── Section headings ──────────────────────────────────────────────── */
.am-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}
.am-section-title--tight { margin: 0 0 0.75rem; }

/* ── Forms ─────────────────────────────────────────────────────────── */
.am-field {
    margin-bottom: 0.875rem;
}
.am-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}
.am-field-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    box-sizing: border-box;
    font-family: var(--font-ui, sans-serif);
}
.am-field-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}
.am-field-checkbox {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
}
.am-field-error {
    color: #c0392b;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.am-btn-primary {
    padding: 0.5rem 1.25rem;
    background: var(--text-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.am-btn-secondary {
    padding: 0.5rem 1rem;
    background: var(--surface-2);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.am-btn-danger {
    padding: 0.5rem 1rem;
    background: #fce4ec;
    color: #c2255c;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.am-btn-success {
    padding: 0.5rem 1rem;
    background: #e8f5e9;
    color: #2f9e44;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

/* ── Status badges (text-only inline pills) ────────────────────────── */
.am-status-active   { color: #2f9e44; font-weight: 600; }
.am-status-inactive { color: #c0392b; font-weight: 600; }
.am-status-warn     { color: #e8700a; font-weight: 600; }

/* ── Back link ─────────────────────────────────────────────────────── */
.am-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    margin-bottom: 0.5rem;
}
.am-back-link .material-symbols-outlined { font-size: 16px; }

/* ── Tables ────────────────────────────────────────────────────────── */
.am-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.am-table th,
.am-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
}
.am-table thead tr {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-light);
}
.am-table th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.am-table tbody tr {
    border-bottom: 1px solid var(--border-light);
}
.am-table tbody tr:last-child { border-bottom: none; }
.am-table tbody tr:hover { background: var(--surface-2); }
.am-table .right { text-align: right; }
.am-table .center { text-align: center; }
.am-table .muted { color: var(--text-muted); }
.am-table a { color: var(--accent-dark); text-decoration: none; }
.am-table a:hover { text-decoration: underline; }

/* ── Empty state ───────────────────────────────────────────────────── */
.am-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ── Pills / chips ─────────────────────────────────────────────────── */
.am-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--text-primary);
}
.am-chip--accent { background: #fff8e0; color: #8a5c00; }
.am-chip--info   { background: #eff6ff; color: #3b82f6; }
.am-chip--ok     { background: #ecfdf5; color: #10b981; }

/* Dashboard helpers */
.kpi-value--small { font-size: 1rem; }

/* Action tile colour variants */
.action-tile-icon--blue   { background: #e8f0fe; }
.action-tile-icon--green  { background: #e8f5e9; }
.action-tile-icon--orange { background: #fff3e0; }
.action-tile-icon--purple { background: #f3e8ff; }
.action-tile-icon--pink   { background: #fce4ec; }

.action-tile-icon--blue   .material-symbols-outlined { color: #3b5bdb; }
.action-tile-icon--green  .material-symbols-outlined { color: #2f9e44; }
.action-tile-icon--orange .material-symbols-outlined { color: #e8700a; }
.action-tile-icon--purple .material-symbols-outlined { color: #7c3aed; }
.action-tile-icon--pink   .material-symbols-outlined { color: #c2255c; }

.schedule-chip-link { text-decoration: none; }

/* ── Search bar above tables ──────────────────────────────────────── */
.am-search-form { margin-bottom: 1.25rem; }
.am-search-row {
    display: flex;
    gap: 0.5rem;
    max-width: 480px;
}
.am-search-input {
    flex: 1;
    padding: 0.5rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: var(--font-ui, sans-serif);
}
.am-search-btn {
    padding: 0.5rem 1rem;
    background: var(--text-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    font-weight: 600;
}
.am-clear-link {
    padding: 0.5rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

/* ── Card with table content (no padding, hidden overflow) ────────── */
.am-card-table {
    padding: 0;
    overflow: hidden;
}

/* ── Status pills (rounded background variants) ───────────────────── */
.am-pill {
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.am-pill--ok       { background: #e8f5e9; color: #2f9e44; }
.am-pill--inactive { background: #fce4ec; color: #c2255c; }
.am-pill--warn     { background: #fff3e0; color: #e8700a; }

/* ── Manage link / action cell ────────────────────────────────────── */
.am-manage-link {
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

/* ── Pagination ───────────────────────────────────────────────────── */
.am-pager {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.am-pager-info {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.am-pager-controls {
    display: flex;
    gap: 0.5rem;
}
.am-pager-controls a {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8125rem;
    text-decoration: none;
    color: var(--text-secondary);
}

/* ── Top-bar create button ────────────────────────────────────────── */
.am-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1.25rem;
    background: var(--text-primary);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}
.am-create-btn .material-symbols-outlined { font-size: 16px; }

.am-topbar-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* ── Toggle / outline link button ─────────────────────────────────── */
.am-toggle-link {
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--border);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
}

/* ── Inline message banner (used by Django messages) ──────────────── */
.am-banner {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #e8f5e9;
    color: #2f9e44;
    border: 1px solid #c8e6c9;
}
.am-banner--error {
    background: #fce4ec;
    color: #c0392b;
    border-color: #f5c6cb;
}

/* ── Inactive row styling ─────────────────────────────────────────── */
.am-row-inactive { opacity: 0.5; }
.am-inactive-tag { margin-left: 0.5rem; font-size: 0.75rem; color: #c0392b; }

/* ── Scope tag (small bordered chip on a list row) ────────────────── */
.am-scope-tag {
    padding: 1px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.am-scope-tag--system {
    background: #e8f0fe;
    border-color: #c5d8f6;
    color: #3b5bdb;
}

/* ── Capability code chips ────────────────────────────────────────── */
.am-cap-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.am-cap-chip {
    padding: 1px 6px;
    background: var(--accent-light, #fdf3e0);
    color: var(--accent-dark, #c4831a);
    border-radius: 3px;
    font-size: 0.6875rem;
    font-family: var(--font-data, monospace);
}

/* ── Priority hint ───────────────────────────────────────────────── */
.am-priority-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 2px;
}

/* ── Right-aligned action group (with link + button as text) ─────── */
.am-action-group {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
}
.am-text-btn-danger {
    background: none;
    border: none;
    color: #c0392b;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

/* Inline-display form (for forms wrapping a single button in an action row) */
.am-form-inline { display: inline; }
.am-form-contents { display: contents; }

/* ── Filter row above tables ──────────────────────────────────────── */
.am-filter-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}
.am-filter-select,
.am-filter-input {
    padding: 0.4rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    background: var(--surface);
    color: var(--text-primary);
}
.am-filter-input { width: 200px; }
.am-filter-btn {
    padding: 0.4rem 1rem;
    background: var(--text-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    font-weight: 600;
}
.am-filter-clear {
    padding: 0.4rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--text-muted);
}
.am-filter-count {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ── Audit-style monospaced cells ─────────────────────────────────── */
.am-mono-cell {
    color: var(--text-muted);
    font-family: var(--font-data, monospace);
    font-size: 0.75rem;
    white-space: nowrap;
}
.am-time-secondary { opacity: 0.7; }

.am-action-pill {
    padding: 2px 7px;
    background: var(--surface-2);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: var(--font-data, monospace);
    white-space: nowrap;
}

.am-target-cell {
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Role badge (accent-coloured rounded chip) */
.am-role-badge {
    padding: 2px 8px;
    background: var(--accent-light, #fdf3e0);
    color: var(--accent-dark, #c4831a);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Form card with width cap ─────────────────────────────────────── */
.am-form-card {
    max-width: 560px;
    padding: 2rem;
}
.am-form-card--wide { max-width: 720px; }

/* ── Note / info banner above forms ───────────────────────────────── */
.am-note {
    background: var(--accent-light, #fdf3e0);
    border: 1px solid rgba(232, 160, 32, 0.25);
    border-radius: var(--radius-sm);
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--accent-dark, #c4831a);
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

/* ── Two-column form grid ─────────────────────────────────────────── */
.am-form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 600px) {
    .am-form-2col { grid-template-columns: 1fr; }
}

/* ── Help text under form fields ──────────────────────────────────── */
.am-field-help {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

/* ── Form row error (above the actions) ──────────────────────────── */
.am-form-error {
    color: #c0392b;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* ── Form action bar (Submit + Cancel) ───────────────────────────── */
.am-form-bar {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.am-submit-btn {
    padding: 0.625rem 1.5rem;
    background: var(--text-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}
.am-cancel-btn {
    padding: 0.625rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
}

/* ── Field label (used as standalone label tag) ──────────────────── */
.am-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

/* ── Standalone full-width input ──────────────────────────────────── */
.am-input {
    width: 100%;
    padding: 0.5625rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    box-sizing: border-box;
}

/* Role-form: capability picker grid */
.am-form-2col--wide {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
    .am-form-2col--wide { grid-template-columns: 1fr; }
}

.am-cap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.375rem;
}
.am-cap-card {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
}
.am-cap-card-input {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
}
.am-cap-card-code {
    font-size: 0.8125rem;
    font-family: var(--font-data, monospace);
    font-weight: 500;
    color: var(--text-primary);
}
.am-cap-card-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Form section + footer with top border */
.am-form-section { margin-bottom: 1.5rem; }
.am-form-footer {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

/* Larger label margin variant */
.am-label--lg { margin-bottom: 0.875rem; }

/* ── Org form layout ──────────────────────────────────────────────── */
.am-org-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
    max-width: 900px;
}
.am-org-grid--single {
    grid-template-columns: 1fr;
    max-width: 480px;
}
@media (max-width: 768px) {
    .am-org-grid { grid-template-columns: 1fr; }
}

.am-card-pad-2 { padding: 2rem; }
.am-h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
}
.am-h3--tight { margin: 0 0 0.25rem; }
.am-sub-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}

/* Slug-style monospaced input */
.am-input--mono { font-family: var(--font-data, monospace); }

/* Active/inline checkbox label */
.am-active-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}
.am-active-label input {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
}

/* Store row chips inside the org form */
.am-org-store-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5625rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    margin-bottom: 0.375rem;
}
.am-org-store-row-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.am-org-store-row-icon {
    font-size: 16px;
    color: #2f9e44;
}
.am-org-store-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}
.am-org-store-code {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-data, monospace);
}
.am-icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
}
.am-icon-btn .material-symbols-outlined { font-size: 18px; }

/* Empty-state placeholder for org store list */
.am-org-empty {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.am-org-empty .material-symbols-outlined {
    display: block;
    font-size: 28px;
    margin-bottom: 0.375rem;
}

/* Assign-store mini-form */
.am-assign-block {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}
.am-assign-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.625rem;
}
.am-assign-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.am-assign-select {
    flex: 1;
    padding: 0.5rem 0.625rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    background: var(--surface);
}
.am-assign-btn {
    padding: 0.5rem 1rem;
    background: var(--text-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.am-assign-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

/* ── User detail page bits ────────────────────────────────────────── */
.am-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.am-status-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}
.am-status-line span:first-child { color: var(--text-muted); }

/* Role row inside the assign panel */
.am-role-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}
.am-role-row-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}
.am-role-row-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.am-role-row-tag--store {
    background: var(--accent-light, #fdf3e0);
    color: var(--accent-dark, #c4831a);
}
.am-role-row-tag--org {
    background: #e8f0fe;
    color: #3b5bdb;
}

.am-text-btn-remove {
    background: none;
    border: none;
    color: #c0392b;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

/* Three-column assign form (store/role/button) */
.am-assign-form {
    margin-top: 1rem;
}
.am-assign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.5rem;
    align-items: end;
}
@media (max-width: 600px) {
    .am-assign-grid { grid-template-columns: 1fr; }
}
.am-assign-mini-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.am-mini-select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.8125rem;
}
.am-mini-btn {
    padding: 0.4rem 0.875rem;
    background: var(--text-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* Empty hint inside role list */
.am-role-empty {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
}