/* ===================================================================
   Chronicle 7.4 - custom MyAAC theme
   Original layout/design for chronicle74.com (not a copy of any
   other server's theme/CSS).
   =================================================================== */

* { box-sizing: border-box; }

body {
	background: #060a16;
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #dbe2f0;
}

a { color: #f3cd74; text-decoration: none; font-weight: bold; }
a:hover { color: #ffe9b3; text-decoration: underline; }

h1, h2, h3, h4 { color: #f3e6c2; font-weight: bold; margin: 0 0 10px; }

hr { border: none; border-top: 1px solid rgba(243,205,116,0.25); margin: 10px 0; }

#page { width: 100%; margin: 0 auto; }

/* ---------------- Top utility bar ---------------- */
#topbar {
	background: #03050c;
	border-bottom: 2px solid #8a6a2a;
}
#topbar-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px;
}
#topbar-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #f3cd74;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 13px;
}
#topbar-badge { height: 26px; width: auto; }
#topbar-links a {
	color: #cdd7ee;
	font-weight: normal;
	margin-left: 18px;
	font-size: 12px;
}
#topbar-links a:hover { color: #f3cd74; }

/* ---------------- Hero ---------------- */
#hero {
	background: #0a1430 url('images/background.jpg') center top / cover no-repeat;
	border-bottom: 3px solid #8a6a2a;
	box-shadow: 0 6px 24px rgba(0,0,0,0.5) inset;
}
#hero-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 36px 16px;
	min-height: 200px;
}
#hero-wordmark { height: 190px; width: auto; max-width: 90%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.65)); }

/* ---------------- Shell: sidebar + content ---------------- */
#shell {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 16px 30px;
}

/* ---------------- Sidebar ---------------- */
#sidebar {
	width: 230px;
	flex: 0 0 230px;
	background: #0d1730;
	border: 1px solid #263a6b;
	border-radius: 8px;
	overflow: hidden;
}

#tabs { display: flex; flex-direction: column; }

#tabs .sidebar-icon,
#tabs .tab,
#tabs .tab-active {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	cursor: pointer;
	color: #c7d2ea;
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.nav-group { border-bottom: 1px solid #16213f; }
.nav-group:last-child { border-bottom: none; }

#tabs .icon { width: 18px; height: 18px; flex: 0 0 18px; color: #8a9bd0; }
#tabs .icon svg { width: 100%; height: 100%; display: block; }
#tabs em { font-style: normal; }

#tabs .tab:hover { background: #13204a; color: #f3e6c2; }

#tabs .tab-active {
	background: linear-gradient(90deg, rgba(138,106,42,0.35), transparent);
	color: #f3cd74;
	border-left: 3px solid #f3cd74;
	padding-left: 11px;
}
#tabs .tab-active .icon { color: #f3cd74; }

/* Submenus: fechados por padrao; a categoria com .open mostra os links */
#tabs .submenu {
	display: none;
	flex-direction: column;
	padding: 4px 0 10px 42px;
	background: #0a142c;
}
#tabs .nav-group.open .submenu { display: flex; }
#tabs .submenu a {
	display: block;
	padding: 5px 6px;
	font-size: 12px;
	font-weight: normal;
	color: #aebbdc;
	border-bottom: 1px solid #16213f;
}
#tabs .submenu a:last-child { border-bottom: none; }
#tabs .submenu a:hover { color: #f3cd74; text-decoration: none; }
#tabs .submenu a.current { color: #f3cd74; font-weight: bold; }
#tabs .submenu .separator { display: none; }
#tabs .sidebar-icon { user-select: none; }
#tabs .sidebar-icon:hover { background: #13204a; color: #f3e6c2; }
#tabs .nav-group.open > .sidebar-icon { color: #f3cd74; }
#tabs .caret {
	margin-left: auto;
	width: 7px; height: 7px;
	border-right: 2px solid #8a9bd0;
	border-bottom: 2px solid #8a9bd0;
	transform: rotate(45deg);
	margin-top: -3px;
	transition: transform .15s;
}
#tabs .nav-group.open .caret { transform: rotate(-135deg); margin-top: 3px; border-color: #f3cd74; }

/* ---------------- Coluna da direita ---------------- */
#rightbar {
	width: 240px;
	flex: 0 0 240px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.side-box {
	background: #0d1730;
	border: 1px solid #263a6b;
	border-radius: 8px;
	padding: 12px 14px;
}
.side-box h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #f3cd74;
	text-align: center;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #263a6b;
}
.side-box h4 small { color: #8a9bd0; text-transform: none; letter-spacing: 0; font-weight: normal; }
.side-box .status-line { font-weight: bold; margin: 0 0 4px; text-align: center; }
.side-box .status-online { color: #4caf50; }
.side-box .status-offline { color: #e05454; }
.side-big { text-align: center; margin: 0 0 4px; color: #dbe2f0; }
.side-big strong { color: #8fe0a0; font-size: 15px; }
.side-small { text-align: center; margin: 0; font-size: 11px; color: #8a9bd0; }
.side-list { list-style: none; margin: 0; padding: 0; counter-reset: side; }
.side-list li {
	counter-increment: side;
	position: relative;
	padding: 6px 0 6px 22px;
	border-bottom: 1px solid #16213f;
	font-size: 12px;
	line-height: 1.35;
}
.side-list li:last-child { border-bottom: none; }
.side-list li::before { content: counter(side); position: absolute; left: 0; top: 6px; color: #8a9bd0; font-weight: bold; }
.side-list li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-list li span { color: #8a9bd0; font-size: 11px; }
.side-list li em { float: right; font-style: normal; color: #8fe0a0; font-size: 11px; font-weight: bold; }
.side-more { display: block; text-align: center; font-size: 11px; margin-top: 8px; }

/* ---------------- Content ---------------- */
#content {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	background: #0d1730;
	border: 1px solid #263a6b;
	border-radius: 8px;
}

#content-head {
	padding: 10px 16px;
	background: #0a142c;
	border-bottom: 1px solid #263a6b;
	font-size: 12px;
	color: #8a9bd0;
}
#content-head a { color: #cdd7ee; }
#content-head .crumb-sep { margin: 0 4px; }

#content-body {
	padding: 16px;
	text-align: left;
}

#ContentHelper, .Content { color: #dbe2f0; }

/* ---------------- News ---------------- */
.NewsHeadline { margin-bottom: 14px; }
.NewsHeadlineBackground {
	position: relative;
	background: #0a142c !important;
	border: 1px solid #263a6b;
	border-left: 3px solid #8a6a2a;
	border-radius: 6px;
	padding: 10px 12px 10px 46px;
	min-height: 28px;
}
.NewsHeadlineIcon { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; }
.NewsHeadlineDate { display: inline; color: #8a9bd0; font-size: 12px; margin-right: 6px; }
.NewsHeadlineText { display: inline; color: #f3e6c2; font-weight: bold; }
.NewsHeadlineAuthor { font-size: 11px; color: #8a9bd0; margin-top: 4px; }

/* ---------------- Classic MyAAC box system (re-themed, no sprite borders) ---------------- */
.TableContainer {
	background: #0a142c;
	border: 1px solid #263a6b;
	border-radius: 6px;
	margin-bottom: 14px;
	overflow: hidden;
}
.TableContainer .CaptionContainer {
	background: #8a6a2a;
	padding: 8px 12px;
}
.TableContainer .CaptionContainer .Text { color: #fff; font-weight: bold; }
.TableContainer .CaptionContainer .CaptionInnerContainer,
.TableContainer .CaptionContainer .CaptionEdgeLeftTop,
.TableContainer .CaptionContainer .CaptionEdgeRightTop,
.TableContainer .CaptionContainer .CaptionEdgeLeftBottom,
.TableContainer .CaptionContainer .CaptionEdgeRightBottom,
.TableContainer .CaptionContainer .CaptionBorderTop,
.TableContainer .CaptionContainer .CaptionBorderBottom,
.TableContainer .CaptionContainer .CaptionVerticalLeft,
.TableContainer .CaptionContainer .CaptionVerticalRight { background: none !important; border: none !important; }

.TableContentContainer, .TableContent { background: transparent; }
.TableContent td { padding: 8px 12px; color: #dbe2f0; }
.TableContainer .Odd { background: #0d1730; }
.TableContainer .Even { background: #0a142c; }

.TableContainer .Table1 .InnerTableContainer,
.TableContainer .Table2 .InnerTableContainer,
.TableContainer .Table3 .InnerTableContainer,
.TableContainer .Table4 .InnerTableContainer,
.TableContainer .Table5 .InnerTableContainer,
.TableShadowContainerRightTop, .TableShadowRightTop, .TableShadowContainer,
.TableBottomShadow, .TableBottomLeftShadow, .TableBottomRightShadow {
	background: none !important;
	background-image: none !important;
	border: none !important;
}

.LabelV, .LabelV120, .LabelV150, .LabelV200 { color: #8a9bd0; font-weight: bold; padding: 4px 8px 4px 0; }
.LabelH td { color: #8a9bd0; font-weight: bold; }

.BigButton, .BigButtonOver {
	background: #13204a;
	border: 1px solid #3a4f8a;
	border-radius: 5px;
	text-align: center;
}
.ButtonText { color: #f3e6c2; font-weight: bold; }

.TopButtonContainer .TopButton {
	background: #8a6a2a;
	border-radius: 4px;
	color: #fff;
	padding: 4px 10px;
}

.SmallBox {
	background: #0a142c;
	border: 1px solid #263a6b;
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 12px;
}
.SmallBox .BoxFrameHorizontal, .SmallBox .BoxFrameVerticalLeft, .SmallBox .BoxFrameVerticalRight,
.SmallBox .BoxFrameEdgeLeftTop, .SmallBox .BoxFrameEdgeLeftBottom,
.SmallBox .BoxFrameEdgeRightTop, .SmallBox .BoxFrameEdgeRightBottom { background: none !important; }
.SmallBox .ErrorMessage { color: #ff8a8a; }
.SmallBox .Message { color: #8fe0a0; }

/* News ticker widget */
.Content #NewsTicker .BoxContent { background: #0a142c; border: 1px solid #263a6b; border-radius: 6px; padding: 8px 12px; margin-bottom: 14px; }
.Content #NewsTicker .NewsTickerDate { color: #8a9bd0; }
.Content #NewsTicker .NewsTickerText, .Content #NewsTicker .NewsTickerShortText, .Content #NewsTicker .NewsTickerFullText { color: #dbe2f0; }
.Content #NewsTicker .NewsTickerExtend { color: #f3cd74; }

.Content .BoxContent .Odd { background: #0d1730; }
.Content .BoxContent .Even { background: #0a142c; }

/* ---------------- Forms ---------------- */
input[type="text"], input[type="password"], input[type="email"], textarea, select {
	background: #0a142c;
	border: 1px solid #3a4f8a;
	border-radius: 4px;
	color: #f3e6c2;
	padding: 6px 8px;
	font-family: inherit;
	font-size: 12px;
}
input[type="submit"], input[type="button"], button {
	background: #8a6a2a;
	border: 1px solid #c79a3f;
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
	padding: 6px 16px;
	cursor: pointer;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover { background: #a1812f; }

.FormFieldError { color: #ff8a8a; }

/* ---------------- Footer ---------------- */
#copyrights {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px;
	text-align: center;
	color: #8a9bd0;
	font-size: 11px;
}
#copyrights a { color: #f3cd74; }
.template-switch-label { color: #c7d2ea; }

/* ---------------- Responsive ----------------
   Computador: sempre 3 colunas (menu | conteudo | coluna da direita).
   So em telas pequenas (celular) as colunas descem. */
@media (max-width: 860px) {
	#shell { flex-wrap: wrap; }
	#content { flex: 1 1 calc(100% - 250px); }
	#rightbar { width: 100%; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
	#rightbar .side-box { flex: 1 1 220px; }
}
@media (max-width: 640px) {
	#shell { flex-direction: column; }
	#sidebar, #content { width: 100%; flex: 1 1 auto; }
	#hero-inner { flex-direction: column; text-align: center; gap: 10px; padding: 16px; }
	#topbar-inner { flex-direction: column; gap: 6px; }
}