/* ---------------------------------------------------------------------------
   Interact portal theme.

   The single source of the portal's design language: tokens, then the shared
   primitives (buttons, form controls, cards, tables, DataTables, alerts,
   modals, select2). Loaded by base.html after myapp.css, so it wins on equal
   specificity and every in-app page picks it up without its own styling.

   The printable report sheets don't extend base.html — they load
   report-sheet.css, which repeats these tokens for the same look.
   --------------------------------------------------------------------------- */

:root {
    --ix-canvas: #f5f6f7;
    --ix-card: #ffffff;
    --ix-border: #e5e7eb;
    --ix-border-strong: #d5d9df;
    --ix-text: #111827;
    --ix-muted: #6b7280;
    --ix-accent: #10b981;
    --ix-accent-dark: #0b8f6d;
    --ix-accent-deep: #0b3b36;
    --ix-accent-soft: rgba(16, 185, 129, 0.10);
    --ix-danger: #c0392b;
    --ix-danger-soft: #fdecea;
    --ix-radius: 16px;
    --ix-radius-sm: 10px;
    --ix-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.05);
}

/* ------------------------------------------------------------ typography --- */

/* One family everywhere. The portal had three in play: menu.css set Poppins on
   body, myapp.css overrode headings to Helvetica Neue, and the report toolbar
   used Roboto. Poppins is already loaded on every page, so it wins.

   The base size is 14px. myapp.css had `body { font-size: 1.3rem !important }`
   — 20.8px — which is why almost every component carried its own font-size
   override to claw it back; that rule is gone and the sizes below are the
   scale. */

body {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ix-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ix-text);
}

h1, .h1 { font-size: 26px; }
h2, .h2 { font-size: 22px; }
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 13px; }

/* Form controls don't inherit the page font by default. Deliberately element
   selectors only: a `.btn` rule here would also match `<a class="btn fa fa-eye">`
   — same specificity as `.fa`, declared later — and replace the Font Awesome
   glyph with a missing-character box. */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* Belt and braces for the same collision from any other rule. */
.fa {
    font-family: FontAwesome;
}

small,
.small {
    font-size: 12.5px;
}

/* --------------------------------------------------------------- sidebar --- */

/* menu.css ships the sidebar's layout; everything below is the skin. It loads
   before this file, so these rules win without !important. */

/* The rail stays put while the page scrolls. The scroll container is the menu
   list rather than #sidebar itself — #sidebar would clip .custom-menu, which is
   deliberately positioned outside it and holds the collapse toggle. */
#sidebar {
    align-self: flex-start;
    position: sticky;
    top: 0;
    /* Sticky makes this a stacking context, so .custom-menu's own z-index no
       longer lifts the collapse toggle over the top bar — the rail has to. */
    z-index: 30;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--ix-card);
    border-right: 1px solid var(--ix-border);
}

/* Logo block at the top of the rail. Targeted by class, not nth-of-type: this
   was positional once and silently moved onto the menu list when the collapse
   toggle was taken out of the sidebar, which cost the list its flex sizing and
   with it the rail's scrollbar. */
#sidebar .sidebar-brand {
    flex: 0 0 auto;
    padding-bottom: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ix-border);
}

#sidebar .p-3 {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 12px 32px !important;
}

#sidebar .p-3::-webkit-scrollbar {
    width: 8px;
}

#sidebar .p-3::-webkit-scrollbar-thumb {
    background: #e3e6ea;
    border-radius: 4px;
}

#sidebar .p-3::-webkit-scrollbar-thumb:hover {
    background: var(--ix-border-strong);
}

#sidebar ul.components {
    margin-bottom: 0 !important;
}

#sidebar ul li {
    font-size: 13.5px;
}

#sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 2px;
    font-size: 13.5px;
    font-weight: 500;
    color: #374151;
    border-bottom: none;
    border-radius: var(--ix-radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

#sidebar ul li a > span.fa {
    width: 18px;
    margin-right: 0 !important;
    font-size: 15px;
    text-align: center;
    color: #9aa1ab;
    transition: color 0.15s ease;
}

#sidebar ul li a:hover {
    color: var(--ix-accent-deep);
    background: var(--ix-accent-soft);
    border-bottom: none;
}

#sidebar ul li a:hover > span.fa {
    color: var(--ix-accent-dark);
}

/* The page's own script adds .active to the matching item. */
#sidebar ul li.active > a,
#sidebar ul li.active > a:hover {
    color: var(--ix-accent-deep);
    font-weight: 600;
    background: var(--ix-accent-soft);
    border-bottom: none;
    box-shadow: inset 3px 0 0 var(--ix-accent);
}

#sidebar ul li.active > a > span.fa {
    color: var(--ix-accent-dark);
}

/* Submenus hang off a hairline rule so their nesting is legible. */
#sidebar ul li > ul {
    margin: 2px 0 6px 22px;
    padding-left: 10px;
    border-left: 1px solid var(--ix-border);
}

#sidebar ul li > ul li {
    font-size: 13px;
}

#sidebar ul li > ul li a {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--ix-muted);
}

/* Collapsible parents get a caret that flips when the group is open. */
#sidebar .dropdown-toggle::after {
    position: absolute;
    right: 12px;
    top: 50%;
    margin: 0;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    color: #9aa1ab;
    transform: translateY(-50%) rotate(-90deg);
    transition: transform 0.15s ease;
}

#sidebar .dropdown-toggle[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(0deg);
}

/* Pending-request count beside Users / Organizations. */
.request {
    float: none;
    order: 2;
    margin-left: auto;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ix-accent-deep);
    background-color: var(--ix-accent-soft);
    border: none;
    border-radius: 999px;
}

/* Sidebar toggle. Lives in the top bar (see nav.html) so it scrolls away with
   the header instead of floating over the page from the sticky rail. */
.navbar-header #sidebarCollapse.btn {
    margin: 6px 0 0 20px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.navbar-header #sidebarCollapse.btn .fa {
    font-size: 20px;
    color: var(--ix-muted);
    transition: color 0.15s ease;
}

.navbar-header #sidebarCollapse.btn:hover .fa {
    color: var(--ix-accent-dark);
}

/* ---------------------------------------------------------------- topbar --- */

.navbar-default {
    background: var(--ix-card);
    background-image: none;
    border: none;
    border-bottom: 1px solid var(--ix-border);
    box-shadow: none;
}

.green-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--ix-accent), var(--ix-accent-dark)) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: none;
}

.green-btn:hover,
.green-btn:focus,
.green-btn:active {
    filter: brightness(1.05);
}

.username-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    text-shadow: none;
}

/* User menu. It hangs off the right edge of the top bar, so it has to open
   leftwards — Bootstrap's default (left: 0) runs it past the viewport and gives
   the whole page a horizontal scrollbar as soon as the window is narrow or the
   username is long. */
.navbar .dropdown-menu {
    right: 0;
    left: auto;
    margin-right: 0;
}

.dropdown-menu {
    min-width: 180px;
    padding: 6px;
    font-size: 13px !important;
    background-color: var(--ix-card);
    border: 1px solid var(--ix-border);
    border-radius: var(--ix-radius-sm);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

.dropdown-menu > li > a,
.dropdown-item {
    padding: 9px 12px;
    font-size: 13px;
    color: #374151;
    border-radius: 8px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--ix-accent-deep);
    background-color: var(--ix-accent-soft);
}

/* ------------------------------------------------------------- page shell --- */

/* min-width:0 lets this flex item shrink under its content. Without it a wide
   table sets the item's automatic minimum size and pushes the whole page into
   a horizontal scroll instead of letting DataTables collapse columns. */
#content {
    min-width: 0;
    background-color: var(--ix-canvas);
}

a {
    color: var(--ix-accent-dark);
}

a:hover,
a:focus {
    color: var(--ix-accent-deep);
}

.content {
    padding: 16px 24px 40px !important;
    color: var(--ix-text);
}

/* The page heading rendered by base.html's page_name block. */
.content > h2 {
    margin: 4px 0 18px !important;
    font-size: 24px;
    font-weight: 600;
    color: var(--ix-text);
    letter-spacing: -0.01em;
}

/* {% block bread_crumb %} — a plain trail of links above the heading. */
#content > span,
#content > div > span.breadcrumb-trail {
    display: inline-block;
    margin: 12px 0 0 24px;
    font-size: 12.5px;
    color: var(--ix-muted);
}

/* ---------------------------------------------------------------- panels --- */

/* Card-like containers used across the portal. #gi-container and #page-container
   wrap the create/edit forms; .content-form is the standalone auth-page card. */
.ix-card,
.content-form,
#gi-container,
.panel {
    background: var(--ix-card);
    border: 1px solid var(--ix-border);
    border-radius: var(--ix-radius);
    box-shadow: var(--ix-shadow);
    padding: 22px 24px;
    margin-bottom: 22px;
}

.panel {
    padding: 0;
}

.panel > .panel-heading {
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ix-accent-deep);
    background: #fafbfc;
    border-bottom: 1px solid var(--ix-border);
    border-radius: var(--ix-radius) var(--ix-radius) 0 0;
}

.panel > .panel-body {
    padding: 20px;
}

.ix-card-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ix-border);
}

.ix-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ix-accent-deep);
}

.ix-card-sub {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--ix-muted);
}

/* --------------------------------------------------------------- buttons --- */

.btn {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    padding: 9px 18px;
    border-radius: var(--ix-radius-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* myapp.css paints .btn-primary with !important, so match it here. */
.btn-primary,
.btn-primary:focus {
    color: #fff;
    background-color: var(--ix-accent-dark) !important;
    background-image: none !important;
    border-color: var(--ix-accent-dark);
    box-shadow: none;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:active:focus {
    color: #fff;
    background-color: var(--ix-accent-deep) !important;
    border-color: var(--ix-accent-deep);
}

.btn-secondary,
.btn-default {
    color: var(--ix-text);
    background-color: #fff !important;
    border-color: var(--ix-border-strong);
}

.btn-secondary:hover,
.btn-default:hover {
    color: var(--ix-text);
    background-color: #f3f4f6 !important;
    border-color: var(--ix-border-strong);
}

.btn-danger {
    color: #fff;
    background-color: var(--ix-danger);
    background-image: none;
    border-color: var(--ix-danger);
}

/* .btn-link is used for the "+ Add new …" actions above list pages. */
.btn-link {
    padding: 8px 14px;
    color: var(--ix-accent-dark);
    text-decoration: none;
    border-radius: var(--ix-radius-sm);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--ix-accent-deep);
    background-color: var(--ix-accent-soft);
    text-decoration: none;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* Outline buttons on the dashboard tiles (an ArchitectUI leftover). */
.btn-outline-focus,
.btn-outline-2x {
    color: var(--ix-accent-dark) !important;
    background-color: #fff !important;
    border: 1px solid var(--ix-border-strong) !important;
}

.btn-outline-focus:hover,
.btn-outline-2x:hover {
    color: var(--ix-accent-deep) !important;
    background-color: var(--ix-accent-soft) !important;
    border-color: var(--ix-accent) !important;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ix-accent-soft);
}

/* Pill call-to-action, shared with the comparison calculators. */
.btn-compare {
    display: inline-block;
    padding: 12px 36px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, var(--ix-accent), var(--ix-accent-dark));
    border: none;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.26);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn-compare:hover,
.btn-compare:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.3);
    outline: none;
}

.btn-compare:active {
    transform: translateY(0);
}

.btn-compare .fa {
    margin-right: 8px;
}

/* ---------------------------------------------------------- form controls --- */

.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
    height: 38px !important;
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--ix-text);
    background-color: #fff;
    border: 1px solid var(--ix-border-strong);
    border-radius: var(--ix-radius-sm);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea,
textarea.form-control {
    height: auto !important;
    min-height: 90px;
}

select.form-control,
select {
    width: 100%;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--ix-accent);
    box-shadow: 0 0 0 3px var(--ix-accent-soft);
    outline: none;
}

input[type="checkbox"],
input[type="radio"] {
    height: auto !important;
    accent-color: var(--ix-accent-dark);
}

label {
    font-size: 13px;
    font-weight: 500 !important;
    color: var(--ix-muted);
}

/* Field labels. Layout differs per page (above the input on the calculators,
   in a left column on the create/edit forms) but the treatment is shared.
   Deliberately not applied to every <label> — DataTables wraps its "Show N
   entries" and "Search" controls in one. */
.lbl,
.InputLbl {
    font-size: 12px;
    font-weight: 600 !important;
    color: var(--ix-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lbl .unit,
.InputLbl .unit {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #9aa1ab;
}

.errorlist {
    margin: 4px 0 0;
    padding-left: 16px;
    font-size: 12px;
    color: var(--ix-danger);
}

.help-block,
.helptext {
    font-size: 12px;
    color: var(--ix-muted);
}

/* The create/edit forms are a label column beside a control column. The margin
   reset undoes myapp.css's negative .row gutters, which would otherwise pull
   both columns flush against the card's edge. */
#gi-form .row,
.ix-form .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 14px;
}

#gi-form .row > .lbl,
.ix-form .row > .lbl {
    flex: 0 0 260px;
    max-width: 100%;
    margin: 0;
    padding-left: 4px;
    padding-right: 16px;
}

#gi-form .row > [class*="col-"],
.ix-form .row > [class*="col-"] {
    flex: 1 1 260px;
    min-width: 0;
}

#gi-form .row p.nm,
.ix-form .row p.nm {
    margin: 0;
}

#gi-form #separator,
.ix-form #separator {
    display: none;
}

/* The form's action row. Scoped to direct children: a descendant selector also
   catches the .btn classes bootstrap-toggle puts on its labels and handle,
   which then knocks 8px off the toggle's sliding labels. */
#gi-form > [type="submit"],
#gi-form > .btn {
    margin-top: 8px;
    margin-right: 8px;
}

/* Small circular "what is this?" button beside an input. */
.btnInfo {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 11px;
    color: var(--ix-muted) !important;
    background: #f3f4f6;
    border: 1px solid var(--ix-border);
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}

.btnInfo:hover,
.btnInfo:focus {
    background: var(--ix-accent-soft);
    color: var(--ix-accent-dark) !important;
    outline: none;
}

/* --------------------------------------------------------------- select2 --- */

/* Pages load select2.min.css from their own head block, i.e. after this file.
   Every selector here therefore carries one extra class over select2's own so
   it wins on specificity instead of load order — that's why the redundant
   `.select2-selection` and `.select2-results__option` appear in the compounds. */

.select2-container {
    width: 100% !important;
}

/* Flex-centred so the selected text sits on the same baseline as a native
   input's — line-height alone drifts as soon as the font size changes. */
.select2-container--default .select2-selection.select2-selection--single {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 26px 0 12px;
    background: #fff;
    border: 1px solid var(--ix-border-strong);
    border-radius: var(--ix-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-container--default.select2-container--focus .select2-selection.select2-selection--single,
.select2-container--default.select2-container--open .select2-selection.select2-selection--single {
    border-color: var(--ix-accent);
    box-shadow: 0 0 0 3px var(--ix-accent-soft);
}

.select2-container--default .select2-selection.select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    line-height: 1.4;
    font-size: 13.5px;
    color: var(--ix-text);
}

.select2-container--default .select2-selection.select2-selection--single .select2-selection__placeholder {
    color: #9aa1ab;
}

.select2-container--default .select2-selection.select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 8px;
    height: 36px;
}

.select2-container .select2-dropdown {
    border-color: var(--ix-border-strong);
    border-radius: var(--ix-radius-sm);
    box-shadow: var(--ix-shadow);
    overflow: hidden;
}

.select2-container--default .select2-results__option.select2-results__option--highlighted[aria-selected] {
    background-color: var(--ix-accent);
}

/* --------------------------------------------------------------- toggles --- */

/* bootstrap-toggle reuses .btn, .btn-primary and .btn-default for the track,
   both labels AND the handle, so the generic button styles above leak into all
   three and have to be neutralised here. It also measures its labels on init
   and pins width/height inline — those measurements don't survive a restyle
   (they came out ~284x13), so the size is fixed in CSS instead. */

.toggle.btn,
.toggle.btn.btn-primary,
.toggle.btn.btn-default {
    position: relative;
    width: 150px !important;
    min-width: 150px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    background: #eceef1 !important;
    background-image: none !important;
    border: 1px solid var(--ix-border-strong) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* The knob. bootstrap-toggle's own handle is centred on the boundary between
   the two labels, so the track's overflow:hidden slices it in half — it's
   hidden below and redrawn here as a pseudo-element on the track, which also
   lets it animate with the slide. */
.toggle.btn::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 4px;
    z-index: 2;
    width: 26px;
    height: 26px;
    background: #fff;
    border: 1px solid var(--ix-border-strong);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.15);
    transition: right 0.25s ease;
    pointer-events: none;
}

.toggle.btn.off::after {
    right: calc(100% - 34px);
}

/* Each label is stretched with position:absolute; top:0; bottom:0, so its own
   vertical padding decides where the text lands. Centre it instead. */
.toggle .toggle-on.btn,
.toggle .toggle-off.btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Each label leaves room for the knob on whichever side it rests. */
.toggle .toggle-on.btn {
    padding: 0 40px 0 16px !important;
}

.toggle .toggle-off.btn {
    padding: 0 16px 0 40px !important;
}

.toggle .toggle-on.btn,
.toggle.btn.btn-primary .toggle-on.btn {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ix-accent), var(--ix-accent-dark)) !important;
}

.toggle .toggle-off.btn,
.toggle.btn.btn-default .toggle-off.btn {
    color: var(--ix-muted) !important;
    background: #eceef1 !important;
}

.toggle .toggle-handle.btn {
    display: none !important;
}

/* ---------------------------------------------------------------- tables --- */

/* One table treatment for every in-app page. .table-bordered and .table-hover
   are levelled to the same look so a table doesn't change appearance depending
   on which classes its template happens to carry. (The printable report sheets
   are deliberately different — they style their own in report-sheet.css.) */
.table,
.table-bordered,
.table-hover {
    margin-bottom: 20px;
    font-size: 13px;
    background-color: #fff;
    border: 1px solid var(--ix-border);
    border-radius: var(--ix-radius);
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.table > thead > tr > th,
.table > tbody > tr > th {
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ix-text);
    background-color: #fafbfc;
    border: none;
    border-bottom: 1px solid var(--ix-border);
    vertical-align: middle;
}

.table > thead > tr:first-child > th:first-child {
    border-top-left-radius: calc(var(--ix-radius) - 1px);
}

.table > thead > tr:first-child > th:last-child {
    border-top-right-radius: calc(var(--ix-radius) - 1px);
}

.table > tbody > tr > td {
    padding: 10px 14px;
    border: none;
    border-top: 1px solid #f0f2f4;
    vertical-align: middle;
}

.table > tbody > tr:first-child > td {
    border-top: none;
}

.table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: calc(var(--ix-radius) - 1px);
}

.table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: calc(var(--ix-radius) - 1px);
}

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

/* A DataTable already sits in its own bordered card, so the table inside it
   drops the second frame. */
.dataTables_wrapper table.dataTable {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* ------------------------------------------------------------ DataTables --- */

.dataTables_wrapper {
    padding-top: 4px;
}

.dataTables_scroll,
.dataTables_wrapper > .table-responsive {
    margin-top: 12px;
    background-color: var(--ix-card);
    border: 1px solid var(--ix-border);
    border-radius: var(--ix-radius);
    box-shadow: var(--ix-shadow);
    overflow: hidden;
}

table.dataTable td,
table.dataTable th {
    font-size: 12.5px;
}

/* Column names here are long ("Memory capacity (GB)"), so they keep sentence
   case — uppercasing them widens every column and forces a scrollbar. */
table.dataTable > thead > tr > th {
    font-size: 12px;
    font-weight: 600;
    color: var(--ix-text);
    text-transform: none;
    letter-spacing: 0;
    background-color: #fafbfc;
    border-bottom: 1px solid var(--ix-border) !important;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    height: 34px !important;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--ix-border-strong);
    border-radius: var(--ix-radius-sm);
}

div.dataTables_wrapper div.dataTables_info {
    font-size: 12.5px;
    color: var(--ix-muted);
}

/* ------------------------------------------------------------ pagination --- */

.pagination > li > a,
.pagination > li > span {
    padding: 7px 13px;
    font-size: 12.5px;
    color: var(--ix-text);
    background-color: #fff;
    border-color: var(--ix-border);
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-top-left-radius: var(--ix-radius-sm);
    border-bottom-left-radius: var(--ix-radius-sm);
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: var(--ix-radius-sm);
    border-bottom-right-radius: var(--ix-radius-sm);
}

.pagination > li > a:hover,
.pagination > li > a:focus {
    color: var(--ix-accent-deep);
    background-color: var(--ix-accent-soft);
    border-color: var(--ix-border);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    color: #fff;
    background-color: var(--ix-accent-dark);
    border-color: var(--ix-accent-dark);
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    color: var(--ix-muted);
    background-color: #fafbfc;
    border-color: var(--ix-border);
}

/* ------------------------------------------------------------ list group --- */

.list-group {
    margin-top: 12px;
}

.list-group-item {
    margin-bottom: 10px;
    padding: 16px 20px;
    background: var(--ix-card);
    border: 1px solid var(--ix-border) !important;
    border-radius: var(--ix-radius) !important;
    box-shadow: var(--ix-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.list-group-item:hover {
    border-color: var(--ix-border-strong) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 26px rgba(16, 24, 40, 0.08);
}

.list-group-item h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ix-text);
}

.list-group-item a:hover h4 {
    color: var(--ix-accent-dark);
}

.list-group-item small {
    color: var(--ix-muted);
}

.list-group-item .fa-trash {
    color: var(--ix-muted);
}

.list-group-item .fa-trash:hover {
    color: var(--ix-danger);
}

/* ---------------------------------------------------------------- alerts --- */

.alert {
    padding: 13px 16px;
    font-size: 13.5px;
    border-width: 1px;
    border-radius: var(--ix-radius-sm);
    box-shadow: none;
}

.alert-success {
    color: #14532d;
    background-color: #eafaf1;
    border-color: #bfe9d3;
}

.alert-info {
    color: #0b3b36;
    background-color: #eef7ff;
    border-color: #c7e2f7;
}

.alert-danger {
    color: #8a2116;
    background-color: var(--ix-danger-soft);
    border-color: #f5c6c0;
}

.alert-warning {
    color: #7a4b06;
    background-color: #fff7e6;
    border-color: #f6dda6;
}

/* ---------------------------------------------------------------- modals --- */

.modal-content {
    border: none;
    border-radius: var(--ix-radius);
    box-shadow: 0 12px 40px rgba(16, 24, 40, 0.18);
    overflow: hidden;
}

.modal-header {
    padding: 18px 22px;
    background: #fafbfc;
    border-bottom: 1px solid var(--ix-border);
}

.modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ix-accent-deep);
}

.modal-body {
    padding: 22px;
    font-size: 13.5px;
}

.modal-footer {
    padding: 16px 22px;
    background: #fafbfc;
    border-top: 1px solid var(--ix-border);
}

/* ------------------------------------------------------- cards & widgets --- */

/* Dashboard tiles (dashboard.css supplies the layout; this aligns the skin). */
.card {
    border: 1px solid var(--ix-border);
    border-radius: var(--ix-radius);
    box-shadow: var(--ix-shadow);
}

.card .card-header,
.card .card-footer {
    background: #fafbfc;
    border-color: var(--ix-border);
}

.widget-chart {
    border: 1px solid var(--ix-border) !important;
    border-radius: var(--ix-radius);
}

.widget-numbers {
    color: var(--ix-text);
}

.widget-subheading,
.widget-heading {
    color: var(--ix-muted);
}

/* --------------------------------------------------------------- helpers --- */

.ix-hint {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--ix-muted);
}

.ix-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.search-bar {
    max-width: 420px;
    width: 100%;
    margin-bottom: 14px;
}

@media (max-width: 767px) {

    .content {
        padding: 12px 14px 32px !important;
    }

    .ix-card,
    .content-form,
    #gi-container {
        padding: 18px 16px;
    }

    #gi-form .row > .lbl,
    .ix-form .row > .lbl {
        flex: 1 1 100%;
        margin-bottom: 6px;
        padding-right: 0;
    }
}