@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

:root {
  /* Theme tokens (Quorum Oxygen colors) */
  --primary: #c5007d;        /* magenta accent */
  --primary-600: #a1006f;    /* darker primary */
  --secondary: #2c3e50;      /* dark blue-gray for sidebar */
  --bg: #f8f9fb;             /* background */
  --surface: #ffffff;
  --surface-gradient: linear-gradient(90deg, #ffffff, #f9f9ff); /* subtle gradient for cards/header */
  --text: #333333;
  --text-secondary: #596370;
  --muted: #9aa7b5;
  --border-color: #e6e9ef;
  /* Sidebar sizing variables (keep in sync with your sidebar) */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 52px;
}

html { position: relative; min-height: 100%; font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

/* Links */
 a { color: var(--primary); }
 a:hover { color: var(--primary-600); }

/* Buttons */
.btn-primary { color: #fff; background-color: var(--primary); border-color: var(--primary-600); }
.btn-primary:hover { background-color: var(--primary-600); border-color: var(--primary-600); }

/* Pills */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary-600);
}

/* Borders */
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

button.accept-policy { font-size: 1rem; line-height: inherit; }

/* Containers */
.container-fluid { flex-grow: 1; padding: 0 1rem; }
.container-fluid main { height: 100%; }

/* Footer - gradient branding */
.footer { background: linear-gradient(90deg, var(--secondary), var(--primary)); color: #fff; font-size: 12px; text-align: center; padding: 8px 0; }

/* Navbar */
.navbar {
  background: var(--surface-gradient);
  backdrop-filter: saturate(120%) blur(4px);
}
.navbar .navbar-brand { font-weight: 600; color: var(--text); }
.navbar .navbar-brand:hover { color: var(--text); }

/* Make navbar logo responsive (override inline styles if present) */
.navbar-logo { width: 108px !important; height: auto !important; display: inline-block; margin-right: 0.75rem; vertical-align: middle; transition: width .18s ease, height .18s ease; }
@media (max-width: 991px) { .navbar-logo { width: 84px !important; } }
@media (max-width: 576px) { .navbar-logo { width: 48px !important; } }

/* Sidebar base */
/*.sidebar {*/
/*    background: #1f2933;  dark slate 
    color: #e5e7eb;
    border-right: 1px solid #111827;*/
/*}*/

/* Sidebar header */
.sidebar-header {
    background: #111827;
    border-bottom: 1px solid #0b1120;
}

.sidebar-header .fw-bold {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* Links */
.sidebar a.sidebar-link {
    font-size: 0.9rem;
    color: #d1d5db;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease, border-left-color 0.15s ease;
    border-left: 3px solid transparent;
    margin: 2px 0;
}

.sidebar a.sidebar-link i {
    width: 18px;
    text-align: center;
}

/* Hover state */
.sidebar a.sidebar-link:hover {
    background-color: #374151;
    color: #f9fafb;
    text-decoration: none;
}

/* Active sidebar menu highlighting - distinct color */
    .sidebar a.sidebar-link.active {
        background-color: #12121475; /* darker background for selected menu */
        color: #fbbf24 !important; /* amber */
        border-left-color: #fbbf24;
        font-weight: 600;
        border-radius: 0;
    }

.sidebar a.sidebar-link.active i,
.sidebar a.sidebar-link.active .menu-title {
    color: #fbbf24 !important;
}

.sidebar a.sidebar-link.active:hover {
    background-color: #020617;
    color: #facc15 !important;
}

/* Search bar at top of sidebar */
.sidebar-header .sidebar-search { width: 100%; margin-left: .5rem; margin-right: .5rem; }
.sidebar-header .sidebar-search input {
  width: 100%; padding: .48rem .6rem; border-radius: 8px; border: none; background: rgba(255,255,255,0.04); color: var(--sidebar-text, #e6eef8); outline: none; box-sizing: border-box;
}
.sidebar-header .sidebar-search input::placeholder { color: rgba(255,255,255,0.6); }

/* Collapse / inner lists */
ul.inner { list-style: none; padding-left: .5rem; margin: .25rem 0 .5rem 0; }
.chevron { margin-left: auto; transition: transform .18s ease; }
.chevron.rotated { transform: rotate(90deg); }

/* Pin button sizing */
#sidebarPinBtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; }
#sidebarPinBtn i { width: 16px; height: 16px; }

/* Content shift to the right of sidebar */
@media (min-width: 769px) {
  body.has-sidebar main.layout-content { margin-left: var(--sidebar-width); transition: margin-left .18s ease; }
  body.has-sidebar.sidebar-collapsed main.layout-content { margin-left: var(--sidebar-collapsed-width); }
}
@media (max-width: 768px) {
  body.has-sidebar main.layout-content { margin-left: 0; }
}

/* Cards and surfaces */
.card, .dx-card, .surface { background: var(--surface-gradient); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,.05); animation: fadeInUp .45s ease both; }

/* Tables */
.table { --bs-table-striped-bg: #f8fafc; }
.table thead th { font-weight: 600; color: var(--text-secondary); }

/* Forms */
.form-control { border-radius: 10px; }
.form-select { border-radius: 10px; }

/* DevExtreme DropDownBox sizing to fit navbar */
#globalDateRangeWrapper { width: 100%; max-width: 560px; }
#globalDateRangeBox { min-width: 280px; width: 100%; }
@media (min-width: 1200px) { #globalDateRangeWrapper { max-width: 640px; } }

/* DevExtreme small input tweaks for navbar date range */
#globalDateRangeBox .dx-texteditor-input {
  font-size: 0.85rem; /* slightly smaller text */
  padding: .28rem .5rem; /* tighter padding */
  height: 34px; /* fixed compact height */
  line-height: 1.1;
  border-radius: 8px;
  box-sizing: border-box;
}

/* When DevExtreme wraps input in its container, ensure the container isn't forcing large size */
#globalDateRangeBox .dx-texteditor-container,
#globalDateRangeBox .dx-texteditor {
  height: 34px; /* match input */
  min-height: 34px;
}

/* Provide a reusable small variant for other dx text editors */
.dx-texteditor-input.small, .dx-texteditor.small .dx-texteditor-input {
  font-size: 0.85rem;
  padding: .28rem .5rem;
  height: 34px;
  line-height: 1.1;
}

/* Ensure dropdown clear button aligns visually with smaller input */
#globalDateRangeBox .dx-clear-button-area .dx-icon {
  font-size: .85rem;
}

/* DevExtreme grid and search styling to match Quorum Oxygen theme */
/* Grid container */
.dx-datagrid {
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--border-color);
}

/* Header row (column headers) */
.dx-datagrid .dx-header-row,
.dx-datagrid-headers .dx-row {
  background: linear-gradient(90deg, #ffffff, #f9f9ff);
  color: var(--text);
  font-weight: 600;
}

/* Column header cells */
.dx-datagrid .dx-header-row .dx-command-select, 
.dx-datagrid .dx-header-row td,
.dx-datagrid .dx-header-row th {
  border-bottom: 1px solid var(--border-color);
}

/* Data row hover */
.dx-datagrid .dx-row:hover,
.dx-datagrid .dx-data-row.dx-row:hover {
  background: rgba(197, 0, 125, 0.04) !important; /* subtle magenta tint */
}

/* Selected / focused rows */
.dx-datagrid .dx-selection .dx-row,
.dx-datagrid .dx-data-row.dx-selection,
.dx-datagrid .dx-data-row.dx-focused {
  background: rgba(197, 0, 125, 0.12) !important; /* stronger tint for selection */
  color: #111 !important;
}

/* Selected cell highlight */
.dx-datagrid .dx-cell-focused,
.dx-datagrid .dx-cell-focused:focus {
  outline: 2px solid rgba(197,0,125,0.18) !important;
  box-shadow: 0 0 0 3px rgba(197,0,125,0.06) inset;
}

/* Pager and toolbar search input styling */
.dx-toolbar .dx-texteditor-input,
.dx-datagrid .dx-texteditor-input,
.dx-texteditor .dx-texteditor-input {
  background: var(--surface); /* white-ish */
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: .35rem .5rem;
  color: var(--text);
}

/* Search input focus */
.dx-toolbar .dx-texteditor-focus .dx-texteditor-input:focus,
.dx-texteditor.dx-state-focused .dx-texteditor-input:focus,
.dx-texteditor .dx-texteditor-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(197,0,125,0.08);
}

/* Search icon color */
.dx-texteditor .dx-icon.dx-icon-search,
.dx-toolbar .dx-icon.dx-icon-search {
  color: var(--primary) !important;
}

/* Empty state / no data text subtle color */
.dx-datagrid .dx-empty-text {
  color: var(--muted);
}

/* Improve table zebra stripes to be very subtle */
.dx-datagrid .dx-row:nth-child(odd) {
  background: transparent; /* keep transparent, rely on hover/selection for contrast */
}

/* Ensure pagination buttons use primary accent */
.dx-datagrid .dx-pages .dx-page, 
.dx-pager .dx-button.dx-button-normal {
  border-radius: 8px;
}
.dx-pager .dx-button.dx-button-normal.dx-state-active,
.dx-pager .dx-button.dx-button-normal:hover {
  background: var(--primary);
  border-color: var(--primary-600);
  color: #fff;
}

/* --- Multi-line cell support & uniform padding for DevExtreme grids --- */
.dx-datagrid .dx-data-row td,
.dx-datagrid .dx-header-row td,
.dx-datagrid .dx-group-row td,
.dx-datagrid .dx-row td {
  white-space: normal !important; /* allow wrapping */
  word-break: break-word;          /* break long words */
  overflow-wrap: anywhere;         /* break very long continuous strings */
  line-height: 1.25;
  padding: .55rem .75rem !important; /* uniform padding */
  vertical-align: top;             /* top align multi-line content */
}
/* Preserve checkbox/command cell compactness */
.dx-datagrid .dx-command-select,
.dx-datagrid .dx-command-expand { padding: .35rem .5rem !important; }
/* Optional: prevent header text wrapping if undesired (comment out to allow) */
.dx-datagrid .dx-header-row td { white-space: nowrap !important; }
/* Adjust filter row cells to wrap too if long values appear */
.dx-datagrid .dx-filter-row td { white-space: normal !important; }
/* End multi-line overrides */

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Site overrides */

/* Reduce DevExtreme popup content padding (default in dx.light.css is 20px) */
.dx-popup-content {
    padding: 0 !important;
}

/* Also ensure popover and dialog content uses zero padding where needed */
.dx-popover-wrapper .dx-popup-content,
.dx-dialog-root .dx-popup-content,
.dx-popup-content.dx-dialog-content {
    padding: 0 !important;
}

/* Force active background inside the sidebar, override conflicts */
#appSidebar .sidebar-link.active {
    background-color: #0b1120 !important;
    color: #fbbf24 !important;
    border-left-color: #fbbf24 !important;
}
#appSidebar .sidebar-link.active i,
#appSidebar .sidebar-link.active .menu-title {
    color: #fbbf24 !important;
}

/* Active sidebar button styling */
#appSidebar button.sidebar-link.active {
    background-color: #0b1120 !important; /* darker selected bg */
    color: #fbbf24 !important;            /* amber accent */
    border-left: 4px solid #fbbf24 !important;
    font-weight: 600;
}
#appSidebar button.sidebar-link.active i,
#appSidebar button.sidebar-link.active .menu-title {
    color: #fbbf24 !important;
}
#appSidebar button.sidebar-link.active:hover {
    background-color: #020617 !important;
    color: #facc15 !important;
}