/* phpBB3 Style Sheet
	--------------------------------------------------------------
	Style name:			reefAngelChildTheme
	Based on style:		prosilver (the default phpBB 3.3.x style)
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		Reef Angel
	--------------------------------------------------------------
*/

@import url("../../prosilver/theme/stylesheet.css");

:root {
	--ra-primary: #007ef6;
	--ra-primary-dark: #0069d0;
	--ra-primary-soft: #e8f3fc;
	--ra-toolbar: #e9eef0;
	--ra-success: #2dd36f;
	--ra-danger: #eb445a;
	--ra-warning: #ffc409;
	--ra-text: #1f1f21;
}

html, body {
	color: var(--ra-text);
	background-color: #fafafa;
}

h3 {
	color: var(--ra-primary-dark);
}

a { color: var(--ra-primary); }
a:hover { color: var(--ra-primary-dark); }

.wrap {
	background-color: #ffffff;
	border-color: #d7d7d7;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.headerbar {
	color: #FFFFFF;
}

.headerbar, .forumbg {
	background-color: var(--ra-primary);
	background-image: none;
}

.forabg {
	background-color: var(--ra-primary-dark);
	background-image: none;
}

.navbar {
	background-color: var(--ra-toolbar);
}

ul.forums {
	background-color: #f7fafc;
	background-image: none;
	filter: none;
}

.bg1 {
	background-color: #f4f8fb;
}

.bg2 {
	background-color: #eef3f7;
}

.page-body,
ul.topiclist,
ul.topiclist li.row,
ul.topiclist .list-inner,
dd.lastpost,
dd.posts,
dd.topics,
dd.views {
	color: #3d4654;
}

.icon.icon-gray,
.icon.icon-lightgray,
.icon.icon-bluegray,
a:hover .icon.icon-gray,
a:hover .icon.icon-lightgray,
a:hover .icon.icon-bluegray {
	color: #5a6573;
}

table.table1 td,
dl.details dd {
	color: #3d4654;
}

.headerbar {
	padding: 10px 14px;
	overflow: visible;
}

.site_logo {
	background-image: url("./images/raLogo.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	width: 130px;
	height: 56px;
}

.logo {
	float: none;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: auto;
	padding: 2px 8px 2px 2px;
}

.site-description {
	float: none;
	width: auto;
	flex: 1;
	min-width: 0;
}

.site-description h1 {
	margin-right: 0;
}

.headerbar .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
}

#site-description {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	text-align: left;
	flex: 1;
}

.ra-header-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

#site-description h1 {
	font-size: 2.25em;
	margin: 0;
	padding: 0;
}

#site-description p {
	font-size: 1.35em;
	margin: 0;
	padding: 0;
	opacity: 0.92;
}

.ra-header-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.ra-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
	cursor: pointer;
}

.ra-theme-toggle:hover {
	background: rgba(255, 255, 255, 0.28);
}

.ra-theme-toggle .icon {
	font-size: 16px;
	color: #ffffff;
}

.ra-cloud-status {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	margin: 0;
	padding: 8px 14px;
	border-radius: 999px;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #ffffff;
}

.ra-cloud-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ra-warning);
}

.ra-cloud-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.ra-cloud-label {
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.82);
}

.ra-cloud-value {
	font-size: 1.3em;
	font-weight: 700;
}

.ra-cloud-status[data-status="online"] .ra-cloud-dot {
	background: var(--ra-success);
	box-shadow: 0 0 0 3px rgba(45, 211, 111, 0.28);
}

.ra-cloud-status[data-status="offline"] .ra-cloud-dot {
	background: var(--ra-danger);
	box-shadow: 0 0 0 3px rgba(235, 68, 90, 0.28);
}

.ra-cloud-status[data-status="checking"] .ra-cloud-dot,
.ra-cloud-status[data-status="unknown"] .ra-cloud-dot {
	background: var(--ra-warning);
	box-shadow: 0 0 0 3px rgba(255, 196, 9, 0.28);
}

.ra-cloud-status[data-status="online"] .ra-cloud-value {
	color: #d7ffe8;
}

.ra-cloud-status[data-status="offline"] .ra-cloud-value {
	color: #ffd6dc;
}

.upper-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px;
}

#search-box {
	margin-left: auto;
}

.my-custom-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 0 4px;
	list-style: none;
	margin: 8px 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.my-custom-links li {
	margin: 0;
}

.my-custom-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	background: #ffffff;
	border: 1px solid #d7d7d7;
	color: var(--ra-text);
}

.my-custom-links a:hover {
	background: var(--ra-primary-soft);
	border-color: var(--ra-primary);
	color: var(--ra-primary-dark);
}

.my-custom-links img {
	width: 18px;
	height: 18px;
}

@media (max-width: 700px) {
	.headerbar .inner {
		min-height: 0;
		gap: 8px;
	}

	.logo {
		display: none;
	}

	#site-description h1 {
		font-size: 1.45em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#site-description p {
		display: none;
	}

	.ra-cloud-status {
		margin: 0;
		padding: 6px 10px;
	}

	.ra-theme-toggle {
		width: 32px;
		height: 32px;
	}

	.ra-cloud-label {
		display: none;
	}

	.ra-cloud-value {
		font-size: 1.15em;
	}

	.my-custom-links {
		margin-top: 6px;
		padding-top: 8px;
	}

	.my-custom-links a {
		padding: 5px 10px;
		font-size: 1.1em;
	}
}

/* Match Uapp dark palette (html.ion-palette-dark / localStorage darkThemeEnabled) */
html.ra-dark {
	--ra-primary: #007ef6;
	--ra-primary-dark: #0069d0;
	--ra-primary-soft: #24364a;
	--ra-toolbar: #1e1e1e;
	--ra-text: #ffffff;
}

html.ra-dark,
html.ra-dark body {
	color: #ffffff;
	background-color: #121212;
}

html.ra-dark h2,
html.ra-dark h3 {
	color: #ffffff;
}

html.ra-dark a {
	color: #007ef6;
}

html.ra-dark a:hover {
	color: #4da3ff;
}

html.ra-dark .headerbar,
html.ra-dark .forumbg,
html.ra-dark .forabg {
	background-color: #007ef6;
	background-image: none;
}

html.ra-dark ul.topiclist li.header dt,
html.ra-dark ul.topiclist li.header dd,
html.ra-dark .forumbg .header a,
html.ra-dark .forabg .header a,
html.ra-dark th {
	color: #ffffff;
}

html.ra-dark .wrap {
	background-color: #1a1a1a;
	border-color: #333333;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
	padding: 10px;
}

html.ra-dark .navbar,
html.ra-dark .panel,
html.ra-dark .post,
html.ra-dark .cp-mini,
html.ra-dark .headerbar,
html.ra-dark .rules,
html.ra-dark .notice {
	border-radius: 12px;
	border: 1px solid #3a3a3a;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

html.ra-dark .navbar,
html.ra-dark .panel,
html.ra-dark .post,
html.ra-dark .cp-mini {
	background-color: #252525;
	color: #ffffff;
}

html.ra-dark .forabg,
html.ra-dark .forumbg {
	border-radius: 7px;
	border: 1px solid #3a3a3a;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

html.ra-dark ul.forums {
	background-color: #2a2a2a;
	background-image: none;
	border-radius: 0;
}

html.ra-dark .bg1,
html.ra-dark .bg3 {
	background-color: #2c2c2c;
	background-image: none;
}

html.ra-dark .bg2 {
	background-color: #242424;
}

html.ra-dark .page-body,
html.ra-dark ul.topiclist,
html.ra-dark ul.topiclist li.row,
html.ra-dark ul.topiclist .list-inner,
html.ra-dark dd.lastpost,
html.ra-dark dd.posts,
html.ra-dark dd.topics,
html.ra-dark dd.views,
html.ra-dark table.table1 td,
html.ra-dark dl.details dd,
html.ra-dark .content,
html.ra-dark .signature,
html.ra-dark .postprofile,
html.ra-dark .copyright,
html.ra-dark .footer-row {
	color: #cfd8dc;
}

html.ra-dark ul.topiclist li.row {
	border-color: #404040;
}

html.ra-dark ul.topiclist li.row:hover {
	background-color: #2a2a2a;
}

html.ra-dark .icon.icon-gray,
html.ra-dark .icon.icon-lightgray,
html.ra-dark .icon.icon-bluegray,
html.ra-dark a:hover .icon.icon-gray,
html.ra-dark a:hover .icon.icon-lightgray,
html.ra-dark a:hover .icon.icon-bluegray,
html.ra-dark .navbar .icon {
	color: #b0bec5;
}

html.ra-dark .navbar a {
	color: #e0e0e0;
}

html.ra-dark .my-custom-links {
	border-top-color: #404040;
}

html.ra-dark .my-custom-links a {
	background: #2e2e2e;
	border-color: #404040;
	color: #ffffff;
}

html.ra-dark .my-custom-links a:hover {
	background: #24364a;
	border-color: #007ef6;
	color: #4da3ff;
}

html.ra-dark .inputbox,
html.ra-dark .search-box .inputbox {
	background-color: #2e2e2e;
	border-color: #404040;
	color: #ffffff;
	box-shadow: none;
}

html.ra-dark .inputbox::placeholder,
html.ra-dark .search-box .inputbox::placeholder {
	color: #b0bec5;
	opacity: 1;
}

html.ra-dark .inputbox::-webkit-input-placeholder,
html.ra-dark .search-box .inputbox::-webkit-input-placeholder {
	color: #b0bec5;
}

html.ra-dark .inputbox:-moz-placeholder,
html.ra-dark .search-box .inputbox:-moz-placeholder {
	color: #b0bec5;
	opacity: 1;
}

html.ra-dark .inputbox::-moz-placeholder,
html.ra-dark .search-box .inputbox::-moz-placeholder {
	color: #b0bec5;
	opacity: 1;
}

html.ra-dark .button {
	background: #2e2e2e;
	background-image: none;
	border-color: #404040;
	color: #e0e0e0;
	box-shadow: none;
	-webkit-box-shadow: none;
	text-shadow: none;
	filter: none;
}

html.ra-dark .button:hover,
html.ra-dark .button:focus,
html.ra-dark .button:active,
html.ra-dark .button-secondary:hover,
html.ra-dark .button-secondary:focus,
html.ra-dark .button:hover .icon,
html.ra-dark .button:focus .icon {
	background: #3a3a3a;
	background-image: none;
	border-color: #007ef6;
	color: #ffffff;
	text-shadow: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	filter: none;
}

html.ra-dark a.button1,
html.ra-dark input.button1,
html.ra-dark a.button2,
html.ra-dark input.button2,
html.ra-dark input.button3,
html.ra-dark a.button1:hover,
html.ra-dark input.button1:hover,
html.ra-dark a.button2:hover,
html.ra-dark input.button2:hover,
html.ra-dark input.button3:hover,
html.ra-dark a.button1:focus,
html.ra-dark input.button1:focus,
html.ra-dark a.button2:focus,
html.ra-dark input.button2:focus,
html.ra-dark input.button3:focus {
	background: #2e2e2e;
	background-image: none;
	border-color: #404040;
	color: #e8eaed;
	text-shadow: none;
	box-shadow: none;
	filter: none;
}

html.ra-dark a.button1:hover,
html.ra-dark input.button1:hover,
html.ra-dark a.button2:hover,
html.ra-dark input.button2:hover,
html.ra-dark input.button3:hover {
	background: #3a3a3a;
	border-color: #007ef6;
	color: #ffffff;
}

html.ra-dark .postlink:hover,
html.ra-dark .postlink:focus {
	background-color: #24364a;
	color: #4da3ff;
	border-bottom-color: #007ef6;
	text-shadow: none;
}

html.ra-dark table.table1 tbody tr:hover,
html.ra-dark table.table1 tbody tr.hover {
	background-color: #2a2a2a;
	color: #e8eaed;
}

html.ra-dark a:hover,
html.ra-dark a:focus,
html.ra-dark a:active {
	text-shadow: none;
}

html.ra-dark .contact-icons a:hover {
	background-color: #2a2a2a;
}

html.ra-dark .dropdown-contents,
html.ra-dark .dropdown-extended .header,
html.ra-dark .dropdown-extended .footer {
	background: #252525;
	background-image: none;
	border-color: #404040;
	color: #e8eaed;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
	text-shadow: none;
	filter: none;
}

html.ra-dark .dropdown .pointer {
	border-color: #404040 transparent;
}

html.ra-dark .dropdown .pointer-inner,
html.ra-dark .dropdown-extended .pointer-inner {
	border-color: #252525 transparent;
}

html.ra-dark .dropdown-extended ul li {
	border-top-color: #404040;
}

html.ra-dark .dropdown-extended ul li:hover {
	background-color: #2e2e2e;
	color: #e8eaed;
}

html.ra-dark .dropdown li,
html.ra-dark .dropdown li.separator {
	border-color: #404040;
}

html.ra-dark .dropdown a,
html.ra-dark .notification_list p,
html.ra-dark .notification_list a,
html.ra-dark .notification_list strong {
	color: #e8eaed;
	text-shadow: none;
}

html.ra-dark .dropdown a:hover,
html.ra-dark .notification_list li:hover,
html.ra-dark .notification_list li:hover a {
	background: #2e2e2e;
	color: #ffffff;
	text-shadow: none;
}

html.ra-dark .notification_list p.notification-time {
	color: #b0bec5;
}

html.ra-dark .dropdown-extended a.mark_read {
	background-color: #3a3a3a;
	color: #e8eaed;
}

html.ra-dark .rules,
html.ra-dark .notice {
	background-color: #3a2a2a;
	color: #ffcdd2;
}

html.ra-dark code,
html.ra-dark .codebox,
html.ra-dark blockquote {
	background-color: #2e2e2e;
	border-color: #404040;
	color: #e0e0e0;
}

html.ra-dark .pagination li a,
html.ra-dark .pagination li span {
	background: #2e2e2e;
	border-color: #404040;
	color: #e0e0e0;
}

html.ra-dark hr {
	border-color: #404040;
}

html.ra-dark label,
html.ra-dark dd label,
html.ra-dark dt,
html.ra-dark dt label,
html.ra-dark fieldset dl dt,
html.ra-dark fieldset dl dd,
html.ra-dark fieldset dl:hover dt label,
html.ra-dark dl.details dt,
html.ra-dark dl.details dd {
	color: #e8eaed;
}

html.ra-dark .tabs .tab > a,
html.ra-dark .minitabs .tab > a {
	background: #2e2e2e;
	background-image: none;
	color: #cfd8dc;
}

html.ra-dark .tabs .tab > a:hover,
html.ra-dark .minitabs .tab > a:hover {
	background: #3a3a3a;
	color: #ffffff;
}

html.ra-dark .tabs .activetab > a,
html.ra-dark .tabs .activetab > a:hover,
html.ra-dark .minitabs .activetab > a,
html.ra-dark .minitabs .activetab > a:hover {
	background: #1e1e1e;
	background-image: none;
	color: #ffffff;
}

html.ra-dark .navigation a,
html.ra-dark .rtl .navigation a,
html.ra-dark #navigation a,
html.ra-dark .rtl #navigation a {
	background: #2e2e2e;
	background-image: none;
	color: #e8eaed;
	filter: none;
}

html.ra-dark .navigation a:hover {
	background: #3a3a3a;
	color: #ffffff;
}

html.ra-dark .navigation .active-subsection a,
html.ra-dark .navigation .active-subsection a:hover {
	background: #007ef6;
	color: #ffffff;
}

html.ra-dark .cp-main .pm,
html.ra-dark .cp-main .pm-message {
	background-color: #1e1e1e;
	border-color: #404040;
	color: #e8eaed;
}

html.ra-dark .panel-container table.table1 thead th,
html.ra-dark .panel-container .panel li.header dd,
html.ra-dark .panel-container .panel li.header dt {
	color: #ffffff;
	border-bottom-color: #6b7280;
}

html.ra-dark .postbody,
html.ra-dark .postbody .author,
html.ra-dark p.author,
html.ra-dark p.author strong,
html.ra-dark .postprofile,
html.ra-dark .postprofile strong,
html.ra-dark .postprofile dt,
html.ra-dark .postprofile dd,
html.ra-dark .pm .postprofile {
	color: #e8eaed;
}

@media (max-width: 700px) {
	html.ra-dark .wrap {
		border-radius: 0;
		box-shadow: none;
		border: none;
		padding: 0;
	}

	html.ra-dark .navbar,
	html.ra-dark .panel,
	html.ra-dark .post,
	html.ra-dark .cp-mini,
	html.ra-dark .forabg,
	html.ra-dark .forumbg,
	html.ra-dark .headerbar,
	html.ra-dark .rules,
	html.ra-dark .notice,
	html.ra-dark ul.forums {
		border-radius: 0;
		box-shadow: none;
	}
}