/*
 * Graphite Note - Visual Pass 10: Enterprise Polish & Consistency
 * Final additive visual normalization layer.
 *
 * Scope:
 * - rhythm / spacing
 * - button hierarchy
 * - focus / selected / disabled states
 * - cards / surfaces
 * - chart containment
 * - tables / DevExtreme density
 * - typography hierarchy
 * - empty/loading states
 * - restrained transitions
 * - 1366x768 density hardening
 *
 * Intentionally does NOT change application behavior, API contracts,
 * model logic, data semantics, or component state.
 */

:root {
    --gn10-space-1: 4px;
    --gn10-space-2: 8px;
    --gn10-space-3: 12px;
    --gn10-space-4: 16px;
    --gn10-space-5: 20px;
    --gn10-space-6: 24px;
    --gn10-space-8: 32px;

    --gn10-radius-sm: 6px;
    --gn10-radius-md: 8px;
    --gn10-radius-lg: 10px;

    --gn10-border: #e3e8ef;
    --gn10-border-strong: #d5dce5;
    --gn10-bg-page: #f7f9fb;
    --gn10-bg-surface: #ffffff;
    --gn10-bg-subtle: #f8fafc;
    --gn10-text: #172033;
    --gn10-text-muted: #667085;
    --gn10-text-soft: #8993a4;
    --gn10-danger: #c62828;
    --gn10-danger-bg: #fff6f6;
    --gn10-danger-border: #efcaca;
    --gn10-focus: rgba(46, 105, 255, .24);

    --gn10-control-h: 36px;
    --gn10-control-h-sm: 32px;
    --gn10-transition: 160ms ease;
}

/* --------------------------------------------------------------------------
   1. Page rhythm and density
   -------------------------------------------------------------------------- */

html,
body {
    background: var(--gn10-bg-page);
}

.page-content,
.content-wrapper,
.main-content,
.q-page-content,
.model-content,
.model-page-content {
    box-sizing: border-box;
}

/* Normalize common top-level page containers without forcing a new width. */
.page-content > .container-fluid,
.content-wrapper > .container-fluid,
.main-content > .container-fluid {
    padding-left: var(--gn10-space-6);
    padding-right: var(--gn10-space-6);
}

/* Consistent vertical spacing between direct content blocks. */
.page-content > * + *,
.content-wrapper > * + *,
.main-content > * + * {
    margin-top: var(--gn10-space-5);
}

/* Do not double-space grids/rows that already own their own gutters. */
.page-content > .row + .row,
.content-wrapper > .row + .row,
.main-content > .row + .row {
    margin-top: var(--gn10-space-4);
}

/* --------------------------------------------------------------------------
   2. Typography hierarchy
   -------------------------------------------------------------------------- */

h1,
.h1,
.page-title {
    letter-spacing: -0.02em;
    line-height: 1.18;
}

h2,
.h2,
.section-title {
    letter-spacing: -0.015em;
    line-height: 1.24;
}

h3,
.h3,
.card-title,
.panel-title {
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.text-muted,
.help-block,
.form-text,
.meta,
.metadata,
.secondary-text {
    color: var(--gn10-text-muted) !important;
}

small,
.small {
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   3. Buttons: one visual grammar
   -------------------------------------------------------------------------- */

.btn,
button.btn,
input.btn,
.dx-button {
    min-height: var(--gn10-control-h);
    border-radius: var(--gn10-radius-sm);
    font-weight: 600;
    box-shadow: none;
    transition: background-color var(--gn10-transition),
                border-color var(--gn10-transition),
                color var(--gn10-transition),
                box-shadow var(--gn10-transition),
                transform var(--gn10-transition);
}

.btn-sm,
.btn-group-sm > .btn,
.dx-button-mode-contained.dx-button-has-text {
    min-height: var(--gn10-control-h-sm);
}

.btn:hover:not(:disabled):not(.disabled),
.dx-button:hover:not(.dx-state-disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled):not(.disabled),
.dx-button.dx-state-active:not(.dx-state-disabled) {
    transform: translateY(0);
}

.btn-default,
.btn-secondary,
.btn-outline-secondary {
    background: var(--gn10-bg-surface);
    border-color: var(--gn10-border-strong);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--gn10-bg-subtle);
    border-color: #c7d0dc;
}

.btn-danger,
.btn-outline-danger {
    color: var(--gn10-danger);
    border-color: var(--gn10-danger-border);
}

.btn-danger {
    color: #fff;
    background: var(--gn10-danger);
}

.btn-outline-danger,
.btn-default.text-danger {
    background: var(--gn10-danger-bg);
}

.btn-link {
    min-height: auto;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    transform: none !important;
}

.btn[disabled],
.btn.disabled,
.dx-state-disabled {
    opacity: .52;
    cursor: not-allowed;
    transform: none !important;
}

/* Icon-only controls should stay compact instead of inheriting wide padding. */
.btn-icon,
.icon-button,
.btn.btn-icon-only,
button[aria-label].btn:not(.btn-link) {
    min-width: var(--gn10-control-h);
    padding-left: 8px;
    padding-right: 8px;
}

/* --------------------------------------------------------------------------
   4. Focus and selection states
   -------------------------------------------------------------------------- */

/* Mouse click should not leave a heavy persistent ring. */
.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none;
}

/* Keyboard focus stays visible and accessible. */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px var(--gn10-focus) !important;
}

/* Selection should read as intentional, not like browser text selection. */
.nav > li > a,
.nav-tabs > li > a,
.nav-pills > li > a,
.list-group-item,
.dropdown-menu > li > a {
    transition: background-color var(--gn10-transition),
                color var(--gn10-transition),
                border-color var(--gn10-transition);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-pills > li.active > a,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Cards / surfaces
   -------------------------------------------------------------------------- */

.panel, .card, .well, .box, .widget, .q-card, .gn-card{
    border-color: var(--gn10-border);
    border-radius: var(--gn10-radius-md);
}

.panel,
.card,
.box,
.widget,
.q-card,
.gn-card {
    background: var(--gn10-bg-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
}

.panel-heading,
.card-header,
.box-header,
.widget-header {
    background: transparent;
    border-bottom-color: var(--gn10-border);
}

.well,
.inset,
.subtle-surface,
.secondary-surface {
    background: var(--gn10-bg-subtle);
    border: 1px solid var(--gn10-border);
    box-shadow: none;
}

/* Avoid stacked cards looking like nested heavy boxes. */
.panel .panel,
.card .card,
.box .box,
.q-card .q-card,
.gn-card .gn-card {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   6. Forms / compact controls
   -------------------------------------------------------------------------- */

.form-control,
select.form-control,
input.form-control,
textarea.form-control,
.dx-texteditor,
.dx-dropdowneditor {
    border-color: var(--gn10-border-strong);
    border-radius: var(--gn10-radius-sm);
    box-shadow: none;
}

input.form-control,
select.form-control,
.dx-texteditor,
.dx-dropdowneditor {
    min-height: var(--gn10-control-h);
}

.form-control:focus,
.dx-texteditor.dx-state-focused,
.dx-dropdowneditor.dx-state-focused {
    border-color: #9ab5ff;
    box-shadow: 0 0 0 3px var(--gn10-focus);
}

/* --------------------------------------------------------------------------
   7. Tables / DevExtreme normalization
   -------------------------------------------------------------------------- */

.table{
    margin-bottom: 0;
}

.table > thead > tr > th{
    font-weight: 600;
    color: #475467;
    vertical-align: middle;
}

.table > thead > tr > th,
.table > tbody > tr > td {
    border-color: var(--gn10-border);
}

.table > tbody > tr:hover{
    background: #fafbfc;
}



/* Keep grid search/filter chrome compact and visually secondary. */








/* --------------------------------------------------------------------------
   8. Charts and visualizations
   -------------------------------------------------------------------------- */

.canvasjs-chart-container,
.canvasjs-chart-canvas,
.chart-container,
.chart-host,
.gn-chart,
.model-chart,
.analytics-chart {
    max-width: 100%;
}

.chart-container,
.chart-host,
.gn-chart,
.model-chart,
.analytics-chart {
    overflow: hidden;
    border-radius: var(--gn10-radius-sm);
}

.canvasjs-chart-container canvas,
.chart-container canvas,
.chart-host canvas,
.gn-chart canvas,
.model-chart canvas,
.analytics-chart canvas,
.chart-container svg,
.chart-host svg,
.gn-chart svg,
.model-chart svg,
.analytics-chart svg {
    max-width: 100% !important;
}

/* Prevent chart/tool panels from being cut by fixed ancestors. */
.chart-container,
.chart-host,
.gn-chart,
.model-chart,
.analytics-chart,
.canvasjs-chart-container {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   9. Empty / loading states
   -------------------------------------------------------------------------- */

.empty-state,
.no-data,
.no-results,
.empty-results,
.gn-empty-state {
    min-height: 160px;
    padding: var(--gn10-space-8) var(--gn10-space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gn10-text-muted);
    background: var(--gn10-bg-subtle);
    border: 1px dashed var(--gn10-border-strong);
    border-radius: var(--gn10-radius-md);
}

.loading,
.loader,
.loading-state,
.gn-loading-state {
    color: var(--gn10-text-muted);
}

/* Lightweight skeleton utility, usable without JS changes. */
.gn-skeleton {
    position: relative;
    overflow: hidden;
    background: #edf1f5;
    border-radius: var(--gn10-radius-sm);
}

.gn-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    animation: gn10-skeleton 1.35s infinite;
}

@keyframes gn10-skeleton {
    100% { transform: translateX(100%); }
}

/* --------------------------------------------------------------------------
   10. Menus / overlays / micro-interactions
   -------------------------------------------------------------------------- */

.dropdown-menu,
.popover,
.modal-content {
    border-color: var(--gn10-border);
    border-radius: var(--gn10-radius-md);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .10);
}

.dropdown-menu > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--gn10-bg-subtle);
}

.modal.fade .modal-dialog,
.drawer,
.context-drawer,
.evidence-drawer {
    transition-duration: 180ms !important;
}

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

/* --------------------------------------------------------------------------
   11. Laptop-density hardening: 1366x768 class screens
   -------------------------------------------------------------------------- */

@media (max-width: 1440px) {
    .page-content > .container-fluid,
    .content-wrapper > .container-fluid,
    .main-content > .container-fluid {
        padding-left: var(--gn10-space-5);
        padding-right: var(--gn10-space-5);
    }

    .panel-body,
    .card-body,
    .box-body,
    .q-card-body,
    .gn-card-body {
        padding: var(--gn10-space-4);
    }

    .table > thead > tr > th, .table > tbody > tr > td{
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .chart-container,
    .chart-host,
    .gn-chart,
    .model-chart,
    .analytics-chart {
        max-height: 430px;
    }
}

@media (max-width: 1200px) {
    .page-content > .container-fluid,
    .content-wrapper > .container-fluid,
    .main-content > .container-fluid {
        padding-left: var(--gn10-space-4);
        padding-right: var(--gn10-space-4);
    }

    .btn,
    button.btn,
    input.btn {
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
   12. Legacy anti-jank normalization
   -------------------------------------------------------------------------- */

/* Avoid accidental diagonal/skewed cards or controls from inherited transforms. */
.panel,
.card,
.box,
.widget,
.q-card,
.gn-card,
.btn,
.form-control,
.dx-button,
.dx-texteditor {
    skew: none;
}

/* Images/icons must not distort surrounding layout. */
img,
svg {
    max-width: 100%;
}

/* Prevent long labels/IDs from forcing horizontal page overflow. */
.card-title, .panel-title, .page-title, .section-title, .table td{
    overflow-wrap: anywhere;
}