@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import 'bootstrap/bootstrap.css';
@import 'Larimer.css';
@import 'Kendo.css';
@import 'Variables.css';

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

.caret-off::before {
    display: none;
}

.caret-off::after {
    display: none;
}

/*NOTIFICATIONS DEMO*/
.demo-notification {
    position: absolute;
}

.demo-notification .k-notification {
    width: 530px;
}

.notification-parent {
    position: relative;
}

.k-notification-container {
    margin: 6px 0;
}

#demo-runner {
    height: 320px;
}
/*END NOTIFICATIONS DEMO*/

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-primary:hover {
        background-color: var(--primary-lt);
        border-color: var(--bs-primary);
    }

/* Grid Popup Edit Form Styles */
.grid-popup-edit-form {
    max-height: 90vh !important;
    overflow-y: auto;
}

.grid-popup-edit-form .k-window-content {
    max-height: calc(90vh - 100px) !important;
    overflow-y: auto !important;
}

.k-window-centered {
    top: 5vh !important;
}

.card-body {
    padding: .5rem;
}

.service-header {
    height: 5rem;
}

.service-note {
    overflow: auto;
    max-height: 20rem;
    min-height: 3rem;
}

.service-note-tooltip {
    overflow: auto;
    max-height: 20rem;
    min-height: 15rem;
}

.service-note-tooltip > textarea {
    overflow: auto;
    height: 15rem;
}

.overview-note {
    overflow: auto;
    max-height: 20rem;
    min-height: 3rem;
}

.telerik-modal {
    z-index: 9999;
}

.note-header {
    min-height: 2.25rem;
}

.tiny-button {
    padding: .25rem .25rem;
    font-size: 14px;
    line-height: 1;
}

.edit-button-wrapper {
    width: 3rem;
}

.search-input {
    width: 5rem;
}

.k-tooltip {
    background-color: white;
    color: black;
    border-color: #dddddd;
    border-width: 1px;
}

.two-column-ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.notifier {
    z-index: 11000;
    margin-top: 80px;
}

/* Dashboard Grid Toolbar Styling */
.k-grid .k-grid-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 16px !important;
}

.k-grid .k-grid-toolbar .k-searchbox {
    flex: 0 0 auto !important;
}

.k-grid .k-grid-toolbar .k-button,
.k-grid .k-grid-toolbar button.k-button {
    padding: 6px 14px !important;
    font-size: 0.875rem !important;
    height: 34px !important;
    line-height: 1.5 !important;
    margin-left: auto !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: white !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.k-grid .k-grid-toolbar .k-button:hover,
.k-grid .k-grid-toolbar button.k-button:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
}
/* -------------------------------------------------------------------------
   In-grid action icons (command column): pack tightly and wrap to multiple
   lines instead of forcing one wide row. Scoped to command cells so grid
   toolbar buttons and in-cell buttons elsewhere are unaffected.
   Paired with narrowed GridCommandColumn widths on each grid.
   ------------------------------------------------------------------------- */
/* Flex-wrap the element that DIRECTLY holds the action buttons so icons pack into a
   tight multi-row block. Covers every layout Telerik produces:
     - .k-command-cell        -> inline-edit grids (CaseAssignments/FCI, Claims, ROC)
     - td:has(.k-button)      -> the command cell itself when buttons sit in it
     - td :has(> .k-button)   -> an inner WRAPPER element (custom OnClick command
                                 columns on Dashboard/Investigations/Clients nest the
                                 buttons, so they aren't a direct child of the <td>) */
.k-grid td.k-command-cell,
.k-grid td:has(.k-button),
.k-grid td :has(> .k-button) {
    display: grid !important;
    grid-template-columns: repeat(3, max-content) !important;  /* always 3 across */
    gap: 3px !important;
    justify-content: start !important;
    align-content: center !important;
    white-space: normal !important;
    padding: 2px !important;
}

.k-grid td.k-command-cell > .k-button,
.k-grid td :has(> .k-button) > .k-button {
    margin: 0 !important;
}

/* Uniform icon size across grids (FCI/Claims render smaller than the custom-button grids). */
.k-grid td.k-command-cell .k-svg-icon,
.k-grid td.k-command-cell .k-svg-icon > svg,
.k-grid td :has(> .k-button) .k-svg-icon,
.k-grid td :has(> .k-button) .k-svg-icon > svg {
    width: 20px !important;
    height: 20px !important;
}

/* Page-level "still loading" indicator for list grids.

   A grid's NoDataTemplate spinner only renders while the grid holds zero rows, so it is invisible
   on every reload after the first - a save, a delete or a refresh keeps the previous rows on
   screen while the new ones load. This sits above the grid and covers both cases.

   Deliberately matches .grid-empty (the empty-result message) so the two read as the same
   indicator in the same place, rather than two different ones. */
.grid-loading-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 0;
    color: #6c757d;
    font-size: 0.9rem;
}

/* The "nothing found" message inside a grid's NoDataTemplate.

   Lifted here from five byte-identical copies in per-page inline <style> blocks (CaseAssignments,
   Claims, ClientGrid, Dashboard, InvestigationGrid) - values unchanged, so those pages look exactly
   as they did. ClientWorkspace's grids had no copy at all, which is what prompted this. */
.grid-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 0;
    color: #6c757d;
    font-size: 0.9rem;
}

/* Blazor's unhandled-error bar. Blazor sets display:block on this element when a component throws;
   without it in index.html an exception during component creation changes nothing on screen at all -
   which is how a bad @inject made an Admin menu item look like it simply did not work. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20000;
    background: #ffefc1;
    border-top: 1px solid #e0c96f;
    color: #4a3c00;
    padding: 0.7rem 1.2rem;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .2);
    font-size: 0.9rem;
}

#blazor-error-ui .reload {
    margin-left: .75rem;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    font-size: 1.1rem;
    line-height: 1;
}