/* ==========================================================================
   Avir — Appearance layer: colour schemes + the optional "Modern" (Netcore)
   skin for tables, buttons and badges.

   HOW IT WORKS
   - The admin wrap (.ahp-wrap) and the client portal root (.ahp-portal) carry
     data-ahp-scheme="…" and data-ahp-skin="…", set from Settings → Appearance.
   - A scheme only re-points the brand CSS variables, so the ENTIRE panel and
     portal recolour with zero markup changes. Picking "Avir Teal" + "Classic"
     restores the exact original design (full revert).
   - The Modern skin is additive and scoped to [data-ahp-skin="modern"]; it only
     refines badges, tables and buttons — nothing else is touched.
   ========================================================================== */

/* Inter — the exact Netcore UI font. Must stay at the very top: CSS ignores an
   @import that comes after any other rule. Falls back to system fonts offline. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------- Colour schemes */
/* Variables are set on the wrap itself, so they override :root for everything
   inside the admin panel and the portal (including drawers & modals). */

[data-ahp-scheme="avir"] {
	--ahp-brand-50: #e7f5f4;  --ahp-brand-100: #c4e6e4; --ahp-brand-200: #9dd5d2;
	--ahp-brand-500: #0e7c7b; --ahp-brand-600: #0b6564; --ahp-brand-700: #0a5150;
	--ahp-accent: #1a9c52;    --ahp-accent-50: #e6f6ec;
	--ahp-ring: 0 0 0 3px rgba(14, 124, 123, .28);
	--ahp-grad-end: #34c27a;
}
[data-ahp-scheme="ocean"] {
	--ahp-brand-50: #eaf2ff;  --ahp-brand-100: #d0e1ff; --ahp-brand-200: #a9c7ff;
	--ahp-brand-500: #3b76ee; --ahp-brand-600: #2563eb; --ahp-brand-700: #1d4ed8;
	--ahp-accent: #0ea5e9;    --ahp-accent-50: #e6f6fe;
	--ahp-ring: 0 0 0 3px rgba(37, 99, 235, .26);
	--ahp-grad-end: #38bdf8;
}
[data-ahp-scheme="indigo"] {
	--ahp-brand-50: #eef0ff;  --ahp-brand-100: #dcdcfb; --ahp-brand-200: #c3c0f7;
	--ahp-brand-500: #625bef; --ahp-brand-600: #4f46e5; --ahp-brand-700: #4338ca;
	--ahp-accent: #7c3aed;    --ahp-accent-50: #f1eaff;
	--ahp-ring: 0 0 0 3px rgba(79, 70, 229, .26);
	--ahp-grad-end: #a78bfa;
}
[data-ahp-scheme="emerald"] {
	--ahp-brand-50: #e7f7f0;  --ahp-brand-100: #c3efdc; --ahp-brand-200: #90e2c2;
	--ahp-brand-500: #0ca678; --ahp-brand-600: #059669; --ahp-brand-700: #047857;
	--ahp-accent: #10b981;    --ahp-accent-50: #e6f8f1;
	--ahp-ring: 0 0 0 3px rgba(5, 150, 105, .26);
	--ahp-grad-end: #34d399;
}
[data-ahp-scheme="graphite"] {
	--ahp-brand-50: #eef1f6;  --ahp-brand-100: #dde3ec; --ahp-brand-200: #c2ccda;
	--ahp-brand-500: #475569; --ahp-brand-600: #334155; --ahp-brand-700: #1e293b;
	--ahp-accent: #2563eb;    --ahp-accent-50: #eaf2ff;
	--ahp-ring: 0 0 0 3px rgba(51, 65, 85, .24);
	--ahp-grad-end: #60a5fa;
}

/* ====================================================================== */
/* MODERN skin — pixel-matched to the Netcore "Customer Engagement" look   */
/* (F:/new-admin-panel/src/pages/netcore/netcore-skin.css), re-coloured to */
/* your scheme. Values copied 1:1 from .ncs-* ; brand blue -> your brand.  */
/* Scoped to [data-ahp-skin="modern"]; Classic reverts everything.         */
/* ====================================================================== */

/* Inter font-family is applied below; the @import that loads it sits at the top
   of this file because CSS ignores @import rules that follow other rules. */
[data-ahp-skin="modern"] { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* ---- Status chips (.ncs-chip): outlined, square 2px, uppercase, centered,
        min-width 80px, 18px tall, 10.5px/600, letter-spacing .04em. The
        semantic colours are Netcore's exact outlined palette. --------------- */
[data-ahp-skin="modern"] .ahp-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
	height: 18px;
	padding: 0 10px;
	gap: 0;
	border: 1px solid var(--ahp-gray-300);
	border-radius: 2px;
	background: #f5f7fa;
	color: #6b7280;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
[data-ahp-skin="modern"] .ahp-badge::before { display: none; }
[data-ahp-skin="modern"] .ahp-badge--completed,
[data-ahp-skin="modern"] .ahp-badge--verified,
[data-ahp-skin="modern"] .ahp-badge--received,
[data-ahp-skin="modern"] .ahp-badge--active { color: #0f9f6e; border-color: #34c38f; background: #e8f8f1; }
[data-ahp-skin="modern"] .ahp-badge--in_progress,
[data-ahp-skin="modern"] .ahp-badge--submitted { color: #d48806; border-color: #f5c142; background: #fff8e6; }
[data-ahp-skin="modern"] .ahp-badge--pending,
[data-ahp-skin="modern"] .ahp-badge--uploaded { color: #1a6cf2; border-color: #7aa9f7; background: #eaf2ff; }
[data-ahp-skin="modern"] .ahp-badge--blocked,
[data-ahp-skin="modern"] .ahp-badge--rejected,
[data-ahp-skin="modern"] .ahp-badge--cancelled,
[data-ahp-skin="modern"] .ahp-badge--inactive { color: #dc2626; border-color: #f5a3a3; background: #fef2f2; }
[data-ahp-skin="modern"] .ahp-badge--on_hold { color: #6b7280; border-color: #c9d0da; background: #f5f7fa; }

/* ---- Meta tags (.ahp-chip) — Netcore keeps these as light square tags. */
[data-ahp-skin="modern"] .ahp-chip { border-radius: 3px; }
[data-ahp-skin="modern"] .ahp-chip--brand { border-radius: 4px; }

/* ---- Buttons (.ncs-btn): 4px radius, UPPERCASE, 13px/600, ls .02em.
        Colours already come from your button variants (brand-driven). ------- */
[data-ahp-skin="modern"] .ahp-btn {
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}
[data-ahp-skin="modern"] .ahp-btn--sm { border-radius: 4px; font-size: 11.5px; }
[data-ahp-skin="modern"] .ahp-btn--icon { border-radius: 6px; }
[data-ahp-skin="modern"] .ahp-btn--icon.ahp-btn--sm { border-radius: 4px; }

/* ---- In-page tabs (.ncs-tab): plain words, 3px full-width bar when active. */
[data-ahp-skin="modern"] .ahp-tab { font-weight: 400; border-radius: 0; }
[data-ahp-skin="modern"] .ahp-tab:hover { background: transparent; }
[data-ahp-skin="modern"] .ahp-tab.is-active { font-weight: 600; }
[data-ahp-skin="modern"] .ahp-tab::after { left: 0; right: 0; border-radius: 3px; height: 3px; }

/* ---- Tables (.ncs-table): tall 64px header (15px/500, NOT uppercase, 2px
        rule), roomy 18px/20px cells top-aligned, tabular figures, and the
        signature hover = light brand wash + 4px left accent on the first cell. */
[data-ahp-skin="modern"].ahp-wrap .ahp-table,
[data-ahp-skin="modern"].ahp-portal .ahp-table { font-size: 14px; }
[data-ahp-skin="modern"].ahp-wrap .ahp-table th,
[data-ahp-skin="modern"].ahp-portal .ahp-table th {
	height: 64px;
	padding: 0 20px;
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ahp-gray-700);
	background: transparent;
	border-bottom: 2px solid var(--ahp-gray-200);
}
[data-ahp-skin="modern"].ahp-wrap .ahp-table td,
[data-ahp-skin="modern"].ahp-portal .ahp-table td {
	padding: 18px 20px;
	vertical-align: top;
	border-bottom: 1px solid var(--ahp-gray-200);
	font-variant-numeric: tabular-nums;
}
[data-ahp-skin="modern"].ahp-wrap .ahp-table tbody tr:hover,
[data-ahp-skin="modern"].ahp-portal .ahp-table tbody tr:hover { background: var(--ahp-brand-50); }
[data-ahp-skin="modern"].ahp-wrap .ahp-table tbody tr:hover > td:first-child,
[data-ahp-skin="modern"].ahp-portal .ahp-table tbody tr:hover > td:first-child { box-shadow: inset 4px 0 0 var(--ahp-brand-600); }

/* Parametrised brand gradients fall back to Avir green when no scheme end set. */
.ahp-progress__bar { background: linear-gradient(90deg, var(--ahp-brand-600), var(--ahp-grad-end, #34c27a)); }
.ahp-bars__bar { background: linear-gradient(180deg, var(--ahp-grad-end, #34c27a), var(--ahp-brand-600)); }