/* Cloud-specific shell additions — pieces of Web's design system that live in files we didn't
   copy wholesale (sale.css is the ~48KB POS-terminal stylesheet; .cm-container is the one generic
   class defined there). */

/* Web's actual host page (Apps/CapeMart.Web/Components/App.razor) loads Bootstrap's CSS alongside
   the cm-*.css files — none of the cm-* files declare a body font-family themselves (only
   .cm-terminal does, which the Login/Error pages aren't wrapped in), so what makes Web's login
   screen render in a clean sans-serif is actually Bootstrap's base reset underneath, not anything
   in this design system. Reproducing just the font here (Bootstrap 5's default stack) rather than
   pulling in all of Bootstrap avoids reintroducing its other resets/defaults against cm-* classes. */

/* Bootstrap's Reboot also zeroes the browser's default body margin (usually ~8px). Without
   Bootstrap, that default margin was still in effect here, pushing .cm-terminal (height:100vh,
   width:100%) away from the viewport edges — visible as a gap above/left of the header. */
html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.cm-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    flex-direction: column;
}

/* Grid wrapper for .cm-summary-card — the Blazor dashboard's equivalent lives in a
   component-scoped <style> block (Blazor CSS isolation), which doesn't carry over here. */
.cm-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cm-page-header {
    margin-bottom: 20px;
}

.cm-page-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--cm-text);
    margin: 0;
}

/* .cm-search-input / .cm-empty — also live in sale.css, same reasoning as .cm-container above. */
.cm-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    font-size: 14px;
    outline: none;
}

.cm-search-input:focus {
    border-color: var(--cm-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.cm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--cm-text-muted);
    text-align: center;
}

.cm-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Order detail page — Web's design system has no generic "detail grid" (Storefront's own
   admin-detail-grid isn't part of this component set), so this is new but styled consistently
   with the existing card/spacing conventions. */
.cm-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.cm-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--cm-border-light, var(--cm-border));
    font-size: 14px;
}

.cm-detail-row:last-child {
    border-bottom: none;
}

.cm-detail-label {
    color: var(--cm-text-muted);
}

.cm-detail-value {
    font-weight: 500;
    text-align: right;
}

/* Products' inline click-to-edit Price/MRP/Sale Price cells (decision #2). */
.cm-inline-edit {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
}

.cm-inline-edit:hover {
    border-bottom-color: currentColor;
}

/* Click-to-toggle badges (inline-toggle.js) — a dashed underline doesn't read well on a solid
   pill-shaped badge the way it does on plain text, so this uses a slight fade on hover instead,
   plus a dimmed, non-interactive look while a click's own fetch() is still in flight. */
.cm-inline-toggle {
    cursor: pointer;
}

.cm-inline-toggle:hover {
    opacity: 0.8;
}

.cm-inline-toggle.cm-inline-toggling {
    cursor: wait;
    opacity: 0.5;
    pointer-events: none;
}