/* BBS Detailing - branding override layer (loaded after core Elastic CSS)
   Inspired by bbs-detailing.cz look: dark gradient + orange accent + glass surfaces */

:root{
	--bbs-bg-start:#1a1a2e;
	--bbs-bg-end:#16213e;
	--bbs-surface:rgba(35,38,47,.95);
	--bbs-surface2:rgba(35,38,43,.85);
	--bbs-accent:#ff9800;
	--bbs-accent-light:#ffd180;
	--bbs-accent-faded:rgba(255,152,0,.10);
	--bbs-border:#26272a;
	--bbs-radius:26px;
	--bbs-radius-sm:14px;
	--bbs-shadow:0 8px 32px rgba(0,0,0,.66),0 1px 1px rgba(0,0,0,.4);
	--bbs-transition:.18s cubic-bezier(.86,0,.07,1);
	--bbs-text:#f9f9fb;
	--bbs-muted:#b6b7bb;
}

html,body{
	background:linear-gradient(135deg,var(--bbs-bg-start) 0%,var(--bbs-bg-end) 100%)!important;
}

body{
	color:var(--bbs-text)!important;
}

body,
button,
input,
optgroup,
select,
textarea,
.popover{
	font-family:'Urbanist',Roboto,Arial,sans-serif!important;
}

/* Modern app framing */
#layout{
	padding:14px!important;
	gap:12px!important;
}

@media screen and (max-width:768px){
	#layout{padding:0!important;gap:0!important}
}

/* Turn the 3 columns into "cards" */
#layout>div{
	border-radius:calc(var(--bbs-radius) - 4px)!important;
	overflow:hidden;
	box-shadow:var(--bbs-shadow);
	border:1.5px solid var(--bbs-border);
}

@media screen and (max-width:768px){
	#layout>div{border-radius:0!important;box-shadow:none!important;border-width:0!important}
}

/* Remove old table-like separators */
#layout-sidebar,
#layout-list{
	border-right:0!important;
}

/* Nicer scrollbar (mail list + sidebar scrollers only) */
#layout-list .scroller,
#layout-list .listing,
#layout-sidebar .scroller{
	scrollbar-width:thin;
	scrollbar-color:rgba(255,152,0,.65) rgba(255,255,255,.06);
}

#layout-list .scroller::-webkit-scrollbar,
#layout-list .listing::-webkit-scrollbar,
#layout-sidebar .scroller::-webkit-scrollbar{
	width:10px;
	height:10px;
}

#layout-list .scroller::-webkit-scrollbar-track,
#layout-list .listing::-webkit-scrollbar-track,
#layout-sidebar .scroller::-webkit-scrollbar-track{
	background:rgba(255,255,255,.06);
}

#layout-list .scroller::-webkit-scrollbar-thumb,
#layout-list .listing::-webkit-scrollbar-thumb,
#layout-sidebar .scroller::-webkit-scrollbar-thumb{
	background:rgba(255,152,0,.65);
	border-radius:9999px;
	border:3px solid rgba(35,38,47,.72);
}

#layout-list .scroller::-webkit-scrollbar-thumb:hover,
#layout-list .listing::-webkit-scrollbar-thumb:hover,
#layout-sidebar .scroller::-webkit-scrollbar-thumb:hover{
	background:rgba(255,152,0,.85);
}

/* Typography + density */
html{font-size:15px}

#layout>div>.header{
	font-size:1.02rem!important;
	letter-spacing:.01em;
}

.menu.toolbar a,
.menu.toolbar button,
a.button,
button.btn{
	border-radius:9999px!important;
	font-weight:700!important;
}

button.btn,
a.btn{
	padding:.55rem .95rem!important;
}

.form-control,
#layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
#layout textarea,
#layout select{
	border-radius:var(--bbs-radius-sm)!important;
}

/* Make icon-only buttons feel modern */
a.button.icon,
button.btn.icon{
	border-radius:9999px!important;
}

/* Links + accents */
a{color:var(--bbs-accent)}
a:hover{color:var(--bbs-accent-light)}

.btn-primary,
div.tox .tox-dialog__footer .tox-button{
	background:linear-gradient(90deg,var(--bbs-accent) 40%,#ffbc5e 100%);
	border-color:transparent;
	color:#fff;
	transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

/* Compose editor chrome (TinyMCE) */
div.tox.tox-tinymce{
	background:rgba(35,38,47,.55)!important;
	border:1.5px solid var(--bbs-border)!important;
	border-radius:calc(var(--bbs-radius) - 10px)!important;
}

div.tox .tox-toolbar-overlord>div,
div.tox .tox-toolbar,
div.tox .tox-toolbar__primary{
	background-color:rgba(35,38,47,.55)!important;
	background-image:none!important;
	border-color:var(--bbs-border)!important;
}

div.tox .tox-edit-area{
	background:rgba(35,38,47,.55)!important;
}

/* Compose editor toolbar (non-TinyMCE fallback) */
.html-editor .editor-toolbar{
	background-color:var(--bbs-accent-faded)!important;
	border-bottom-color:var(--bbs-border)!important;
	border-left-color:var(--bbs-border)!important;
	border-right-color:var(--bbs-border)!important;
}

.html-editor .editor-toolbar .mce-i-html{
	color:var(--bbs-text)!important;
}

.html-editor .editor-toolbar .mce-i-html:focus,
.html-editor .editor-toolbar .mce-i-html:hover{
	background-color:rgba(255,152,0,.12)!important;
	border-color:var(--bbs-border)!important;
}

/* Plain-text editor */
#composebody,
.html-editor>textarea,
.googie_edit_layer{
	background:var(--bbs-surface2)!important;
	color:var(--bbs-text)!important;
	border-color:var(--bbs-border)!important;
}

.btn-primary:hover,
div.tox .tox-dialog__footer .tox-button:hover{
	filter:brightness(1.03);
	transform:translateY(-1px);
	box-shadow:0 6px 25px rgba(255,152,0,.35);
}

.btn:focus,
.form-control:focus,
div.tox .tox-color-input>input:focus,
div.tox .tox-textfield:focus,
div.tox .tox-textarea:focus{
	box-shadow:0 0 0 .2rem var(--bbs-accent-faded)!important;
}

/* Global surfaces */
/* Elastic sets a lot of backgrounds to #fff. Force a full-app dark rewrite. */
#layout,
#layout *{
	transition:background-color var(--bbs-transition),border-color var(--bbs-transition),color var(--bbs-transition);
}

::selection{
	background:rgba(255,152,0,.55);
	color:#111;
}

::-moz-selection{
	background:rgba(255,152,0,.55);
	color:#111;
}

/* Privacy notice: remote resources blocked */
.rcmail-inline-message,
.rcmail-inline-message span,
.rcmail-inline-message strong,
.rcmail-inline-message b{
	color:var(--bbs-accent)!important;
}

.rcmail-inline-message a{
	color:var(--bbs-accent)!important;
	text-decoration:underline;
}

.rcmail-inline-message a:hover{
	color:var(--bbs-accent-light)!important;
}

#layout>div>.header{
	background:rgba(35,38,47,.78)!important;
	border-bottom:1.5px solid var(--bbs-border)!important;
	color:var(--bbs-text)!important;
	backdrop-filter:blur(12px);
}

#layout>div>.footer{
	background:rgba(35,38,47,.55)!important;
	border-top:1.5px solid var(--bbs-border)!important;
	color:var(--bbs-muted)!important;
}

#layout-sidebar,
#layout-list,
#layout-content{
	background:rgba(35,38,47,.72)!important;
	border-color:var(--bbs-border)!important;
}

#layout-content>.content,
#layout-content>.formcontent,
#layout-content .iframe-wrapper{
	background:transparent!important;
}

/* Keep actual message body readable (HTML mail frame) */
#messagepartframe,
#messagepartframe body{
	background:#fff!important;
	color:#2c363a!important;
}

/* Sidebar (task menu) */
#layout-menu{
	background:var(--bbs-surface);
	border-right:1px solid var(--bbs-border);
	box-shadow:var(--bbs-shadow);
}

#layout-menu .popover-header,
#taskmenu .special-buttons{
	background:transparent!important;
}

#layout-menu .popover-header img,
#layout-menu #logo{
	max-height:44px;
	width:auto;
	padding:.4rem;
	filter:drop-shadow(0 2px 18px rgba(255,152,0,.25));
}

/* Logo: white circular badge like the website */
#logo{
	background:#fff;
	border-radius:9999px;
	padding:8px;
	box-shadow:0 0 32px rgba(255,152,0,.18);
}

/* Ensure logo sizing stays consistent in different placements */
#layout-menu #logo{
	padding:8px;
}

#taskmenu a,
.menu.toolbar a{
	color:var(--bbs-text)!important;
	transition:background var(--bbs-transition),color var(--bbs-transition);
}

#taskmenu a.selected,
.menu.toolbar a.selected{
	color:var(--bbs-accent)!important;
	background:rgba(255,152,0,.10)!important;
}

#taskmenu a:hover,
.menu.toolbar a:hover{
	background:rgba(255,255,255,.06)!important;
}

#taskmenu .action-buttons a{
	color:var(--bbs-accent)!important;
}

#taskmenu .action-buttons a:hover{
	color:var(--bbs-accent-light)!important;
}

/* Top headers / toolbars */
#layout>div>.header a.button,
#layout>div>.header .header-title,
#layout>div>.header .menu.toolbar a{
	color:var(--bbs-text)!important;
}

#layout>div>.header a.button.icon:not(.disabled):focus,
#layout>div>.header a.button.icon:not(.disabled):hover{
	background:rgba(255,255,255,.06)!important;
}

.searchbar{
	background:rgba(35,38,47,.55)!important;
	border-bottom:1px solid var(--bbs-border)!important;
}

.searchbar form:before,
.searchbar input,
.searchbar a{
	color:var(--bbs-text)!important;
}

.searchbar a.selected{color:var(--bbs-accent)!important}

/* Replace remaining Elastic blue accents */
.folderlist li.mailbox .unreadcount{
	background:var(--bbs-accent)!important;
	color:#fff!important;
	border-radius:9999px!important;
	box-shadow:0 4px 18px rgba(255,152,0,.25);
}

.folderlist li.mailbox.recent>a{
	color:var(--bbs-accent-light)!important;
}

.quota-widget .value{
	background-color:var(--bbs-accent)!important;
}

.floating-action-buttons a.button{
	background:var(--bbs-accent)!important;
	box-shadow:0 0 0 0 transparent,0 10px 30px rgba(255,152,0,.20)!important;
}

.image-tools{
	background-color:rgba(255,152,0,.35)!important;
}

.image-tools a:focus,
.image-tools a:hover{
	background-color:rgba(255,152,0,.45)!important;
}

.ui-menu .ui-state-active{
	background-color:var(--bbs-accent)!important;
}

.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight{
	background:rgba(255,152,0,.14)!important;
	color:var(--bbs-accent)!important;
}

.ui-datepicker a.ui-state-active{
	background:var(--bbs-accent)!important;
}

.custom-control-input:checked~.custom-control-label::before{
	border-color:var(--bbs-accent)!important;
	background-color:var(--bbs-accent)!important;
}

/* Lists / selected rows */
.listing li,
.listing tbody td{
	border-bottom:1px solid rgba(255,255,255,.06)!important;
}

.listing li a,
.listing tbody td,
.listing tbody td a{
	color:var(--bbs-text)!important;
}

.listing span.secondary,
.folderlist span,
.messagelist td.subject span.date,
.messagelist td.subject span.fromto,
.messagelist td.subject span.size{
	color:rgba(249,249,251,.70)!important;
}

.listing li:hover,
.listing tbody tr:hover td{
	background:rgba(255,255,255,.04)!important;
}

.listing li.selected,
.listing tr.selected td,
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td{
	background-color:rgba(255,152,0,.08)!important;
	color:var(--bbs-text)!important;
}

/* Folder/category list (Roundcube uses treelist + applies selected background on the <a>) */
ul.treelist li.selected>a,
ul.treelist li.selected>div>a,
.folderlist li.selected>a,
.folderlist li.selected>div>a{
	background-color:rgba(255,152,0,.08)!important;
	color:var(--bbs-text)!important;
}

ul.treelist li.selected>a:hover,
ul.treelist li.selected>div>a:hover,
.folderlist li.selected>a:hover,
.folderlist li.selected>div>a:hover{
	background-color:rgba(255,152,0,.10)!important;
}

html:not(.touch) .listing.focus tbody tr.focused>td:first-child,
html:not(.touch) .listing li>a:focus{
	border-left-color:rgba(255,152,0,.45)!important;
}

/* Message list: left selection/focus bar should be orange (not Elastic blue) */
html:not(.touch) #messagelist.listing.focus tbody tr.focused>td:first-child,
html:not(.touch) #messagelist.listing.focus:not(.withselection) tbody tr.focused>td.selection+td,
html:not(.touch) #messagelist.listing tbody tr.selected>td:first-child,
html:not(.touch) #messagelist.listing:not(.withselection) tbody tr.selected>td.selection+td{
	border-left:2px solid var(--bbs-accent)!important;
}

/* Cards, dialogs, popovers */
.ui-widget,
.popover,
html.dark-mode .ui-widget,
html.dark-mode .popover{
	background:var(--bbs-surface);
	border-color:var(--bbs-border);
	box-shadow:var(--bbs-shadow);
	border-radius:calc(var(--bbs-radius) - 6px);
}

/* Confirmation/alert modals (jQuery UI dialog) */
.ui-widget-overlay{
	background-color:rgba(0,0,0,.70)!important;
}

.ui-dialog{
	border:1.5px solid var(--bbs-border)!important;
	border-radius:calc(var(--bbs-radius) - 10px)!important;
	overflow:hidden;
}

.ui-dialog .ui-dialog-titlebar{
	background:var(--bbs-surface2)!important;
	border-bottom:1px solid var(--bbs-border)!important;
	color:var(--bbs-text)!important;
	position:relative;
}

.ui-dialog .ui-dialog-titlebar:before{
	content:"";
	position:absolute;
	left:12px;
	top:50%;
	transform:translateY(-50%);
	width:26px;
	height:26px;
	background:url("../images/logo.png") center/contain no-repeat;
	filter:grayscale(1) brightness(0) invert(1);
	opacity:.95;
}

.ui-dialog .ui-dialog-title{
	color:var(--bbs-text)!important;
	padding-left:52px!important;
	font-weight:800!important;
}

.ui-dialog .ui-dialog-titlebar-close{
	color:var(--bbs-text)!important;
	border-radius:9999px!important;
}

.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus{
	background:rgba(255,255,255,.06)!important;
	outline:0!important;
}

.ui-dialog .ui-dialog-content{
	background:var(--bbs-surface)!important;
	color:var(--bbs-text)!important;
}

.ui-dialog .ui-dialog-buttonpane{
	background:var(--bbs-surface2)!important;
	border-top:1px solid var(--bbs-border)!important;
}

.popover .menu li a:not(.disabled):hover,
.popupmenu .listing li>a:not(.disabled):hover{
	background:rgba(255,152,0,.12)!important;
	color:var(--bbs-text)!important;
}

/* Forms */
.form-control,
html.dark-mode .form-control,
.custom-file-label,
html.dark-mode .custom-file-label{
	background:var(--bbs-surface2);
	border-color:var(--bbs-border);
	color:var(--bbs-text)!important;
}

.form-control::placeholder{
	color:rgba(249,249,251,.55)!important;
}

/* Force ALL inputs/selects/textareas to dark surface (fixes white fields in compose like To/Subject) */
#layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
#layout textarea,
#layout select{
	background:var(--bbs-surface2)!important;
	color:var(--bbs-text)!important;
	border:1px solid var(--bbs-border)!important;
}

#layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])::placeholder,
#layout textarea::placeholder{
	color:rgba(249,249,251,.55)!important;
}

#layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
#layout textarea:focus,
#layout select:focus{
	border-color:rgba(255,152,0,.55)!important;
	box-shadow:0 0 0 .2rem var(--bbs-accent-faded)!important;
	outline:0!important;
}

/* Recipient chips / multi-inputs (To/Cc/Bcc) */
.recipient-input,
.multi-input>.content{
	background:var(--bbs-surface2)!important;
	border-color:var(--bbs-border)!important;
}

.recipient-input.focus{
	border-color:rgba(255,152,0,.55)!important;
	box-shadow:0 0 0 .2rem var(--bbs-accent-faded)!important;
}

.recipient-input input{
	background:transparent!important;
	color:var(--bbs-text)!important;
}

.recipient-input li.recipient{
	background:rgba(0,0,0,.22)!important;
	border-color:rgba(255,255,255,.08)!important;
}

.recipient-input li.recipient .name{
	color:var(--bbs-text)!important;
}

.input-group-text,
html.dark-mode .input-group-text{
	background:rgba(35,38,47,.55);
	border-color:var(--bbs-border);
	color:#f9f9fb;
}

/* Login page */
body.task-login{
	background:linear-gradient(135deg,var(--bbs-bg-start) 0%,var(--bbs-bg-end) 100%)!important;
	overflow:auto!important;
}

body.task-login #layout{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0!important;
	position:relative;
	overflow:auto!important;
}

/* Disable column-as-card framing for login */
body.task-login #layout>div{
	border:0!important;
	box-shadow:none!important;
	overflow:visible!important;
	border-radius:0!important;
}

body.task-login #layout-content{
	width:100%;
	max-width:none;
	flex:0 0 auto!important;
	margin:0;
	padding:56px 20px!important;
	background:transparent!important;
	border:0!important;
	box-shadow:none!important;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:left!important;
	overflow:visible!important;
}

/* New login layout: split glass card */
body.task-login .bbs-login{
	width:min(980px, calc(100vw - 40px));
	min-height:420px;
	display:grid;
	grid-template-columns: 1.15fr 1fr;
	border-radius:var(--bbs-radius);
	overflow:hidden;
	border:1.5px solid rgba(255,255,255,.06);
	background:rgba(35,38,47,.66);
	backdrop-filter:blur(16px);
	box-shadow:var(--bbs-shadow);
	position:relative;
}

body.task-login .bbs-login:before{
	content:"";
	position:absolute;
	inset:-40%;
	background:
		radial-gradient(circle at 28% 38%, rgba(255,152,0,.18) 0%, rgba(255,152,0,0) 52%),
		radial-gradient(circle at 70% 62%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%);
	pointer-events:none;
}

body.task-login .bbs-login__brand,
body.task-login .bbs-login__panel{
	position:relative;
	z-index:1;
}

body.task-login .bbs-login__brand{
	padding:44px 42px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	background:
		linear-gradient(135deg, rgba(26,26,46,.55) 0%, rgba(22,33,62,.20) 100%),
		linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 48%);
	border-right:1px solid rgba(255,255,255,.06);
}

body.task-login .bbs-login__brand-inner{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
}

body.task-login #logo{
	position:static!important;
	top:auto!important;
	width:186px;
	height:186px;
	max-height:none;
	object-fit:contain;
	background:#fff;
	border-radius:9999px;
	padding:10px;
	box-shadow:0 0 32px rgba(255,152,0,.18);
	filter:drop-shadow(0 2px 18px rgba(255,152,0,.18));
}

body.task-login .bbs-login__title{
	color:var(--bbs-accent);
	font-weight:900;
	letter-spacing:.02em;
	font-size:2.1rem;
	line-height:1.1;
	text-shadow:0 2px 18px rgba(255,152,0,.22);
}

body.task-login .bbs-login__subtitle{
	margin-top:6px;
	color:rgba(249,249,251,.78);
	font-weight:600;
	letter-spacing:.02em;
	font-size:1.1rem;
	line-height:1.2;
}

body.task-login .bbs-login__panel{
	padding:44px 42px;
	display:flex;
	align-items:center;
}

body.task-login #login-form{
	position:static!important;
	top:auto!important;
	width:100%;
	max-width:none!important;
	margin:0;
}

body.task-login #login-form label{
	color:rgba(249,249,251,.88)!important;
	font-weight:650;
}

/* Fields */
body.task-login #login-form .form-control,
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="email"],
body.task-login #login-form input[type="password"]{
	box-sizing:border-box!important;
	background:rgba(0,0,0,.16)!important;
	border:1px solid rgba(255,255,255,.10)!important;
	color:var(--bbs-text)!important;
	border-radius:var(--bbs-radius-sm)!important;
	padding:.9rem 1rem!important;
	font-size:1.02rem!important;
	line-height:1.25!important;
	height:auto!important;
}

body.task-login #login-form .form-control:focus,
body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="email"]:focus,
body.task-login #login-form input[type="password"]:focus{
	border-color:rgba(255,152,0,.55)!important;
	box-shadow:0 0 0 .25rem var(--bbs-accent-faded)!important;
}

/* Input groups with icons */
body.task-login #login-form .input-group{
	gap:0!important;
	flex-wrap:nowrap;
	align-items:stretch;
	overflow:hidden;
	background:rgba(0,0,0,.16)!important;
	border:1px solid rgba(255,255,255,.10)!important;
	border-radius:var(--bbs-radius-sm)!important;
}

body.task-login #login-form .input-group-text,
body.task-login #login-form .input-group .icon{
	background:transparent!important;
	border:0!important;
	color:rgba(249,249,251,.78)!important;
	padding:.9rem .9rem!important;
	margin:0!important;
	display:flex;
	align-items:center;
	justify-content:center;
}

body.task-login #login-form .input-group .icon{
	min-width:3rem;
	text-decoration:none;
}

body.task-login #login-form .input-group .form-control{
	border:0!important;
	border-radius:0!important;
	background:transparent!important;
	box-shadow:none!important;
	height:auto!important;
}

body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-append{
	margin:0!important;
	display:flex;
	align-items:stretch;
}

body.task-login #login-form .input-group input[type="text"],
body.task-login #login-form .input-group input[type="email"],
body.task-login #login-form .input-group input[type="password"]{
	border:0!important;
	border-radius:0!important;
	background:transparent!important;
	box-shadow:none!important;
}

body.task-login #login-form .input-group input[type="text"]:focus,
body.task-login #login-form .input-group input[type="email"]:focus,
body.task-login #login-form .input-group input[type="password"]:focus{
	outline:0!important;
	box-shadow:none!important;
}

body.task-login #login-form .input-group:focus-within{
	border-color:rgba(255,152,0,.55)!important;
	box-shadow:0 0 0 .25rem var(--bbs-accent-faded)!important;
}

body.task-login #login-form .input-group:focus-within .input-group-text{
	color:var(--bbs-accent-light)!important;
}

/* Password field: slightly larger font (dots/text), keep size stable even when toggled to type=text */
body.task-login #login-form input[name="_pass"],
body.task-login #login-form input[type="password"]{
	font-size:1.12rem!important;
}

/* Show/hide password toggle (injected via /bbs-login.js) */
body.task-login #login-form .bbs-pw-toggle{
	appearance:none;
	-webkit-appearance:none;
	border:0!important;
	background:transparent!important;
	color:rgba(249,249,251,.78)!important;
	padding:.9rem .9rem!important;
	margin:0!important;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

body.task-login #login-form .bbs-pw-toggle:focus,
body.task-login #login-form .bbs-pw-toggle:focus-visible{
	outline:0!important;
	box-shadow:none!important;
}

body.task-login #login-form .bbs-pw-toggle:before{
	content:"\f06e";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	font-size:1.05rem;
	line-height:1;
}

body.task-login #login-form .bbs-pw-toggle.is-visible:before{
	content:"\f070";
}

body.task-login #login-form .input-group:focus-within .bbs-pw-toggle{
	color:var(--bbs-accent-light)!important;
}

/* Button */
body.task-login #login-form input[type="submit"],
body.task-login #login-form button.btn,
body.task-login #login-form a.btn{
	width:100%;
	border-radius:9999px!important;
	padding:.95rem 1.2rem!important;
	font-size:1.05rem!important;
	font-weight:850!important;
	letter-spacing:.03em;
	background:linear-gradient(90deg,var(--bbs-accent) 40%,#ffbc5e 100%)!important;
	border-color:transparent!important;
	color:#fff!important;
	box-shadow:0 12px 32px rgba(255,152,0,.22);
}

body.task-login #login-form input[type="submit"]:hover,
body.task-login #login-form button.btn:hover{
	background:linear-gradient(90deg,var(--bbs-accent) 40%,#ffbc5e 100%)!important;
	border-color:transparent!important;
	color:#fff!important;
	filter:brightness(1.03);
	transform:translateY(-1px);
	box-shadow:0 16px 40px rgba(255,152,0,.28);
}

body.task-login #login-form input[type="submit"]:focus,
body.task-login #login-form input[type="submit"]:focus-visible,
body.task-login #login-form button.btn:focus,
body.task-login #login-form button.btn:focus-visible{
	background:linear-gradient(90deg,var(--bbs-accent) 40%,#ffbc5e 100%)!important;
	border-color:transparent!important;
	color:#fff!important;
}

body.task-login #login-footer{
	margin-top:14px;
	color:rgba(249,249,251,.60);
}

body.task-login #login-footer a{
	color:rgba(249,249,251,.75);
}

body.task-login #login-footer a:hover{
	color:var(--bbs-accent-light);
}

/* Site-like copyright (login only) */
#bbs-site-footer{
	display:none;
}

body.task-login #bbs-site-footer,
body.task-error-login #bbs-site-footer{
	display:block;
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	padding:14px 18px;
	background:rgba(0,0,0,.28);
	border-top:1px solid rgba(255,255,255,.06);
	backdrop-filter:blur(16px);
	z-index:120;
}

#bbs-site-footer .bbs-site-footer__inner{
	width:min(1200px, calc(100vw - 36px));
	margin:0 auto;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:18px;
	color:rgba(249,249,251,.68);
	font-size:.92rem;
}

#bbs-site-footer .bbs-site-footer__line1{
	color:rgba(249,249,251,.86);
	font-weight:800;
	letter-spacing:.01em;
}

#bbs-site-footer .bbs-site-footer__line2{
	margin-top:2px;
	color:rgba(249,249,251,.55);
	font-size:.86rem;
}

#bbs-site-footer .bbs-site-footer__right{
	color:rgba(249,249,251,.50);
	white-space:nowrap;
}

@media screen and (max-width:560px){
	#bbs-site-footer .bbs-site-footer__inner{
		flex-direction:column;
		align-items:flex-start;
	}
	#bbs-site-footer .bbs-site-footer__right{
		white-space:normal;
	}
}

/* Responsive: stack */
@media screen and (max-width:768px){
	body.task-login{
		overflow:hidden!important;
	}

	body.task-login #layout{
		height:100svh;
		min-height:100vh;
		overflow:hidden!important;
	}

	/* Reserve space for the fixed footer so the card never overlaps it */
	body.task-login #layout-content{
		padding:18px 12px calc(12px + 72px)!important;
		height:100%;
		align-items:stretch;
		justify-content:center;
	}

	body.task-login .bbs-login{
		width:calc(100vw - 24px);
		grid-template-columns:1fr;
		min-height:0;
		max-height:calc(100svh - 24px - 72px);
	}
	body.task-login .bbs-login__brand{
		border-right:0;
		border-bottom:1px solid rgba(255,255,255,.06);
		align-items:center;
		justify-content:center;
		padding:18px 18px 12px;
	}
	body.task-login .bbs-login__panel{
		padding:14px 18px 18px;
		align-items:stretch;
	}

	body.task-login #logo{
		width:clamp(88px, 16svh, 110px);
		height:clamp(88px, 16svh, 110px);
		padding:8px;
	}

	body.task-login .bbs-login__title{
		font-size:clamp(1.35rem, 3.4svh, 1.6rem);
	}

	body.task-login .bbs-login__subtitle{
		font-size:.98rem;
	}

	body.task-login #login-footer{
		margin-top:10px;
		font-size:.92rem;
	}

	/* Make the fixed footer smaller on mobile */
	body.task-login #bbs-site-footer,
	body.task-error-login #bbs-site-footer{
		padding:10px 12px;
	}

	#bbs-site-footer .bbs-site-footer__inner{
		width:calc(100vw - 24px);
		gap:10px;
		font-size:.82rem;
	}

	#bbs-site-footer .bbs-site-footer__line2{
		font-size:.78rem;
	}
}

@media screen and (max-width:768px) and (max-height:700px){
	body.task-login .bbs-login__subtitle{
		display:none;
	}
}

@media screen and (max-width:768px) and (max-height:620px){
	/* On very small heights, hide the fixed footer to avoid overlap/cropping */
	body.task-login #bbs-site-footer,
	body.task-error-login #bbs-site-footer{
		display:none;
	}
	body.task-login #layout-content{
		padding-bottom:12px!important;
	}
	body.task-login .bbs-login{
		max-height:calc(100svh - 24px);
	}
}

/* Notifications / toasts */
#messagestack{
	position:fixed!important;
	top:18px!important;
	left:50%!important;
	right:auto!important;
	bottom:auto!important;
	transform:translateX(-50%);
	width:min(560px, calc(100vw - 24px));
	z-index:30050;
}

@media screen and (max-width:480px){
	#messagestack{
		top:0!important;
		left:0!important;
		transform:none!important;
		width:100%!important;
		padding:10px 10px 0 10px;
	}
}

#messagestack div{
	background:rgba(35,38,47,.86)!important;
	backdrop-filter:blur(14px);
	border:1.5px solid rgba(255,255,255,.06)!important;
	box-shadow:var(--bbs-shadow)!important;
	border-radius:calc(var(--bbs-radius) - 10px)!important;
	color:var(--bbs-text)!important;
	padding:.9rem 1rem!important;
}

#messagestack div.alert-info,
#messagestack div.information{
	border-left:4px solid var(--bbs-accent)!important;
}

#messagestack div.alert-warning,
#messagestack div.warning{
	border-left:4px solid #ffd452!important;
}

#messagestack div.alert-danger,
#messagestack div.error{
	border-left:4px solid #ff5552!important;
}

#messagestack div.alert-success,
#messagestack div.confirmation,
#messagestack div.success{
	border-left:4px solid #41b849!important;
}

/* Message view: blocked remote resources notice ("Z důvodu ochrany soukromí...") */
#message-objects .ui.alert.alert-warning,
#message-objects .ui.alert.alert-warning > span{
	color:var(--bbs-accent)!important;
}

#message-objects .ui.alert.alert-warning a:not(.btn){
	color:var(--bbs-accent)!important;
	text-decoration:underline;
}

#message-objects .ui.alert.alert-warning a:not(.btn):hover{
	color:var(--bbs-accent-light)!important;
}

#message-objects .ui.alert.alert-warning .btn,
#message-objects .ui.alert.alert-warning button{
	color:#fff!important;
}

/* Make light-mode consistent (this skin is intentionally dark-first) */
html:not(.dark-mode) body,
html:not(.dark-mode) #layout-content,
html:not(.dark-mode) #layout-list,
html:not(.dark-mode) #layout-sidebar{
	color:#f9f9fb;
}

/* Pin Logout to the very bottom of the left panel (desktop) */
@media screen and (min-width: 481px) {
	#layout-menu {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	#layout-menu > #taskmenu {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	#layout-menu > #taskmenu .special-buttons {
		margin-top: auto;
	}
}