/**
 * Shared width fix for every custom front-end page this plugin renders
 * (Home, New Expense, Upload Driving Report, Upload IPASS Report). The
 * active theme is a block theme that constrains normal content to
 * --wp--style--global--content-size (645px on this site); even the theme's
 * own "wide" setting (1340px) wasn't enough for a dense expenses table, so
 * this breaks all the way out to the full viewport width instead of relying
 * on either of the theme's constrained content widths.
 */
.creo-expense-page {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	padding: 0 30px;
	box-sizing: border-box;
}

.creo-expense-page * {
	box-sizing: border-box;
}

/**
 * Shared "expense data table" look — used by the Current Expenses table
 * (home-page.php) and the driving-report import review table
 * (driving-report-upload-page.php / driving-report-upload.js), so both
 * look like the same table rather than two different designs.
 */
/**
 * Fixed layout is what stops columns from changing width during inline
 * editing: with the browser's default "auto" layout, a column's width is
 * recalculated from whatever's currently in its cells, so an <input>
 * sizes a column differently than the static truncated text it replaces.
 * Fixed layout locks each column's width once (from the widths below),
 * regardless of what's inside the cells afterward.
 */
.creo-expense-data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.creo-expense-data-table th, .creo-expense-data-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #eee; white-space: nowrap; }
.creo-expense-data-table th { border-bottom: 2px solid #ddd; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: #555; }
.creo-expense-data-table tbody tr:nth-child(odd) { background: #ffffff; }
.creo-expense-data-table tbody tr:nth-child(even) { background: #eef0f2; }
.creo-expense-data-table tbody tr:hover { background: #d5dde5; }
.creo-expense-data-table td.amount, .creo-expense-data-table th.amount { text-align: right; width: 70px; max-width: 70px; }
.creo-expense-data-table td.date, .creo-expense-data-table th.date { width: 95px; max-width: 95px; }
.creo-expense-data-table td.type, .creo-expense-data-table th.type { width: 115px; max-width: 115px; }
.creo-expense-data-table td.department, .creo-expense-data-table th.department { width: 130px; max-width: 130px; }
.creo-expense-data-table td.division, .creo-expense-data-table th.division { width: 100px; max-width: 100px; }
.creo-expense-data-table td.property, .creo-expense-data-table th.property {
	width: 250px; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.creo-expense-data-table td.stream-type, .creo-expense-data-table th.stream-type {
	width: 170px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.creo-expense-data-table td.actions, .creo-expense-data-table th.actions { width: 150px; max-width: 150px; }
.creo-expense-data-table td.select, .creo-expense-data-table th.select { width: 24px; max-width: 24px; padding-left: 8px; padding-right: 0; }
.creo-expense-data-table td.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creo-expense-data-table td.title, .creo-expense-data-table th.title { width: 220px; }
.creo-expense-data-table td.from, .creo-expense-data-table th.from { width: 180px; }
.creo-expense-data-table td.to, .creo-expense-data-table th.to { width: 180px; }
.creo-expense-data-table input[type=text],
.creo-expense-data-table input[type=date],
.creo-expense-data-table input[type=number],
.creo-expense-data-table select { width: 100%; min-width: 90px; font-size: 12.5px; padding: 2px 4px; box-sizing: border-box; }
.creo-expense-data-table td.amount input { min-width: 60px; }