/* ============================================================================
   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; }
    /* Generated forms set the column count inline (repeat(2,...)); stack to one column on phones. */
    @media (max-width: 767.98px) { .gm-form .gm-grid { grid-template-columns: minmax(0, 1fr) !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-within { outline: 0 !important; outline-offset: 0 !important; }
    /* ...except keyboard focus (WCAG 2.4.7): mouse clicks stay ring-free, Tab shows where you are. */
    .gm-form *:focus-visible { outline: 2px solid var(--kt-primary) !important; outline-offset: 2px !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;
}

/* The stock module's validation vocabulary, inside an adopted form.

   The المخزون pages mark an invalid field with .custom-is-invalid / .custom-is-invalid-radio on
   the INPUT-GROUP, and draw the error as a 1px ::after underline across the group while removing
   the control's own bottom border. That is a correct drawing for an inline input-group, which is
   what those pages were before: label and control side by side, one box, one line beneath it.

   .gm-form turns the input-group into a block - the label moves above the control and the control
   gets its own 46px rounded box. The underline then detaches: it spans the group, the control is
   narrower, and the control's bottom border comes back from the skin. Two lines, different widths,
   under one field. Measured on /Products/Attributes/Add with .custom-is-invalid forced onto every
   group: ::after 1px rgb(241,65,108) at 535px against a 46px control box.

   So the underline is suppressed INSIDE .gm-form only, and the invalid state is handed to the
   presentation the generated pages use for it - the same red border and 6% tint that
   `.gm-form .form-control.invalid` already declares above. Outside .gm-form nothing changes: the
   pages that have not adopted the chrome keep their underline. */
.gm-form .input-group.custom-is-invalid::after,
.gm-form .input-group.custom-is-invalid-radio::after {
    display: none !important;
}

.gm-form .input-group.custom-is-invalid > .form-control,
.gm-form .input-group.custom-is-invalid-radio > .form-control,
.gm-form .input-group.custom-is-invalid > .blazored-typeahead,
.gm-form .input-group.custom-is-invalid-radio > .blazored-typeahead {
    border: 1.5px solid var(--gm-danger) !important;
    background-color: color-mix(in srgb, var(--gm-danger) 6%, var(--gm-mix)) !important;
}

/* The grid header, as a generated page actually draws it.

   A generated page carries BOTH scopes: .gen-modern on the routing shell and .gm-grid on its
   grid component. A page that adopts only .gm-grid - which is what Sales and المخزون do, on
   purpose - therefore misses whatever the shell contributes to the header, and the shell
   contributes three things:

     background   var(--acc-soft2) on the header ROW; .gm-grid sets none, so an adopted grid
                  draws a transparent header against a tinted one on the reference
     font-size    .72rem !important, which beats .gm-grid's own 11px
     padding      .9rem 1rem !important, which beats .gm-grid's 13px 20px

   The colour and the 800 weight are the same in both scopes, so only these three differ.

   --acc-soft2 is declared on .gen-modern, not on .gm-grid, so the formula is written out here.
   It needs no dark counterpart: --gm-mix is already flipped to the card background by the
   [data-theme="dark"] block above, so the mix follows the theme on its own.

   All three carry !important, for two measured reasons. The table ships Metronic's `gs-0`,
   whose `.table.gs-0 > :not(caption) > * { padding-right: 0 }` zeroed the horizontal padding -
   the reference wins that fight because the shell declares padding !important, and this has to
   win it the same way. And in dark mode the tint was being dropped without it. */
.gm-grid .gb-grid-table thead tr {
    background: color-mix(in srgb, var(--acc) 5%, var(--gm-mix)) !important;
}

.gm-grid .gb-grid-table thead th {
    font-size: .72rem !important;
    padding: .9rem 1rem !important;
}