/*
 * 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: 60px;
	height: 60px;
	margin-top: -27px;
}
.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 {
	/* Matches .header-btn box model so all .actions buttons share one row height.
	   Image scales via background-size: contain. */
	padding: 0.3em 2.6em;
	width: 3.6em;
	height: 2.6em;
	background: var(--them-toggle) no-repeat center / contain;
	border: none;
	border-radius: 4px;
	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;
}


/* ────── Home — quick-navigation tile grid (backlog #115) ──────
   Lives inside its own .card; tile click reuses sidebar HTMX action=SECTION.
   Responsive: 3 / 2 / 1 columns at ≥992 / 576-991 / <576 px. */
.home-tiles-title {
	font-size: 1em;
	font-weight: 500;
	margin: 0 0 0.8em;
	color: var(--card-subtitle);
}
.home-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.home-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3em;
	padding: 1em 1.2em;
	background: var(--sb-card-bg);
	color: var(--card-color);
	border: 1px solid var(--border);
	border-radius: 12px;
	font-family: inherit;
	font-size: 1em;
	text-align: left;
	cursor: pointer;
	transition: filter 0.1s ease, transform 0.05s ease;
}
.home-tile:hover {
	filter: brightness(0.95);
	border-color: var(--sidebar-title);
}
.home-tile:active {
	transform: scale(0.99);
}
.home-tile-icon {
	font-size: 1.8em;
	line-height: 1;
}
.home-tile-label {
	font-size: 1.05em;
	font-weight: 500;
	color: var(--card-color);
}
.home-tile-desc {
	font-size: 0.85em;
	color: var(--card-subtitle);
}

@media (max-width: 991px) {
	.home-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
	.home-tiles { grid-template-columns: 1fr; }
}


/* ────── 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,
.filter-row input[type="text"] {
	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;
	height: 40px;
}
.filter-row input[type="text"]:focus {
	outline: 2px solid var(--buttons-bg);
	outline-offset: -1px;
}

.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);
}
/* Sortable column header — looks like the th but clickable.
   Active state (arrow shown) gets accent color. */
.data-table thead th .sort-toggle {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}
.data-table thead th .sort-toggle:hover { color: var(--body-color); }
.data-table thead th .sort-toggle.active { color: var(--buttons-bg); }
.data-table thead th .sort-arrow {
	display: inline-block;
	min-width: 0.7em;
	font-size: 0.9em;
}
.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);
}


/* ────── Swap balances result ────── */

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

.swap-result {
	padding: 1em;
	margin-top: 1em;
	border-radius: 4px;
}
.swap-result.error {
	background: rgba(196, 36, 36, 0.1);
	border-left: 3px solid var(--table-cell-red);
}
.swap-result.success {
	background: rgba(15, 160, 80, 0.08);
	border-left: 3px solid var(--table-cell-green);
}

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

/* Inner grid for partial-rendered content.
   #section-content is the HTMX-swappable wrapper inside .staff-main; its
   .card direct children become grid items at 100% column width. */
#section-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	align-content: start;
}

.card {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.5em;
	margin-bottom: 1em;
}
/* Scoped override for blocks INSIDE section main only —
   keeps modals/popups (.balance-modal__panel etc. which also use .card) untouched.
   Descendant selector (not >) so nested .card blocks inside partials also get 100%. */
.staff-main .card {
	width: 100%;
	border: none;
	border-radius: 20px;
	margin-bottom: 0;
}

.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: center;
	padding: 0.5em 0;
	color: var(--card-subtitle);
	font-size: 0.8em;
	border-top: 1px solid var(--border);
}

/* ── Hamburger button + mobile-menu overlay ──
   Hidden on desktop (≥992px — designer's breakpoint).  Visible below 992px
   to replace the now-hidden .aside.  Toggled by index.html script. */
.hamburger {
	/* Matches .header-btn box model so all .actions buttons share one row height. */
	display: none;
	padding: 0.3em 0.1em;
	font-family: inherit;
	font-size: 3em;
	margin-top: -9px;
	line-height: 1;
	background: transparent;
	color: var(--card-color);
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
.hamburger:hover { color: var(--sidebar-title); }

.overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 90;
}

/* Mobile/tablet (<992px, designer's pre-aside breakpoint):
   hamburger button visible; aside (when .open) slides in over content. */
@media (max-width: 991px) {
	.hamburger { display: inline-block; }
	.overlay.open { display: block; }
	/* Hide MODE + staff_email caption next to the logo on mobile —
	   leaves only the logo + brand-title chip in the cramped header. */
	.staff-header .brand .who { display: none; }
	/* When aside.staff-aside has .open class on mobile, force it visible
	   as a fixed slide-in panel — designer's .aside rules normally keep
	   it display:none below 992px. */
	.staff-aside.open {
		display: block !important;
		position: fixed;
		top: 0;
		left: 0;
		width: 80vw;
		max-width: 280px;
		height: 100vh;
		background: var(--card-bg);
		border-right: 1px solid var(--border);
		padding: 1em;
		z-index: 100;
		overflow-y: auto;
	}
}

/* Global HTMX loading indicator — shown during any in-flight request.
   Fixed at top-center; pointer-events:none so it never blocks clicks. */
.global-loading.htmx-indicator {
	display: none;
	position: fixed;
	top: 0.75em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	padding: 0.6em 1em;
	color: var(--buttons-color);
	background: var(--buttons-bg);
	border: 1px solid var(--border);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	font-size: 0.9em;
	font-weight: 500;
	pointer-events: none;
}
.global-loading.htmx-indicator.htmx-request {
	display: block;
}

/* A4.6.1: drill-link — clickable cell content that opens a deeper view.
   Looks like the cell value but with cursor:pointer, hover-underline,
   and accent color. Higher specificity (.data-table .drill-link) so it
   wins over data-table inherited styles. */
.data-table .drill-link,
.drill-link {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer !important;
	text-align: left;
	text-decoration: underline dotted;
	text-decoration-color: var(--card-subtitle);
	text-underline-offset: 3px;
}
.data-table .drill-link:hover,
.drill-link:hover {
	color: var(--buttons-bg);
	text-decoration: underline solid;
	text-decoration-color: var(--buttons-bg);
}
.data-table .drill-link code,
.drill-link code {
	background: transparent;
	padding: 0;
	color: inherit;
}

/* A4.6.1: eSIM detail card. Mirrors devmvno partner portal pattern —
   key/value <table class="reslist"> inside a .grad box, with .cell-title
   for the left column. Theme-correct in light + dark. */
.esim-card-head {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-bottom: 1em;
}
.esim-card-head h1 { margin: 0; }
.esim-card-actions {
	display: flex;
	gap: 0.6em;
	flex-wrap: wrap;
	margin-bottom: 1em;
}
/* A4.7.3 (2026-06-10): two-column layout for eSIM card — left identity, right install/QR. */
.esim-card-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}
@media (max-width: 900px) {
	.esim-card-cols { grid-template-columns: 1fr; }
}
.grad.esim-card-box {
	background: var(--body-bg);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.5em 0.5em;
	margin-bottom: 1em;
}
.esim-card-box .reslist {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}
.esim-card-box .reslist td {
	padding: 0.5em 0.8em;
	border-bottom: 1px solid var(--border);
	color: var(--body-color);
	vertical-align: top;
}
.esim-card-box .reslist tr:last-child td { border-bottom: 0; }
.esim-card-box .reslist .cell-title {
	width: 180px;
	color: var(--card-subtitle);
	font-weight: 500;
	white-space: nowrap;
}
.esim-card-empty {
	padding: 1.5em 0;
	color: var(--body-color);
}