/* ------------------------------------------------------------------------
   ALOS (Average Length of Stay) monitoring pages.

   Bootstrap 3 only -- no new dependencies. Everything is scoped to .alos-*
   markup so it cannot leak into the rest of the EMR, which still wants the
   stock Bootstrap look.

   Palette: near-white surfaces and one blue accent, with warm amber and red
   reserved for the Length of Stay signal so that colour there means something.
   ------------------------------------------------------------------------ */


/* Page heading and tabs -------------------------------------------------- */

.alos-head
{
	font-size: 20px;
	font-weight: 600;
	color: #111827;
	margin: 0 0 14px 0;
}

.alos-head .glyphicon
{
	color: #2f80ed;
	font-size: 16px;
	margin-right: 4px;
}

.alos-head .alos-head-sub
{
	color: #9aa3b2;
	font-weight: 400;
	font-size: 14px;
}

.alos-tabs
{
	border-bottom: 1px solid #e6e8eb;
	margin-bottom: 18px;
}

.alos-tabs > li > a
{
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: #6b7280;
	padding: 9px 16px;
	font-size: 13px;
	background: transparent;
}

.alos-tabs > li > a:hover,
.alos-tabs > li > a:focus
{
	background: transparent;
	color: #111827;
	border-bottom-color: #d1d5db;
}

.alos-tabs > li.active > a,
.alos-tabs > li.active > a:hover,
.alos-tabs > li.active > a:focus
{
	border: 0;
	border-bottom: 2px solid #2f80ed;
	color: #2f80ed;
	background: transparent;
	font-weight: 600;
}


/* Filters ---------------------------------------------------------------- */

.alos-filters
{
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(16,24,40,.04);
	padding: 16px 16px 2px 16px;
	margin-bottom: 16px;
}

.alos-filters label
{
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #8a94a6;
	font-weight: 600;
	margin-bottom: 5px;
}

.alos-filters .form-control
{
	border-color: #dfe3e8;
	border-radius: 6px;
	box-shadow: none;
	color: #111827;
}

.alos-filters .form-control:focus
{
	border-color: #2f80ed;
	box-shadow: 0 0 0 3px rgba(47,128,237,.12);
}

.alos-filters .input-group-addon
{
	background: #f7f8fa;
	border-color: #dfe3e8;
	border-right: 0;
	color: #9aa3b2;
	border-radius: 6px 0 0 6px;
}

.alos-filters .input-group .form-control
{
	border-left: 0;
	border-radius: 0 6px 6px 0;
}

/* Divider between "filter what is loaded" and "choose what to load". */
.alos-filters-split
{
	border-top: 1px solid #eef0f3;
	text-align: center;
	margin: 2px 0 14px 0;
}

.alos-filters-split-label
{
	position: relative;
	top: -8px;
	background: #fff;
	padding: 0 10px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #b8bfcc;
}

.alos-filter-actions .btn
{
	border-radius: 6px;
}

.alos-filter-actions .btn-link
{
	color: #8a94a6;
	padding-left: 8px;
}

.alos-filter-actions .btn-link:hover
{
	color: #c0392b;
	text-decoration: none;
}


/* Summary cards ---------------------------------------------------------- */

.alos-stats
{
	margin-bottom: 2px;
}

.alos-stat
{
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(16,24,40,.04);
	padding: 14px 16px;
	margin-bottom: 14px;

	/* The export card holds a button where the others hold a figure -- a floor
	   keeps all four the same height however they wrap. */
	min-height: 88px;
}

/* A thin accent along the top, so four cards are not four grey rectangles. */
.alos-stat:before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #d1d5db;
}

.alos-stat-patients:before { background: #2f80ed; }
.alos-stat-average:before  { background: #27ae60; }
.alos-stat-scope:before    { background: #8a94a6; }
.alos-stat-export:before   { background: #f2994a; }

.alos-stat-label
{
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #8a94a6;
	font-weight: 600;
}

.alos-stat-value
{
	display: block;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	color: #111827;
	margin-top: 3px;
	word-wrap: break-word;
}

.alos-stat-sub
{
	display: block;
	font-size: 12px;
	color: #9aa3b2;
	margin-top: 1px;
}

.alos-stat-export
{
	text-align: center;
}

.alos-export-btns
{
	margin-top: 8px;
	white-space: nowrap;
}

.alos-stat-export .btn
{
	border-radius: 6px;
	border-color: #dfe3e8;
	min-width: 68px;
}

.alos-stat-export .btn + .btn
{
	margin-left: 6px;
}


/* Notes under the cards -------------------------------------------------- */

.alos-notes
{
	font-size: 12px;
	color: #9aa3b2;
	margin-bottom: 14px;
}

.alos-notes .alos-note
{
	display: block;
	margin-top: 5px;
}

/* The truncation warning costs the user rows, so it is not a grey aside. */
.alos-notes .alos-note-warn
{
	background: #fff8ec;
	border: 1px solid #ffe2b8;
	border-radius: 6px;
	color: #b26a00;
	padding: 8px 11px;
}


/* Length of Stay --------------------------------------------------------- */

.alos-los
{
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	background: #eef1f5;
	color: #4b5563;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* Longer than the average of whatever is currently filtered to. */
.alos-los-over
{
	background: #fff4e5;
	color: #b26a00;
}

/* At least twice that average. */
.alos-los-high
{
	background: #fdecea;
	color: #c0392b;
}

.alos-los-days
{
	display: block;
	font-size: 11px;
	color: #b0b7c3;
	margin-top: 4px;
}


/* Table ------------------------------------------------------------------ */

/* Only the table goes in here -- the length menu, the row count and the
   pagination are placed outside it by the DataTables "dom" option, so they do
   not slide away with the table. In practice it should never scroll: the
   fixed layout below makes the table exactly as wide as its container. */
.alos-table-scroll
{
	overflow-x: auto;
}

table.alos-table
{
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 6px;
	margin-bottom: 12px;

	/* The whole point of the seven-column layout: with a fixed layout the
	   column widths below are obeyed exactly and long text wraps inside its
	   cell, so the table can never grow wider than the panel. */
	table-layout: fixed;
	width: 100%;
}

table.alos-table > thead > tr > th
{
	background: #f7f8fa;
	border-top: 0;
	border-bottom: 1px solid #e6e8eb;
	padding: 11px 12px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .6px;
	font-weight: 600;
	color: #8a94a6;
	vertical-align: middle;
	cursor: pointer;
}

table.alos-table > tbody > tr > td
{
	border-top: 1px solid #f0f2f5;
	padding: 10px 12px;
	vertical-align: top;
	color: #374151;

	/* A long unbroken string -- a run-together diagnosis, a pasted URL --
	   must break rather than force the column wider. */
	word-wrap: break-word;
	overflow-wrap: break-word;
}

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

/* Column widths. These seven total 92, leaving 8 for Save; when the account
   cannot edit there is no Save column and the browser scales the rest up to
   fill the panel. Percentages, not pixels, so it holds on any screen. */
table.alos-table .alos-col-patient  { width: 13%; }
table.alos-table .alos-col-location { width: 11%; }
table.alos-table .alos-col-stay     { width: 11%; }
table.alos-table .alos-col-dx       { width: 18%; }
table.alos-table .alos-col-doc      { width: 10%; }
table.alos-table .alos-col-reason   { width: 15%; }
table.alos-table .alos-col-mit      { width: 14%; }

/* Save is only present when the account can edit; the others give up a
   little to make room for it. */
table.alos-table .alos-col-save
{
	width: 8%;
	white-space: nowrap;
}

/* Ward and Department: filtered on, never shown. DataTables hides them once
   it initialises -- this covers the moment before that, and the case where
   the library did not load at all. */
table.alos-table .alos-col-hidden
{
	display: none;
}

/* Stacked facts inside one cell: the heading line, then the detail. */
.alos-cell-main
{
	display: block;
	font-weight: 600;
	color: #1f2937;
	line-height: 1.35;
}

.alos-cell-sub
{
	display: block;
	font-size: 11px;
	color: #98a1b0;
	line-height: 1.45;
	margin-top: 2px;
}

table.alos-table .form-control
{
	border-color: #dfe3e8;
	border-radius: 6px;
	box-shadow: none;
	font-size: 13px;
	width: 100%;
}

table.alos-table .form-control:focus
{
	border-color: #2f80ed;
	box-shadow: 0 0 0 3px rgba(47,128,237,.12);
}

/* Let the free-text columns be dragged taller, never wider -- a horizontal
   drag would break the table layout. */
table.alos-table textarea
{
	resize: vertical;
}

table.alos-table .btn-success
{
	border-radius: 6px;
}

/* A row being saved, so the click clearly registered. */
table.alos-table tr.alos-saving > td
{
	background: #fff8ec !important;
}

.alos-msg
{
	display: block;
	font-size: 11px;
	margin-top: 5px;
}


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

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info
{
	font-size: 12px;
	color: #9aa3b2;
	padding-top: 10px;
}

.dataTables_wrapper .dataTables_length select
{
	min-width: 72px;
	border: 1px solid #dfe3e8;
	border-radius: 6px;
	padding: 3px 6px;
	color: #374151;
}

.dataTables_wrapper .dataTables_info
{
	text-align: right;
}

.dataTables_wrapper .dataTables_paginate
{
	margin-top: 0;
}

.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span
{
	color: #6b7280;
	border-color: #e6e8eb;
}

/* The current page. Secondary grey -- Bootstrap 3 has no "secondary", so this
   is the Bootstrap 4/5 value. Deliberately NOT btn-default white: that is what
   the inactive pages already are, and the current page has to stay tellable
   apart from them. */
.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > a:hover,
.dataTables_wrapper .pagination > .active > a:focus,
.dataTables_wrapper .pagination > .active > span,
.dataTables_wrapper .pagination > .active > span:hover,
.dataTables_wrapper .pagination > .active > span:focus
{
	background: #6c757d;
	border-color: #60686f;
	color: #fff;
}


/* Narrow screens --------------------------------------------------------- */

@media (max-width: 767px)
{
	.alos-stat
	{
		min-height: 0;
	}

	.dataTables_wrapper .dataTables_info
	{
		text-align: left;
	}
}