/**
 * ========================================================================
 * USER.CSS - CUSTOM STYLESHEET VOOR HELIX ULTIMATE ADMIN TEMPLATE
 * ========================================================================
 * 
 * Bestandsnaam: user.css
 * PLaats: \media\templates\administrator\atum\css
 * Aangemaakt: 06-04-2025
 * Auteur: @RussW | https://github.com/hotmango/Atum-Custom-UserCss
 *         @RussW 18-Aug-2021
 * Modification: Joomla4all | Arno Schumm] 
 * Versie: 1.0
 * 
 * Dit bestand bevat een verscheidenheid aan kleine en subtiele veranderingen die
 * de look & feel van het inlogscherm em admin teplate veranderen voor Joomla5
 * 
 * Opmerkingen:
 * - Gebruik CSS variabelen voor eenvoudige aanpassingen
 * - Responsive design is geïmplementeerd met media queries
 * - Browsercompatibiliteit: Chrome, Firefox, Safari, Edge (laatste 2 versies)
 * 
 * ========================================================================
 * INHOUDSOPGAVE
 * ========================================================================
 * 0. IMPORT STYLEN / FONTS
 * 1. BASIS STIJLEN
 * 2. LAYOUT & STRUCTUUR
 * 3. HEADER & NAVIGATIE
 * 4. HOOFD CONTENT GEBIED
 * 5. MODULES & COMPONENTEN
 * 6. FOOTER
 * 7. RESPONSIVE AANPASSINGEN
 * 8. ANIMATIES & EFFECTEN
 * 9. HELIX SPECIFIEKE STIJLEN
 * ========================================================================
 * J4 Admin Template (Atum) Customisations
 * a variety of minor and subtle size changes, hilites and masking reducing
 * some of the glare & "super-sized" look & feel
 * J4Atum-user-css /administrator/templates/atum/css/user.css

 @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

* ======================================================================== */



 /**
  * common css elements and overrides for light & dark modes
  */
  :root {
	--font-size-default: 0.95rem;
	--font-size-medium: 0.86rem;
	--font-size-small: 0.76rem;
	--font-weight-default: 400;
	--font-weight-500: 500;
	--font-weight-600: 600;
	--color-heading: #424242;
	--font-size-heading: 1.15rem;
}

/**
 * Development Highlighted Header
 * comment out for production use
 */
 /*
.header, .header .logo { background: var(--warning) !important; }
.header-item-content.joomlaversion { color: var(--white) !important; }
*/
/* end : development css */

html,
body {
	font-size: var(--font-size-default);
	line-height: 1.4;
}

/* hide the login screen header title & sidebar */
.view-login #header .header-title,
.view-login #sidebar-wrapper {
	display: none !important;
}

/* reset login box width on mobiles */
.view-login .container-main {
	display:block !important;
}

/* reset logo image to a more reasonable width layout */
.task-logout .login .logo,
.view-login .login .logo {
	padding: 0 0px 20px;
}
.task-logout .login img,
.view-login .login img {
	height: auto;
	max-height: 100px;
	max-width: 100px;
}

/* logged-in admin pages */
.header .logo {
	background: var(--template-bg-dark);
	max-width: 16rem;
}
.header .logo img,
.header .logo svg {
	max-height: 40px;
}
.header .logo.small img.logo-collapsed {
	max-width: 40px;
	max-height: 40px;
}
.main-nav-container,
#sidebarmenu,
.sidebar-wrapper,
.item-level-1 {
	max-width: 16rem;
}
.main-nav {
	font-size: 0.9rem !important;
}
.sidebar-wrapper .sidebar-menu {
	flex: 1 0 16rem;
	flex-basis: 16rem;
	max-width: 16rem;
}
.main-nav-container li.item.item-level-2 > a {
	border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
	min-height: 36px;
}
.main-nav-container ul.collapse-level-2 {
	border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
}
.main-nav-container li.item.item-level-3 > a {
	min-height: 34px;
}
.main-nav-container .mm-active > a.has-arrow {
	background: #1f3047;
}

.content .card {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
	transition: box-shadow 0.25s ease-in-out;
}
.content .card:hover {
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* stop cards within cards (mainly akeeba & Tassos) also aquiring box-shadows (issue #1) */
.content .card .card-body .card,
.content .card .card-body .card:hover {
	box-shadow: none;
}

h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-500); }
.cpanel-modules h2,
.cpanel-modules h3,
.com_cpanel .card-header,
.cpanel .card-header h3 {
	color: var(--color-heading);
	font-size: var(--font-size-heading);
	font-weight: var(--font-weight-500);
}

.quick-icons .nav {
	grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
}

@media (min-width: 576px) {
	.quick-icons .nav {
		grid-template-columns: repeat(auto-fit,minmax(135px,1fr));
	}
}

.quick-icons .quickicon a .quickicon-name {
	font-weight: var(--font-weight-default);
	line-height: 1.1;
	font-size: 0.8rem;
}

/* change scary danger/red notifications to less scary warning/orange */
.quick-icons .quickicon a.danger,
.quick-icons .quickicon a.warning {
	--bg-color-hvr: var(--warning);
}

/* normalising typography & data component layouts */
.small {
	font-size: var(--font-size-small);
	line-height: 1.1;
}
.btn {
	font-weight: var(--font-weight-default) !important;
	/* issue #1 : inconsistant large button sizing, mainly akeeba */
	font-size: var(--font-size-medium) !important;
	line-height: 1.3 !important;
	padding: 0.4rem 0.8rem !important;
}
.subhead a.btn {
	font-weight: var(--font-weight-default) !important;
	line-height: 1.25 !important;
	padding: 0.25rem 0.75rem !important;
	font-size: 0.85rem !important;
}
.table>:not(:first-child) {
	border-top: none;
}
.table thead th,
.table tbody th {
	font-size: 0.9rem;
	font-weight: var(--font-weight-default);
}

.cpanel-modules .card-header {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem .50rem;
}
.cpanel-modules .quickicon a:hover .quickicon-icon>* {
	color: var(--light);
}
.cpanel-modules .list-group-item a,
.table tbody td,
.table tbody a:not(.badge) {
	font-size: 0.875rem;
	line-height: 1.2;
	font-weight: var(--font-weight-default);
}
.tbody-icon [class*=" fa-"], .tbody-icon [class*=" icon-"], .tbody-icon [class^=fa-], .tbody-icon [class^=icon-] {
	width: 20px;
	height: 20px;
	font-size: 0.78rem;
	line-height: 17px;
}
.table>:not(caption)>*>* {
	/*border-bottom-color: #eaeaea;*/
	padding: 0.6rem 0.75rem;
}
.subhead input,
.subhead button,
.js-stools-container-selector input,
.js-stools-container-selector select,
.js-stools-container-selector button:not(#myTab button),
.js-stools-container-filters input,
.js-stools-container-filters select,
.js-stools-container-filters button:not(#myTab button),
.js-stools-container-filters .choices__inner,
.js-stools-container-bar input,
.js-stools-container-bar select,
.js-stools-container-bar button:not(#myTab button) {
	font-weight: var(--font-weight-default) !important;
	line-height: 0.95 !important;
	font-size: 0.85rem !important;
	height: 28px !important;
	min-height:28px;
}
.choices[data-type*=select-multiple] .choices__input,
.choices[data-type*=text] .choices__input {
	height: 24px !important;
	min-height: 24px;
}
.choices__list--multiple .choices__item {
	height: 22px !important;
	min-height: 22px !important;
	font-weight: var(--font-weight-default);
	padding: 2px 5px;
}
.choices__item .choices__button_joomla {
	height: 20px !important;
	min-height: 20px !important;
	max-height: 20px !important;
	line-height: 0.6rem;
}
select,
.js-stools-container-box .custom-select,
.form-select {
	display: block !important;
	width: 100% !important;
	padding: 0.5rem 3rem 0.5rem 1rem !important;
}

/* fix for issue #2, hide VirtueMart select dropdowns showing hidden elements  24-jan-2024 */
.custom-select, .form-select {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.subform-repeatable-group input[type='text'] { width: 100%; }
.topview .quickicon-icon i.fa-plus-circle {
	color: var(--success);
}

.view-article.layout-edit label { font-size: 1rem; }

/**
 * grey-out unpublished list view items to differentiate between published items
 */
table tr td:has([data-item-task$='.publish']) +th,
table tr td:has([data-item-task$='.publish']) +th +td,
table tr td:has([data-item-task$='.publish']) +th +td +td,
table tr td:has([data-item-task$='.publish']) +th +td +td +td,
table tr td:has([data-item-task$='.publish']) +th +td +td +td +td,
table tr td:has([data-item-task$='.publish']) +th +td +td +td +td +td,
table tr td:has([data-item-task$='.publish']) +th +td +td +td +td +td +td,
table tr td:has([data-item-task$='.publish']) +th a,
table tr td:has([data-item-task$='.publish']) +th +td a,
table tr td:has([data-item-task$='.publish']) +th +td +td a,
table tr td:has([data-item-task$='.publish']) +th +td +td +td a,
table tr td:has([data-item-task$='.publish']) +th +td +td +td +td a,
table tr td:has([data-item-task$='.publish']) +th +td +td +td +td +td a,
table tr td:has([data-item-task$='.publish']) +th +td +td +td +td +td + td a
{
		color: #a2a2a2!important;
}


/**
 * common customisations for both light & darlmodes
 * minor additions to improve the default extension styling
 * - delete or comment out to use Joomla native darkmode styling
 *
 */


/* end common customisations */



/**
 * customisations for lightmode
 * minor additions to improve the default darkmode styling
 * - delete or comment out to use Joomla native darkmode styling
 *
 */
/* @media (prefers-color-scheme=light) {*/
 /*@media (prefers-color-scheme: light), (data-color-scheme="light"), (data-bs-theme="light"), (prefers-color-scheme: normal) {*/
[data-color-scheme="light"] {

	.cpanel-modules .card-header {
		background: var(--light);
	}

	.table>:not(caption)>*>* {
		border-bottom-color: #eaeaea;
	}
	.quick-icons .quickicon {
		--bg-color: var(--light);
	}

	/* change scary danger/red notifications to less scary warning/orange */
	.quick-icons .quickicon a.danger,
	.quick-icons .quickicon a.warning {
		--text-color: #ff9900;;
		--bg-color: #fde6b9;
	}
	.table thead th,
	.table tbody th {
		color: #888;
	}
	.table tbody td {
		color: #666;
	}

	/*
	* extension customisations
	* some extensions may need prefix classes added first, such as the body tag class
	*/

} /* end lightmode */


/**
 * customisations for darkmode
 * minor additions to improve the default darkmode styling
 * - delete or comment out to use Joomla native darkmode styling
 *
 */
/*@media (prefers-color-scheme=dark) {*/
/*@media (prefers-color-scheme: dark), (data-color-scheme="dark"), (data-bs-theme="dark") {*/
[data-color-scheme="dark"] {

	:root {
		--darkblue-bg: #243142;
		--body-bg: #1b222e;
		--sidebar-item-bg-hvr: var(--quickicon-linkadd-bg-hvr);
		--card-bg: #222d3d;
		--list-group-bg: var(--card-bg);
		--success: #00a42b;
		--template-bg-dark-90: var(--body-bg);
		--quickicon-linkadd-bg: #3a5274;
		--heading-color: var(--template-text-light);
	}

	body.admin {
		background: var(--body-bg);
	}
	a {
		color: var(--template-bg-light);
	}

	.cpanel-modules .list-group-item a:not(.btn),
	.table tbody a:not(.badge):not(.btn):not(.dropdown-item) {
		color: #4d90e4;
	}
	.cpanel-modules .list-group-item a:hover:not(.btn),
	.table tbody a:hover:not(.badge):not(.btn):not(.dropdown-item) {
		color: var(--template-bg-light)!important;
	}

	.cpanel-modules .card-header {
	background: var(--darkblue-bg);
	}

	.cpanel-modules h2,
	.cpanel-modules h3,
	.com_cpanel .card-header,
	.cpanel .card-header h3 {
		color: var(--template-bg-light);
	}

	.content .card,
	.cpanel-modules .card {
		border: 1px solid var(--gray-700);
	}
	.content .card:hover,
	.cpanel-modules .card:hover {
		border: 1px solid var(--gray-600);
	}
	.content .card:hover {
		box-shadow: 2px 2px 6px 1px #3e3e5f;
	}
	.cpanel-modules .card-header {
		background: var(--template-bg-dark-70);
	}
	.cpanel-modules h2,
	.cpanel-modules h3,
	.com_cpanel .card-header,
	.cpanel .card-header h3,
	.card-body p {
		color: var(--template-text-light);
	}

	.calendar-container,
	.calendar-container table,
	.cpanel-modules .card-header,
	.subhead,
	.js-stools-container-filters-visible {
		background: var(--template-bg-dark-70)!important;
	}
	.subhead .btn:not(.btn-action),
	.com_postinstall h3,
	.com_postinstall p,
	.cpanel-modules h2,
	.cpanel-modules h3,
	.com_cpanel .card-header,
	.cpanel .card-header h3,
	.table thead th,
	.table thead a,
	joomla-tab-element h2,
	joomla-tab-elemet h3,
	joomla-tab-element p,
	label,
	/*.form-control,*/
	.modal-title,
	.joomla-dialog-header,
	.calendar-head-row td,
	.daynames td,
	.field-calendar input,
	.field-calendar .buttons-wrapper .btn,
	.accordion-header .accordion-button,
	joomla-tab>div[role=tablist]>button[role=tab]:not([aria-expanded=true]),
	.btn-close,
	.table>:not(caption)>*>*
	/*.accordion .list-group-item*/ {
		color: var(--template-text-light)!important;
	}
	.field-calendar .buttons-wrapper .btn {
		border-color: var(--template-text-light)!important;
	}
	.cpanel .module-actions button,
	.dropdown-item {
		color: var(--template-text-light)!important;
	}
	.dropdown-item:hover,
	.dropdown-item:focus,
	button.dropdown-item:hover,
	button.dropdown-item:focus {
		color: var(--dropdown-link-hover-color)!important;
	}

	/* change scary danger/red notifications to less scary warning/orange */
	.quick-icons .quickicon a.danger,
	.quick-icons .quickicon a.warning {
		--bg-color: var(--warning);
	}
	.quick-icons .quickicon:hover a.danger,
	.quick-icons .quickicon:hover a.warning {
		--bg-color-hvr: #f79f22 !important;
	}
	.quick-icons {
		background-color: #222d3d !important;
	}
	.quick-icons .quickicon-group,
	.quick-icons .quickicon-single {
		border-color: var(--gray-700)!important;
	}
	.quick-icons .quickicon {
		--bg-color: var(--template-bg-dark-80) !important;
	}
	.quick-icons .quickicon a:not([id^='plg_quickicon']),
	.quick-icons .quickicon a:not([id^='plg_quickicon']) .quickicon-icon>* {
		color: var(--gray-400);
	}
	.quick-icons .quickicon a:hover:not([id^='plg_quickicon']),
	.quick-icons .quickicon a:hover:not([id^='plg_quickicon']) .quickicon-icon>* {
		color: var(--white)!important;
	}
	.quick-icons .quickicon-linkadd a:active,
	.quick-icons .quickicon-linkadd a:focus,
	.quick-icons .quickicon-linkadd a:hover {
		background: var(--template-bg-dark-60)!important;
	}
	.table>:not(caption)>*>*,
	.list-group-item {
		border-bottom-color: var(--gray-600);
	}
	.sample-data__title,
	.sample-data__desc,
	.table tbody td {
		color: var(--gray-500)!important;
	}
	.form-check-input {
		border: 1px solid var(--gray-500);
	}


	/*
	* extension customisations
	* some extensions may need prefix classes added first, such as the body tag class
	*/
	.com_convertforms .container-main {
		background: var(--main-bg) !important;
	}
	.com_convertforms .nr-icons a,
	.com_convertforms .nr-well-white,
	.com_convertforms .nr-well-white .nrTable td,
	.com_gsd .nr-main-header,
	.com_gsd .nr-box,
	.com_gsd .well.nr-well,
	.com_gsd #tabTabs,
	.com_gsd joomla-tab>div[role=tablist] {
		background: var(--card-body-bg) !important;
	}
	.com_convertforms .nr-icons a span,
	.com_gsd .nr-main-header,
	.com_gsd .nr-box,
	.com_gsd .well.nr-well,
	.com_gsd .well.nr-well .well-desc,
	.com_gsd #tabTabs,
	.com_gsd joomla-tab>div[role=tablist] {
		color: var(--template-text-light);
	}

} /* end darkmode */

/* set dashboard background image */
.view-login .container-main {
	background-image: url(../../../../../images/adminskin/joomla4all-blue-mountains-forest-and-lake-national-park.jpg) !important;

	/*-webkit-animation: fadein 2000ms ease-out;
	-moz-animation: fadein 2000ms ease-out;
	-ms-animation: fadein 2000ms ease-out;
	-o-animation: fadein 2000ms ease-out;
	animation: fadein 2000ms ease-out;
	z-index: -1 ;
	opacity: 0.5;
	height: 100%;*/
	background-position: center bottom !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
}


.view-login .login{
	opacity: 0.8;
}


/* Define the animation keyframes with vendor prefixes */
@-webkit-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
  }
  @-moz-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
  }
  @-ms-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
  }
  @-o-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
  }
  @keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
  }
  @keyframes fadeAndSlide {
	0% { opacity: 0; transform: translateX(-20px); }
	100% { opacity: 1; transform: translateX(0); }
  }