/* ============================================================================
   gb-generated-skin.css

   The look of a page produced by the page generator, extracted VERBATIM from
   EjarEntities/Entities/* on 2026-10-15 so that the Sales module can wear it
   without copying ~380 CSS lines into every page.

   Three things to know before editing:

   1. EVERY rule is scoped under .gen-modern / .gm-grid / .gm-form / .gm-dash.
      The rules are !important-heavy; unscoped, they would restyle all 868
      components in the product. Keep the scope.

   2. The accent is a token chain, never a literal:
         --acc: var(--kt-primary)   and every tint is color-mix(... var(--acc) N%, var(--gm-mix))
      so the skin follows the tenant theme. Do not hard-code #bd9247.

   3. The generated pages still carry their own identical <style> blocks. They
      were left in place deliberately: this file is additive, and the reference
      pages must render byte-identically with or without it. When a generated
      page is ready to drop its block, it becomes a delete - not a rewrite.

   Sections below are copied from, in order:
     - EjarEntities/Entities/Entities.razor  (page shell)
     - EjarEntities/Entities/EntitiesGrid.razor  (grid)
     - EjarEntities/Entities/EntitiesForm.razor  (form)
     - EjarEntities/Entities/EntitiesDashboard.razor  (dashboard)
   ============================================================================ */

/* ---------------------------------------------------------------------------
   page shell  --  scope .gen-modern
   source: EjarEntities/Entities/Entities.razor  (58 lines)
   --------------------------------------------------------------------------- */
    /* ===== Style moderne « ١ أنيق » — appliqué UNIQUEMENT à l'apparence du contenu (scopé .gen-modern). Accent = couleur société/thème (--kt-primary). Aucun impact fonctionnel. ===== */
    .gen-modern { --gm-surface: #fff; --gm-surface-2: #f4f6fa; --gm-mix: #fff; /* surfaces; the dark block at the end of this file is the only place they change */
        --acc: var(--kt-primary, #4b2e83);
        --acc-soft: color-mix(in srgb, var(--acc) 9%, var(--gm-mix));
        --acc-soft2: color-mix(in srgb, var(--acc) 5%, var(--gm-mix));
        --acc-ink: color-mix(in srgb, var(--acc) 70%, #0b0f16);
        --gm-line: #e7eaf0;
        --gm-line2: #eef1f5;
        --gm-ink: #101828;
        --gm-muted: #667085;
        --gm-radius: 16px;
        --gm-radius-sm: 11px;
    }
    /* Carte extérieure transparente : les cartes internes « flottent » façon mockup */
    .gen-modern > .row > .card.card-xl-stretch { background: transparent !important; border: none !important; box-shadow: none !important; margin: 0 !important; }
    .gen-modern > .row > .card.card-xl-stretch > .card-body { padding: .25rem 0 0 !important; }
    /* Cartes internes modernes */
    .gen-modern .card { border: 1px solid var(--gm-line) !important; border-radius: var(--gm-radius) !important; box-shadow: 0 6px 22px rgba(16,24,40,.06) !important; background: var(--gm-surface); }
    .gen-modern .card-header { border-bottom: 1px solid var(--gm-line2) !important; }
    .gen-modern .card-title, .gen-modern .card-label { color: var(--gm-ink) !important; font-weight: 800 !important; letter-spacing: -.01em; }
    .gen-modern .form-container.card { padding: 1.5rem !important; }
    /* Boutons */
    .gen-modern .btn { border-radius: 12px !important; font-weight: 700 !important; padding: .7rem 1.05rem !important; transition: .15s !important; }
    .gen-modern .btn.btn-light-primary, .gen-modern .btn.btn-active-primary { background: var(--acc-soft) !important; color: var(--acc-ink) !important; border: 1px solid transparent !important; }
    .gen-modern .btn.btn-light-primary:hover, .gen-modern .btn.btn-active-primary:hover { background: var(--acc) !important; color: #fff !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--acc) 26%, transparent) !important; }
    .gen-modern .btn.btn-bg-light { background: var(--gm-surface) !important; border: 1px solid var(--gm-line) !important; color: var(--gm-muted) !important; }
    .gen-modern .btn.btn-bg-light:hover { border-color: var(--acc) !important; color: var(--acc-ink) !important; }
    /* Champs de saisie */
    .gen-modern .form-control { border: 1px solid var(--gm-line) !important; border-radius: var(--gm-radius-sm) !important; background: var(--acc-soft2) !important; padding: .65rem .8rem !important; transition: .14s; }
    .gen-modern .form-control:focus { border-color: var(--acc) !important; background: var(--gm-surface) !important; box-shadow: 0 0 0 3px var(--acc-soft) !important; }
    .gen-modern .input-group { border: 1px solid var(--gm-line); border-radius: var(--gm-radius-sm); overflow: hidden; background: var(--gm-surface); }
    .gen-modern .input-group .form-control { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: var(--gm-surface) !important; }
    .gen-modern .input-group:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
    .gen-modern .input-group-text { background: var(--acc-soft2) !important; border: none !important; border-inline-end: 1px solid var(--gm-line) !important; color: var(--gm-muted) !important; font-weight: 700 !important; }
    /* Onglets (nav-line-tabs) */
    .gen-modern .nav-line-tabs { border-bottom: 2px solid var(--gm-line2) !important; gap: .25rem; }
    .gen-modern .nav-line-tabs .nav-link { color: var(--gm-muted) !important; font-weight: 800 !important; border: none !important; border-bottom: 3px solid transparent !important; padding: .85rem 1rem !important; }
    .gen-modern .nav-line-tabs .nav-link.active { color: var(--acc-ink) !important; border-bottom-color: var(--acc) !important; background: transparent !important; }
    /* Dashboard : pills période */
    .gen-modern .nav-pills-custom .nav-link { border: 1px solid var(--gm-line) !important; border-radius: 14px !important; background: var(--gm-surface) !important; }
    .gen-modern .nav-pills-custom .nav-link.active { background: var(--acc-soft) !important; border-color: var(--acc) !important; }
    .gen-modern .bullet-custom { display: none !important; }
    /* Dashboard : tuiles de stats */
    .gen-modern .border-dashed { border-style: solid !important; border-color: var(--gm-line) !important; border-radius: 14px !important; background: var(--gm-surface); }
    /* Tableau */
    .gen-modern .table thead tr, .gen-modern .gb-grid-table thead tr { background: var(--acc-soft2); }
    .gen-modern .table thead th, .gen-modern .gb-grid-table thead th { color: var(--gm-muted) !important; font-weight: 800 !important; font-size: .72rem; letter-spacing: .03em; padding: .9rem 1rem !important; border-bottom: 1px solid var(--gm-line) !important; }
    .gen-modern .table.table-row-dashed tr { border-bottom-style: solid !important; border-bottom-color: var(--gm-line2) !important; }
    .gen-modern .table tbody td { padding: .85rem 1rem !important; vertical-align: middle; }
    .gen-modern .table.table-hover tbody tr:hover { background: var(--acc-soft2) !important; }
    /* Pagination */
    .gen-modern .pagination .page-link { border: 1px solid var(--gm-line) !important; border-radius: 10px !important; color: var(--gm-muted) !important; min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
    .gen-modern .pagination .page-item.active .page-link { background: var(--acc) !important; border-color: var(--acc) !important; color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--acc) 30%, transparent); }
    .gen-modern .pagination .page-item.disabled .page-link { opacity: .45; }
    /* Interrupteur / cases actives */
    .gen-modern .form-check-input:checked { background-color: var(--acc) !important; border-color: var(--acc) !important; }
    /* Sous-titres de groupes (règles SysFormComponentRule) */
    .gen-modern h4.fw-bold { color: var(--acc-ink) !important; }

/* ---------------------------------------------------------------------------
   grid  --  scope .gm-grid
   source: EjarEntities/Entities/EntitiesGrid.razor  (61 lines)
   --------------------------------------------------------------------------- */
    /* ===== Grille « ١ أنيق » — carte encadrée alignée sur la maquette (scopé .gm-grid). Accent = couleur société (--kt-primary). Logique/données inchangées. ===== */
    /* EXTRACTION NOTE - the one deviation from a verbatim copy.
       `gm-grid` means two different things in the generated pages: the data-grid CARD here,
       and the form's two-column FIELD grid (`<div class="row gm-grid">`, styled by
       `.gm-form .gm-grid` in the form section below). Inside a page that was the grid's own
       <style> block, which only rendered when the grid rendered, so the two never met. In a
       shared stylesheet they do: without `:not(.row)` every field row in every form turns
       into a white card. The form's field grid is always a Bootstrap `.row`; the data grid
       never is. */
    .gm-grid:not(.row) { --gm-surface: #fff; --gm-surface-2: #f4f6fa; --gm-mix: #fff; /* surfaces; the dark block at the end of this file is the only place they change */ --acc: var(--kt-primary, #1e004b);
        --acc-bg: color-mix(in srgb, var(--acc) 10%, var(--gm-mix));
        --acc-ink: color-mix(in srgb, var(--acc) 66%, #0b0f16);
        --gm-border: #EAECF1; --gm-border2: #F2F4F7; --gm-muted: #727C8C; --gm-faint: #9AA3B2; --gm-text: #101828;
        background: var(--gm-surface); border: 1px solid var(--gm-border); border-radius: 18px;
        box-shadow: 0 10px 34px rgba(16,24,40,.06); padding: 4px 22px 12px; margin: 8px 0 4px; }
    /* barre d'outils (menu + filtre) intégrée en tête de carte */
    /* UI-04 : opérations (…) + filtre à l'extrême GAUCHE (flex-end en RTL). */
    .gm-grid .gm-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 2px 8px; }
    /* boutons d'action du haut (اضافة/بحث/مسح…) — plus propres, alignés carte */
    .gm-grid .actions { padding-top: 0 !important; }
    .gm-grid .actions .card-header { padding-top: 6px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--gm-border2); width: 100%; }
    .gm-grid .actions .btn { border-radius: 10px; font-weight: 700; padding: 9px 16px; box-shadow: none; }
    /* BUG-3117 : en-tetes ET donnees alignes a DROITE (RTL). Les utilitaires Bootstrap
       « text-center » etant en !important, on les neutralise explicitement dans la grille,
       sinon un en-tete portant cette classe resterait centre au-dessus d une colonne alignee a droite. */
    .gm-grid .gb-grid-table { text-align: right; }
    .gm-grid .gb-grid-table thead th { text-align: right; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--gm-muted); text-transform: uppercase; padding: 13px 20px; border-bottom: 1px solid var(--gm-border); white-space: nowrap; }
    .gm-grid .gb-grid-table tbody td { padding: 12px 20px; vertical-align: middle; color: var(--gm-text); border-bottom: 1px solid var(--gm-border2); text-align: right; }
    .gm-grid .gb-grid-table thead th.text-center,
    .gm-grid .gb-grid-table tbody td.text-center { text-align: right !important; }
    .gm-grid .gb-grid-table tbody tr { transition: .12s; }
    .gm-grid .gb-grid-table tbody tr:hover { background: color-mix(in srgb, var(--acc) 4%, var(--gm-mix)); }
    .gm-grid .gm-cell-idx { color: var(--gm-muted); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
    .gm-grid .gm-nm { display: flex; align-items: center; justify-content: flex-start; gap: 11px; cursor: pointer; }
    .gm-grid .gm-nm b { font-weight: 700; color: var(--gm-text); }
    .gm-grid .gm-sym { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
    .gm-grid .gm-en { color: var(--gm-faint); direction: ltr; unicode-bidi: plaintext; font-weight: 600; font-size: 12.5px; display: inline-block; }
    .gm-grid .gm-txt { color: var(--gm-text); }
    .gm-grid .gm-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 11.5px; padding: 4px 10px; border-radius: 20px; background: var(--acc-bg); color: var(--acc-ink); }
    /* BUG-3117 : colonne « العمليات » calee sur le site d'origine — boutons icone 40px,
       espaces, contrastes, alignes a droite comme le reste du tableau. */
    .gm-grid .gm-ops { display: flex; gap: 10px; justify-content: flex-start; align-items: center; flex-shrink: 0; }
    .gm-grid .gm-op { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--gm-border); background: var(--gm-surface-2); display: grid; place-items: center; color: #4b5563; cursor: pointer; transition: .14s; font-size: 18px; text-decoration: none; }
    .gm-grid .gm-op i { font-size: 18px; line-height: 1; }
    .gm-grid .gm-op:hover { color: var(--acc-ink); border-color: var(--acc); background: var(--acc-bg); }
    .gm-grid .gm-op.gm-op-on { color: #17a673; border-color: color-mix(in srgb, #17a673 40%, var(--gm-mix)); background: color-mix(in srgb, #17a673 12%, var(--gm-mix)); }
    .gm-grid .gm-op.gm-op-dg { color: #e2506e; border-color: color-mix(in srgb, #e2506e 40%, var(--gm-mix)); background: color-mix(in srgb, #e2506e 10%, var(--gm-mix)); }
    .gm-grid .gm-op.gm-op-dg:hover { color: #fff; border-color: #e2506e; background: #e2506e; }
    .gm-grid .gm-op.gm-op-on:hover { color: #fff; border-color: #17a673; background: #17a673; }
    /* BUG-3117 : etat « مفعل / غير مفعل » lisible d'un coup d'oeil (le simple icone oeil
       ne permettait pas de distinguer les lignes actives des inactives). */
    .gm-grid .gm-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 11.5px; padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
    .gm-grid .gm-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .gm-grid .gm-state-on { background: #e8fff3; color: #17a673; }
    .gm-grid .gm-state-off { background: #fff5f8; color: #d21f4f; }
    /* Colonne des opérations : même style que les autres colonnes (annuler le fond blanc du sticky) */
    .gm-grid .gb-grid-table th.sticky-tableData,
    .gm-grid .gb-grid-table td.sticky-tableData { background: transparent !important; box-shadow: none !important; }
    .gm-grid .gb-grid-table thead th.sticky-tableData { text-align: right !important; }
    /* ===== Pagination — pastilles arrondies façon maquette ===== */
    .gm-grid .dataTables_paginate .pagination { gap: 6px; }
    .gm-grid .pagination .page-item { margin: 0 !important; }
    .gm-grid .pagination .page-link { min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--gm-border); background: var(--gm-surface); color: var(--gm-text); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; transition: .14s; }
    .gm-grid .pagination .page-link:hover { border-color: var(--acc); color: var(--acc-ink); background: var(--acc-bg); }
    .gm-grid .pagination .page-item.active .page-link { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--acc) 32%, transparent); }
    .gm-grid .pagination .page-item.disabled .page-link { color: var(--gm-faint); background: var(--gm-surface); opacity: .55; }
    .gm-grid .pagination .form-control { height: 38px; border-radius: 10px; border: 1px solid var(--gm-border); text-align: center; font-weight: 700; }
    .gm-grid .pagination span { color: var(--gm-muted); font-weight: 600; font-size: 13px; }
    .gm-grid .pagination strong.text-primary { color: var(--acc) !important; font-weight: 800; }

/* ---------------------------------------------------------------------------
   form  --  scope .gm-form
   source: EjarEntities/Entities/EntitiesForm.razor  (189 lines)
   --------------------------------------------------------------------------- */
    /* ===== Formulaire « ١ أنيق » — apparence alignée sur la maquette (scopé .gm-form). Skin uniquement : structure Blazor, bindings, validation et composants (typeahead/upload/m2m) inchangés. Accent = couleur société (--kt-primary). ===== */
    .gm-form { --gm-surface: #fff; --gm-surface-2: #f4f6fa; --gm-mix: #fff; /* surfaces; the dark block at the end of this file is the only place they change */ --acc: var(--kt-primary, #1e004b);
        --acc-bg: color-mix(in srgb, var(--acc) 10%, var(--gm-mix));
        --acc-ink: color-mix(in srgb, var(--acc) 66%, #0b0f16);
        --gm-panel2: #F1F3F9; --gm-text: #101828; --gm-text2: #3B4658; --gm-muted: #727C8C; --gm-faint: #9AA3B2;
        --gm-border: #D9DEE7; --gm-border2: #EBEEF3; --gm-danger: #e2506e;
        --gm-inbg: #ECEFF5; --gm-inbd: #AFB8C8;
        /* UI-05 : couleurs semantiques en tokens (plus aucun hex code en dur dans les regles) */
        --gm-ok: #12996b; --gm-view: #64748b; }
    /* Bloc/carte par groupe (SysFormComponentRule.GroupName) — visible façon maquette */
    .gm-form .gm-group { background: var(--gm-surface); border: 1px solid var(--gm-border); border-radius: 16px; box-shadow: 0 6px 22px rgba(16,24,40,.06); padding: 20px 22px 8px; margin-bottom: 18px; }
    .gm-form .gm-group-title { font-size: 15px; font-weight: 800; color: var(--acc-ink); margin: 0 0 18px; padding-bottom: 11px; border-bottom: 1px solid var(--gm-border2); display: flex; align-items: center; gap: 9px; }
    .gm-form .gm-group-title::before { content: ""; width: 4px; height: 18px; border-radius: 3px; background: var(--acc); display: inline-block; flex: none; }
    .gm-form .gm-req { color: var(--gm-danger); font-weight: 900; font-size: 1.5em; line-height: 0; vertical-align: middle; margin-inline-start: 3px; }

    /* ===== Groupes pilotés par SysFormComponentGroup : en-tête colorée + grille N colonnes + onglets ===== */
    /* Barre d'en-tête pleine largeur, couleur = ColorCode du groupe (via --acc posé en inline sur .gm-group) */
    .gm-form .gm-group-head { display: flex; align-items: center; justify-content: flex-start; background: var(--acc); color: #fff; font-weight: 800; font-size: 14px; border-radius: 12px 12px 0 0; padding: 11px 16px; margin: -20px -22px 18px; }
    /* Grille : ColumnCount champs par ligne. On neutralise les largeurs col-* des champs pour qu'ils occupent une cellule. */
    .gm-form .gm-grid { display: grid !important; gap: 0 18px; align-items: start; }
    .gm-form .gm-grid > * { width: auto !important; max-width: none !important; flex: none !important; }
    /* Onglets de groupes (IsTab = 1) : réutilisent le style .nav-line-tabs (pilules accent) défini plus bas */
    .gm-form .gm-subtabs { margin: 6px 0 0 !important; }
    .gm-form .gm-subtab-content { margin-top: 4px; }

    /* Conteneur d'onglets transparent : ce sont les cartes de groupe qui portent les blocs visibles */
    .gm-form .data-tabs-container { background: transparent; border: none; box-shadow: none; padding: 0; margin-top: 6px; }
    /* Onglets « pilules » (Option B) : actif = pastille pleine accent */
    .gm-form .nav-line-tabs { border-bottom: none !important; gap: 6px; margin: 0 0 18px !important; padding: 8px !important; flex-wrap: wrap; background: transparent !important; }
    .gm-form .nav-line-tabs .nav-item { margin: 0; }
    .gm-form .nav-line-tabs .nav-link { color: var(--gm-muted) !important; font-weight: 800 !important; font-size: 13px !important; border: 1px solid transparent !important; border-radius: 10px !important; padding: 9px 16px !important; margin: 0 !important; background: transparent !important; transition: .15s; white-space: nowrap; }
    .gm-form .nav-line-tabs .nav-link:hover { color: var(--acc-ink) !important; background: var(--acc-bg) !important; }
    .gm-form .nav-line-tabs .nav-link.active { color: #fff !important; background: var(--acc) !important; border-color: var(--acc) !important; box-shadow: 0 6px 14px color-mix(in srgb, var(--acc) 25%, transparent) !important; }

    /* Corps + cartes internes -> transparentes (la carte éditeur porte le style) */
    .gm-form .form-container.card { border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 22px !important; background: transparent !important; }

    /* Champ : label empilé au-dessus + contrôle pleine largeur (au lieu de l'addon latéral) */
    .gm-form .input-group { display: block !important; border: none !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; }
    .gm-form .input-group-text { display: block !important; width: 100%; background: transparent !important; border: none !important; padding: 0 0 7px 0 !important; margin: 0 !important; color: var(--gm-text2) !important; font-weight: 700 !important; font-size: 12.5px !important; text-align: right; justify-content: flex-start; }
    .gm-form .control-label { display: block; font-weight: 700; font-size: 12.5px; color: var(--gm-text2); margin-bottom: 7px; }

    /* Contrôles de saisie */
    .gm-form .form-control { display: block !important; width: 100% !important; min-height: 46px !important; border: 1.5px solid var(--gm-inbd) !important; border-radius: 11px !important; background: var(--gm-inbg) !important; padding: 11px 13px !important; font-size: 13.6px !important; color: var(--gm-text) !important; transition: .14s; }
    .gm-form .form-control:hover { border-color: var(--gm-muted) !important; }
    .gm-form .form-control::placeholder { color: var(--gm-faint) !important; opacity: 1; }
    .gm-form .form-control:focus, .gm-form .form-control:focus-visible { border-color: #AFB8C8 !important; background: var(--gm-surface) !important; box-shadow: none !important; outline: none !important; }
    /* Renfort visibilité (spécificité élevée + couleurs en dur : insensible aux overrides du thème et à la résolution des variables) */
    .gm-form .gm-group .form-control,
    .gm-form .input-group .form-control { background-color: var(--gm-inbg) !important; border: 1.5px solid var(--gm-inbd) !important; border-radius: 11px !important; min-height: 46px !important; }
    .gm-form textarea.form-control { min-height: 84px; resize: vertical; }
    /* Cases à cocher : garder une taille normale (ne pas étirer en pleine largeur) */
    .gm-form .form-control[type="checkbox"] { width: 20px !important; height: 20px !important; display: inline-block !important; }

    /* Dropdowns typeahead (mono & multi-select) : le conteneur = la boîte de contrôle */
    .gm-form .blazored-typeahead { width: 100% !important; border: 1px solid var(--gm-inbd) !important; border-radius: 11px !important; background: var(--gm-inbg) !important; min-height: 44px; transition: .14s; }
    .gm-form .blazored-typeahead:focus-within { border-color: #AFB8C8 !important; background: var(--gm-surface) !important; box-shadow: none !important; }
    .gm-form .blazored-typeahead__controls { border: none !important; background: transparent !important; }
    .gm-form .blazored-typeahead__input,
    .gm-form .blazored-typeahead__input-mask { border: none !important; background: transparent !important; box-shadow: none !important; padding: 10px 13px !important; font-size: 13.6px !important; color: var(--gm-text) !important; }
    .gm-form .blazored-typeahead__results { border: 1px solid var(--gm-border) !important; border-radius: 12px !important; box-shadow: 0 12px 30px rgba(16,24,40,.12) !important; overflow-x: hidden; overflow-y: auto; margin-top: 4px; padding: 4px; background: var(--gm-surface); }
    .gm-form .blazored-typeahead__result { padding: 9px 12px !important; font-size: 13.5px; border-radius: 8px; }
    .gm-form .blazored-typeahead__active { background: var(--acc-bg) !important; color: var(--acc-ink) !important; }
    /* Cadre complet du dropdown : le conteneur .blazored-typeahead est le seul a dessiner la bordure */
    .gm-form .blazored-typeahead .form-control, .gm-form .blazored-typeahead__controls, .gm-form .blazored-typeahead__input, .gm-form .blazored-typeahead__input-mask { border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; min-height: auto !important; }
    /* Neutraliser les boutons internes du typeahead (chevron + effacer) : ils gardaient bordure/fond/arrondi par defaut = cadre incomplet */
    .gm-form .blazored-typeahead__input-icon, .gm-form .blazored-typeahead__clear { border: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; box-sizing: border-box !important; }
    .gm-form .blazored-typeahead__input-icon:hover, .gm-form .blazored-typeahead__input-icon:focus { background: transparent !important; box-shadow: none !important; }
    .gm-form .blazored-typeahead__down-arrow path { fill: var(--gm-muted) !important; }
    /* Cadre complet garanti : le conteneur clippe ses enfants a son arrondi (les resultats sont hors de .__controls, donc non clippes) */
    .gm-form .blazored-typeahead__controls { border-radius: inherit !important; overflow: hidden !important; }
    /* Supprimer tout liseret d'etat Blazor (valid / invalid / modified) qui dessine un petit cadre residuel sur champs & dropdowns */
    .gm-form .form-control.modified, .gm-form .form-control.valid, .gm-form .form-control.valid.modified, .gm-form .blazored-typeahead.valid.modified { outline: none !important; box-shadow: none !important; }
    /* Champ requis en erreur : bordure rouge (champs simples ET dropdowns typeahead). Blazor pose la classe .invalid apres une tentative d'enregistrement / modification. */
    .gm-form .gm-group .form-control.invalid,
    .gm-form .input-group .form-control.invalid,
    .gm-form .form-control.invalid { border-color: var(--gm-danger) !important; background-color: color-mix(in srgb, var(--gm-danger) 6%, var(--gm-mix)) !important; box-shadow: none !important; outline: none !important; }
    .gm-form .blazored-typeahead.invalid { border-color: var(--gm-danger) !important; background-color: color-mix(in srgb, var(--gm-danger) 6%, var(--gm-mix)) !important; box-shadow: none !important; outline: none !important; }
    /* Message de validation FluentValidation : rouge, lisible */
    .gm-form .validation-message { color: var(--gm-danger) !important; font-weight: 700; font-size: 12px; margin-top: 5px; display: block; }
    /* no-focus-ring : aucun anneau de focus supplementaire sur les champs / dropdowns */
    /* 1) aucun outline navigateur sur quoi que ce soit de focalise dans le formulaire */
    .gm-form *:focus, .gm-form *:focus-visible, .gm-form *:focus-within { outline: 0 !important; outline-offset: 0 !important; }
    /* 2) aucun anneau box-shadow sur l'element focalise (les cartes gardent leur ombre : elles sont exclues) */
    .gm-form *:not(.btn):not(.gm-group):not(.gm-actionbar):not(.gm-sub-card):not(.actions):focus, .gm-form *:not(.btn):not(.gm-group):not(.gm-actionbar):not(.gm-sub-card):not(.actions):focus-visible { box-shadow: none !important; }
    /* 3) aucun anneau sur les conteneurs de controle quand un enfant a le focus */
    .gm-form .input-group:focus-within, .gm-form .blazored-typeahead:focus-within, .gm-form .blazored-typeahead__controls:focus-within, .gm-form .input-group-text:focus-within { box-shadow: none !important; outline: 0 !important; }
    /* Multi-select : jetons sélectionnés en pastilles accent */
    .gm-form .blazored-typeahead__input-multiselect-wrapper { gap: 6px; padding: 6px !important; align-items: center; }
    .gm-form .blazored-typeahead__input-multiselect-wrapper .blazored-typeahead__input-mask { display: inline-flex !important; align-items: center; width: auto !important; background: var(--acc-bg) !important; color: var(--acc-ink) !important; border-radius: 20px !important; padding: 4px 11px !important; font-weight: 800 !important; font-size: 11.5px !important; }

    /* Upload de fichiers -> zone en pointillés façon « drop » + bouton « parcourir » accent */
    .gm-form input[type="file"].form-control { border: 1.5px dashed var(--gm-border) !important; background: var(--gm-panel2) !important; padding: 14px !important; height: auto !important; cursor: pointer; }
    .gm-form input[type="file"].form-control:hover { border-color: var(--acc) !important; background: var(--acc-bg) !important; }
    .gm-form input[type="file"].form-control::file-selector-button { background: var(--acc-bg); color: var(--acc-ink); border: none; border-radius: 9px; padding: 8px 14px; font-weight: 800; font-family: inherit; margin-inline-end: 12px; cursor: pointer; transition: .14s; }
    .gm-form input[type="file"].form-control:hover::file-selector-button { background: var(--acc); color: #fff; }
    /* Fichier déjà chargé : pastille accent */
    .gm-form .uploaded-item.bg-light-primary { background: var(--acc-bg) !important; border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--acc) 18%, var(--gm-mix)); }
    .gm-form .uploaded-item .text-primary,
    .gm-form .uploaded-item-name,
    .gm-form .uploaded-item-status { color: var(--acc-ink) !important; }

    /* ===== Sous-pages (onglets SubXxx, rendues à l'intérieur de .gm-form) =====
       Deux cartes blanches séparées : (1) la liste, (2) le formulaire « ادراج بيان ». */
    .gm-form .gm-sub-card { background: var(--gm-surface); border: 1px solid var(--gm-border); border-radius: 16px; box-shadow: 0 6px 22px rgba(16,24,40,.06); padding: 16px 20px; margin-bottom: 16px; }
    .gm-form .gm-sub-insert { background: color-mix(in srgb, var(--acc) 3%, var(--gm-mix)); }
    /* UI-12 : titre de section = bandeau plein accent (comme le systeme de base), texte blanc */
    .gm-form .table-heading.bg-blue { background: var(--acc) !important; color: #fff !important; border-radius: 10px !important; border-bottom: none !important; padding: 11px 16px !important; margin: 0 0 12px !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--acc) 22%, transparent) !important; }
    .gm-form .table-heading .fw-semibold { color: #fff !important; font-size: 15px !important; font-weight: 800 !important; display: flex; align-items: center; gap: 9px; }
    .gm-form .table-heading .fw-semibold::before { content: ""; width: 4px; height: 18px; border-radius: 3px; background: var(--gm-surface); opacity: .85; display: inline-block; flex: none; }
    /* Grille des sous-pages : fond blanc, sans double bordure (la carte encadre) */
    .gm-form .subPageTable { border: none !important; border-radius: 0 !important; background: var(--gm-surface); overflow: visible; }
    .gm-form .subPageTable table { text-align: right; margin: 0; }
    .gm-form .subPageTable thead th { text-align: right !important; font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--gm-muted) !important; text-transform: uppercase; padding: 12px 16px !important; border-bottom: 1px solid var(--gm-border) !important; }
    .gm-form .subPageTable tbody td { text-align: right; padding: 11px 16px !important; vertical-align: middle; border-bottom: 1px solid var(--gm-border2) !important; }
    .gm-form .subPageTable tbody tr:hover { background: color-mix(in srgb, var(--acc) 4%, var(--gm-mix)); }
    .gm-form .subPageTable tbody p { text-align: right !important; }
    /* Panneau « ادراج بيان » (accordion) -> intégré à la 2e carte, sans bordure propre */
    .gm-form .accordionContainer .accordion-item { border: none !important; border-radius: 0 !important; background: transparent !important; }
    .gm-form .accordion-button { font-weight: 800 !important; border-radius: 11px !important; }
    .gm-form .accordion-button.bg-light-primary { background: var(--acc-bg) !important; color: var(--acc-ink) !important; }
    .gm-form .accordion-button .text-primary { color: var(--acc-ink) !important; }
    .gm-form .accordion-button:not(.collapsed) { box-shadow: none !important; }
    .gm-form .accordion-body { padding: 16px 4px 4px !important; }
    .gm-form .accordion-actions { display: flex; gap: 9px; justify-content: flex-end; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--gm-border2); }
    .gm-form .accordion-actions .btn.btn-light-danger { background: color-mix(in srgb, var(--gm-danger) 12%, var(--gm-mix)) !important; color: var(--gm-danger) !important; border: 1px solid color-mix(in srgb, var(--gm-danger) 24%, var(--gm-mix)) !important; }
    .gm-form .accordion-actions .btn.btn-light-primary { background: var(--acc) !important; color: #fff !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--acc) 22%, transparent) !important; }

    /* Cases / interrupteurs */
    .gm-form .form-check-input { border: 1.6px solid var(--gm-border); }
    .gm-form .form-check-input:checked { background-color: var(--acc) !important; border-color: var(--acc) !important; }
    .gm-form .form-check-input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-bg); }
    .gm-form .form-check-label { color: var(--gm-text2); font-weight: 600; }

    /* Boutons d'action */
    .gm-form .btn { border-radius: 12px !important; font-weight: 800 !important; padding: 10px 16px !important; transition: .15s; }
    .gm-form .btn.btn-light-primary { background: var(--acc) !important; color: #fff !important; border: 1px solid transparent !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--acc) 22%, transparent) !important; }
    /* UI-06 : bouton principal (حفظ) — icône+texte BLANCS en permanence (base ET survol) ; on assombrit au survol
       au lieu d'éclaircir (brightness>1 délavait le blanc sur l'accent clair). :not(.gm-copy) => n'affecte pas نسخ. */
    .gm-form .btn.btn-light-primary:not(.gm-copy) { transition: filter .14s, box-shadow .14s; }
    .gm-form .btn.btn-light-primary:not(.gm-copy),
    .gm-form .btn.btn-light-primary:not(.gm-copy) i,
    .gm-form .btn.btn-light-primary:not(.gm-copy) span { color: #fff !important; opacity: 1 !important; }
    .gm-form .btn.btn-light-primary:not(.gm-copy):hover,
    .gm-form .btn.btn-light-primary:not(.gm-copy):focus { filter: brightness(0.92); color: #fff !important; }
    .gm-form .btn.btn-bg-light { background: var(--gm-surface) !important; border: 1px solid var(--gm-border) !important; color: var(--gm-text2) !important; }
    /* UI-06 : au survol, Metronic (btn-active-danger) posait un fond rouge SOUS un texte rouge = illisible.
       On force un fond rose clair + texte rouge fonce -> contraste lisible dans tous les etats. */
    /* UI-06 : au survol, fond rouge CLAIR + texte/icône rouge foncé (jamais rouge plein sur rouge) => toujours lisibles. */
    .gm-form .btn.btn-bg-light:hover, .gm-form .btn.btn-bg-light:focus, .gm-form .btn.btn-bg-light:active { background: color-mix(in srgb, var(--gm-danger) 10%, var(--gm-mix)) !important; border-color: var(--gm-danger) !important; color: var(--gm-danger) !important; }
    .gm-form .btn.btn-bg-light:hover i, .gm-form .btn.btn-bg-light:hover span, .gm-form .btn.btn-bg-light:focus i, .gm-form .btn.btn-bg-light:focus span { color: var(--gm-danger) !important; opacity: 1 !important; }
    /* Barre des boutons d'action -> carte blanche propre */
    .gm-form .actions { background: var(--gm-surface); border: 1px solid var(--gm-border); border-radius: 16px; box-shadow: 0 8px 24px rgba(16,24,40,.05); padding: 4px 16px !important; margin-bottom: 10px; }
    .gm-form .actions .card-header { padding: 12px 2px !important; border: none !important; width: 100%; }
    .gm-form .actions .btn { border-radius: 11px !important; }

    /* Bouton « + » (ouvrir la page liée) aligné avec le contrôle */
    /* Bouton + : ouvrir la modale d'ajout liee — cible le lien a (legacy) et le bouton PopupPlus */
    .gm-form .action-container a, .gm-form .action-container button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--acc-bg) !important; border: none !important; margin-top: 24px; padding: 0 !important; }
    .gm-form .action-container a i, .gm-form .action-container button i { color: var(--acc-ink) !important; font-size: 1.3rem !important; margin: 0 !important; }
    .gm-form .action-container a:hover, .gm-form .action-container button:hover { background: var(--acc) !important; }
    .gm-form .action-container a:hover i, .gm-form .action-container button:hover i { color: #fff !important; }

    /* Sous-titres de groupes (règles SysFormComponentRule) */
    .gm-form h4.fw-bold { color: var(--acc-ink) !important; border-bottom-color: var(--gm-border2) !important; font-size: 15px; }

    /* Messages de validation */
    .gm-form .validation-message { color: var(--gm-danger); font-size: 11.5px; font-weight: 600; margin-top: 5px; display: block; }
    /* ===== Barre d'action unifiee (contexte + actions) — Option A ===== */
    /* UI-04 : row-reverse => en RTL les boutons (حفظ/إلغاء/نسخ) passent à DROITE et la pastille de mode à gauche. */
    .gm-form .gm-actionbar { position: relative; overflow: hidden; background: var(--gm-surface); border: 1px solid var(--gm-border); border-radius: 16px; box-shadow: 0 8px 24px rgba(16,24,40,.05); display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; margin-bottom: 12px; flex-wrap: wrap; }
    .gm-form .gm-actionbar::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--acc); }
    .gm-form .gm-ctx { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .gm-form .gm-ctx-ico { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 17px; color: #fff; background: var(--acc); box-shadow: 0 6px 16px color-mix(in srgb, var(--acc) 30%, transparent); }
    .gm-form .gm-ctx.gm-ctx-add .gm-ctx-ico { background: var(--gm-ok); box-shadow: 0 6px 16px color-mix(in srgb, var(--gm-ok) 30%, transparent); }
    .gm-form .gm-ctx.gm-ctx-view .gm-ctx-ico { background: var(--gm-view); box-shadow: 0 6px 16px color-mix(in srgb, var(--gm-view) 28%, transparent); }
    .gm-form .gm-ctx-lbl { min-width: 0; }
    .gm-form .gm-ctx-lbl small { display: block; color: var(--gm-muted); font-size: 11.5px; font-weight: 700; margin-bottom: 1px; }
    .gm-form .gm-ctx-lbl strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; color: var(--gm-text); }
    .gm-form .gm-acts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
    .gm-form .gm-acts .btn { border-radius: 11px !important; }
    /* نسخ : fond tan clair, texte+icône accent-ink en PERMANENCE (jamais blanc au survol => sinon invisibles sur le tan). */
    .gm-form .gm-acts .btn.gm-copy { background: var(--acc-bg) !important; border: 1px solid color-mix(in srgb, var(--acc) 22%, var(--gm-mix)) !important; box-shadow: none !important; }
    .gm-form .gm-acts .btn.gm-copy,
    .gm-form .gm-acts .btn.gm-copy:hover,
    .gm-form .gm-acts .btn.gm-copy:focus,
    .gm-form .gm-acts .btn.gm-copy i,
    .gm-form .gm-acts .btn.gm-copy span { color: var(--acc-ink) !important; opacity: 1 !important; }
    .gm-form .gm-acts .btn.gm-copy:hover { background: color-mix(in srgb, var(--acc) 16%, var(--gm-mix)) !important; }

/* ---------------------------------------------------------------------------
   dashboard  --  scope .gm-dash
   source: EjarEntities/Entities/EntitiesDashboard.razor  (68 lines)
   --------------------------------------------------------------------------- */
    .gm-dash { --gm-surface: #fff; --gm-surface-2: #f4f6fa; --gm-mix: #fff; /* surfaces; the dark block at the end of this file is the only place they change */ --acc: var(--kt-primary, #1e004b);
        --acc-bg: color-mix(in srgb, var(--acc) 10%, var(--gm-mix));
        --acc-ink: color-mix(in srgb, var(--acc) 66%, #0b0f16);
        --gm-panel: #fff; --gm-panel2: #FBFCFE;
        --gm-text: #101828; --gm-muted: #727C8C; --gm-faint: #9AA3B2;
        --gm-border: #EAECF1; --gm-border2: #F2F4F7;
        --gm-shadow: 0 6px 22px rgba(16,24,40,.06);
        --gm-ok: #12996b; --gm-warn: #c98a1a;
        color: var(--gm-text); }
    .gm-dash .num { font-variant-numeric: tabular-nums; }
    /* Pastilles de période */
    .gm-dash .gm-seg { display: inline-flex; gap: 4px; background: var(--gm-panel); border: 1px solid var(--gm-border); border-radius: 12px; padding: 4px; margin: 4px 0 20px; box-shadow: var(--gm-shadow); }
    .gm-dash .gm-seg button { border: none; background: none; font-family: inherit; font-weight: 800; font-size: 12.5px; color: var(--gm-muted); padding: 9px 15px; border-radius: 8px; cursor: pointer; transition: .14s; }
    .gm-dash .gm-seg button.on { background: var(--acc); color: #fff; }
    /* KPIs */
    .gm-dash .gm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .gm-dash .gm-kpi { background: var(--gm-panel); border: 1px solid var(--gm-border); border-radius: 18px; padding: 20px 18px 18px; box-shadow: var(--gm-shadow); position: relative; overflow: hidden; }
    /* Trait couleur société en haut + demi-cercle décoratif en coin (sans icône) */
    .gm-dash .gm-kpi::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--acc); z-index: 2; }
    .gm-dash .gm-kpi::before { content: ""; position: absolute; top: -55px; left: -45px; width: 150px; height: 150px; border-radius: 50%; background: color-mix(in srgb, var(--acc) 8%, var(--gm-mix)); z-index: 0; }
    .gm-dash .gm-kpi > * { position: relative; z-index: 1; }
    .gm-dash .gm-kfoot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
    .gm-dash .gm-kfoot .gm-spark { flex: 1; margin-top: 0; }
    .gm-dash .gm-kname { color: var(--gm-muted); font-weight: 700; font-size: 12.5px; }
    .gm-dash .gm-kval { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin-top: 2px; color: var(--gm-text); }
    .gm-dash .gm-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 11.5px; padding: 3px 8px; border-radius: 20px; }
    .gm-dash .gm-delta.u { color: var(--gm-ok); background: color-mix(in srgb, var(--gm-ok) 14%, var(--gm-mix)); }
    .gm-dash .gm-delta.dn { color: #e2506e; background: color-mix(in srgb, #e2506e 14%, var(--gm-mix)); }
    .gm-dash .gm-delta.flat { color: var(--gm-muted); background: var(--gm-border2); }
    .gm-dash .gm-spark { height: 34px; width: 100%; margin-top: 10px; display: block; }
    .gm-dash .gm-kdonut { display: flex; align-items: center; gap: 14px; }
    .gm-dash .gm-dw { position: relative; width: 74px; height: 74px; flex: none; }
    .gm-dash .gm-dc { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 17px; }
    .gm-dash .gm-lg { font-size: 12px; font-weight: 600; color: var(--gm-text); }
    .gm-dash .gm-lg div { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
    .gm-dash .gm-lg i { width: 9px; height: 9px; border-radius: 3px; }
    .gm-dash .gm-lg b { margin-inline-start: auto; }
    /* Tendance + récents */
    .gm-dash .gm-drow { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 16px; }
    .gm-dash .gm-card { background: var(--gm-panel); border: 1px solid var(--gm-border); border-radius: 18px; box-shadow: var(--gm-shadow); overflow: hidden; position: relative; }
    /* Trait couleur société en haut de toutes les cartes du dashboard */
    .gm-dash .gm-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--acc); z-index: 2; }
    /* Bouton déplier/replier la suite du dashboard */
    .gm-dash .gm-toggle-wrap { display: flex; justify-content: center; margin: 16px 0 2px; }
    .gm-dash .gm-toggle { display: inline-flex; align-items: center; gap: 9px; background: var(--gm-panel); border: 1px solid var(--gm-border); color: var(--acc-ink); font-family: inherit; font-weight: 800; font-size: 13px; padding: 10px 20px; border-radius: 12px; cursor: pointer; box-shadow: var(--gm-shadow); transition: .15s; }
    .gm-dash .gm-toggle:hover { border-color: var(--acc); background: var(--acc-bg); }
    .gm-dash .gm-toggle .chev { font-size: 11px; transition: transform .25s; }
    .gm-dash .gm-toggle.open .chev { transform: rotate(180deg); }
    .gm-dash .gm-chead { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
    .gm-dash .gm-chead h3 { margin: 0; font-size: 15px; font-weight: 800; }
    .gm-dash .gm-chead span { color: var(--gm-faint); font-size: 12px; font-weight: 700; }
    .gm-dash .gm-li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--gm-border2); }
    .gm-dash .gm-li:last-child { border-bottom: none; }
    .gm-dash .gm-li .m { flex: 1; min-width: 0; }
    .gm-dash .gm-li .m b { font-weight: 700; font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .gm-dash .gm-li .m small { color: var(--gm-faint); font-size: 11.5px; direction: ltr; text-align: right; display: block; }
    .gm-dash .gm-sym { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
    .gm-dash .gm-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 11.5px; padding: 4px 10px; border-radius: 20px; background: var(--acc-bg); color: var(--acc-ink); }
    /* Complétude (barres) + 2e rangée */
    .gm-dash .gm-pad { padding: 6px 20px 14px; }
    .gm-dash .gm-cbar { margin-bottom: 12px; }
    .gm-dash .gm-cbtop { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; margin-bottom: 5px; color: var(--gm-text); }
    .gm-dash .gm-cbtop b { font-weight: 800; }
    .gm-dash .gm-ctrack { height: 9px; background: var(--gm-border2); border-radius: 20px; overflow: hidden; }
    .gm-dash .gm-ctrack i { display: block; height: 100%; border-radius: 20px; }
    .gm-dash .gm-drow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
    @@media (max-width: 1200px) { .gm-dash .gm-kpis { grid-template-columns: repeat(2, 1fr); } .gm-dash .gm-drow, .gm-dash .gm-drow2 { grid-template-columns: 1fr; } }
    @@media (max-width: 700px) { .gm-dash .gm-kpis { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   dark mode

   The extracted skin was light-only: 21 hard-coded white surfaces and no
   [data-theme="dark"] rule, so every card stayed a white island on a dark page.
   The surfaces above are tokens now, and this block is the ONLY place they
   change. Values are taken from Metronic's own dark palette (_Master.cshtml)
   rather than invented, so the skin follows the product's theme instead of
   defining a second one.

   Deliberately NOT re-tinted: .gm-state / .gm-badge chips keep their light
   fills. They are colour chips, dark ink on a light tint reads correctly on a
   dark card, and that is what the reference pages show today.
   --------------------------------------------------------------------------- */
[data-theme="dark"] .gen-modern,
[data-theme="dark"] .gm-grid,
[data-theme="dark"] .gm-form,
[data-theme="dark"] .gm-dash {
    --gm-surface: var(--kt-card-bg, #1e1e2d);
    --gm-surface-2: var(--kt-input-bg, #1b1b29);
    --gm-mix: var(--kt-card-bg, #1e1e2d);
    --gm-border: var(--kt-border-color, #2b2b40);
    --gm-border2: var(--kt-border-dashed-color, #323248);
    --gm-line: var(--kt-border-color, #2b2b40);
    --gm-line2: var(--kt-border-dashed-color, #323248);
    --gm-panel: var(--kt-card-bg, #1e1e2d);
    --gm-panel2: var(--kt-input-bg, #1b1b29);
    --gm-inbg: var(--kt-input-bg, #1b1b29);
    --gm-inbd: var(--kt-input-border-color, #323248);
    --gm-text: var(--kt-text-gray-900, #fff);
    --gm-text2: var(--kt-text-gray-800, #d8d8e8);
    --gm-ink: var(--kt-text-gray-900, #fff);
    --gm-muted: var(--kt-text-gray-500, #a1a5b7);
    --gm-faint: var(--kt-text-gray-600, #7e8299);
}

/* The op buttons and the index cell read their colour from literals, not tokens. */
[data-theme="dark"] .gm-grid .gm-op { color: var(--kt-text-gray-700, #cdcdde); }
[data-theme="dark"] .gm-form .gm-group .form-control,
[data-theme="dark"] .gm-form .input-group .form-control { color: var(--gm-text) !important; }

/* ---------------------------------------------------------------------------
   corrections

   Deviations from the reference, each with a reason. Kept at the end so the
   extracted sections above stay a faithful copy and the diff against a
   generated page's <style> block stays readable.
   --------------------------------------------------------------------------- */

/* The skin makes the sticky operations column transparent (section "grid" above).
   That is safe in EjarEntities, whose grids never scroll horizontally - nothing
   passes under the column. The Sales and POS grids DO scroll: WorkShifts carries
   nine columns, and with a transparent sticky cell the row's own values slid
   underneath the action buttons and the two headers printed on top of each other.
   An opaque cell is what "sticky" means; the hover rule repeats the row tint so
   the column still highlights with its row. */
.gm-grid .gb-grid-table th.sticky-tableData,
.gm-grid .gb-grid-table td.sticky-tableData { background: var(--gm-surface) !important; }

.gm-grid .gb-grid-table tbody tr:hover td.sticky-tableData {
    background: color-mix(in srgb, var(--acc) 4%, var(--gm-mix)) !important;
}

/* The row-action buttons.

   The generated pages draw these as .gm-op: 38px, radius 10, a hairline border and an 18px
   glyph. Ours are GbRowAction -> GbButton, which already carries the size and the radius in
   GbRowActions.razor.css, but NOT the border or the glyph size: component stylesheets are
   bundled into Starterkit.styles.css, which _Master links BEFORE style.bundle, so Metronic's
   own .btn rules win every property they also set. Rather than fight that with !important
   inside the component, the two remaining properties live here - this file is linked last, and
   they are part of the grid's look rather than the button's contract.

   Scoped to .gm-grid so a GbRowActions cluster outside a generated-looking grid is untouched.

   THE :not() CHAIN IS NOT DECORATION. Metronic ships

     .btn.btn-icon:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active)
     { border: 0 }

   at specificity (0,6,0), which outranks both `.gb-row-actions[scope] .gb-btn.btn-icon` (0,4,0)
   in the component's own stylesheet and the plain selector here. That is why the border silently
   did nothing until it was measured. Three :not()s put this at (0,7,0) - above Metronic without
   !important - and they repeat its own exclusions, so an outline or dashed button still manages
   its own border. */
.gm-grid .gb-row-actions .gb-btn.btn-icon:not(.btn-outline):not(.btn-dashed):not(.border-hover) {
    border: 1px solid var(--gm-border);
}

.gm-grid .gb-row-actions .gb-btn.btn-icon i { font-size: 18px; line-height: 1; }

/* Grid header weight.

   _Master.cshtml ships a tenant-font rule

     body :where(a, button, ..., th, td, ...) { font-weight: var(--gb-website-font-weight) !important }

   so the skin's `font-weight: 800` on thead th never applied: a zero-specificity :where() with
   !important beats any normal declaration. The headers came out at the body weight, which is the
   single clearest difference between our grid and a generated one at a glance. !important here
   is answering !important - the only way to win that without touching a tenant-wide rule. */
.gm-grid .gb-grid-table thead th { font-weight: 800 !important; }

/* The legacy .actions wrapper.

   The generated pages put their buttons in a bare <div class="actions"> and let the skin paint
   it as a card. Our pages put a GbActionBar inside that same div, and the bar IS the card - so
   the skin drew a card around a card, with the inner one floating in a wide empty box. Where
   the bar is present the wrapper goes back to being a plain container. */
.gm-form .actions:has(.gm-actionbar) {
    /* The legacy wrapper is a bootstrap column (col-12 col-sm-9) on some pages, which left the
       bar occupying three quarters of the row with the mode banner crowded against the buttons.
       The generated bar spans the form. */
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 !important;
    margin: 0;
}

/* ...and the bar itself is a flex ITEM of that wrapper (`d-flex gap-3`), so it needs to be told
   to grow. Without this it sat at its content width - about 480px of a 1230px row - with the
   mode banner pressed against the buttons. */
.gm-form .actions > .gm-actionbar {
    flex: 1 1 auto;
}

/* Typeaheads inside an adopted form.

   gb-sales.css fills a typeahead across its input-group with the classic flex idiom:

     .sales-returns-form .input-group > .blazored-typeahead
     { flex: 1 1 auto !important; width: 1% !important; }

   `width: 1%` means "ignore my content width, let flex-grow decide" - correct while the
   input-group is a flex row, which is what Bootstrap makes it. The skin turns the input-group
   into a block so the label can sit above the control, and then nothing grows the 1%: every
   lookup on the returns form rendered as a 5px sliver next to its + button.

   Same specificity as that rule and loaded after it, so no !important arms race. The page's
   z-index and overflow rules are left alone - they still keep the dropdown above the fields
   below it, and the skin has nothing to say about stacking. */
.gm-form .input-group > .blazored-typeahead {
    flex: none !important;
    width: 100% !important;
}

/* Tab strips with more tabs than the reference has.

   The product ships

     .nav.nav-tabs.nav-line-tabs.nav-line-tabs-2x
     { flex-wrap: nowrap; overflow-x: auto; }

   at (0,4,0), which outranks the skin's `.gm-form .nav-line-tabs { flex-wrap: wrap }`. With the
   three tabs an EjarEntities form carries it never shows. الحجوزات has seven: they ran off the
   edge, the last one reading as "الد" with no scrollbar to suggest the rest existed.

   Wrapping is what the generated pages do - they simply never had enough tabs to prove it. */
.gm-form .nav.nav-tabs.nav-line-tabs.nav-line-tabs-2x {
    flex-wrap: wrap;
    overflow: visible;
}

/* Form card padding.

   Metronic's p-12 is 3rem - 39px a side at this root size, 78px of a row gone. The generated
   pages give a form container 22px (`.gm-form .form-container.card`), and the invoice form uses
   p-12 instead, which is what squeezed its fixed-width product table into a horizontal scroller.
   Matching the reference here both looks right and gives the table the width it asks for. */
.gm-form .card-body.p-12 {
    padding: 1.375rem !important;
}

/* Native <select> inside an adopted form.

   The reference pages have no <select> - every lookup there is a typeahead - so the skin styled
   .form-control and said nothing about .form-select. The sales forms do use one (نوع الفاتورة,
   حالة الفاتورة): inside the skin's block input-group a select keeps its intrinsic width, so an
   empty option rendered it as a ~70px stub beside full-width neighbours.

   Same box as .form-control, so the two read as one family. */
.gm-form .form-select,
.gm-form .input-group > .form-select {
    display: block !important;
    width: 100% !important;
    min-height: 46px !important;
    border: 1.5px solid var(--gm-inbd) !important;
    border-radius: 11px !important;
    background-color: var(--gm-inbg) !important;
    padding: 11px 13px !important;
    font-size: 13.6px !important;
    color: var(--gm-text) !important;
}

.gm-form .form-select:focus {
    border-color: #AFB8C8 !important;
    background-color: var(--gm-surface) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Web-component controls inside an adopted form.

   The skin's input-group is a block, so a control that sizes itself from its content gets
   whatever its shadow DOM asks for. ملاحق التقرير (Smart.Blazor's <smart-editor>) measured 12px
   wide inside a 1186px group - a vertical strip with a scrollbar where an editor should be.

   The skin has nothing else to say about these: width and a floor on height only. */
.gm-form .input-group > smart-editor,
.gm-form .input-group > .smart-element {
    display: block !important;
    width: 100% !important;
    min-height: 260px;
}