/* Small additions on top of the DreamsPOS theme for the public-facing pages,
   which don't use the admin sidebar/topbar chrome. */

body.public-page {
	background: #f8f9fa;
}

.public-main {
	padding: 2.5rem 0 4rem;
}

.public-main .container {
	max-width: 760px;
}

.public-card {
	background: #fff;
	border: 1px solid #e7e7e7;
	border-radius: 12px;
	padding: 1.75rem;
}

/* The vendor chat component is built for a full-height 3-pane admin layout
   (vh-based scroll panes, an absolutely-positioned footer). Our ticket
   threads are short and sit inside a normal-flow card, so drop that back
   to plain block layout instead of fighting the viewport-relative sizing. */
.chat-wrapper {
	display: block;
	margin-bottom: 0;
}
.chat-wrapper .chat.chat-messages {
	width: 100%;
	height: auto;
	display: block;
}
/* Vendor CSS fixed-positions .chat off-screen below the 992px breakpoint,
   for a "slide in over the contact list on tap" pattern - irrelevant here
   since there's no contact list, and it was hiding the whole thread. */
.chat-wrapper .chat {
	position: static !important;
	visibility: visible !important;
	transform: none !important;
	height: auto !important;
	width: 100% !important;
	margin: 0 !important;
}
.chat-wrapper .chat .chat-body,
.chat-wrapper .chat.chat-messages .slimscroll,
.chat-wrapper .chat.chat-messages .slimScrollDiv {
	height: auto !important;
	max-height: 60vh;
	overflow-y: auto;
}
.chat-wrapper .chat .chat-footer {
	position: static;
}
.chat-wrapper .chat .chat-footer .footer-form {
	position: static;
	border-radius: 0;
}

/* Serafimov Group logo, standing in for the DreamsPOS logo asset */
.brand-logo-img {
	height: 34px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}
.brand-logo-img-login {
	height: 46px;
	max-width: 320px;
}
/* Collapsed sidebar rail: the full wordmark doesn't fit a ~36px square, so
   crop to its left edge (the icon glyph) instead of squeezing the whole logo. */
.brand-logo-img-small {
	width: 36px;
	height: 36px;
	object-fit: cover;
	object-position: left center;
	border-radius: 6px;
}

/* The theme only defines .avatar-title sizing inside its .main-chat-blk
   scope; we use plain initials avatars elsewhere too, so size it generically. */
.avatar-title {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Vendor demo chrome we don't use: the theme customizer toggle/panel and a
   stray fixed-position contact widget from the full admin sidebar markup. */
.toggle-theme,
#theme-setting,
.sidebar-contact {
	display: none !important;
}

/* Brand colors, sampled from the Serafimov Group logo (icon ribbon blue and
   navy). The vendor theme hardcodes its DreamsPOS orange directly into
   .btn-primary/.bg-primary/sidebar-active rules rather than driving them
   from a CSS variable, so those specific rules are overridden here instead
   of touching the vendor stylesheet. */
:root {
	--brand-primary: #006da1;
	--brand-secondary: #2d445d;
	--brand-primary-tint: #eaf4f8;
}

.btn-primary,
.btn.btn-primary {
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
	box-shadow: 0 4px 20px rgba(0, 109, 161, 0.15);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
	background-color: var(--brand-secondary) !important;
	border-color: var(--brand-secondary) !important;
	box-shadow: 0 3px 10px rgba(45, 68, 93, 0.5);
	color: #fff !important;
}

.bg-primary {
	background-color: var(--brand-primary) !important;
}

.sidebar-menu li a.active,
.sidebar-menu .subdrop,
.sidebar-menu li.submenu ul li a.active {
	color: var(--brand-primary) !important;
	background-color: var(--brand-primary-tint) !important;
}
.sidebar-menu li a.active i,
.sidebar-menu .subdrop i {
	color: var(--brand-primary) !important;
}

#mobile_btn .bar-icon span {
	background-color: var(--brand-primary) !important;
}

.table-responsive::-webkit-scrollbar-thumb {
	background-color: var(--brand-primary) !important;
}