/**
 * Styling for the /dbadmin/ pages.
 *
 * Bootstrap 5 is already loaded site wide by application/views/base.php, so this file only
 * holds the compact-admin tweaks and the overrides needed for the legacy cl4 markup that
 * still renders inside the admin pages (sprite icon links, generated form tables, etc).
 *
 * Everything is scoped under .cl4_admin_content (the admin wrapper in
 * application/views/cl4/cl4admin/admin.php) so nothing here can leak into the public site.
 */

/* compact base ------------------------------------------------------------ */

.cl4_admin_content {
	font-size: 0.875rem;
}

.cl4_admin_content h1,
.cl4_admin_content h2,
.cl4_admin_content h3 {
	font-size: 1.125rem;
	margin-bottom: 0;
}

/* list table -------------------------------------------------------------- */

.cl4_admin_content table.cl4_content {
	font-size: 0.8125rem;
	margin-bottom: 0;
}

.cl4_admin_content table.cl4_content th,
.cl4_admin_content table.cl4_content td {
	padding: 0.25rem 0.4rem;
	vertical-align: middle;
}

.cl4_admin_content table.cl4_content th a {
	text-decoration: none;
	white-space: nowrap;
}

.cl4_admin_content table.cl4_content td:first-child {
	white-space: nowrap;
	width: 1%;
}

/* form and view tables ---------------------------------------------------- */

/**
 * The label/field table on the add, edit, search and view pages.  The Bootstrap table classes
 * are added in application/config/cl4orm.php (default_options.table_options); cl4.css puts a
 * white 1px border on every cell, which fights with .table, so it is reset here.
 */
.cl4_admin_content table.cl4_form {
	font-size: 0.8125rem;
	margin-bottom: 0;
	width: auto;
}

.cl4_admin_content table.cl4_form > tbody > tr > td {
	padding: 0.25rem 0.5rem;
	border-right: 0;
	border-left: 0;
	vertical-align: top;
}

/* the label column, set with set_all_td_attribute() in the form/view table views */
.cl4_admin_content table.cl4_form td.cl4_form_label {
	white-space: nowrap;
	font-weight: 600;
	width: 1%;
	padding-top: 0.35rem;
}

.cl4_admin_content label.cl4_required:after {
	content: ' *';
	color: var(--bs-danger);
}

/**
 * cl4.css gives the button bar a yellow background and the search fieldset a plain box; both
 * look out of place beside the Bootstrap buttons, so they are flattened here.  The layout
 * (flex + gap) comes from the views, so no margin is needed on the buttons themselves.
 */
.cl4_admin_content .cl4_buttons,
.cl4_admin_content .cl4_tools {
	background-color: transparent;
	padding: 0;
	margin: 0;
}

.cl4_admin_content .cl4_tools {
	padding: 0.5rem;
}

.cl4_admin_content .cl4_buttons input {
	margin-right: 0;
}

/* icons ------------------------------------------------------------------- */

/**
 * cl4 emits its icons as <span class="cl4_icon cl4_view">&nbsp;</span> and cl4.css fills them
 * with a PNG sprite.  The site already loads a Font Awesome 6 Pro kit in CSS (webfont) mode,
 * so the sprite is switched off and the glyph is drawn with a pseudo element instead.
 *
 * font-size: 0 on the span hides the &nbsp; it contains without hiding the pseudo element.
 */
.cl4_admin_content .cl4_icon {
	background-image: none;
	width: auto;
	height: auto;
	font-size: 0;
	line-height: 1;
	margin: 0 0.25rem 0 0;
	vertical-align: middle;
	text-decoration: none;
}

.cl4_admin_content .cl4_icon:before {
	font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'Font Awesome 6 Sharp', 'FontAwesome';
	font-weight: 900;
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.cl4_admin_content .cl4_view:before { content: '\f06e'; }
.cl4_admin_content .cl4_edit:before { content: '\f044'; }
.cl4_admin_content .cl4_delete:before { content: '\f2ed'; }
.cl4_admin_content .cl4_add:before { content: '\f0c5'; }
.cl4_admin_content .cl4_wrench:before { content: '\f0ad'; }

/* set in ORM_Checkbox::view_html(); note the class is cl4_not_checked, not cl4_no_check */
.cl4_admin_content .cl4_check:before,
.cl4_admin_content .cl4_checked:before {
	content: '\f00c';
	color: var(--bs-success);
}

.cl4_admin_content .cl4_no_check:before,
.cl4_admin_content .cl4_not_checked:before {
	content: '\f00d';
	color: var(--bs-secondary-color);
}

.cl4_admin_content a:hover .cl4_icon:before {
	opacity: 0.7;
}

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

/**
 * The cl4 ORM field classes emit bare inputs, so give them the Bootstrap small
 * control look here rather than threading field_attributes through every model.
 */
.cl4_admin_content input[type="text"],
.cl4_admin_content input[type="password"],
.cl4_admin_content input[type="email"],
.cl4_admin_content input[type="number"],
.cl4_admin_content input[type="date"],
.cl4_admin_content input[type="time"],
.cl4_admin_content input[type="datetime-local"],
.cl4_admin_content input[type="search"],
.cl4_admin_content select,
.cl4_admin_content textarea {
	display: inline-block;
	padding: 0.15rem 0.4rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: 0.25rem;
	max-width: 100%;
}

.cl4_admin_content input[type="text"]:focus,
.cl4_admin_content input[type="password"]:focus,
.cl4_admin_content input[type="email"]:focus,
.cl4_admin_content input[type="number"]:focus,
.cl4_admin_content input[type="date"]:focus,
.cl4_admin_content input[type="time"]:focus,
.cl4_admin_content input[type="datetime-local"]:focus,
.cl4_admin_content input[type="search"]:focus,
.cl4_admin_content select:focus,
.cl4_admin_content textarea:focus {
	border-color: #86b7fe;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* textareas are emitted without rows/cols by ORM_TextArea, so give them a sensible size */
.cl4_admin_content textarea {
	width: 100%;
	min-width: 20rem;
	min-height: 4rem;
}

.cl4_admin_content select[multiple] {
	min-height: 5rem;
}

.cl4_admin_content input[type="file"] {
	font-size: 0.8125rem;
}

/**
 * Checkboxes and radios are emitted bare too.  Sizing them up a little makes them easier to
 * hit in the compact rows, and the radio groups (Form::radios, used by the search form) need
 * the label to sit beside the control rather than on the next line.
 */
.cl4_admin_content input[type="checkbox"],
.cl4_admin_content input[type="radio"] {
	width: 0.95rem;
	height: 0.95rem;
	margin: 0 0.2rem 0 0;
	vertical-align: -0.1rem;
}

.cl4_admin_content table.cl4_form label,
.cl4_admin_content .cl4_tools label {
	margin-right: 0.5rem;
	white-space: nowrap;
}

/* top bar ----------------------------------------------------------------- */

/**
 * The top bar buttons get their Bootstrap classes from default_options.button_class in
 * application/config/cl4orm.php, so only the spacing between them is needed here.
 */
.cl4_admin_content .cl4_list_buttons > * {
	margin: 0 0.25rem 0.25rem 0;
}

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

/* the nav is rendered by modules/cl4/views/pagination/floating.php */
.cl4_admin_content .cl4_nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	font-size: 0.8125rem;
	margin-bottom: 0.25rem;
}

.cl4_admin_content .cl4_nav_pages a,
.cl4_admin_content .cl4_nav_pages span {
	display: inline-block;
	padding: 0 0.25rem;
	text-decoration: none;
}

.cl4_admin_content .cl4_nav_pages a:hover {
	text-decoration: underline;
}

.cl4_admin_content .cl4_nav_pages .current_page {
	font-weight: 600;
	color: var(--bs-emphasis-color);
}

.cl4_admin_content .cl4_nav_pages .no_previous,
.cl4_admin_content .cl4_nav_pages .no_next,
.cl4_admin_content .cl4_nav_pages .ellipsis {
	color: var(--bs-secondary-color);
}

.cl4_admin_content .cl4_nav_showing {
	color: var(--bs-secondary-color);
	white-space: nowrap;
}

.cl4_admin_content .cl4_no_rows {
	padding: 0.5rem 0;
	font-style: italic;
	color: var(--bs-secondary-color);
}

/* full width ------------------------------------------------------------- */

/**
 * The site wrapper in application/views/base.php is a .container-xl, which is too narrow for
 * the wide admin lists.  Widening it here (rather than in base.php) keeps the change contained
 * to the admin pages.  The lists are also wrapped in .table-responsive, so browsers without
 * :has() support just get a horizontal scroll bar instead.
 */
.container-xl:has(.cl4_admin_content) {
	max-width: 100%;
}