/*
 * Kolibri [Dev] — development child of the "Kolibri" style.
 * Inherits everything from Kolibri. Add experimental overrides BELOW the import
 * (they win over Kolibri). Once happy, move them into the Kolibri style.
 */
@import url("../../kolibri/theme/stylesheet.css");

/* ===== Kolibri [Dev] experimental overrides start here ===== */

:root {
	--kolibri-grey:   #454545;
	--kolibri-blue:   #0073DA;
	--kolibri-blue-d: #0052A7;
	--kolibri-green:  #55A724;
	--kolibri-red:    #FF1C16;
	--kolibri-orange: #FF7C00;
	--kolibri-yellow: #7887A6 !important;
}


/* Forum / topic read-unread icons -> KolibriOS icon #86 (notebook).
   ONE icon, two variants of the bookmark strap (rest stays colourful):
   read = grey strap (forum-read.png), unread = red strap (forum-unread.png).
   Reuses custom-kos background size(32px)/position(16px); pixel-art kept crisp. */
.topic_read, .topic_read_hot, .forum_read, .sticky_read, .sticky_read_locked, .topic_read_locked, .forum_read_subforum {
	background-image: url("images/forum-read.png") !important;
	image-rendering: pixelated;
}
.topic_unread, .topic_unread_hot, .forum_unread, .forum_unread_subforum, .sticky_unread, .sticky_unread_locked, .topic_unread_locked {
	background-image: url("images/forum-unread.png") !important;
	image-rendering: pixelated;
}

.breadcrumb-bar {
	/* KolibriOS button look: per-side 1px frame + inner 1px lines + gradient */
	border: 1px solid !important;
	border-color: #4B5262 #3C4353 #2C3444 #3C4353 !important;   /* top right bottom left */
	background: linear-gradient(to bottom, #96A5C4, #606F8E) !important;
	box-shadow: inset 0 1px 0 #CBD2E2, inset 0 -1px 0 #424E66 !important;
}

.breadcrumb-bar {
	padding: 0.25rem 0.5rem !important;
}

.breadcrumb-bar * {
	font-size: 0.75rem !important;
	padding: 0 !important;
	padding-right: 0.25rem !important;
}
/* Navbar: KolibriOS 16px icons. Spacing comes from the markup ( ):
   three between items, one between icon and label. So NO flex/gap here. */
.kolibri-ext-links a {
	white-space: nowrap;       /* keep icon + label on one line */
}
.kolibri-ext-links .nav-ico {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -2px;                  /* nudge up to the text's optical centre */
	width: 16px;
	height: 16px;
	font-size: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
}
.kolibri-ext-links .ico-gitea   { background-image: url("images/nav/gitea.png"); }
.kolibri-ext-links .ico-wiki    { background-image: url("images/nav/wiki.png"); }
.kolibri-ext-links .ico-asmx    { background-image: url("images/nav/asmxygen.png"); }
.kolibri-ext-links .ico-builds  { background-image: url("images/nav/builds.png"); }
.kolibri-ext-links .ico-status  { background-image: url("images/nav/status.png"); }
.kolibri-ext-links .ico-archive { background-image: url("images/nav/archive.png"); }
.kolibri-ext-links .ico-ftp     { background-image: url("images/nav/ftp.png"); }

/* --- Dark header text (header background is the Shkvorka title gradient, set below) --- */
#page-header,
#page-header .nav-link,
#page-header a:not(.btn):not(.dropdown-item) {
	color: #333333 !important;
	text-shadow: none !important;
}
#page-header .nav-link:hover,
#page-header .nav-link:focus,
#page-header a:not(.btn):not(.dropdown-item):hover,
#page-header a:not(.btn):not(.dropdown-item):focus {
	color: #000000 !important;
}

body {
	background-color: #DDD7CF !important;
}

.breadcrumb-bar .breadcrumb-item a {
	color: #FEFEFE !important;
}

/* Forum-row topic/post counters: emoji + count + label (KolibriOS-flavoured) */
.topics .kos-count {
	white-space: nowrap;
	font-size: 0.75rem;
	line-height: 1.25rem;
	color: #454545;
}

/* Language subforums (English #23 / Spanish #50): national flag before the name */
.forum-flag {
	width: 16px;
	height: 11px;
	vertical-align: middle;
	position: relative;
	top: -1px;
	image-rendering: pixelated;
}

/* Subforum (topic) badges -> KolibriOS gradient button, syscall-8 algorithm.
   Base here = #DDD7CF (the Dev page background), so the buttons grow out of it:
     border  = base/2            (#6E6B67, sides)         top = (base+Δ)/2 = #7E7B77
     body    = base+Δ -> base-Δ  (#FDF7EF -> #BDB7AF)
     highlight (top)  = base/2 | #808080   = #FEFBF7
     shadow line (bot)= body_end * 3/4      = #8D8983      bottom border = #5E5B57
   Black label, like the real KolibriOS buttons. */
a.subforum {
	border: 1px solid !important;
	border-color: #7E7B77 #6E6B67 #5E5B57 #6E6B67 !important;   /* top right bottom left */
	background: linear-gradient(to bottom, #FDF7EF, #BDB7AF) !important;
	box-shadow: inset 0 1px 0 #FEFBF7, inset 0 -1px 0 #8D8983 !important;
	color: #000 !important;
	transition: none !important;
	font-size: 0.75rem !important;
}
a.subforum:hover {
	background: linear-gradient(to bottom, #FFFFFF, #CDC7BF) !important;   /* base lightened a touch */
}
a.subforum:active {
	background: linear-gradient(to bottom, #BDB7AF, #FDF7EF) !important;   /* pressed: bevel inverted */
	box-shadow: inset 0 1px 0 #8D8983, inset 0 -1px 0 #FEFBF7 !important;
}
/* drop the blue/red file glyph inside the badge — keep just the label */
a.subforum .icon {
	display: none !important;
}

/* drop the round translucent disc behind the inbox / notification buttons */
.header-nav {
	background-color: transparent !important;
	border-radius: 0 !important;
}

/* Even spacing between the navbar action buttons (inbox / bell / profile):
   kill Bootstrap's per-item me-1 / mx-1 and rely on a single gap. */
#page-header ul.navbar.flex-nowrap {
	gap: 0.5rem !important;
	align-items: center;
}
#page-header ul.navbar.flex-nowrap > li,
#page-header ul.navbar.flex-nowrap .nav-link {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Navbar action icons as 18x16 KolibriOS images (menu / inbox / notify / profile).
   High-specificity + max-* so nothing in the cascade can stretch them. */
#page-header img.nav-img {
	width: 18px !important;
	height: 16px !important;
	min-width: 0 !important;
	max-width: 18px !important;
	max-height: 16px !important;
	object-fit: contain;
	display: inline-block;
	vertical-align: middle;
	border-radius: 0 !important;
	filter: none !important;
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
}

/* Post action buttons (quote / report / thanks / edit / delete) -> KolibriOS blue
   button, identical to the breadcrumb-bar. White glyphs. Square shape kept from Kolibri. */
ul.post-buttons li a.btn.btn-secondary {
	border: 1px solid !important;
	border-color: #4B5262 #3C4353 #2C3444 #3C4353 !important;   /* top right bottom left */
	background: linear-gradient(to bottom, #96A5C4, #606F8E) !important;
	box-shadow: inset 0 1px 0 #CBD2E2, inset 0 -1px 0 #424E66 !important;
	color: #FFFFFF !important;
}
ul.post-buttons li a.btn.btn-secondary i,
ul.post-buttons li a.btn.btn-secondary svg {
	color: #FFFFFF !important;
}
ul.post-buttons li a.btn.btn-secondary:hover {
	background: linear-gradient(to bottom, #A6B5D4, #7080A0) !important;
	color: #FFFFFF !important;
}
ul.post-buttons li a.btn.btn-secondary:active {
	background: linear-gradient(to bottom, #606F8E, #96A5C4) !important;   /* pressed: bevel inverted */
	box-shadow: inset 0 1px 0 #424E66, inset 0 -1px 0 #CBD2E2 !important;
}

/* "Post Reply" button (top & bottom of a topic) -> KolibriOS blue button,
   white label + white icon. Matched by href so other btn-primary stay untouched. */
a.btn.btn-primary[href*="mode=reply"] {
	border: 1px solid !important;
	border-color: #4B5262 #3C4353 #2C3444 #3C4353 !important;   /* top right bottom left */
	background: linear-gradient(to bottom, #96A5C4, #606F8E) !important;
	box-shadow: inset 0 1px 0 #CBD2E2, inset 0 -1px 0 #424E66 !important;
	color: #FFFFFF !important;
	text-shadow: none !important;
}
a.btn.btn-primary[href*="mode=reply"]:hover {
	background: linear-gradient(to bottom, #A6B5D4, #7080A0) !important;
	color: #FFFFFF !important;
}
a.btn.btn-primary[href*="mode=reply"]:active {
	background: linear-gradient(to bottom, #606F8E, #96A5C4) !important;   /* pressed: bevel inverted */
	box-shadow: inset 0 1px 0 #424E66, inset 0 -1px 0 #CBD2E2 !important;
}

/* Topic toolbar dropdown buttons (wrench "tools" / sort / jump-to) -> KolibriOS GREY
   button (base #DDD7CF), same family as the subforum badges. Black glyph + caret. */
a.btn.btn-secondary.dropdown-toggle {
	border: 1px solid !important;
	border-color: #7E7B77 #6E6B67 #5E5B57 #6E6B67 !important;   /* top right bottom left */
	background: linear-gradient(to bottom, #FDF7EF, #BDB7AF) !important;
	box-shadow: inset 0 1px 0 #FEFBF7, inset 0 -1px 0 #8D8983 !important;
	color: #000 !important;
	text-shadow: none !important;
}
a.btn.btn-secondary.dropdown-toggle:hover {
	background: linear-gradient(to bottom, #FFFFFF, #CDC7BF) !important;
	color: #000 !important;
}
a.btn.btn-secondary.dropdown-toggle:active,
a.btn.btn-secondary.dropdown-toggle.show,
a.btn.btn-secondary.dropdown-toggle[aria-expanded="true"] {
	background: linear-gradient(to bottom, #BDB7AF, #FDF7EF) !important;   /* pressed / open */
	box-shadow: inset 0 1px 0 #8D8983, inset 0 -1px 0 #FEFBF7 !important;
}

/* Equal height for ALL topic action-bar buttons (reply + tool dropdowns).
   The FontAwesome .icon is font-size:14px/line-height:1, while text buttons use 1.5,
   so icon-only buttons came out shorter. Flex-center them to one min-height. */
.action-bar .navbar .btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem;
	height: 2rem !important;
}

/* Navbar background = KolibriOS "Shkvorka" window-title bar (skins/Leency/Shkvorka,
   center1.bmp 1x24 gradient). Bright top edge #FBFBFB, light->grey fill #E7E7E7->#C4C4C4,
   dark frame line top #646464 & bottom #787878. Drop shadow replaced by the bottom line. */
#page-header {
	background: linear-gradient(to bottom, #FBFBFB 0, #E7E7E7 1px, #C4C4C4 100%) !important;
	box-shadow: none !important;
	border-bottom: 1px solid #787878 !important;
}

/* Vertically centre the navbar icon buttons. Kolibri keeps padding-top:0.25rem on
   .quick-links / .header-nav (aspect-ratio:1/1), which shoved the icons downward.
   Flex-centre their contents and zero the asymmetric vertical padding. */
#page-header a.quick-links,
#page-header a.header-nav,
#page-header li#username_logged_in > a.nav-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	vertical-align: middle !important;   /* inline-flex defaults to baseline -> menu/profile sat too high */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

div.kolibri-subforums {
	padding-right: 256px;
}