@font-face {
	font-family: 'IRANYekanX';
	src: url('../fonts/IRANYekanXVFaNumVF.woff2') format('woff2-variations'),
	     url('../fonts/IRANYekanXVFaNumVF.woff') format('woff-variations');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}

.arvan-reseller-app {
	/* Sorkhab primary — teal. bg-primary-t3-1 default/hover(focus)/active. */
	--ar-color-brand-50: #e0f7f7;   /* bg-primary-t1-1-hover */
	--ar-color-brand-100: #ccf1f1;  /* bg-primary-t1-1-active */
	--ar-color-brand-300: #99e3e3;  /* bg-primary-t3-1-disabled */
	--ar-color-brand-500: #009595;  /* bg-primary-t3-1-default */
	--ar-color-brand-600: #007070;  /* bg-primary-t3-1-hover */
	--ar-color-brand-700: #004a4a;  /* bg-primary-t3-1-active */
	--ar-color-brand-tint: #e0f7f7; /* bg-primary-t2-1-default */

	--ar-color-primary-500: #009595;
	--ar-color-primary-100: #e0f7f7;

	--ar-color-success-500: #17b24a; /* fg-success-t1-1-default */
	--ar-color-success-100: #e3f6e9; /* bg-success-t2-1-default */
	--ar-color-warning-500: #ca9602; /* fg-warning-t1-1-default */
	--ar-color-warning-100: #fff7e0; /* bg-warning-t2-1-default */
	--ar-color-danger-500: #d61e20;  /* fg-error-t1-1-default */
	--ar-color-danger-100: #fae4e4;  /* bg-error-t2-1-default */
	--ar-color-info-500: #018fe1;    /* fg-info-t1-1-default */
	--ar-color-info-100: #e0f2fb;    /* bg-info-t2-1-default */

	--ar-color-bg: #f5f5f5;               /* bg-neutral-t1-3-default */
	--ar-color-surface: #ffffff;          /* bg-neutral-t1-1-default */
	--ar-color-surface-raised: #ffffff;
	--ar-color-surface-tertiary: #fafafa; /* bg-neutral-t1-2-default */
	--ar-color-border: #e6e6e6;           /* bg-neutral-t1-4-hover */
	--ar-color-text: #333333;             /* fg-neutral-t1-1-default */
	--ar-color-text-muted: #7f7f7f;       /* fg-neutral-t1-3-default */
	--ar-color-text-inverse: #ffffff;     /* fg-neutral-t3-1-default */
	--ar-color-focus-ring: #34a5e7;       /* st-neutral-focus */

	/* Sorkhab border-radius scale (rem → px at 16px root). */
	--ar-radius-sm: 8px;   /* --border-radius-sm: .5rem */
	--ar-radius-md: 12px;  /* --border-radius-md: .75rem */
	--ar-radius-lg: 16px;  /* --border-radius-lg: 1rem */
	--ar-radius-pill: 999px;

	--ar-space-1: 4px;
	--ar-space-2: 8px;
	--ar-space-3: 12px;
	--ar-space-4: 16px;
	--ar-space-5: 24px;
	--ar-space-6: 32px;
	--ar-space-8: 48px;

	/* Sorkhab neutrals used directly by components (fg/bg/st families). */
	--ar-color-fg-inverse: #ffffff;   /* fg-neutral-t3-0-default */
	--ar-color-fg-strong: #333333;    /* fg-neutral-t1-1-default */
	--ar-color-fg-body: #4c4c4c;      /* fg-neutral-t1-2-default */
	--ar-color-fg-subtle: #7f7f7f;    /* fg-neutral-t1-3-default */
	--ar-color-fg-disabled: #cccccc;  /* fg-neutral-t1-2-disabled */
	--ar-color-neutral-solid: #4c4c4c;         /* bg-neutral-t3-0-default */
	--ar-color-neutral-solid-hover: #333333;   /* bg-neutral-t3-0-hover */
	--ar-color-neutral-solid-active: #191919;  /* bg-neutral-t3-0-active */
	--ar-color-neutral-solid-disabled: #cccccc;/* bg-neutral-t3-0-disabled */
	--ar-color-st-input: #cccccc;        /* st-neutral-t1-4-default */
	--ar-color-st-input-hover: #b3b3b3;  /* st-neutral-t1-4-hover */
	--ar-color-st-hairline: #e6e6e6;     /* st-neutral-t1-5-default */
	--ar-color-st-selected: #009595;     /* st-neutral-t3-4-selected */
	--ar-color-bg-hover: #e6e6e6;        /* bg-neutral-t1-4-hover */
	--ar-color-bg-active: #cccccc;       /* bg-neutral-t1-4-active */

	/* Sorkhab has no ambient card shadow; only overlays (toast/modal) cast
	   one, and it is a single wide soft shadow rather than a scale. */
	--ar-shadow-sm: none;
	--ar-shadow-md: none;
	--ar-shadow-lg: 0 8px 40px rgba(37, 51, 67, .24); /* ArToast/ArModal */

	/* Sorkhab's Persian face is YekanBakh (Inter for Latin/numerals). It is
	   not on a public CDN, so Vazirmatn stays as the shipped fallback and
	   YekanBakh is picked up automatically when the reseller self-hosts it.
	   Weights are the variable-font values Sorkhab actually uses: 325 for
	   body/input text, 450 for buttons and badges. */
	--ar-font-family: 'IRANYekanX', 'YekanBakh', 'Vazirmatn', 'Tahoma', sans-serif;
	--ar-weight-body: 325;
	--ar-weight-emphasis: 450;

	direction: rtl;
	font-family: var(--ar-font-family);
	color: var(--ar-color-fg-body);
	background: var(--ar-color-bg);
	color-scheme: light;

	/* Sorkhab body type: 14/20 with -.28px tracking (12/16, -.24px small). */
	font-size: 14px;
	font-weight: var(--ar-weight-body);
	line-height: 20px;
	letter-spacing: -.28px;
	max-width: 100%;
	overflow-x: hidden;
}

.arvan-reseller-app * {
	box-sizing: border-box;
}

/* Plain links carry the brand color in every state. Anchors that are really
   controls (.ar-btn, .ar-chip) are excluded — they own their own color, and
   this rule would otherwise outrank the single-class button styles below. */
.arvan-reseller-app a:not(.ar-btn):not(.ar-chip),
.arvan-reseller-app a:not(.ar-btn):not(.ar-chip):visited,
.arvan-reseller-app a:not(.ar-btn):not(.ar-chip):hover,
.arvan-reseller-app a:not(.ar-btn):not(.ar-chip):active {
	color: var(--ar-color-brand-600);
}

/* Buttons — ArButton. Sorkhab sizes buttons by fixed height (sm 32 / md 40)
   rather than vertical padding, keeps a 72px min-width so short labels stay
   tappable, and expresses every state with `outline` (never a border or a
   box-shadow) so the control never shifts by a pixel between states. */
.ar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	min-width: 72px;
	height: 40px;
	padding: 0 1rem;
	gap: .5rem;
	border: 0;
	outline: 0;
	border-radius: var(--ar-radius-md);
	background-color: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--ar-weight-emphasis);
	line-height: 20px;
	letter-spacing: -.28px;
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, outline-color .15s ease;
}
.ar-btn:disabled { cursor: not-allowed; pointer-events: none; }
/* Focus is the one blue in the system, and it is the only state that offsets
   the outline — so keyboard focus stays readable on top of a hover ring. */
.ar-btn:focus-visible { outline: 2px solid var(--ar-color-focus-ring); outline-offset: 1px; }

/* The primary action is dark, not brand-teal — the teal is reserved for the
   logo mark and product icons. WordPress admin styles submit buttons with
   heavier selectors, so every state is also scoped through .ar-admin. */
.ar-btn-primary, .ar-btn-primary:visited,
.ar-admin .ar-btn-primary, .ar-admin .ar-btn-primary:visited { background: #343434; color: var(--ar-color-fg-inverse); }
.ar-btn-primary:hover:not(:disabled),
.ar-admin .ar-btn-primary:hover:not(:disabled) { background: var(--ar-color-neutral-solid-hover); outline: 2px solid var(--ar-color-st-input); }
.ar-btn-primary:active:not(:disabled),
.ar-admin .ar-btn-primary:active:not(:disabled) { background: var(--ar-color-neutral-solid-active); outline: 2px solid var(--ar-color-st-input); }
.ar-btn-primary:focus, .ar-admin .ar-btn-primary:focus { color: var(--ar-color-fg-inverse); }
.ar-btn-primary:disabled,
.ar-admin .ar-btn-primary:disabled { background: var(--ar-color-neutral-solid-disabled); color: var(--ar-color-fg-inverse); }

/* Sorkhab's secondary is a dark neutral fill, not an outlined white button. */
.ar-btn-secondary, .ar-btn-secondary:visited { background: var(--ar-color-neutral-solid); color: var(--ar-color-fg-inverse); }
.ar-btn-secondary:hover:not(:disabled) { background: var(--ar-color-neutral-solid-hover); outline: 2px solid var(--ar-color-st-input); }
.ar-btn-secondary:active:not(:disabled) { background: var(--ar-color-neutral-solid-active); outline: 2px solid var(--ar-color-st-input); }
.ar-btn-secondary:disabled { background: var(--ar-color-neutral-solid-disabled); color: var(--ar-color-fg-inverse); }

/* The outlined button is `tertiary` — the only variant with a real border. */
.ar-btn-tertiary, .ar-btn-tertiary:visited { color: var(--ar-color-fg-body); border: 1px solid var(--ar-color-st-input); }
.ar-btn-tertiary:hover:not(:disabled) { border-color: var(--ar-color-st-input-hover); outline: 2px solid var(--ar-color-st-input); }
.ar-btn-tertiary:active:not(:disabled) { border-color: var(--ar-color-st-input-hover); outline: 2px solid var(--ar-color-st-input); }
.ar-btn-tertiary:disabled { color: var(--ar-color-fg-disabled); border-color: var(--ar-color-fg-disabled); }

.ar-btn-danger, .ar-btn-danger:visited { background: var(--ar-color-danger-500); color: var(--ar-color-fg-inverse); }
.ar-btn-danger:hover:not(:disabled) { background: #c11b1d; outline: 2px solid var(--ar-color-danger-100); }
.ar-btn-danger:active:not(:disabled) { background: #ab181a; outline: 2px solid var(--ar-color-danger-100); }
.ar-btn-danger:disabled { background: #efa5a6; color: var(--ar-color-fg-inverse); }

.ar-btn-ghost, .ar-btn-ghost:visited { background: transparent; color: var(--ar-color-fg-body); }
.ar-btn-ghost:hover:not(:disabled) { background: var(--ar-color-bg-hover); }
.ar-btn-ghost:active:not(:disabled) { background: var(--ar-color-bg-active); }
.ar-btn-ghost:disabled { color: var(--ar-color-fg-disabled); }

/* sm drops to 32px tall and to the 8px radius — the radius tracks the size. */
.ar-btn-sm { height: 32px; border-radius: var(--ar-radius-sm); }
.ar-btn-block { width: 100%; }
/* Icon-only buttons stay square via aspect-ratio and drop the min-width. */
.ar-btn-icon { min-width: unset; width: 40px; height: 40px; padding: 0; aspect-ratio: 1; flex: 0 0 auto; }
.ar-btn-icon.ar-btn-sm { width: 32px; height: 32px; }

/* Dropdown — trigger is a plain button; the menu is portaled to <body> with
   position:fixed while open (see initDropdowns() in public.js) so it's never
   clipped by a scrollable/overflow ancestor (e.g. a table wrapper). Base
   position/inset below are just a same-DOM-position fallback for the first
   paint before JS repositions it; the open state always gets inline
   top/left from JS. */
.ar-dropdown { position: relative; display: inline-block; }
.ar-dropdown.is-open > [data-ar-dropdown-toggle] { border-color: var(--ar-color-brand-500); }
.ar-dropdown-menu {
	display: none;
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 6px);
	background: var(--ar-color-surface);
	border: 1px solid var(--ar-color-border);
	border-radius: var(--ar-radius-md);
	box-shadow: var(--ar-shadow-md);
	min-width: 180px;
	padding: var(--ar-space-2);
	z-index: 9990;
}
.ar-dropdown-menu.is-open { display: block; }
.ar-dropdown-menu .ar-btn { width: 100%; justify-content: flex-start; }

/* Card / Section — ArCard (tertiary): 1rem padding, 8px radius, hairline
   border, no shadow. Sorkhab separates cards from the page with the border
   plus the grey canvas behind them, never with elevation. */
.ar-card {
	background: var(--ar-color-surface);
	border: 1px solid var(--ar-color-st-hairline);
	border-radius: var(--ar-radius-sm);
	padding: 1rem;
}
.ar-card:focus-visible { outline: 2px solid var(--ar-color-focus-ring); }
/* A chosen card thickens its border to 2px in the brand color instead of
   tinting its background, so the card contents keep their contrast. */
.ar-card.is-selected { border: 2px solid var(--ar-color-st-selected); }
.ar-section { margin-block: var(--ar-space-6); }
.ar-section-title { font-size: 16px; font-weight: var(--ar-weight-emphasis); line-height: 24px; letter-spacing: -.32px; margin: 0 0 var(--ar-space-4); color: var(--ar-color-fg-strong); }
.ar-section-desc { color: var(--ar-color-fg-subtle); margin: 0 0 var(--ar-space-5); }

/* Grid */
.ar-grid { display: grid; gap: var(--ar-space-5); }
.ar-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ar-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
	.ar-grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.ar-grid-cols-3, .ar-grid-cols-2 { grid-template-columns: 1fr; }
}

/* Form — ArInput. Height-driven like the buttons (sm 32 / md 40 / lg 48),
   8px radius regardless of size, 13px inline padding. */
.ar-field { margin-bottom: var(--ar-space-4); }
.ar-label { display: block; font-size: 12px; font-weight: var(--ar-weight-emphasis); line-height: 16px; letter-spacing: -.24px; margin-bottom: var(--ar-space-2); color: var(--ar-color-fg-body); }
.ar-input, .ar-select {
	width: 100%;
	height: 40px;
	padding-block: 0;
	padding-inline: 13px;
	border-radius: 8px;
	border: 1px solid var(--ar-color-st-input);
	background: var(--ar-color-surface);
	color: var(--ar-color-fg-body);
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--ar-weight-body);
	line-height: 20px;
	letter-spacing: -.28px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ar-input::placeholder { color: var(--ar-color-fg-disabled); }
.ar-input:hover:not(:disabled), .ar-select:hover:not(:disabled) { border-color: var(--ar-color-st-input-hover); }
/* Sorkhab does NOT tint an input on focus — the border just darkens one
   step. The doubled ring is reserved for the error state, so a focused
   field and an invalid one can never be confused. */
.ar-input:focus, .ar-select:focus {
	outline: none;
	border-color: var(--ar-color-st-input-hover);
}
.ar-input[aria-invalid="true"], .ar-input.is-error, .ar-select.is-error {
	border-color: var(--ar-color-danger-500);
	box-shadow: 0 0 0 1px var(--ar-color-danger-500);
}
.ar-input:disabled, .ar-select:disabled {
	color: var(--ar-color-fg-disabled);
	border-color: var(--ar-color-fg-disabled);
	cursor: not-allowed;
}
.ar-input-sm { height: 32px; }
.ar-input-lg { height: 48px; }
/* Latin-only values (IPs, API keys, endpoints) flip to LTR inside RTL. */
.ar-input-ltr { direction: ltr; }
.ar-hint { font-size: 12px; line-height: 16px; letter-spacing: -.24px; color: var(--ar-color-fg-subtle); margin-top: var(--ar-space-1); }

/* Badge — ArBadge. Note the radius: Sorkhab badges are 4px rounded
   rectangles, NOT pills; the pill shape is an explicit opt-in modifier.
   Padding is uniform (4px), not the wider horizontal padding a pill needs. */
.ar-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	gap: 2px;
	padding: 4px;
	border-radius: 4px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: var(--ar-weight-emphasis);
	line-height: 16px;
	letter-spacing: -.24px;
}
.ar-badge-pill { border-radius: var(--ar-radius-pill); }
.ar-badge-sm { padding: 2px; }
.ar-badge-lg { padding: 8px; font-size: 14px; line-height: 20px; letter-spacing: -.28px; }
.ar-badge-success { background: var(--ar-color-success-100); color: var(--ar-color-success-500); }
.ar-badge-warning { background: var(--ar-color-warning-100); color: var(--ar-color-warning-500); }
.ar-badge-danger { background: var(--ar-color-danger-100); color: var(--ar-color-danger-500); }
.ar-badge-info { background: var(--ar-color-info-100); color: var(--ar-color-info-500); }
.ar-badge-primary { background: var(--ar-color-primary-100); color: var(--ar-color-primary-500); }
/* Neutral is a flat grey fill with no border, unlike the old outlined chip. */
.ar-badge-neutral { background: var(--ar-color-bg-hover); color: var(--ar-color-fg-subtle); }

/* Icon-header + counts-grid (matches the ArvanCloud resource-detail layout) */
.ar-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ar-space-4); flex-wrap: wrap; }
.ar-detail-header-main { display: flex; align-items: flex-start; gap: var(--ar-space-3); min-width: 0; }
.ar-detail-icon { width: 56px; height: 56px; border-radius: var(--ar-radius-md); background: var(--ar-color-surface-tertiary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 26px; }
.ar-detail-title { font-size: 18px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: var(--ar-space-2); min-width: 0; }
.ar-detail-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-detail-meta { color: var(--ar-color-text-muted); font-size: 13px; margin-top: 4px; }
.ar-detail-actions { display: flex; gap: var(--ar-space-2); flex-wrap: wrap; }

.ar-counts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ar-space-4); background: var(--ar-color-surface-tertiary); border: 1px solid var(--ar-color-border); border-radius: var(--ar-radius-lg); padding: var(--ar-space-4); }
.ar-counts-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ar-counts-item-label { font-size: 12px; color: var(--ar-color-text-muted); }
.ar-counts-item-value { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
	.ar-counts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.ar-counts-grid { grid-template-columns: 1fr; }
}

/* Table — ArTable. `border-collapse: separate` is deliberate: it is what lets
   the header row stay sticky with its own bottom border while scrolling.
   Header and body rows carry different border weights (t1-4 vs t3-4). */
.ar-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-weight: var(--ar-weight-body); line-height: 20px; letter-spacing: -.28px; color: var(--ar-color-fg-body); }
.ar-table th, .ar-table td { padding: .5rem .75rem; text-align: start; white-space: nowrap; }
.ar-table th { position: sticky; top: 0; z-index: 1; background: var(--ar-color-surface); color: var(--ar-color-fg-subtle); font-weight: var(--ar-weight-body); border-bottom: 1px solid var(--ar-color-st-input); }
.ar-table td { border-bottom: 1px solid var(--ar-color-st-hairline); }
.ar-table tr:last-child td { border-bottom: none; }
.ar-table-striped tbody tr:nth-of-type(odd) { background: var(--ar-color-bg); }
.ar-table-wrap { overflow-x: auto; border: 1px solid var(--ar-color-st-hairline); border-radius: var(--ar-radius-sm); background: var(--ar-color-surface); }

/* Toast — ArToast. The status color lives in a round icon chip, not in a
   border stripe down the side, and the only elevation in the system. */
.ar-toast-region { position: fixed; bottom: var(--ar-space-5); inset-inline-end: var(--ar-space-5); z-index: 9999; display: flex; flex-direction: column; gap: var(--ar-space-2); }
.ar-toast { display: flex; align-items: flex-start; gap: 1rem; width: 100%; max-width: 480px; background: var(--ar-color-surface); box-shadow: var(--ar-shadow-lg); border-radius: var(--ar-radius-md); padding: .75rem 1rem; font-size: 14px; line-height: 20px; letter-spacing: -.28px; color: var(--ar-color-fg-strong); }
.ar-toast-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--ar-radius-pill); }
.ar-toast-message { font-size: 12px; line-height: 16px; letter-spacing: -.24px; color: var(--ar-color-fg-body); }
.ar-toast-success .ar-toast-icon { background: var(--ar-color-success-100); color: var(--ar-color-success-500); }
.ar-toast-warning .ar-toast-icon { background: var(--ar-color-warning-100); color: var(--ar-color-warning-500); }
.ar-toast-error .ar-toast-icon { background: var(--ar-color-danger-100); color: var(--ar-color-danger-500); }

/* Modal */
.ar-modal-backdrop { position: fixed; inset: 0; background: rgba(10,10,14,.5); display: none; align-items: center; justify-content: center; z-index: 9998; padding: var(--ar-space-4); }
.ar-modal-backdrop.is-open { display: flex; }
.ar-modal { background: var(--ar-color-surface); border-radius: var(--ar-radius-md); box-shadow: var(--ar-shadow-lg); max-width: 420px; width: 100%; padding: var(--ar-space-5); max-height: calc(100vh - 32px); overflow-y: auto; }
.ar-modal-title { font-size: 16px; font-weight: var(--ar-weight-emphasis); color: var(--ar-color-fg-strong); margin: 0 0 var(--ar-space-4); }
.ar-modal-actions { display: flex; justify-content: flex-start; gap: var(--ar-space-2); margin-top: var(--ar-space-5); }

/* Alert */
.ar-alert { border-radius: var(--ar-radius-md); padding: var(--ar-space-3) var(--ar-space-4); font-size: 13px; margin-bottom: var(--ar-space-4); border: 1px solid transparent; }
.ar-alert-warning { background: var(--ar-color-warning-100); color: #8a5a00; border-color: var(--ar-color-warning-500); }
.ar-alert-danger { background: var(--ar-color-danger-100); color: #8a1c1c; border-color: var(--ar-color-danger-500); }
.ar-alert-info { background: var(--ar-color-info-100); color: #1e3a8a; border-color: var(--ar-color-info-500); }

/* Utility */
.ar-flex { display: flex; align-items: center; }
.ar-gap-2 { gap: var(--ar-space-2); }
.ar-gap-3 { gap: var(--ar-space-3); }
.ar-gap-4 { gap: var(--ar-space-4); }
.ar-muted { color: var(--ar-color-text-muted); }
.ar-mono { font-variant-numeric: tabular-nums; }
.ar-hidden { display: none !important; }

/* Tabs */
.ar-tabs { display: flex; gap: var(--ar-space-2); border-bottom: 1px solid var(--ar-color-border); margin-bottom: var(--ar-space-4); overflow-x: auto; }
.ar-tab { padding: 10px 4px; margin-inline-end: var(--ar-space-5); border-bottom: 2px solid transparent; cursor: pointer; font-weight: 600; color: var(--ar-color-text-muted); white-space: nowrap; background: none; border-top: none; border-inline: none; font-family: inherit; font-size: 14px; }
.ar-tab.is-active, .ar-tab.is-active:visited { color: var(--ar-color-fg-body); border-bottom-color: var(--ar-color-brand-500); }
.ar-tab-panel { display: none; }
.ar-tab-panel.is-active { display: block; }
.ar-container { max-width: 1080px; margin-inline: auto; padding-inline: var(--ar-space-4); }

/* Small segmented control (e.g. the Ubuntu/Root SSH-access switch) — same
   data-ar-tabs/data-ar-tab machinery as .ar-tabs above, just a compact pill
   variant instead of an underlined tab strip. */
.ar-segmented { display: inline-flex; background: var(--ar-color-surface-tertiary); border-radius: var(--ar-radius-pill); padding: 3px; gap: 2px; }
.ar-segmented-item {
	border: none;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--ar-color-text-muted);
	padding: 6px 16px;
	border-radius: var(--ar-radius-pill);
	cursor: pointer;
}
.ar-segmented-item.is-active { background: var(--ar-color-surface); color: var(--ar-color-text); box-shadow: var(--ar-shadow-sm); }

/* Copy button success feedback (icon is swapped to a checkmark by JS for ~1.2s) */
.is-copied { color: var(--ar-color-success-500) !important; }

/* Resource row — replaces the old cramped <table> server list with a
   flex row per server (no ancestor overflow, so its kebab menu never gets
   clipped) closer to how a real cloud console lists resources. */
.ar-resource-list { display: flex; flex-direction: column; border: 1px solid var(--ar-color-border); border-radius: var(--ar-radius-lg); background: var(--ar-color-surface); overflow: hidden; }
.ar-resource-row { display: flex; align-items: center; gap: var(--ar-space-3); padding: var(--ar-space-4); border-bottom: 1px solid var(--ar-color-border); cursor: pointer; }
.ar-resource-list > *:last-child .ar-resource-row { border-bottom: none; }
.ar-resource-row:hover { background: var(--ar-color-surface-tertiary); }
.ar-resource-icon { width: 40px; height: 40px; border-radius: var(--ar-radius-sm); background: var(--ar-color-surface-tertiary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--ar-color-text-muted); }
.ar-resource-main { flex: 1 1 220px; min-width: 0; }
.ar-resource-name { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ar-resource-sub { color: var(--ar-color-text-muted); font-size: 12px; margin-top: 2px; }
.ar-resource-col { flex: 0 0 auto; min-width: 0; }
.ar-resource-col-ip { flex: 1 1 140px; }
.ar-resource-col-price { flex: 0 0 120px; text-align: start; }
.ar-resource-actions { flex: 0 0 auto; }
.ar-resource-detail { padding: var(--ar-space-4); background: var(--ar-color-surface-tertiary); border-bottom: 1px solid var(--ar-color-border); display: flex; flex-direction: column; gap: var(--ar-space-4); }
.ar-resource-list > *:last-child .ar-resource-detail { border-bottom: none; }

.ar-ssh-panel { display: flex; flex-direction: column; gap: var(--ar-space-2); }
.ar-ssh-line { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--ar-color-surface); border: 1px solid var(--ar-color-border); border-radius: var(--ar-radius-sm); padding: 8px 12px; }
.ar-ssh-hint { font-size: 12px; color: var(--ar-color-text-muted); }

@media (max-width: 720px) {
	.ar-resource-row { flex-wrap: wrap; }
	.ar-resource-col-ip, .ar-resource-col-price { flex: 1 1 45%; }
}