/* Gomo HMS brand overrides on top of the Otika/Stisla base theme. */
:root {
	--gomo-primary: #0f7173;
	--gomo-primary-dark: #0b5456;
	--gomo-accent: #e8871e;
}

.btn-primary {
	background-color: var(--gomo-primary) !important;
	border-color: var(--gomo-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--gomo-primary-dark) !important;
	border-color: var(--gomo-primary-dark) !important;
}
.btn-outline-primary {
	color: var(--gomo-primary) !important;
	border-color: var(--gomo-primary) !important;
}
.btn-outline-primary:hover {
	background-color: var(--gomo-primary) !important;
	color: #fff !important;
}

a { color: var(--gomo-primary); }
a:hover { color: var(--gomo-accent); }

/* The base theme leaves ~130px of empty space under the sticky navbar
   (.navbar-bg is only 70px tall) before page content even starts —
   tightened here so cards sit close to the top instead of scrolling the
   page to reach them. The redundant <h1> that used to live in
   .section-header was removed from layouts/main.php entirely (every page's
   own card-header already repeats the same title), so there's no longer a
   .section-header rule to pair this with. */
.main-content { padding-top: 85px; }

.sidebar-brand {
	background: var(--gomo-primary);
}
.sidebar-style-2 .sidebar-menu > li.active > a:before { background-color: var(--gomo-primary) !important; }
.sidebar-menu li.active a,
.sidebar-style-2 .sidebar-menu > li.active > a {
	background-color: var(--gomo-primary) !important;
	color: #fff !important;
}
.sidebar-menu li.active a i,
.sidebar-style-2 .sidebar-menu > li.active > a i {
	color: #fff !important;
}
.sidebar-menu li a:hover { color: var(--gomo-primary); }

.card-primary > .card-header,
.card-info > .card-header {
	background: linear-gradient(135deg, var(--gomo-primary) 0%, var(--gomo-primary-dark) 100%) !important;
	border-bottom: none !important;
	color: #fff !important;
}
.card-primary > .card-header h4,
.card-info > .card-header h4,
.card-primary > .card-header h3,
.card-info > .card-header h3 {
	color: #fff !important;
}
.card-primary > .card-header .card-header-action a,
.card-info > .card-header .card-header-action a {
	color: #fff !important;
	background: rgba(255, 255, 255, .18) !important;
	border: 1px solid rgba(255, 255, 255, .35) !important;
	border-radius: 4px;
	transition: background .2s;
}
.card-primary > .card-header .card-header-action a:hover,
.card-info > .card-header .card-header-action a:hover {
	background: rgba(255, 255, 255, .32) !important;
}

.badge.bg-primary { background-color: var(--gomo-primary) !important; }
.form-control:focus,
.form-select:focus {
	border-color: var(--gomo-primary);
	box-shadow: 0 0 0 .2rem rgba(15, 113, 115, .2);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
	background-color: var(--gomo-primary) !important;
	border-color: var(--gomo-primary) !important;
}

/* Profile-photo avatar sizing — a class, not an inline style, so it isn't
   silently discarded by this app's CSP (D29). patients/view.php still has an
   old inline-style copy of this same rule, flagged but not fixed (D29's
   documented scope boundary); this is the CSP-safe version for new work. */
.avatar-photo { width: 120px; height: 120px; object-fit: cover; }
.col-entitlement-days { width: 200px; }

/* A one-off inline style="max-width:...;margin:0 auto" on the O4 receipt card
   was silently discarded by this app's CSP (style-src-attr has no
   'unsafe-inline') — moved here as a real class instead of removed, since
   the constrained-width centered receipt is genuinely wanted. */
.receipt-card { max-width: 500px; margin: 0 auto; }

/* Same CSP reason as .receipt-card above — small presentational one-offs
   from P4's certificate view and P1's timeline that need to be real classes,
   not inline style attributes, to actually take effect under this app's CSP. */
.text-preserve-whitespace { white-space: pre-wrap; }
.certificate-signature-img { max-height: 80px; }
.certificate-signature-line { width: 200px; margin: 4px auto; }
.timeline-timestamp { min-width: 150px; }