/* ==========================================================================
   RivoRi Risk & Insurance — brand theme
   Loaded AFTER sb-admin-2.css / main.css so it re-skins the SB Admin 2
   palette without touching the vendor stylesheet.
   ========================================================================== */

:root {
	--rv-navy: #081933;
	--rv-navy-600: #12294f;
	--rv-navy-400: #1b3a6b;
	--rv-navy-200: #dce3ee;
	/* Sampled from the logo artwork, not eyeballed: the wordmark's "ORI"
	   and the RISK & INSURANCE line are #0c4c70, the slash is #c9a46b. */
	--rv-blue: #0c4c70;
	--rv-blue-dark: #093a56;
	--rv-gold: #c9a46b;
	--rv-gold-dark: #a8854f;
	--rv-gold-light: #dcc08f;
	--rv-gold-tint: #f6f0e3;
	--rv-grey: #f2f3f5;
	--rv-border: #e2e5ea;
	--rv-text: #333333;
	--rv-muted: #6b7280;
}

body {
	color: var(--rv-text);
	background-color: var(--rv-grey);
}

/* --- Brand / topbar ------------------------------------------------------ */

.navbar.topbar {
	border-bottom: 3px solid var(--rv-gold);
}

.sidebar-brand {
	padding: 0.75rem 1rem !important;
	height: auto !important;
}

.sidebar-brand .sidebar-brand-icon img {
	height: 38px;
	width: auto;
	max-width: 190px;
	display: block;
}

/* --- Sidebar -------------------------------------------------------------
   Two-tone: white plate, navy type and icons. Selected/focused rows flip to
   a navy plate with gold type. No per-section tints.
   ------------------------------------------------------------------------ */

.sidebar {
	border-right: 1px solid var(--rv-border);
	background-color: #ffffff;
}

.sidebar hr.sidebar-divider {
	border-top-color: var(--rv-border);
}

.sidebar .sidebar-heading {
	background-color: #ffffff;
	color: var(--rv-navy);
	opacity: 0.6;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
	border-top: 1px solid var(--rv-border);
}

/* Resting state */
.sidebar .nav-item .nav-link,
.sidebar .nav-item .nav-link i,
.sidebar .nav-item .nav-link span {
	color: var(--rv-navy);
}

.sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
	color: var(--rv-navy);
	opacity: 0.55;
}

/* Hover: a light navy wash, still navy type */
.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item .nav-link:hover i,
.sidebar .nav-item .nav-link:hover span {
	color: var(--rv-navy);
}

.sidebar .nav-item .nav-link:hover {
	background-color: rgba(8, 25, 51, 0.06);
}

/* Selected / focused: navy plate, gold type.
   Has to out-specify the resting rules above, which are 3 classes deep. */
.sidebar .nav-item .nav-link.active,
.sidebar .nav-item .nav-link.active:hover,
.sidebar .nav-item .nav-link:focus,
.sidebar .nav-item.active > .nav-link,
.sidebar .nav-item .nav-link.active i,
.sidebar .nav-item .nav-link.active span,
.sidebar .nav-item .nav-link:focus i,
.sidebar .nav-item .nav-link:focus span,
.sidebar .nav-item.active > .nav-link i,
.sidebar .nav-item.active > .nav-link span {
	color: var(--rv-gold);
}

.sidebar .nav-item .nav-link.active,
.sidebar .nav-item .nav-link.active:hover,
.sidebar .nav-item .nav-link:focus,
.sidebar .nav-item.active > .nav-link {
	background-color: var(--rv-navy);
	font-weight: 700;
}

.sidebar .nav-item .nav-link.active[data-toggle="collapse"]::after,
.sidebar .nav-item .nav-link:focus[data-toggle="collapse"]::after,
.sidebar .nav-item.active > .nav-link[data-toggle="collapse"]::after {
	color: var(--rv-gold);
	opacity: 1;
}

/* Sub-menus */
.sidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapsing .collapse-inner {
	background-color: #ffffff;
	border: 1px solid var(--rv-border);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
	color: var(--rv-navy);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
	background-color: rgba(8, 25, 51, 0.06);
	color: var(--rv-navy);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapse .collapse-inner .collapse-item:focus,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item:focus {
	background-color: var(--rv-navy);
	color: var(--rv-gold);
	font-weight: 700;
}

/* --- Primary colour ------------------------------------------------------ */

a {
	color: var(--rv-blue);
}

/* Was --rv-gold-dark: 3.42:1 on white, under the AA floor, and this is the
   colour a link turns as you are about to click it. */
a:hover {
	color: var(--rv-blue-dark);
}

.text-primary {
	color: var(--rv-navy) !important;
}

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

.bg-gradient-primary {
	background-color: var(--rv-navy) !important;
	background-image: linear-gradient(180deg, var(--rv-navy) 10%, var(--rv-navy-400) 100%) !important;
	background-size: cover;
}

.border-left-primary {
	border-left: 0.25rem solid var(--rv-navy) !important;
}

.border-bottom-primary {
	border-bottom: 0.25rem solid var(--rv-navy) !important;
}

.btn-primary {
	color: #fff;
	background-color: var(--rv-blue);
	border-color: var(--rv-blue);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
	color: #fff;
	background-color: var(--rv-blue-dark);
	border-color: var(--rv-blue-dark);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 0 0 0 0.2rem rgba(184, 151, 90, 0.4);
}

.btn-primary.disabled,
.btn-primary:disabled {
	color: #fff;
	background-color: var(--rv-blue);
	border-color: var(--rv-blue);
	opacity: 0.55;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	color: #fff;
	background-color: var(--rv-blue-dark);
	border-color: var(--rv-blue-dark);
}

.btn-outline-primary {
	color: var(--rv-blue);
	border-color: var(--rv-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
	color: #fff;
	background-color: var(--rv-blue);
	border-color: var(--rv-blue);
}

/* SB Admin 2's success green is white on #1cc88a = 2.17:1, and it is the
   loudest colour on screen while sitting on the least important control
   (the filter bar's "Go"). Re-skinned to the brand blue. */
.btn-success,
.btn-success.disabled,
.btn-success:disabled {
	color: #fff;
	background-color: var(--rv-blue);
	border-color: var(--rv-blue);
}

.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
	color: #fff;
	background-color: var(--rv-blue-dark);
	border-color: var(--rv-blue-dark);
}

.btn-success:focus,
.btn-success.focus {
	box-shadow: 0 0 0 0.2rem rgba(201, 164, 107, 0.4);
}

/* Gold accent button — use .btn-accent where an action needs to stand out */
.btn-accent {
	color: var(--rv-navy);
	background-color: var(--rv-gold);
	border-color: var(--rv-gold);
	font-weight: 600;
}

.btn-accent:hover,
.btn-accent:focus {
	color: #fff;
	background-color: var(--rv-gold-dark);
	border-color: var(--rv-gold-dark);
}

/* --- Cards, tables, panels ----------------------------------------------- */

.card {
	border: 1px solid var(--rv-border);
}

/* White plate, navy type, gold left bar for the brand touch.
   Deliberately NOT a navy plate: sidebar selection, card header and table
   header would then be three identical navy+gold bands inside ~200px, so
   none of them would rank anything. The table header is the one that earns
   the plate -- it is sticky and labels 13 columns. */
.card-header {
	background-color: #ffffff;
	border-bottom: 1px solid var(--rv-border);
	border-left: 3px solid var(--rv-gold);
	color: var(--rv-navy);
	font-weight: 600;
}

/* Anything nested in the header has to come along, or it keeps a dark colour
   and disappears against the blue. */
.card-header .text-primary,
.card-header .text-gray-800,
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header .m-0.font-weight-bold.text-primary {
	color: var(--rv-navy) !important;
}

.card-header a {
	color: var(--rv-blue);
}

.card-header a:hover {
	color: var(--rv-blue-dark);
}

.table thead th {
	background-color: var(--rv-navy);
	color: var(--rv-gold);
	border-bottom: 0;
	border-top: 0;
	font-weight: 600;
}

.table thead th a {
	color: var(--rv-gold);
}

.table-bordered thead th {
	border-color: var(--rv-navy-400);
}

.table-hover tbody tr:hover {
	background-color: rgba(184, 151, 90, 0.08);
}

/* --- Data listings (policy / CHA index tables) ---------------------------
   Opt-in via .rv-table on a Bootstrap .table. Keep the .table class:
   js/tableToCards.js matches table.table and swaps to cards under 566px.
   ------------------------------------------------------------------------ */

@media (min-width: 576px) {
	.rv-tablewrap {
		max-height: 70vh;          /* gives the sticky header something to stick to */
		overflow: auto;
		border: 1px solid var(--rv-border);
		border-radius: 6px;
		background: #ffffff;
	}
}

/* The wrapper owns the outer spacing; the table itself sits flush inside it. */
.table.rv-table {
	margin-bottom: 0;
	font-size: 13px;
	border-collapse: separate;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* Fixed layout so columns hold the widths set below rather than sizing
   themselves to their contents. The table fills the card; min-width only
   kicks in on genuinely narrow screens, where it scrolls instead of
   squeezing the name columns to nothing. */
@media (min-width: 576px) {
	.table.rv-table {
		table-layout: fixed;
		width: 100%;
		min-width: 1400px;
	}
}

/* Predictable columns get a set width. CHA / Consignee / Insured Company are
   left unsized on purpose: under fixed layout they split whatever is left, so
   the text columns absorb the extra room on a wide monitor.
   Scoped to the same breakpoint as the fixed layout above -- on phones the
   card view takes over and these widths must not apply. */
@media (min-width: 576px) {
	.rv-table .rv-w-id     { width: 140px; }
	.rv-table .rv-w-date   { width: 100px; }
	.rv-table .rv-w-ref    { width: 100px; }
	.rv-table .rv-w-resp   { width: 90px; }
	.rv-table .rv-w-status { width: 115px; }
	.rv-table .rv-w-money  { width: 100px; }
	.rv-table .rv-w-cert   { width: 95px; }
	.rv-table .rv-w-action { width: 155px; }
	.rv-table .rv-w-prints { width: 125px; }
}

/* Long company names wrap inside their column instead of overflowing it. */
.table.rv-table tbody td {
	overflow-wrap: break-word;
	word-break: break-word;
}

.table.rv-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: var(--rv-navy);
	color: var(--rv-gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 11px 12px;
	border: 0;
}

.table.rv-table tbody td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid #edeff2;
	vertical-align: top;
}

.table.rv-table tbody tr:last-child td {
	border-bottom: 0;
}

.table.rv-table tbody tr:hover {
	background-color: rgba(184, 151, 90, 0.07);
}

.rv-num { text-align: right; white-space: nowrap; }
.rv-nowrap { white-space: nowrap; }

/* Primary identifier in the first column */
.rv-table .rv-id {
	font-weight: 700;
	color: var(--rv-navy);
	text-decoration: none;
	white-space: nowrap;
}

.rv-table .rv-id:hover { color: var(--rv-blue-dark); }

/* Muted second line, e.g. the time under a date */
.rv-sub {
	display: block;
	font-size: 11px;
	color: var(--rv-muted);
	margin-top: 2px;
}

/* Status pills */
.rv-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 11px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.rv-badge-active { background: #e2f0e6; color: #1d6b38; }
.rv-badge-proc   { background: #e4e9f1; color: #1b3a6b; }
.rv-badge-pend   { background: #f6f0e3; color: #7a5c20; }
.rv-badge-canc   { background: #f6e3e3; color: #8a2c2c; }

/* Blocking conditions shown above the action buttons */
.rv-flag {
	display: block;
	margin-bottom: 5px;
	padding: 3px 9px;
	border-radius: 4px;
	background: #fdf3e0;
	color: #8a5a00;
	font-size: 11px;
	font-weight: 600;
}

/* Stacked row actions */
.rv-act {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
}

.rv-act a {
	display: inline-block;
	padding: 3px 9px;
	border: 1px solid #d5dae2;
	border-radius: 4px;
	background: #ffffff;
	font-size: 11px;
	font-weight: 600;
	color: var(--rv-navy-400);
	text-decoration: none;
	white-space: nowrap;
}

.rv-act a:hover {
	background: var(--rv-navy);
	border-color: var(--rv-navy);
	color: var(--rv-gold);
}

.rv-act a.rv-danger { color: #8a2c2c; }

.rv-act a.rv-danger:hover {
	background: #8a2c2c;
	border-color: #8a2c2c;
	color: #ffffff;
}

/* --- Forms --------------------------------------------------------------- */

/* main.css:46 paints every input's text pure green (#008000). Overridden here
   rather than edited there, to keep the theme in one reversible file. */
.form-control,
.bootstrap-select .btn,
.bootstrap-select > .dropdown-toggle {
	color: var(--rv-text);
}

.form-control:focus,
.custom-select:focus,
.bootstrap-select > .dropdown-toggle:focus,
.show > .btn-light.dropdown-toggle {
	border-color: var(--rv-gold);
	box-shadow: 0 0 0 0.2rem rgba(184, 151, 90, 0.25);
}

.bootstrap-select .dropdown-menu li a.active,
.bootstrap-select .dropdown-menu li a:active,
.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--rv-navy) !important;
	color: #ffffff !important;
}

/* --- Pagination ---------------------------------------------------------- */

.page-item.active .page-link {
	background-color: var(--rv-navy);
	border-color: var(--rv-navy);
}

.page-link {
	color: var(--rv-navy-400);
}

.page-link:hover {
	color: var(--rv-blue-dark);
}

.page-link:focus {
	box-shadow: 0 0 0 0.2rem rgba(184, 151, 90, 0.25);
}

/* --- Headings & misc ----------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--rv-navy);
}

.text-gray-800 {
	color: var(--rv-navy) !important;
}

.scroll-to-top {
	background: rgba(8, 25, 51, 0.6);
}

.scroll-to-top:hover {
	background: var(--rv-navy);
}

.topbar-divider {
	border-right: 1px solid var(--rv-border);
}

.nav-tabs .nav-link.active {
	color: var(--rv-navy);
	border-bottom-color: var(--rv-gold);
}

/* --- Auth screens (login / register / reset) ----------------------------- */

.bg-login-image,
.bg-register-image,
.bg-password-image {
	background: url(../img/rivori-login-bg.jpg) center / cover no-repeat var(--rv-navy);
}

.card.o-hidden {
	border-top: 4px solid var(--rv-gold) !important;
}

/* --- Brand typography ----------------------------------------------------
   Poppins on headings and chrome only; table/form text stays on Nunito so
   dense data screens keep their current density.
   ------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-header,
.sidebar .sidebar-heading,
.nav-tabs .nav-link {
	font-family: 'Poppins', 'Nunito', 'Segoe UI', Helvetica, Arial, sans-serif;
	letter-spacing: 0.01em;
}

/* --- Data listings on phones ---------------------------------------------
   Under 566px js/tableToCards.js hides the table and appends a
   .table-card-deck of Bootstrap cards built from the rows. These style that
   deck so the mobile view matches the desktop one.
   ------------------------------------------------------------------------ */

@media (max-width: 575.98px) {
	.rv-tablewrap { max-height: none; overflow-x: auto; overflow-y: visible; }

	.table-card-deck .card {
		border: 1px solid var(--rv-border);
		border-left: 3px solid var(--rv-blue);
		border-radius: 6px;
	}

	.table-card-deck .card-body { padding: 14px 16px; }

	.table-card-deck .card-title {
		font-size: 15px;
		font-weight: 700;
		color: var(--rv-navy);
		margin-bottom: 10px;
	}

	/* Each field renders as "<b>Label: </b>value" */
	.table-card-deck .card-text {
		font-size: 13px;
		line-height: 1.9;
		margin-bottom: 10px;
	}

	.table-card-deck .card-text b {
		color: #6b7280;
		font-weight: 600;
	}

	/* Action/print links are flattened into the card body — lay them out as
	   a wrapping row of buttons rather than a ragged stack. */
	.table-card-deck .card-body .rv-act {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
		margin-top: 4px;
	}

	.table-card-deck .rv-act a { padding: 5px 12px; font-size: 12px; }

	.table-card-deck .card-link {
		display: inline-block;
		margin: 0 8px 6px 0;
		padding: 5px 12px;
		border: 1px solid #d5dae2;
		border-radius: 4px;
		font-size: 12px;
		font-weight: 600;
		color: var(--rv-blue);
		text-decoration: none;
	}

	/* Take a whole line inside the wrapping action row, so a warning never
	   sits shoulder-to-shoulder with the buttons it is warning about. */
	.table-card-deck .rv-flag {
		flex-basis: 100%;
		margin: 0 0 2px;
	}

	/* The muted time is already on its own line here; drop the extra gap. */
	.table-card-deck .rv-sub { margin-top: 0; }
}