/* Markicabs admin: stock Filament look. Only layout rules the dashboard widgets need live here. */

:root {
  --mc-signal: #c0563b;
  --mc-forest: #1a2e1f;
  --mc-ink-3: #6b7280;
}

/* Dashboard: Top Provinsi spans two rows beside the loyalty chart and the buyer map,
   follows their height and scrolls its own list, so the grid has no holes. */
@media (min-width: 1280px) {
  .fi-wi > .mc-top-provinces { grid-row: span 2; contain: size; }
  .mc-top-provinces > .fi-section { display: flex; flex-direction: column; }
  .mc-top-provinces > .fi-section > .fi-section-content-ctn { flex: 1; min-height: 0; overflow-y: auto; }
}
.mc-top-provinces, .mc-top-provinces > .fi-section,
.mc-dashboard-map, .mc-dashboard-map > .fi-section { height: 100%; }
.mc-dashboard-map > .fi-section { display: flex; flex-direction: column; }
.mc-dashboard-map > .fi-section > .fi-section-content-ctn,
.mc-dashboard-map .fi-section-content,
.mc-dashboard-map-body { flex: 1; display: flex; flex-direction: column; }
.mc-dashboard-map-canvas { flex: 1; }

/* Compact product thumbnails in tables. */
.fi-ta-cell .fi-ta-image img { width: 2rem; height: 2rem; }

/* Staff access uses explicit styles because stock Filament does not compile application utilities. */
.mc-access { display: grid; gap: 1.5rem; --mc-access-border: #e5e7eb; --mc-access-subtle: #f9fafb; --mc-access-muted: #6b7280; }
.dark .mc-access { --mc-access-border: #374151; --mc-access-subtle: #18212f; --mc-access-muted: #9ca3af; }
.mc-access-notice { display: flex; gap: .85rem; padding: 1rem 1.25rem; border: 1px solid var(--mc-access-border); border-radius: .75rem; background: var(--mc-access-subtle); }
.mc-access-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--mc-signal); }
.mc-access-notice p, .mc-access-muted, .mc-access-choice small { font-size: .875rem; line-height: 1.5; color: var(--mc-access-muted); }
.mc-access-notice p { margin-top: .25rem; }
.mc-access-between, .mc-access-actions, .mc-access-footer, .mc-access-badges { display: flex; align-items: center; flex-wrap: wrap; gap: .625rem; }
.mc-access-between { justify-content: space-between; }
.mc-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: .85rem; }
.mc-role-card { display: grid; align-content: start; gap: .85rem; padding: 1rem; border: 1px solid var(--mc-access-border); border-radius: .75rem; }
.mc-role-card strong { overflow-wrap: anywhere; }
.mc-role-selected { border-color: var(--mc-signal); box-shadow: inset 0 0 0 1px var(--mc-signal); }
.mc-access-form { display: grid; gap: 1.25rem; }
.mc-access-field { display: grid; gap: .5rem; font-size: .875rem; font-weight: 500; }
.mc-access-choice { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem; font-size: .875rem; line-height: 1.5; border-radius: .5rem; cursor: pointer; }
.mc-access-choice:hover { background: var(--mc-access-subtle); }
.mc-access-choice input { flex-shrink: 0; margin-top: .15rem; }
.mc-access-choice small { display: block; margin-top: .25rem; }
.mc-access-panel, .mc-action-panel { border: 1px solid var(--mc-access-border); border-radius: .75rem; padding: 1rem; }
.mc-permission-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); gap: 1.5rem; align-items: start; }
.mc-access-heading { font-size: .95rem; font-weight: 600; margin-bottom: .85rem; }
.mc-action-panel > .mc-access-muted { margin-bottom: .75rem; }
.mc-access-table-wrap { overflow-x: auto; border: 1px solid var(--mc-access-border); border-radius: .65rem; }
.mc-access-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; line-height: 1.5; }
.mc-access-table th, .mc-access-table td { padding: .9rem 1rem; vertical-align: middle; }
.mc-access-table thead { background: var(--mc-access-subtle); }
.mc-access-table tbody tr { border-top: 1px solid var(--mc-access-border); }
.mc-access-table tbody th { font-weight: 500; }
.mc-permission-table td, .mc-permission-table thead th:not(:first-child) { text-align: center; width: 80px; }
.mc-permission-check { display: flex; align-items: center; justify-content: center; min-height: 28px; cursor: pointer; }
.mc-access-footer { padding-top: 1rem; border-top: 1px solid var(--mc-access-border); }
.mc-staff-identity { display: flex; align-items: center; gap: .75rem; min-width: 190px; }
.mc-staff-avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; background: var(--mc-access-subtle); border: 1px solid var(--mc-access-border); border-radius: 50%; font-weight: 600; }
.mc-staff-email { display: block; margin-top: .15rem; color: var(--mc-access-muted); overflow-wrap: anywhere; }
.mc-row-selected, .mc-access-editor { background: var(--mc-access-subtle); }
.mc-access-editor { margin-top: 1.25rem; padding: 1.25rem; border: 1px solid var(--mc-access-border); border-radius: .75rem; }
.mc-role-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.mc-role-options .mc-access-choice { border: 1px solid var(--mc-access-border); min-width: 120px; }
.mc-access-label { font-size: .875rem; font-weight: 500; margin-bottom: .5rem; }
.mc-invite-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mc-access-error { color: #dc2626; font-size: .875rem; }
@media (max-width: 900px) { .mc-permission-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .mc-invite-fields { grid-template-columns: minmax(0, 1fr); } .mc-access-table th, .mc-access-table td { padding: .75rem; } }

.mc-access { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.mc-access .fi-section, .mc-access .fi-section-content, .mc-access-table-wrap { min-width: 0; }
.mc-permission-scroll { max-height: 30rem; overflow: auto; }
.mc-permission-scroll thead { position: sticky; top: 0; z-index: 1; }