/*
 * staff.css — A3 minimal overrides + bridge between imsimarket main.css /
 * themes and the staff portal's actual DOM structure. The source main.css is
 * built around a much wider partner UI (payments, buy/rent, …); we reuse only
 * the CSS variables and base reset, and define our own .auth-shell /
 * .staff-header / .staff-aside / .staff-main classes here.
 *
 * Colors come from theme-light.css / theme-dark.css CSS vars. Switching themes
 * just swaps the linked <link id="theme-stylesheet">.
 */

/* ────── Common shells ────── */

body {
	min-height: 100vh;
}

a {
	color: var(--sidebar-title);
	text-decoration: none;
}
a:hover { text-decoration: underline; }

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.htmx-request button { opacity: 0.6; cursor: wait; }


/* ────── Auth page (centered card) ────── */

.auth-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.auth-card {
	width: 100%;
	max-width: 380px;
	padding: 2rem;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 8px;
}

.auth-card .brand {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 1.2em;
}
.auth-card .brand img { width: 32px; height: 32px; }
.auth-card .brand .brand-title {
	font-size: 0.95em;
	font-weight: 500;
	background: var(--buttons-bg);
	color: var(--buttons-color);
	padding: 0.25em 0.6em;
	border-radius: 4px;
}

.auth-card h1 {
	font-size: 1.25em;
	font-weight: 500;
	margin: 0 0 0.3em;
	color: var(--card-color);
}
.auth-card .subtitle {
	color: var(--card-subtitle);
	font-size: 0.85em;
	margin: 0 0 1.5em;
}

.auth-card form { display: flex; flex-direction: column; gap: 0.8em; }
.auth-card input[type="email"],
.auth-card input[type="password"] {
	padding: 0.7em 0.8em;
	font-family: inherit;
	font-size: 1em;
	background: var(--body-bg);
	color: var(--body-color);
	border: 1px solid var(--border);
	border-radius: 4px;
}
.auth-card input:focus {
	outline: 2px solid var(--buttons-bg);
	outline-offset: -1px;
}

.auth-card button {
	padding: 0.75em;
	font-family: inherit;
	font-size: 1em;
	font-weight: 500;
	background: var(--buttons-bg);
	color: var(--buttons-color);
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
.auth-card button:hover { filter: brightness(0.95); }

.auth-card .error {
	padding: 0.7em 0.8em;
	margin-bottom: 1em;
	background: rgba(196, 36, 36, 0.12);
	color: var(--table-cell-red);
	border-radius: 4px;
	font-size: 0.9em;
}


/* ────── Dashboard shell (uses .grid-wrapper from main.css) ────── */

.staff-header {
	grid-area: hd;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5em 0;
}
.staff-header .brand {
	display: flex;
	align-items: center;
	gap: 0.6em;
}
.staff-header .brand img { width: 32px; height: 32px; }
.staff-header .brand .brand-title {
	font-size: 0.95em;
	font-weight: 500;
	background: var(--buttons-bg);
	color: var(--buttons-color);
	padding: 0.25em 0.6em;
	border-radius: 4px;
}
.staff-header .brand .who {
	color: var(--card-subtitle);
	font-size: 0.85em;
	margin-left: 0.8em;
}

.staff-header .actions { display: flex; align-items: center; gap: 0.6em; }
.theme-toggle {
	width: 44px;
	height: 28px;
	padding: 0;
	background: var(--them-toggle) no-repeat center / contain;
	border: none;
	cursor: pointer;
}

.staff-aside {
	grid-area: as;
	padding: 1em 0;
	border-right: 1px solid var(--border);
}
.staff-aside .placeholder {
	color: var(--card-subtitle);
	font-size: 0.85em;
	padding: 0.5em 1em;
}

/* Sidebar menu */
.staff-menu {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	padding-right: 0.8em;
}
.staff-menu .menu-item {
	text-align: left;
	padding: 0.6em 0.9em;
	background: transparent;
	color: var(--card-color);
	border: none;
	border-left: 3px solid transparent;
	border-radius: 0 4px 4px 0;
	font-family: inherit;
	font-size: 0.95em;
	cursor: pointer;
}
.staff-menu .menu-item:hover {
	background: var(--sb-card-bg);
}
.staff-menu .menu-item.active {
	background: var(--sb-card-bg);
	border-left-color: var(--sidebar-title);
	color: var(--sidebar-title);
	font-weight: 500;
}

/* Header compact buttons (refresh / logout) */
.staff-header .actions form { margin: 0; }
.header-btn {
	padding: 0.3em 0.6em;
	font-family: inherit;
	font-size: 1em;
	background: var(--buttons-bg);
	color: var(--buttons-color);
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
.header-btn.secondary {
	background: transparent;
	color: var(--card-color);
	border: 1px solid var(--border);
}
.header-btn:hover { filter: brightness(0.95); }

/* Home summary grid */
.summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.8em;
	margin: 1em 0;
}
.summary-tile {
	display: flex;
	flex-direction: column;
	padding: 1em;
	background: var(--sb-card-bg);
	border: 1px solid var(--border);
	border-radius: 6px;
}
.summary-tile .label {
	font-size: 0.8em;
	color: var(--card-subtitle);
	margin-bottom: 0.3em;
}
.summary-tile .value {
	font-size: 1.4em;
	font-weight: 500;
	color: var(--card-color);
	font-variant-numeric: tabular-nums;
}


/* ────── Data sections (Top Ups, eSIMs, MSISDNs, Usage) ────── */

.filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin: 1em 0;
	align-items: end;
}
.filter-row label {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	font-size: 0.8em;
	color: var(--card-subtitle);
	font-weight: 500;
}
.filter-row select {
	padding: 0.4em 0.6em;
	font-family: inherit;
	font-size: 0.95em;
	background: var(--body-bg);
	color: var(--body-color);
	border: 1px solid var(--border);
	border-radius: 4px;
	min-width: 100px;
}

.chart-title {
	font-size: 1em;
	font-weight: 500;
	color: var(--card-subtitle);
	margin: 1em 0 0.5em;
}

.table-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 1em 0 0.5em;
	font-size: 0.85em;
	color: var(--card-subtitle);
}

.pagination-controls {
	display: flex;
	gap: 0.3em;
}
.pg-btn {
	padding: 0.3em 0.7em;
	font-family: inherit;
	font-size: 0.85em;
	background: transparent;
	color: var(--card-color);
	border: 1px solid var(--border);
	border-radius: 4px;
	cursor: pointer;
}
.pg-btn:hover:not(:disabled) { background: var(--sb-card-bg); }
.pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.data-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.5em;
	font-size: 0.9em;
}
.data-table thead th {
	text-align: left;
	padding: 0.6em 0.8em;
	background: var(--sb-card-bg);
	color: var(--card-subtitle);
	font-weight: 500;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--border);
}
.data-table tbody td {
	padding: 0.55em 0.8em;
	border-bottom: 1px solid var(--border);
	color: var(--body-color);
}
.data-table tbody tr:hover { background: var(--sb-card-bg); }
.data-table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.data-table code {
	font-size: 0.85em;
	color: var(--sidebar-title);
}

.staff-main {
	grid-area: mn;
	padding: 1em 1.5em;
}

.card {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.5em;
	margin-bottom: 1em;
}

.staff-main h1 {
	font-size: 1.3em;
	font-weight: 500;
	margin: 0 0 1em;
	color: var(--card-color);
}

.staff-main dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.4em 1em;
	margin: 0;
}
.staff-main dt {
	color: var(--card-subtitle);
	font-weight: 500;
	font-size: 0.9em;
}
.staff-main dd {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	word-break: break-all;
	color: var(--body-color);
}

.placeholder-notice {
	background: rgba(4, 137, 179, 0.08);
	border-left: 3px solid var(--sidebar-title);
	padding: 1em;
	color: var(--card-color);
	border-radius: 4px;
	margin: 1em 0;
}

.staff-actions {
	display: flex;
	gap: 0.5em;
	margin-top: 1.5em;
}
.staff-actions button {
	padding: 0.5em 1em;
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 500;
	background: var(--buttons-bg);
	color: var(--buttons-color);
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
.staff-actions button.secondary {
	background: transparent;
	color: var(--card-color);
	border: 1px solid var(--border);
}
.staff-actions button:hover { filter: brightness(0.95); }
.staff-actions form { margin: 0; }

.staff-footer {
	grid-area: ft;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0.5em 0;
	color: var(--card-subtitle);
	font-size: 0.8em;
	border-top: 1px solid var(--border);
}