/* ════════════════════════════════════════════════════════════════
   RMT BLAZOR — GLOBAL DESIGN SYSTEM
   Enterprise-grade typography, spacing, and component standards.
   Load this AFTER app.css and BEFORE all page-specific CSS.

   Sections
   ──────────────────────────────────────────────────────────────
   1.  Global Font Reset
   2.  Heading Hierarchy
   3.  Body & Label Text
   4.  Page-Header Pattern
   5.  Enterprise Table  (.ent-table)
   6.  Enterprise Card   (.ent-card)
   7.  Enterprise Button (.ent-btn)
   8.  Enterprise Form   (.ent-input / .ent-label)
   9.  Badge / Pill
   10. Empty State
   11. Utility Classes — flex, spacing, text
   ════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   1. GLOBAL FONT RESET
   ────────────────────────────────────────────────────────────── */

html,
body {
    font-family: var(--ds-font);
    font-size:   var(--ds-body);
    line-height: var(--ds-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ──────────────────────────────────────────────────────────────
   2. HEADING HIERARCHY
   H1 24px/600/32px · H2 20px/600/28px · H3 16px/500/24px
   ────────────────────────────────────────────────────────────── */

h1, .ds-h1 {
    font-family: var(--ds-font);
    font-size:   var(--ds-h1);
    font-weight: var(--ds-fw-semibold);
    line-height: var(--ds-lh-h1);
    margin: 0;
}

h2, .ds-h2 {
    font-family: var(--ds-font);
    font-size:   var(--ds-h2);
    font-weight: var(--ds-fw-semibold);
    line-height: var(--ds-lh-h2);
    margin: 0;
}

h3, .ds-h3 {
    font-family: var(--ds-font);
    font-size:   var(--ds-h3);
    font-weight: var(--ds-fw-medium);
    line-height: var(--ds-lh-h3);
    margin: 0;
}

h4, .ds-h4 {
    font-family: var(--ds-font);
    font-size:   var(--ds-body);
    font-weight: var(--ds-fw-semibold);
    line-height: var(--ds-lh-body);
    margin: 0;
}

h5, h6 {
    font-family: var(--ds-font);
    font-size:   var(--ds-body);
    font-weight: var(--ds-fw-semibold);
    line-height: var(--ds-lh-body);
    margin: 0;
}


/* ──────────────────────────────────────────────────────────────
   3. BODY & LABEL TEXT
   ────────────────────────────────────────────────────────────── */

p {
    font-size:   var(--ds-body);
    line-height: var(--ds-lh-body);
    margin: 0;
}

.ds-body  { font-size: var(--ds-body);  font-weight: var(--ds-fw-regular); line-height: var(--ds-lh-body); }
.ds-label { font-size: var(--ds-label); font-weight: var(--ds-fw-regular); line-height: 1.4; }
.ds-small { font-size: var(--ds-small); font-weight: var(--ds-fw-regular); line-height: 1.4; }

.ds-text-muted    { color: var(--text-muted); }
.ds-text-secondary{ color: var(--text-secondary); }
.ds-text-primary  { color: var(--text-primary); }


/* ──────────────────────────────────────────────────────────────
   4. PAGE-HEADER PATTERN
   Standard header used across Dashboard, Audit, Compare, etc.
   ────────────────────────────────────────────────────────────── */

.page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--ds-inner-pad) var(--sp-6);
    background:      var(--surface-white);
    border-bottom:   1px solid var(--gray-200);
    flex-shrink:     0;
}

.page-header-left {
    display:     flex;
    align-items: center;
    gap:         var(--sp-3);
}

.page-header-icon {
    width:            38px;
    height:           38px;
    border-radius:    var(--ds-radius-lg);
    background:       var(--brand-primary-light);
    border:           1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        var(--ds-h3);
    color:            var(--brand-primary);
    flex-shrink:      0;
}

.page-title {
    font-size:   var(--ds-h2);
    font-weight: var(--ds-fw-semibold);
    line-height: var(--ds-lh-h2);
    color:       var(--gray-900);
    margin:      0;
    letter-spacing: -0.015em;
}

.page-subtitle {
    font-size:   var(--ds-label);
    color:       var(--gray-500);
    margin:      2px 0 0;
    line-height: 1.4;
}

.page-header-right {
    display:     flex;
    align-items: center;
    gap:         var(--sp-3);
}


/* ──────────────────────────────────────────────────────────────
   5. ENTERPRISE TABLE  (.ent-table)
   Consistent row height, padding, alignment, and type scale.
   ────────────────────────────────────────────────────────────── */

.ent-table {
    width:           100%;
    border-collapse: collapse;
    font-family:     var(--ds-font);
    font-size:       var(--tbl-body-size);
}

/* Header */
.ent-table thead tr {
    position: sticky;
    top:      0;
    z-index:  2;
}

.ent-table thead th {
    height:           var(--tbl-head-h);
    padding:          0 var(--tbl-cell-px);
    background:       var(--gray-50);
    font-size:        var(--tbl-head-size);
    font-weight:      var(--ds-fw-bold);
    color:            var(--gray-500);
    text-transform:   uppercase;
    letter-spacing:   0.06em;
    border-bottom:    2px solid var(--gray-200);
    white-space:      nowrap;
    text-align:       left;
    vertical-align:   middle;
    user-select:      none;
}

/* Alignment helpers on th */
.ent-table thead th.col-right  { text-align: right; }
.ent-table thead th.col-center { text-align: center; }

/* Body rows */
.ent-table tbody tr {
    border-bottom: 1px solid var(--gray-100);
    transition:    background 0.1s;
}

.ent-table tbody tr:last-child { border-bottom: none; }
.ent-table tbody tr:hover      { background: var(--gray-50); }

/* Body cells */
.ent-table tbody td {
    height:         var(--tbl-row-h);
    padding:        0 var(--tbl-cell-px);
    vertical-align: middle;
    font-size:      var(--tbl-body-size);
    color:          var(--gray-700);
    text-align:     left;
    overflow:       hidden;
}

/* Alignment helpers on td */
.ent-table tbody td.col-right  { text-align: right; }
.ent-table tbody td.col-center { text-align: center; }

/* Long-text cells: truncate with ellipsis */
.ent-table .cell-truncate {
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     0; /* forces ellipsis when table-layout: fixed */
}

/* Compact variant — tighter rows */
.ent-table.ent-table-compact tbody td,
.ent-table.ent-table-compact thead th {
    height:  32px;
    padding: 0 12px;
}


/* ──────────────────────────────────────────────────────────────
   6. ENTERPRISE CARD  (.ent-card)
   ────────────────────────────────────────────────────────────── */

.ent-card {
    background:    var(--surface-white);
    border:        1px solid var(--gray-200);
    border-radius: var(--ds-radius-lg);
    box-shadow:    var(--shadow-sm);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
}

.ent-card-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--ds-inner-pad) var(--sp-4);
    border-bottom:   1px solid var(--gray-200);
    background:      var(--surface-white);
    flex-shrink:     0;
}

.ent-card-title {
    font-size:   var(--ds-h3);
    font-weight: var(--ds-fw-semibold);
    line-height: var(--ds-lh-h3);
    color:       var(--gray-800);
    margin:      0;
    display:     flex;
    align-items: center;
    gap:         var(--sp-2);
}

.ent-card-title i {
    font-size: var(--ds-body);
    color:     var(--gray-500);
}

.ent-card-subtitle {
    font-size: var(--ds-label);
    color:     var(--gray-500);
    margin:    2px 0 0;
}

.ent-card-body {
    padding: var(--sp-4);
    flex:    1;
}

.ent-card-footer {
    padding:    12px var(--sp-4);
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
    flex-shrink: 0;
}


/* ──────────────────────────────────────────────────────────────
   7. ENTERPRISE BUTTON  (.ent-btn)
   ────────────────────────────────────────────────────────────── */

.ent-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         7px 16px;
    border-radius:   var(--ds-radius-md);
    font-family:     var(--ds-font);
    font-size:       var(--ds-body);
    font-weight:     var(--ds-fw-semibold);
    line-height:     1;
    cursor:          pointer;
    transition:      border-color .15s, background .15s, box-shadow .15s, color .15s;
    border:          1px solid transparent;
    white-space:     nowrap;
    text-decoration: none;
    user-select:     none;
}

.ent-btn:disabled {
    opacity:        0.5;
    cursor:         not-allowed;
    pointer-events: none;
}

/* Sizes */
.ent-btn-sm {
    padding:   5px 12px;
    font-size: var(--ds-label);
}

.ent-btn-xs {
    padding:   3px 8px;
    font-size: var(--ds-small);
    gap:       4px;
}

/* Primary */
.ent-btn-primary {
    background:   var(--brand-primary);
    border-color: var(--brand-primary);
    color:        var(--text-white);
}
.ent-btn-primary:hover:not(:disabled) {
    background:   var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

/* Ghost / Outline */
.ent-btn-ghost {
    background:   var(--surface-white);
    border-color: var(--gray-200);
    color:        var(--gray-700);
}
.ent-btn-ghost:hover:not(:disabled) {
    border-color: var(--gray-300);
    background:   var(--gray-50);
    color:        var(--gray-900);
}

/* Danger */
.ent-btn-danger {
    background:   var(--status-error);
    border-color: var(--status-error);
    color:        var(--text-white);
}
.ent-btn-danger:hover:not(:disabled) {
    background:   color-mix(in srgb, var(--status-error) 85%, #000);
    border-color: color-mix(in srgb, var(--status-error) 85%, #000);
}

/* Icon-only button */
.ent-btn-icon {
    width:    32px;
    height:   32px;
    padding:  0;
    border-radius: var(--ds-radius-md);
    background:    var(--surface-white);
    border:        1px solid var(--gray-200);
    color:         var(--gray-500);
}
.ent-btn-icon:hover:not(:disabled) {
    border-color: var(--brand-primary);
    color:        var(--brand-primary);
    background:   color-mix(in srgb, var(--brand-primary) 5%, #fff);
}


/* ──────────────────────────────────────────────────────────────
   8. ENTERPRISE FORM  (.ent-label / .ent-input)
   ────────────────────────────────────────────────────────────── */

.ent-field {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-1);
}

.ent-label {
    display:        block;
    font-family:    var(--ds-font);
    font-size:      var(--ds-label);
    font-weight:    var(--ds-fw-semibold);
    color:          var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ent-label .required { color: var(--status-error); margin-left: 2px; }

.ent-input,
.ent-select {
    width:       100%;
    padding:     8px 12px;
    border:      1px solid var(--gray-300);
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font);
    font-size:   var(--ds-body);
    color:       var(--gray-900);
    background:  var(--surface-white);
    outline:     none;
    transition:  border-color .15s, box-shadow .15s;
    box-sizing:  border-box;
}

.ent-input:focus,
.ent-select:focus {
    border-color: var(--brand-primary);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.ent-input::placeholder { color: var(--gray-400); }

.ent-hint {
    font-size: var(--ds-small);
    color:     var(--gray-500);
}

.ent-error {
    font-size: var(--ds-small);
    color:     var(--status-error);
}

/* Search input with icon */
.ent-search {
    position: relative;
}

.ent-search .ent-input {
    padding-left: 2.25rem;
    background:   var(--gray-50);
}

.ent-search .ent-input:focus {
    background: var(--surface-white);
}

.ent-search-icon {
    position:  absolute;
    left:      0.75rem;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--gray-400);
    font-size: var(--ds-body);
    pointer-events: none;
}


/* ──────────────────────────────────────────────────────────────
   9. BADGE / PILL
   ────────────────────────────────────────────────────────────── */

.ent-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    padding:        3px 8px;
    border-radius:  var(--ds-radius-sm);
    font-size:      var(--ds-small);
    font-weight:    var(--ds-fw-bold);
    white-space:    nowrap;
    letter-spacing: 0.02em;
    border:         1px solid transparent;
}

.ent-badge-success {
    background:   var(--status-success-bg);
    color:        var(--status-success);
    border-color: color-mix(in srgb, var(--status-success) 25%, transparent);
}

.ent-badge-danger {
    background:   var(--status-error-bg);
    color:        var(--status-error);
    border-color: color-mix(in srgb, var(--status-error) 25%, transparent);
}

.ent-badge-warning {
    background:   var(--status-warning-bg);
    color:        var(--status-warning);
    border-color: color-mix(in srgb, var(--status-warning) 25%, transparent);
}

.ent-badge-info {
    background:   var(--status-info-bg);
    color:        var(--status-info);
    border-color: color-mix(in srgb, var(--status-info) 25%, transparent);
}

.ent-badge-neutral {
    background:   var(--gray-100);
    color:        var(--gray-600);
    border-color: var(--gray-200);
}

/* Pill shape variant */
.ent-pill {
    border-radius: 20px;
    padding:       3px 10px;
}

/* Status dot inside badge */
.ent-badge .status-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    currentColor;
    flex-shrink:   0;
}


/* ──────────────────────────────────────────────────────────────
   10. EMPTY STATE
   ────────────────────────────────────────────────────────────── */

.ent-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--sp-3);
    padding:         4rem 2rem;
    text-align:      center;
    color:           var(--gray-400);
}

.ent-empty-icon {
    width:            56px;
    height:           56px;
    border-radius:    var(--ds-radius-xl);
    background:       color-mix(in srgb, var(--brand-primary) 8%, transparent);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.5rem;
    color:            var(--brand-primary);
    margin-bottom:    var(--sp-1);
}

.ent-empty-title {
    font-size:   var(--ds-h3);
    font-weight: var(--ds-fw-semibold);
    color:       var(--gray-900);
    margin:      0;
}

.ent-empty-desc {
    font-size:  var(--ds-body);
    color:      var(--gray-500);
    margin:     0;
    max-width:  360px;
    line-height: 1.6;
}


/* ──────────────────────────────────────────────────────────────
   11. UTILITY CLASSES
   ────────────────────────────────────────────────────────────── */

/* Flex */
.ds-flex         { display: flex; }
.ds-flex-center  { display: flex; align-items: center; }
.ds-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ds-flex-col     { display: flex; flex-direction: column; }
.ds-flex-wrap    { flex-wrap: wrap; }

/* Gap */
.ds-gap-1 { gap: var(--sp-1); }
.ds-gap-2 { gap: var(--sp-2); }
.ds-gap-3 { gap: var(--sp-3); }
.ds-gap-4 { gap: var(--sp-4); }
.ds-gap-6 { gap: var(--sp-6); }

/* Padding */
.ds-p-3 { padding: var(--sp-3); }
.ds-p-4 { padding: var(--sp-4); }
.ds-p-6 { padding: var(--sp-6); }
.ds-px-4 { padding-inline: var(--sp-4); }
.ds-px-6 { padding-inline: var(--sp-6); }
.ds-py-3 { padding-block: var(--sp-3); }
.ds-py-4 { padding-block: var(--sp-4); }

/* Margin */
.ds-mt-2 { margin-top: var(--sp-2); }
.ds-mt-3 { margin-top: var(--sp-3); }
.ds-mt-4 { margin-top: var(--sp-4); }
.ds-mt-6 { margin-top: var(--sp-6); }
.ds-mb-2 { margin-bottom: var(--sp-2); }
.ds-mb-4 { margin-bottom: var(--sp-4); }

/* Text */
.ds-text-right  { text-align: right; }
.ds-text-center { text-align: center; }
.ds-truncate    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-mono        { font-family: 'Consolas', 'Cascadia Code', 'JetBrains Mono', monospace; }

/* Weight */
.ds-fw-400 { font-weight: 400; }
.ds-fw-500 { font-weight: 500; }
.ds-fw-600 { font-weight: 600; }
.ds-fw-700 { font-weight: 700; }

/* Divider */
.ds-divider {
    width:      100%;
    height:     1px;
    background: var(--gray-200);
    border:     none;
    margin:     0;
}

/* Section wrapper */
.ds-section {
    padding: var(--ds-section-gap);
}

/* Scroll area */
.ds-scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
    flex:       1;
    min-height: 0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        padding: var(--ds-inner-pad) var(--sp-4);
    }
    .page-header-right {
        width: 100%;
        justify-content: flex-end;
    }
    .ent-table-wrap {
        overflow-x: auto;
    }
    .details-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .ent-empty {
        padding: 2.5rem 1rem;
    }
    .details-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .page-header {
        padding: 0.75rem 1rem;
    }
}

.page-init-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; }