/* shared, app-wide CSS - included once by 15-top-php.php so every page gets it.
   keep this file to broadly-reusable rules only; page-specific styling stays in that
   page's own <style> block or stylesheet. */

/* the app's one common button look, previously duplicated (and drifting out of sync)
   across 70-leg-html-css.php and signup-styles.css - this is now the single definition. */
.concave-button {
	padding: 10px 20px;
	font-size: 16px;
	font-weight: bold;
	color: black;
	background-color: #d9d9d9;
	border: none;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
		inset 0 -8px 12px rgba(255, 255, 255, 0.2);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	top: 0;
}

.concave-button:hover:not(:disabled) {
	background-color: #bfbfbf;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2),
		inset 0 3px 10px rgba(0, 0, 0, 0.3),
		inset 0 -3px 10px rgba(255, 255, 255, 0.2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
	top: 2px;
}

.concave-button:active:not(:disabled) {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2),
		inset 0 3px 10px rgba(0, 0, 0, 0.3),
		inset 0 -3px 10px rgba(255, 255, 255, 0.2);
	top: 3px;
}

.concave-button:disabled {
	background-color: #667788;
	color: #99aabb;
	box-shadow: none;
	text-shadow: none;
	cursor: not-allowed;
	opacity: 0.7;
}

/* Journey tab sidebar's Progress table (#spanProgress, populated by
   populateProgressTriangle() in 54-triangle-populate.php). */
.sum_tab {
	border: none;
	padding: 0;
	margin: 0;
}

.sum_tab_th {
	border: none;
	padding: 0 2px;
	margin: 0;
	text-align: right;
	font-weight: normal;
}

.sum_tab_descriptor_td {
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
	font-weight: normal;
}

.sum_tab_td {
	border: none;
	padding: 0 5px;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

#spanProgress table {
	max-width: 100%;
	font-size: 1.05rem;
}

/* Journey tab sidebar's "Select a Boat" section (52-triangle-html.php) - the fuel/speed
   tables' number inputs. Moved here from 51-journeys-style.php. */
.textboxSpeedFuel {
	width: 50px;
	text-align: right;
	font-size: 1.05rem;
}

.textbox__draft {
	width: 50px;
	text-align: right;
	font-size: 1.05rem;
}

.boat-draft-table {
	border: none;
	border-collapse: collapse;
}

.boat-draft-table td {
	padding: 2px 10px;
	margin: 0;
	font-size: .99rem;
}

/* this table no longer used
.boat-speedfuel-table {
	border: none;
	border-collapse: collapse;
	padding: 3px;
}

.boat-speedfuel-table td {
	padding: 2px 2px;
	margin: 0;
	font-size: 1.05rem;
}
	*/

/* "Start from Where & When" / "End At Where & When" sections (52-triangle-html.php). */
.select-row-table {
	border-collapse: collapse;
	border: none;
	/* border: none; */
	padding: 0;
}

.select-row-table td {
	border: none;
	padding: 2px 10px;
	margin: 0;
	font-size: .99rem;
}

/* the Starting Fuel row's control cell (textbox + "gal") - centered rather than left-aligned
   like the other rows' controls. */
#divStartingFuel td:last-child {
	text-align: center;
}

/* label text and dropdown/textbox width are each split out per field (State/Town/Marina/date/
   Starting Fuel) rather than one shared class, so any one of them can be changed - font-size,
   width, whatever - without affecting the others. Start and End still share a class per field
   (e.g. .select-row-label-state covers both selectFromState's and selectToState's label) since
   they're the same field shown twice; split further by id if Start/End ever need to diverge. */
.select-row-table td.select-row-label-state,
.select-row-table td.select-row-label-town,
.select-row-table td.select-row-label-marina {
	width: 60px;
	padding: 2px 10px;
	margin: 0;
}

.select-row-table td.select-row-label-date {
	width: 60px;
	padding: 2px 10px;
	margin: 0;
}

/* Starting Fuel is now a normal 2-column row like the others above it (label + control),
   rather than one wide colspan=2 cell with a manual line break in "Starting Fuel". */
.select-row-table td.select-row-label-fuel {
	width: 60px;
	padding: 2px 10px;
	margin: 0;
}

.select-row-dropdown-state,
.select-row-dropdown-town,
.select-row-dropdown-marina {
	width: 180px;
	font-size: 0.9rem;
}

.select-row-date-input {
	width: 180px;
	font-size: 0.9rem;
	text-align: center;
}

.select-row-fuel-input {
	width: 80px;
	text-align: center;
	font-size: 0.9rem;
}