/* ============================================================
   Ganj Danesh ERP — Global Reference Stylesheet
   ------------------------------------------------------------
   Philosophy:
   - Loads SYNCHRONOUSLY via <link>, so core UI paints correctly
     on first load (no waiting for the async Tailwind loader).
   - Design tokens live in :root — change a color/spacing ONCE
     and the whole ERP follows.
   - RTL-first, compact/dense aesthetic (12px base).
   - Pairs with Tailwind: this file owns components + tokens,
     Tailwind stays for one-off layout utilities (flex, gap, etc.)
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS  (single source of truth)
   ============================================================ */
:root {
    /* ---- Brand ---- */
    --brand-blue:          #2563eb;
    --brand-blue-hover:    #1d4ed8;
    --brand-blue-active:   #1e40af;
    --brand-blue-soft:     #eff6ff;   /* light tint for backgrounds */
    --brand-yellow:        #FACC15;   /* accent */
    --brand-yellow-hover:  #eab308;
    --brand-yellow-soft:   #fefce8;

    /* ---- Neutrals ---- */
    --grey-50:   #f9fafb;
    --grey-100:  #f3f4f6;
    --grey-200:  #e5e7eb;
    --grey-300:  #d1d5db;
    --grey-400:  #9ca3af;
    --grey-500:  #6b7280;
    --grey-600:  #4b5563;
    --grey-700:  #374151;
    --grey-800:  #1f2937;
    --grey-900:  #111827;

    /* Project-specific greys (kept from your palette) */
    --dk-grey:    #f1f2f4;
    --dk-border:  #e0e0e2;

    /* ---- Semantic colors (each: base + soft tint + text) ---- */
    --success:        #16a34a;
    --success-soft:   #f0fdf4;
    --success-border: #bbf7d0;
    --warning:        #d97706;
    --warning-soft:   #fffbeb;
    --warning-border: #fde68a;
    --danger:         #dc2626;
    --danger-soft:    #fef2f2;
    --danger-border:  #fecaca;
    --info:           #2563eb;
    --info-soft:      #eff6ff;
    --info-border:    #bfdbfe;

    /* ---- Surfaces & text ---- */
    --bg-body:        #f3f4f6;
    --bg-surface:     #ffffff;
    --text-primary:   #1f2937;
    --text-secondary: #4b5563;
    --text-muted:     #9ca3af;
    --border-color:   #e0e0e2;

    /* ---- Typography ---- */
    --font-sans: 'Kalameh', 'Vazirmatn', sans-serif;
    --fs-xs:   11px;
    --fs-sm:   12px;   /* base body size — compact */
    --fs-md:   13px;
    --fs-lg:   14px;
    --fs-xl:   16px;
    --fs-2xl:  18px;

    /* ---- Spacing scale (dense) ---- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;

    /* ---- Radii ---- */
    --radius-sm:   4px;
    --radius:      6px;
    --radius-lg:   10px;
    --radius-full: 9999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow:    0 1px 3px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);

    /* ---- Motion ---- */
    --transition: 0.18s ease;

    /* ---- Focus ring (accessibility) ---- */
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);
}


/* ============================================================
   2. FONT + RESET
   ============================================================ */
/* ============================================================
   WEBFONT — this block used to be broken, and it is why the ERP
   has never had its own Persian font on any device.

   The old rule was:

       @font-face { font-family:'Kalameh';
                    src: local('Kalameh'), local('Vazirmatn'), sans-serif; }

   Two faults. `sans-serif` is not a legal `src` component, and one
   invalid component invalidates the whole descriptor — the browser
   drops the face. Chrome reports it as `Kalameh normal [error]` in
   document.fonts, which is exactly what the live page was showing.
   And `local()` only finds a font already INSTALLED on the visitor's
   device; nobody's phone has Kalameh, so even a valid version would
   have fallen back to the system UI font. Every page in the ERP has
   been rendering in whatever the OS supplies.

   Now it loads a real file. Vazirmatn is used because the woff2 files
   were already in the repo (Mobile/App/fonts) — they are copied to
   CDN/fonts so the whole system shares one set instead of depending
   on the Mobile module staying where it is.

   `font-display:swap` on purpose: text paints immediately in the
   fallback and re-renders when the file lands. On a slow Iranian
   connection the alternative is three seconds of invisible text.

   'Kalameh' is kept as an alias so the hundreds of existing
   `font-family:'Kalameh',...` declarations across the modules keep
   working without touching a single one of them.
   ============================================================ */
@font-face {
    font-family: 'Vazirmatn';
    src: url('/CDN/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('/CDN/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('/CDN/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

/* Alias: every module already asks for 'Kalameh' first. Prefer a real
   installed Kalameh if the machine has one, otherwise serve Vazirmatn. */
@font-face {
    font-family: 'Kalameh';
    src: local('Kalameh'), url('/CDN/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Kalameh';
    src: local('Kalameh Medium'), url('/CDN/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500 600;
    font-display: swap;
}
@font-face {
    font-family: 'Kalameh';
    src: local('Kalameh Bold'), url('/CDN/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700 900;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ============================================================
   3. BASE / TYPOGRAPHY
   ============================================================ */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: 1.6;
    background-color: var(--bg-body);
    color: var(--text-primary);
    direction: rtl;
}

h1 { font-size: var(--fs-2xl); font-weight: bold; margin-bottom: var(--space-3); }
h2 { font-size: var(--fs-xl);  font-weight: bold; margin-bottom: 10px; }
h3 { font-size: var(--fs-lg);  font-weight: bold; margin-bottom: var(--space-2); }

a {
    color: var(--brand-blue);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--brand-blue-hover);
    text-decoration: underline;
}


/* ============================================================
   4. FORMS
   ------------------------------------------------------------
   Layout helpers:
     .field         → one label + input stack
     .field-row     → several fields side-by-side (gap: var(--space-3))
     .field-label   → the label
     .field-hint    → small helper text under a field
     .field-error   → red error text under a field
   ============================================================ */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}
.field-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.field-row > .field { flex: 1 1 0; margin-bottom: 0; }

.field-label {
    font-size: var(--fs-sm);
    font-weight: bold;
    color: var(--text-secondary);
}
.field-label .req { color: var(--danger); margin-inline-start: 2px; } /* red asterisk */

.field-hint  { font-size: var(--fs-xs); color: var(--text-muted); }
.field-error { font-size: var(--fs-xs); color: var(--danger); }

/* ---- Base controls ---- */
input,
select,
textarea {
    font-family: inherit;
    font-size: var(--fs-sm);
    width: 100%;
    border: 1px solid var(--grey-300);
    border-radius: var(--radius);
    padding: 8px 12px;
    background-color: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
input::placeholder,
textarea::placeholder { color: var(--text-muted); }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-blue);
    box-shadow: var(--focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--grey-100);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Invalid state — add class "is-invalid" to any control */
.is-invalid {
    border-color: var(--danger) !important;
}
.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

textarea { resize: vertical; min-height: 72px; }

/* ---- Size modifiers ---- */
.input-sm { padding: 5px 9px;  font-size: var(--fs-xs); }
.input-lg { padding: 10px 14px; font-size: var(--fs-lg); }

/* ---- Select: custom arrow (RTL — arrow sits on the LEFT) ---- */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 32px; /* room for the arrow on the left */
}

/* ---- Input group: leading icon (RTL → icon on the RIGHT) ---- */
.input-group { position: relative; }
.input-group .ig-icon {
    position: absolute;
    top: 0; bottom: 0; right: 12px;
    display: flex; align-items: center;
    color: var(--text-muted);
    font-size: var(--fs-lg);
    pointer-events: none;
}
.input-group input { padding-right: 38px; } /* clear the leading icon */

/* Trailing action inside a group (e.g. show/hide password) → LEFT side */
.input-group .ig-action {
    position: absolute;
    top: 0; bottom: 0; left: 12px;
    display: flex; align-items: center;
    color: var(--text-muted);
    font-size: var(--fs-lg);
    cursor: pointer;
    transition: color var(--transition);
}
.input-group .ig-action:hover { color: var(--text-secondary); }
.input-group input.has-action { padding-left: 38px; } /* clear the trailing action */

/* ---- Checkboxes & radios ----
   Sensible default: raw inputs get on-brand accent automatically. */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    accent-color: var(--brand-blue);
    cursor: pointer;
}

/* Opt-in polished version: <label class="form-check"> ... </label> */
.form-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    user-select: none;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 16px; height: 16px;
    accent-color: var(--brand-blue);
    margin: 0;
}
.form-check input:disabled + span { color: var(--text-muted); cursor: not-allowed; }

/* ---- Toggle switch (bonus — common in ERP settings) ----
   <label class="switch"><input type="checkbox"><span></span></label> */
.switch { position: relative; display: inline-block; width: 38px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
    position: absolute; inset: 0;
    background-color: var(--grey-300);
    border-radius: var(--radius-full);
    transition: background-color var(--transition);
}
.switch span::before {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    right: 3px; top: 3px;               /* RTL: knob starts on the right */
    background-color: #fff;
    border-radius: 50%;
    transition: transform var(--transition);
    box-shadow: var(--shadow-sm);
}
.switch input:checked + span { background-color: var(--brand-blue); }
.switch input:checked + span::before { transform: translateX(-18px); } /* slides left */
.switch input:disabled + span { opacity: 0.5; cursor: not-allowed; }


/* ============================================================
   5. BUTTONS
   ------------------------------------------------------------
   Base .btn + one variant. Optional size + state classes.
     Variants: .btn-primary .btn-secondary .btn-outline
               .btn-ghost .btn-danger .btn-success
               .btn-warning .btn-accent
     Sizes:    .btn-sm .btn-lg .btn-icon .btn-block
     State:    .btn-loading  (spinner)  |  [disabled]
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: bold;
    line-height: 1;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition), border-color var(--transition),
                color var(--transition), opacity var(--transition), box-shadow var(--transition);
}
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn:disabled,
.btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* --- Variants --- */
.btn-primary   { background-color: var(--brand-blue);   color: #fff; }
.btn-primary:hover   { background-color: var(--brand-blue-hover); }
.btn-primary:active  { background-color: var(--brand-blue-active); }

.btn-secondary { background-color: var(--grey-100); color: var(--text-primary); border-color: var(--grey-200); }
.btn-secondary:hover { background-color: var(--grey-200); }

.btn-outline   { background-color: transparent; color: var(--brand-blue); border-color: var(--brand-blue); }
.btn-outline:hover   { background-color: var(--brand-blue-soft); }

.btn-ghost     { background-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover     { background-color: var(--grey-100); }

.btn-danger    { background-color: var(--danger);  color: #fff; }
.btn-danger:hover    { background-color: #b91c1c; }

.btn-success   { background-color: var(--success); color: #fff; }
.btn-success:hover   { background-color: #15803d; }

.btn-warning   { background-color: var(--warning); color: #fff; }
.btn-warning:hover   { background-color: #b45309; }

.btn-accent    { background-color: var(--brand-yellow); color: var(--grey-900); }
.btn-accent:hover    { background-color: var(--brand-yellow-hover); }

/* --- Sizes --- */
.btn-sm    { padding: 6px 11px; font-size: var(--fs-xs); }
.btn-lg    { padding: 11px 20px; font-size: var(--fs-lg); }
.btn-block { width: 100%; }
.btn-icon  { padding: 8px; width: 34px; height: 34px; }         /* square icon-only */
.btn-icon.btn-sm { width: 28px; height: 28px; padding: 6px; }

/* --- Loading state: hides text, shows spinner --- */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    /* spinner inherits the pre-loading text color via a wrapper trick:
       set an explicit color on the button variant if needed */
    animation: erp-spin 0.6s linear infinite;
    color: #fff;
}
@keyframes erp-spin { to { transform: rotate(360deg); } }


/* ============================================================
   6. ALERTS
   ------------------------------------------------------------
   <div class="alert alert-success">
     <i class="alert-icon fa-light fa-circle-check"></i>
     <div class="alert-body">message…</div>
     <button class="alert-close">&times;</button>
   </div>
   ============================================================ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 10px 14px;
    border: 1px solid transparent;
    border-right-width: 4px;          /* RTL: accent bar on the right */
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-3);
}
.alert-icon  { flex-shrink: 0; font-size: var(--fs-lg); margin-top: 1px; }
.alert-body  { flex: 1; }
.alert-title { font-weight: bold; margin-bottom: 2px; }
.alert-close {
    flex-shrink: 0;
    background: none; border: none; padding: 0;
    font-size: var(--fs-xl); line-height: 1;
    color: inherit; opacity: 0.6; cursor: pointer;
}
.alert-close:hover { opacity: 1; }

.alert-info    { background: var(--info-soft);    border-color: var(--info-border);    color: #1e40af; }
.alert-success { background: var(--success-soft); border-color: var(--success-border); color: #166534; }
.alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: #92400e; }
.alert-danger  { background: var(--danger-soft);  border-color: var(--danger-border);  color: #991b1b; }


/* ============================================================
   7. NOTIFICATIONS / TOASTS
   ------------------------------------------------------------
   Put ONE container in the page:
     <div class="toast-container"></div>
   Then inject toasts with JS:
     <div class="toast toast-success">…</div>
   Top-left is used because the UI is RTL (out of the way of
   the natural reading start on the right).
   ============================================================ */
.toast-container {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;             /* clicks pass through empty area */
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 240px;
    max-width: 360px;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-right-width: 4px;          /* RTL accent bar */
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm);
    animation: erp-toast-in 0.22s ease;
}
.toast-icon  { flex-shrink: 0; font-size: var(--fs-lg); }
.toast-body  { flex: 1; }
.toast-close {
    background: none; border: none; padding: 0;
    font-size: var(--fs-lg); line-height: 1;
    color: var(--text-muted); cursor: pointer;
}
.toast-close:hover { color: var(--text-secondary); }

.toast-success { border-right-color: var(--success); }
.toast-success .toast-icon { color: var(--success); }
.toast-danger  { border-right-color: var(--danger); }
.toast-danger  .toast-icon { color: var(--danger); }
.toast-warning { border-right-color: var(--warning); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info    { border-right-color: var(--info); }
.toast-info    .toast-icon { color: var(--info); }

/* Slide in from the left edge (matches top-left placement) */
@keyframes erp-toast-in {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* Add class "toast-out" via JS before removing, for a clean exit */
.toast-out { animation: erp-toast-out 0.2s ease forwards; }
@keyframes erp-toast-out {
    to { opacity: 0; transform: translateX(-16px); }
}


/* ============================================================
   8. BADGES
   ------------------------------------------------------------
   .badge + variant. Soft variants for status chips,
   solid for counts/emphasis. .badge-pill for fully rounded.
   .badge-dot adds a leading status dot.
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-size: var(--fs-xs);
    font-weight: bold;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.badge-pill { border-radius: var(--radius-full); }

/* Leading status dot */
.badge-dot::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* --- Soft (default, subtle status chips) --- */
.badge-primary { background: var(--brand-blue-soft); color: var(--brand-blue-active); }
.badge-success { background: var(--success-soft);    color: #166534; }
.badge-warning { background: var(--warning-soft);    color: #92400e; }
.badge-danger  { background: var(--danger-soft);     color: #991b1b; }
.badge-neutral { background: var(--grey-100);        color: var(--grey-600); }
.badge-accent  { background: var(--brand-yellow-soft); color: #854d0e; }

/* --- Solid (emphasis / counts) --- */
.badge-solid.badge-primary { background: var(--brand-blue);   color: #fff; }
.badge-solid.badge-success { background: var(--success);      color: #fff; }
.badge-solid.badge-warning { background: var(--warning);      color: #fff; }
.badge-solid.badge-danger  { background: var(--danger);       color: #fff; }
.badge-solid.badge-neutral { background: var(--grey-500);     color: #fff; }
.badge-solid.badge-accent  { background: var(--brand-yellow); color: var(--grey-900); }


/* ============================================================
   9. CARDS / SURFACES  (light — full panel kit is a later pass)
   ============================================================ */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
}


/* ============================================================
   10. TABLES  (kept & refined from your original)
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-surface);
}
th, td {
    text-align: right;
    padding: 10px;
    border-bottom: 1px solid var(--grey-200);
}
th {
    background-color: var(--grey-50);
    font-weight: bold;
    color: var(--text-secondary);
}
tbody tr:hover { background-color: var(--grey-50); }


/* ============================================================
   11. UTILITIES  (kept & lightly extended)
   ============================================================ */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }

.hidden       { display: none; }
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }

.rounded { border-radius: var(--radius); }
.shadow  { box-shadow: var(--shadow); }

/* Colors */
.text-gray-500 { color: var(--grey-500); }
.text-gray-700 { color: var(--grey-700); }
.text-red-600  { color: var(--danger); }
.text-green-600{ color: var(--success); }

.bg-white   { background-color: var(--bg-surface); }
.bg-gray-50 { background-color: var(--grey-50); }





/* ============================================================
   12. AUTH PAGES  (login, logout landing, session-expired)
   ============================================================ */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg-surface);
    border-top: 4px solid var(--brand-blue);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
}
.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--brand-yellow);
    margin-bottom: var(--space-3);
}
.auth-logo i { font-size: 24px; color: var(--brand-blue); }
.auth-title { color: var(--brand-blue); margin-bottom: 4px; }
.auth-subtitle { color: var(--text-muted); font-size: var(--fs-xl); font-weight: normal; }

/* ============================================================
   12. FIELD ICON SPACING — tokens, not hand-typed numbers
   ------------------------------------------------------------
   Why this section exists.

   Three modules had an icon sitting inside a text field, and each
   had reserved room for it with a different hand-typed number:

       Login_and_Auth/login.css   .input-group input   padding: 0 44px 0 14px
       PIM/PIM.html               .fb-search input     padding: 0 42px 0 16px
       Settings/Startup_Setting   .srch input          padding: 9px 36px 9px 14px

   44, 42, 36 — three answers to one question. Worse, in login.css
   the icon itself was pinned with `inset-inline-end`, which on an
   RTL page is the LEFT edge, so the gap was held open on the right
   while the icon sat on the left and the username ran underneath it.

   The fix is the one Polaris and Material use: the space the text
   must leave and the position of the icon are DERIVED FROM THE SAME
   TOKEN, so they cannot drift apart. Change --gd-field-icon-inset
   and both the icon and the padding move together.

       room = inset + icon size + gap

   Physical `right`/`left` on purpose: every ERP page is RTL, and the
   padding shorthand these rules interact with is physical too.
   Mixing the logical and physical families is what broke login, and
   it breaks silently because it looks correct in LTR.
   ============================================================ */
:root {
    --gd-field-h:           44px;
    --gd-field-radius:      999px;
    --gd-field-pad:         14px;   /* the plain side */
    --gd-field-icon:        16px;   /* icon box */
    --gd-field-icon-inset:  14px;   /* icon distance from the edge */
    --gd-field-gap:         12px;   /* breathing room between icon and text */

    /* Reserved on the icon side. Never type this number by hand. */
    --gd-field-icon-room:   calc(var(--gd-field-icon-inset) + var(--gd-field-icon) + var(--gd-field-gap));

    /* Reserved on the side that holds a button (eye toggle, clear, …) */
    --gd-field-action-inset: 8px;
    --gd-field-action:       30px;
    --gd-field-action-room:  calc(var(--gd-field-action-inset) + var(--gd-field-action) + 8px);
}

/* Reusable component. New code should use this instead of inventing
   another .srch / .fb-search / .input-group. */
.gd-field { position: relative; display: block; }

.gd-field > input,
.gd-field > select {
    width: 100%;
    height: var(--gd-field-h);
    padding-right: var(--gd-field-icon-room);   /* RTL start: where the icon is */
    padding-left:  var(--gd-field-pad);
    border-radius: var(--gd-field-radius);
    border: 1px solid transparent;
    background: var(--grey-100, #f3f4f6);
    font: inherit;
    color: inherit;
    outline: none;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gd-field > input:focus,
.gd-field > select:focus {
    background: #fff;
    border-color: var(--brand-blue, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.gd-field.has-action > input { padding-left: var(--gd-field-action-room); }

.gd-field > .gd-field-icon {
    position: absolute;
    right: var(--gd-field-icon-inset);
    top: 50%;
    transform: translateY(-50%);
    width: var(--gd-field-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-400, #9ca3af);
    font-size: 14px;
    pointer-events: none;                 /* the click belongs to the input */
}
.gd-field > .gd-field-action {
    position: absolute;
    left: var(--gd-field-action-inset);
    top: 50%;
    transform: translateY(-50%);
    width: var(--gd-field-action);
    height: var(--gd-field-action);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--grey-400, #9ca3af);
    cursor: pointer;
    line-height: 1;
}
.gd-field > .gd-field-action:hover {
    color: var(--brand-blue, #2563eb);
    background: var(--brand-blue-soft, #eff6ff);
}