/* ============================================================
   Rubix.Link — Spacing & Polish Layer
   Loads AFTER rubix-link-dark-theme.css
   Purpose: tighter rhythm, cleaner visuals — no colour changes
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   GRID — Tighter row height
   Base theme sets td padding to 12px 16px.
   Cut vertical to 6px so ~40 rows fit without scrolling.
   ══════════════════════════════════════════════════════════════ */
.dxbl-grid-table td,
.dxbl-grid .dxbl-grid-data-row td,
.dxbl-grid-cell {
    padding: 6px 12px !important;
    line-height: 1.4 !important;
}

/* Column headers — proportionally tighter */
.dxbl-grid-header-cell,
.dxbl-grid-header-row th,
thead th {
    padding: 7px 12px !important;
}

/* ══════════════════════════════════════════════════════════════
   GRID — Column header separator lines
   ══════════════════════════════════════════════════════════════ */
.dxbl-grid-header-cell {
    border-right: 1px solid rgba(255,255,255,0.04) !important;
}

.dxbl-grid-header-cell:last-child {
    border-right: none !important;
}

/* ══════════════════════════════════════════════════════════════
   GRID — Row hover (more defined lift)
   ══════════════════════════════════════════════════════════════ */
.dxbl-grid-table tbody tr:hover td,
.dxbl-grid .dxbl-grid-data-row:hover td {
    background: rgba(255,255,255,0.025) !important;
}

/* ══════════════════════════════════════════════════════════════
   GRID — Selection / checkbox column
   Reduce width and dim the checkbox until the row is hovered/selected
   ══════════════════════════════════════════════════════════════ */
.dxbl-grid-select-all-check-box-cell,
.dxbl-grid-select-row-cell,
td[class*="dxbl-grid-select"],
th[class*="dxbl-grid-select"] {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 4px 8px !important;
}

/* Dim checkbox until relevant */
.dxbl-grid-select-row-cell .dxbl-checkbox-check-element,
.dxbl-grid-select-all-check-box-cell .dxbl-checkbox-check-element {
    opacity: 0.3;
    transition: opacity 120ms ease !important;
}

.dxbl-grid-data-row:hover .dxbl-grid-select-row-cell .dxbl-checkbox-check-element,
.dxbl-grid-data-row.dxbl-selected .dxbl-grid-select-row-cell .dxbl-checkbox-check-element,
.dxbl-grid-select-all-check-box-cell:hover .dxbl-checkbox-check-element {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   GRID — Wrapper rounding
   ══════════════════════════════════════════════════════════════ */
.dxbl-grid-wrapper,
.dxbl-grid {
    border-radius: 8px !important;
}

/* ══════════════════════════════════════════════════════════════
   GRID — Pager strip compact
   ══════════════════════════════════════════════════════════════ */
.dxbl-pager,
.dxbl-grid-pager,
.dxbl-grid-footer {
    padding: 5px 12px !important;
    min-height: 36px !important;
}

/* ══════════════════════════════════════════════════════════════
   TOOLBAR — More subtle ghost buttons
   Base theme already styles .dxbl-btn; we target toolbar context
   ══════════════════════════════════════════════════════════════ */
.dxbl-toolbar .dxbl-btn,
.dxbl-grid-toolbar .dxbl-btn,
.dxbl-grid-header-panel .dxbl-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--rl-text-2) !important;
    padding: 4px 10px !important;
    min-height: 30px !important;
    font-size: 12.5px !important;
}

.dxbl-toolbar .dxbl-btn:hover,
.dxbl-grid-toolbar .dxbl-btn:hover,
.dxbl-grid-header-panel .dxbl-btn:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: var(--rl-text-0) !important;
}

/* Primary action (New, Save) — keeps accent but less saturated */
.dxbl-toolbar .dxbl-btn-primary,
.dxbl-grid-toolbar .dxbl-btn-primary {
    background: var(--rl-accent-dim) !important;
    border-color: rgba(249,115,22,0.22) !important;
    color: var(--rl-accent-text) !important;
}

.dxbl-toolbar .dxbl-btn-primary:hover,
.dxbl-grid-toolbar .dxbl-btn-primary:hover {
    background: var(--rl-accent) !important;
    border-color: var(--rl-accent) !important;
    color: #fff !important;
}

/* Toolbar strip height */
.dxbl-toolbar,
.dxbl-grid-toolbar,
.dxbl-grid-header-panel {
    min-height: 44px !important;
    padding: 6px 10px !important;
}

/* Search/filter input inside toolbar */
.dxbl-toolbar .dxbl-text-edit input,
.dxbl-grid-header-panel .dxbl-text-edit input {
    height: 28px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — Tighter item spacing
   ══════════════════════════════════════════════════════════════ */
.dxbl-nav-item,
a.dxbl-nav-link,
.dxbl-nav-link,
.dxbl-tree-view-item {
    padding: 5px 10px !important;
    margin: 1px 6px !important;
    font-size: 12.5px !important;
}

.dxbl-nav-group-header,
.dxbl-tree-view-node-tmpl {
    padding: 14px 12px 4px 12px !important;
    font-size: 10px !important;
}

/* Tighten the sidebar padding-top */
.dxbl-nav,
.dxbl-nav-panel,
.xaf-navigation {
    padding-top: 2px !important;
}

/* ══════════════════════════════════════════════════════════════
   TOP BAR / APP HEADER
   ══════════════════════════════════════════════════════════════ */
.xaf-header,
.xaf-view-header,
header[class*="xaf"],
header[class*="toolbar"] {
    min-height: 44px !important;
}

/* View title — slightly tighter */
.xaf-header h1,
.xaf-header .view-caption,
.view-caption,
.xaf-view-caption {
    font-size: 15px !important;
    letter-spacing: -0.015em !important;
}

/* Logo area */
.header-logo {
    opacity: 0.85;
    transition: opacity 150ms ease;
}

.header-logo:hover {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   CARDS / PANELS — Slightly rounder
   ══════════════════════════════════════════════════════════════ */
.card,
.dxbl-card,
.panel {
    border-radius: 10px !important;
}

.card-header,
.dxbl-card-header,
.panel-heading {
    border-radius: 10px 10px 0 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════════
   POPUPS / MODALS — More polished radius
   ══════════════════════════════════════════════════════════════ */
.dxbl-popup,
.dxbl-modal .modal-content,
.modal-content,
.dxbl-window {
    border-radius: 14px !important;
}

.dxbl-popup-header,
.modal-header,
.dxbl-window-header {
    border-radius: 14px 14px 0 0 !important;
    padding: 11px 18px !important;
}

.dxbl-popup-footer,
.modal-footer,
.dxbl-window-footer {
    padding: 10px 18px !important;
    border-radius: 0 0 14px 14px !important;
}

/* ══════════════════════════════════════════════════════════════
   DETAIL VIEW / FORM LAYOUT — Tighter item gaps
   ══════════════════════════════════════════════════════════════ */
.dxbl-fl-item {
    margin-bottom: 8px !important;
}

.dxbl-fl-cpt,
.dxbl-fl-ctrl label,
label {
    margin-bottom: 3px !important;
}

.dxbl-form-layout,
.dxbl-fl,
.xaf-detail-view,
.detail-view {
    padding: 16px !important;
    border-radius: 10px !important;
}