/* ===========================================================
   MLM HelpDesk - component & pattern extensions
   Extends theme.css (same :root brand tokens). Additive only:
   does NOT redefine .card/.badge/.small globally, does not touch
   unrelated Bootstrap defaults beyond what theme.css already does.
   Load AFTER theme.css in both wwwroot/css and
   _content/MLM_HelpDesk_Maui.Shared/css locations.
   =========================================================== */

:root{
  /* --- Semantic status/accessible pairings (text on tint background: AA 4.5:1) --- */
  --mlm-info:#175cd3;        --mlm-info-bg:#edf4ff;      --mlm-info-text:#123c76;
  --mlm-warning:#8a6d1d;     --mlm-warning-bg:#fff4d6;   --mlm-warning-text:#503500;
  --mlm-success:#176b3a;     --mlm-success-bg:#eaf4ec;   --mlm-success-text:#174b2a;
  --mlm-danger:#b02a37;      --mlm-danger-bg:#fff0f0;    --mlm-danger-text:#761923;

  --mlm-focus:#175cd3;       /* distinguishable from brand green/gold so focus is never mistaken for hover */
  --mlm-radius-sm:6px;
  --mlm-radius-md:10px;
  --mlm-radius-lg:14px;
  --mlm-shadow-card:0 2px 10px rgba(20,18,15,.07);
  --mlm-ease-fast:150ms ease;
  --mlm-ease-panel:280ms ease;
}

/* ---------- Focus visibility (never remove outlines without replacement) ---------- */
.mlm-app :focus-visible,
.page :focus-visible{
  outline:3px solid var(--mlm-focus);
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff;
  border-radius:4px;
}

/* ---------- Restore brand card identity where Bootstrap's .border-0 utility
   (border:0 !important) strips theme.css's signature green top edge.
   Many existing pages use "card border-0 shadow-sm" for a flat card look;
   this keeps that flat look on 3 sides while re-asserting the brand cue. ---------- */
.mlm-app .card.border-0,
.page .card.border-0{
  border:0!important;
  border-top:4px solid var(--brand-green)!important;
  border-radius:.75rem;
}

/* ---------- Buttons: secondary/outline/danger/loading/icon-only ---------- */
.btn-danger{background:var(--mlm-danger);border-color:var(--mlm-danger);color:#fff}
.btn-danger:hover{background:#8e1d29;border-color:#8e1d29}
.btn-outline-danger{color:var(--mlm-danger);border-color:var(--mlm-danger)}
.btn-outline-danger:hover{background:var(--mlm-danger);border-color:var(--mlm-danger);color:#fff}
.btn-outline-gold{color:#8a6d1d;border:1px solid var(--brand-gold)}
.btn-outline-gold:hover{background:var(--brand-gold);color:var(--brand-black)}
.btn[disabled],.btn.disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border-radius:var(--mlm-radius-sm)}
.btn-loading{position:relative;color:transparent!important;pointer-events:none}
.btn-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:1.1rem;height:1.1rem;
  border:2px solid rgba(255,255,255,.55);border-top-color:#fff;border-radius:50%;
  animation:mlm-spin .6s linear infinite;
}
.btn-outline-primary.btn-loading::after,.btn-gold.btn-loading::after{border-color:rgba(30,77,43,.35);border-top-color:var(--brand-green)}
@keyframes mlm-spin{to{transform:rotate(360deg)}}

/* ---------- Status / priority / SLA badges (text + icon, never color-only) ---------- */
.mlm-status,.mlm-priority,.mlm-sla{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.22rem .6rem;border:1px solid currentColor;border-radius:999px;
  font-size:.8rem;font-weight:600;line-height:1.3;white-space:nowrap;
}
.mlm-status .bi,.mlm-priority .bi,.mlm-sla .bi{font-size:.8rem}

.mlm-status-new{color:#174ea6;background:#edf4ff}
.mlm-status-assigned{color:#174ea6;background:#edf4ff}
.mlm-status-inprogress{color:#174b2a;background:#eaf4ec}
.mlm-status-onhold{color:#8a6d1d;background:#fff4d6}
.mlm-status-resolved{color:#14532d;background:#e9f6ed}
.mlm-status-closed{color:#4b5563;background:#f1f3f5}
.mlm-status-reopened{color:#761923;background:#fff0f0}
.mlm-status-escalated{color:#8a3c10;background:#fff1e8}

.mlm-priority-critical{color:#761923;background:#fff0f0}
.mlm-priority-high{color:#8a3c10;background:#fff1e8}
.mlm-priority-medium{color:#8a6d1d;background:#fff4d6}
.mlm-priority-low{color:#174b2a;background:#eaf4ec}

.mlm-sla-track{color:#174b2a;background:#eaf4ec}
.mlm-sla-soon{color:#8a6d1d;background:#fff4d6}
.mlm-sla-overdue{color:#8a3c10;background:#fff1e8}
.mlm-sla-breached{color:#761923;background:#fff0f0}

/* ---------- Alerts: success/info/danger variants to complement existing mlm-alert-banner (gold) / mlm-notice-banner (info) ---------- */
.mlm-alert{padding:.85rem 1rem;border:1px solid;border-left-width:4px;border-radius:var(--mlm-radius-sm);display:flex;gap:.6rem;align-items:flex-start}
.mlm-alert .bi{font-size:1.1rem;margin-top:.1rem}
.mlm-alert-warning{color:var(--mlm-warning-text);background:var(--mlm-warning-bg);border-color:var(--mlm-warning)}
.mlm-alert-info{color:var(--mlm-info-text);background:var(--mlm-info-bg);border-color:var(--mlm-info)}
.mlm-alert-danger{color:var(--mlm-danger-text);background:var(--mlm-danger-bg);border-color:var(--mlm-danger)}
.mlm-alert-success{color:var(--mlm-success-text);background:var(--mlm-success-bg);border-color:var(--mlm-success)}

/* ---------- Tables (scoped wrapper, not a global `table` override) ---------- */
.mlm-table-wrap{overflow-x:auto;border:1px solid rgba(107,66,38,.2);border-radius:var(--mlm-radius-md);background:#fff}
.mlm-table{width:100%;margin:0;border-collapse:collapse;font-size:.92rem}
.mlm-table th,.mlm-table td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid rgba(107,66,38,.12);vertical-align:middle}
.mlm-table thead th{color:var(--brand-green-dark);background:#f5f0e7;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0}
.mlm-table tbody tr:hover{background:rgba(30,77,43,.04)}
.mlm-table tr:last-child td{border-bottom:0}
.mlm-table-sortable th{cursor:pointer;user-select:none}
.mlm-table-sortable th:hover{color:var(--brand-green)}

/* Card-row alternative for dense tables on small screens */
@media (max-width:767.98px){
  .mlm-table-cards thead{display:none}
  .mlm-table-cards,.mlm-table-cards tbody,.mlm-table-cards tr,.mlm-table-cards td{display:block;width:100%}
  .mlm-table-cards tr{margin-bottom:.75rem;border:1px solid rgba(107,66,38,.2);border-radius:var(--mlm-radius-md);padding:.5rem .75rem}
  .mlm-table-cards td{border:0;padding:.35rem 0;display:flex;justify-content:space-between;gap:.75rem}
  .mlm-table-cards td::before{content:attr(data-label);font-weight:600;color:var(--brand-green-dark);padding-right:.75rem}
}

/* ---------- Pagination ---------- */
.mlm-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;list-style:none;padding:0;margin:0}
.mlm-pagination .page-link,.mlm-pagination button{
  min-width:2.25rem;min-height:2.25rem;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(107,66,38,.25);border-radius:var(--mlm-radius-sm);background:#fff;color:var(--brand-black);
}
.mlm-pagination .active button,.mlm-pagination [aria-current="page"]{background:var(--brand-green);border-color:var(--brand-green);color:#fff}
.mlm-pagination button:disabled{opacity:.45;cursor:not-allowed}

/* ---------- Tabs ---------- */
.mlm-tabs{display:flex;gap:.25rem;border-bottom:1px solid rgba(107,66,38,.2);flex-wrap:wrap}
.mlm-tab{padding:.6rem 1rem;border:none;background:none;color:var(--muted);font-weight:600;border-bottom:3px solid transparent;min-height:2.75rem}
.mlm-tab:hover{color:var(--brand-green)}
.mlm-tab[aria-selected="true"]{color:var(--brand-green-dark);border-bottom-color:var(--brand-green)}

/* ---------- Accordion ---------- */
.mlm-accordion-item{border:1px solid rgba(107,66,38,.2);border-radius:var(--mlm-radius-md);margin-bottom:.5rem;overflow:hidden;background:#fff}
.mlm-accordion-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:.85rem 1rem;background:#faf6ee;border:none;font-weight:600;color:var(--brand-black);min-height:2.75rem}
.mlm-accordion-btn .bi{transition:transform var(--mlm-ease-fast)}
.mlm-accordion-btn[aria-expanded="true"] .bi{transform:rotate(180deg)}
.mlm-accordion-body{padding:.9rem 1rem;border-top:1px solid rgba(107,66,38,.15)}

/* ---------- Breadcrumbs ---------- */
.mlm-breadcrumb{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;font-size:.85rem;color:var(--muted);margin-bottom:.75rem}
.mlm-breadcrumb a{color:var(--brand-green);text-decoration:none}
.mlm-breadcrumb a:hover{text-decoration:underline}
.mlm-breadcrumb .sep{color:rgba(107,66,38,.5)}
.mlm-breadcrumb [aria-current="page"]{color:var(--brand-black);font-weight:600}

/* ---------- Empty / loading states ---------- */
.mlm-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.5rem 1.5rem;color:var(--muted)}
.mlm-empty-state .bi{font-size:2.5rem;color:var(--brand-gold);margin-bottom:.75rem}
.mlm-empty-state h3{color:var(--brand-black);font-size:1.05rem;margin-bottom:.35rem}
.mlm-skeleton{background:linear-gradient(90deg,#eee2 25%,#ddd5 37%,#eee2 63%);background-size:400% 100%;border-radius:var(--mlm-radius-sm);animation:mlm-skeleton 1.4s ease infinite}
@keyframes mlm-skeleton{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- Progress ---------- */
.mlm-progress{height:.55rem;border-radius:999px;background:rgba(107,66,38,.15);overflow:hidden}
.mlm-progress > span{display:block;height:100%;background:var(--brand-green);transition:width var(--mlm-ease-panel)}

/* ---------- Timeline (ticket activity) ---------- */
.mlm-timeline{list-style:none;margin:0;padding:0;border-left:2px solid rgba(107,66,38,.2);margin-left:.6rem}
.mlm-timeline-item{position:relative;padding:.25rem 0 1.1rem 1.25rem}
.mlm-timeline-item::before{content:"";position:absolute;left:-.4rem;top:.35rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--brand-green);border:2px solid #fff;box-shadow:0 0 0 2px rgba(30,77,43,.25)}
.mlm-timeline-item.is-note::before{background:var(--brand-gold);box-shadow:0 0 0 2px rgba(212,175,55,.3)}
.mlm-timeline-time{font-size:.78rem;color:var(--muted)}
.mlm-timeline-title{font-weight:600;color:var(--brand-black)}
.mlm-timeline-note{background:#fff4d6;border:1px solid var(--brand-gold);border-radius:var(--mlm-radius-sm);padding:.5rem .65rem;margin-top:.35rem;font-size:.88rem}

/* ---------- Avatar / user chip (reusable outside MainLayout's scoped chip) ---------- */
.mlm-avatar{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;background:var(--brand-gold-light);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--brand-black)}
.mlm-user-chip-sm{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--brand-black)}

/* ---------- Tooltip ---------- */
.mlm-tooltip{position:relative;display:inline-flex}
.mlm-tooltip [role="tooltip"]{
  position:absolute;bottom:calc(100% + .4rem);left:50%;transform:translateX(-50%);
  background:var(--brand-black);color:#fff;font-size:.78rem;padding:.35rem .55rem;border-radius:var(--mlm-radius-sm);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--mlm-ease-fast);z-index:1200;
}
.mlm-tooltip:hover [role="tooltip"],.mlm-tooltip:focus-within [role="tooltip"]{opacity:1}

/* ---------- Dropdown menu ---------- */
.mlm-dropdown-menu{min-width:12rem;background:#fff;border:1px solid rgba(107,66,38,.2);border-radius:var(--mlm-radius-md);box-shadow:0 .75rem 1.5rem rgba(20,18,15,.15);padding:.35rem;z-index:1100}
.mlm-dropdown-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.55rem .65rem;border:none;background:none;border-radius:var(--mlm-radius-sm);color:var(--brand-black);text-align:left;min-height:2.5rem}
.mlm-dropdown-item:hover,.mlm-dropdown-item:focus-visible{background:rgba(30,77,43,.08)}
.mlm-dropdown-item.danger{color:var(--mlm-danger)}
.mlm-dropdown-divider{height:1px;background:rgba(107,66,38,.15);margin:.35rem 0}

/* ---------- Modal / confirmation dialog ---------- */
.mlm-modal-backdrop{position:fixed;inset:0;background:rgba(20,18,15,.55);z-index:1300}
.mlm-modal{
  position:fixed;inset:0;z-index:1310;display:flex;align-items:center;justify-content:center;padding:1rem;
}
.mlm-modal-dialog{
  width:100%;max-width:32rem;background:#fff;border-radius:var(--mlm-radius-lg);border-top:4px solid var(--brand-green);
  box-shadow:0 1.5rem 3rem rgba(20,18,15,.25);padding:1.25rem;
  animation:mlm-modal-in var(--mlm-ease-panel);
}
.mlm-modal-dialog.danger{border-top-color:var(--mlm-danger)}
.mlm-modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.75rem}
.mlm-modal-header h2{margin:0;font-size:1.1rem;color:var(--brand-black)}
.mlm-modal-footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.1rem}
@keyframes mlm-modal-in{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}

/* ---------- Drawer (mobile off-canvas pattern shared with sidebar) ---------- */
.mlm-drawer{
  position:fixed;top:0;bottom:0;right:0;width:min(22rem,100%);background:#fff;z-index:1310;
  box-shadow:-.5rem 0 1.5rem rgba(20,18,15,.2);transform:translateX(100%);transition:transform var(--mlm-ease-panel);
  display:flex;flex-direction:column;
}
.mlm-drawer.mlm-drawer-open{transform:translateX(0)}
.mlm-drawer-header{padding:1rem;border-bottom:1px solid rgba(107,66,38,.15);display:flex;justify-content:space-between;align-items:center}
.mlm-drawer-body{padding:1rem;overflow-y:auto;flex:1}

/* ---------- Toast ---------- */
.mlm-toast-stack{position:fixed;right:1rem;bottom:1rem;z-index:1400;display:flex;flex-direction:column;gap:.6rem;max-width:22rem}
.mlm-toast{display:flex;gap:.6rem;align-items:flex-start;background:#fff;border:1px solid rgba(107,66,38,.2);border-left:4px solid var(--brand-green);
  border-radius:var(--mlm-radius-md);box-shadow:0 .5rem 1.5rem rgba(20,18,15,.15);padding:.75rem .9rem;animation:mlm-toast-in var(--mlm-ease-panel)}
.mlm-toast.success{border-left-color:var(--mlm-success)}
.mlm-toast.danger{border-left-color:var(--mlm-danger)}
.mlm-toast.warning{border-left-color:var(--mlm-warning)}
@keyframes mlm-toast-in{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}

/* ---------- Upload drop zone ---------- */
.mlm-dropzone{
  border:2px dashed rgba(107,66,38,.35);border-radius:var(--mlm-radius-md);padding:1.5rem;text-align:center;color:var(--muted);
  background:#fff;transition:border-color var(--mlm-ease-fast),background var(--mlm-ease-fast);
}
.mlm-dropzone:hover,.mlm-dropzone.is-dragover{border-color:var(--brand-green);background:rgba(30,77,43,.04)}
.mlm-dropzone .bi{font-size:1.75rem;color:var(--brand-green);margin-bottom:.5rem}

/* ---------- Chart container ---------- */
.mlm-chart-card{background:#fff;border:1px solid rgba(107,66,38,.2);border-radius:var(--mlm-radius-md);padding:1rem}
.mlm-chart-container{position:relative;width:100%;min-height:16rem}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ---------- Optional high-contrast mode ---------- */
.mlm-high-contrast{--muted:#45443f}
.mlm-high-contrast .mlm-card,.mlm-high-contrast .card,.mlm-high-contrast .kpi-card,
.mlm-high-contrast .mlm-table-wrap,.mlm-high-contrast .mlm-status,
.mlm-high-contrast .mlm-priority,.mlm-high-contrast .mlm-sla{border-width:2px}

/* ---------- Optional dark theme (retains green/gold/cream identity, inverted surfaces) ---------- */
.mlm-dark{
  --surface:#1c1a16;
  --brand-cream:#121110;
  --muted:#b9b4a8;
  color:#f3efe6;
}
.mlm-dark body{background:var(--brand-cream);color:#f3efe6}
.mlm-dark .card,.mlm-dark .kpi-card,.mlm-dark .mlm-table-wrap{background:#201d18;border-color:rgba(212,175,55,.2);color:#f3efe6}
.mlm-dark .mlm-table thead th{background:#171511;color:var(--brand-gold-light)}