@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   Gate Cars — طبقة الرموز اللونية (المصدر الوحيد للحقيقة)
   ───────────────────────────────────────────────────────────────────────────
   قبل هذا الملف كان في المشروع خمسة «أخضر أساسي» متنافسة: ‎#2e7d32 (٥٦ مرة)،
   ‎#1b5e20، ‎#159a45، ‎#164f2d، ‎#123d29 — ولا واحد منها لون الشعار. الشعار
   ‎(logo.svg) مبنيٌّ على ‎#0F9146 أخضر و ‎#8FCF1B ليموني، وهما يظهران ٣ و ٦
   مرات فقط. فالسلّم أدناه مشتقٌّ من لون الشعار الحقيقي عند الدرجة اللونية
   ‎145°، وكل أخضر آخر في النظام يُشتقّ منه لا من مكتبة خارجية.

   قاعدتان تحكمان الملف:
   ١. لون تمييز واحد. الليموني ‎#8FCF1B للشعار وشريط هوية واحد فقط، لا كسطح.
   ٢. كل نصّ يعبر ‎WCAG AA. ‎#0F9146 نفسه يعطي ٤٫٠٧:١ مع الأبيض — أي أنه
      يرسب كخلفية زر. لذلك الزر يأخذ ‎--gc-800 (٦٫٨٦:١) ويبقى ‎#0F9146
      للرسوم والأيقونات حيث لا يحمل نصاً صغيراً.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* سلّم العلامة — درجة لونية 145°، مرساته #0F9146 عند 700 */
    --gc-50:  #f0f9f4;
    --gc-100: #def2e6;
    --gc-200: #bfe3ce;
    --gc-300: #94d1ad;
    --gc-400: #55c383;
    --gc-500: #29ad60;
    --gc-600: #169c4e;
    --gc-700: #0f9146;  /* أخضر الشعار */
    --gc-800: #126836;
    --gc-900: #124929;
    --gc-950: #0e2f1c;

    /* الليموني: الشعار وشريط الهوية فقط. ممنوع كسطح أو كخلفية زر. */
    --gc-lime: #8fcf1b;

    /* محايدات مائلة للأخضر بإشباع منخفض — تُبقي الرمادي من عائلة واحدة */
    --gc-n0:   #f9fbfa;
    --gc-n50:  #f4f7f5;
    --gc-n100: #ebf0ed;
    --gc-n200: #dae2de;
    --gc-n300: #c3cec8;
    --gc-n500: #63746b;
    --gc-n700: #313f38;
    --gc-n900: #1b221f;

    /* أسطح الوضع الداكن، من العائلة نفسها */
    --gc-d-bg:     #121714;
    --gc-d-surface:#1a211d;
    --gc-d-raised: #212a25;
    --gc-d-border: #2e3a34;
    --gc-d-ink:    #dce6e0;
    --gc-d-muted:  #9baaa2;

    /* ── رموز دلالية: هذه ما تستهلكه القواعد، لا الأرقام أعلاه ────────── */
    --gc-primary:       var(--gc-800);   /* أبيض عليه = 6.86:1 */
    --gc-primary-hover: #0e5a2e;
    --gc-primary-ink:   #ffffff;
    --gc-accent:        var(--gc-700);   /* أيقونات ورسوم، لا نصّ صغير */
    --gc-link:          var(--gc-800);   /* نصّ الروابط: 6.86:1 على الأبيض */
    --gc-focus:         rgba(15, 145, 70, 0.28);

    --gc-shell:      var(--gc-900);      /* الشريط الجانبي */
    --gc-shell-ink:  var(--gc-d-ink);
    --gc-shell-hover:rgba(255, 255, 255, 0.07);

    --gc-page:    var(--gc-n0);
    --gc-surface: #ffffff;
    --gc-border:  var(--gc-n200);
    --gc-ink:     var(--gc-n700);
    --gc-muted:   var(--gc-n500);

    /* مقياس الحالات: بديل قوس قزح Material (٧ درجات لونية) بخمسٍ معايَرة
       على إشباع وإضاءة متقاربة، ونجاحها محسوب: أدناها ٥٫٢٩:١ */
    --gc-ok-bg: #e7f4ec;  --gc-ok-fg: #126836;  --gc-ok-bd: #bfe3ce;
    --gc-info-bg: #e9f0f7; --gc-info-fg: #245a8c; --gc-info-bd: #c2d6e8;
    --gc-warn-bg: #fbf4e3; --gc-warn-fg: #8a6410; --gc-warn-bd: #ebdcb0;
    --gc-bad-bg: #f9eae8;  --gc-bad-fg: #9b3028;  --gc-bad-bd: #edc6c1;
    --gc-mute-bg: #f0f3f1; --gc-mute-fg: #53635b; --gc-mute-bd: #dae2de;
    --gc-warn2-bg: #fbefe3; --gc-warn2-fg: #8f4e14; --gc-warn2-bd: #ebcfb0;
    --gc-violet-bg: #f0edf7; --gc-violet-fg: #574189; --gc-violet-bd: #d4cbe7;

    --gc-radius: 10px;
    --gc-radius-lg: 16px;

    --font-stack: "Almarai", sans-serif !important;

    /* ── تجاوز رموز Frappe نفسها ────────────────────────────────────────
       هنا يموت الزر الأسود. ‎--primary و ‎--btn-primary كانا ‎#171717
       افتراض Frappe v17 ولم يُلمسا قط، فكل زر أساسي في النظام أسود.
       تغييرهما هنا يصلح كل الأزرار دفعةً واحدة بدل ملاحقة كل صفحة. */
    --primary: var(--gc-primary);
    --btn-primary: var(--gc-primary);
    --text-on-primary: var(--gc-primary-ink);
}

[data-theme-mode="dark"] {
    --gc-primary:       #157c41;   /* أفتح خطوة: يفصل عن الأرضية الداكنة، وأبيضه 5.27:1 */
    --gc-primary-hover: #0f6234;
    --gc-accent:        var(--gc-500);
    --gc-link:          var(--gc-300);   /* 9.44:1 على السطح الداكن */
    --gc-shell:         var(--gc-950);
    --gc-page:    var(--gc-d-bg);
    --gc-surface: var(--gc-d-surface);
    --gc-border:  var(--gc-d-border);
    --gc-ink:     var(--gc-d-ink);
    --gc-muted:   var(--gc-d-muted);

    --gc-ok-bg: #14301f;  --gc-ok-fg: #7fd3a1;  --gc-ok-bd: #24512f;
    --gc-info-bg: #16242f; --gc-info-fg: #8fc0e8; --gc-info-bd: #274257;
    --gc-warn-bg: #2d2314; --gc-warn-fg: #e0b36a; --gc-warn-bd: #4d3c1e;
    --gc-bad-bg: #2f1a18;  --gc-bad-fg: #e29b93;  --gc-bad-bd: #522e29;
    --gc-mute-bg: #212a25; --gc-mute-fg: #9baaa2; --gc-mute-bd: #2e3a34;
    --gc-warn2-bg: #331f12; --gc-warn2-fg: #e4a36d; --gc-warn2-bd: #5c3a1f;
    --gc-violet-bg: #241c33; --gc-violet-fg: #b6a2e0; --gc-violet-bd: #3d3357;
}

/* Frappe تُظهر هذه الشاشة لحظةَ إقلاع Desk. تبقى موسومة بالعلامة بدل
 * العودة إلى علامة الإطار الزرقاء. */
.centered.splash img {
    content: url("/assets/gatecar/images/logo.svg") !important;
}

.centered.splash img,
.splash-screen img,
.splash-screen-logo,
.desk-splash-screen img,
#splash-screen img {
    width: min(240px, 55vw) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* ═══ الشريط الجانبي ═════════════════════════════════════════════════════
   كان ‎#cbffce — أي ‎hsl(123, 100%, 90%): إشباع ١٠٠٪ على أكبر مساحة ملوّنة
   في الشاشة، وعند الإضاءة التي تبلغ فيها حساسية العين للسطوع ذروتها. التباين
   كان سليماً (٦٫٨٨:١) لكن الإجهاد يأتي من التشبّع لا من التباين، فلا يُعالَج
   بتغميق النصّ بل بخفض الكروما.

   الحلّ: غابةٌ عميقة ‎--gc-900. تُلغي الحقل الفاتح، تُوحّد القشرة مع صفحة
   الدخول (وهي أصلاً خضراء داكنة)، وتُبقي هندسة اللسان المنحني كما هي —
   القواعد الداكنة القائمة تثبت أنها تعمل مقلوبةً. الرموز تُعاد داخل نطاق
   ‎.body-sidebar فينقلب السطح كله دون ملاحقة كل عنصر.
   ═══════════════════════════════════════════════════════════════════════ */
.body-sidebar {
    --surface-menu-bar: var(--gc-shell);
    --ink-gray-5: var(--gc-d-muted);
    --ink-gray-6: var(--gc-d-muted);
    --ink-gray-7: var(--gc-shell-ink);
    --ink-gray-8: var(--gc-shell-ink);
    --ink-gray-9: #ffffff;
    --sidebar-hover-color: var(--gc-shell-hover);
    background-color: var(--gc-shell);
    border-left: 1px solid transparent;
}

.body-sidebar .body-sidebar-top {
    overflow: visible;
}

.body-sidebar .sidebar-header,
.body-sidebar .body-sidebar-top {
    background-color: var(--gc-shell);
}

.body-sidebar .standard-sidebar-item,
.body-sidebar .standard-sidebar-item a,
.body-sidebar .sidebar-item-label,
.body-sidebar .sidebar-item-icon {
    color: var(--gc-shell-ink);
}

/* إزالة مقبض طيّ الشريط الجانبي، بما فيه حالة المرور. */
.body-sidebar .sidebar-toggle-btn,
.body-sidebar .collapse-sidebar-link,
.body-sidebar:hover .sidebar-toggle-btn,
.body-sidebar:hover .collapse-sidebar-link {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* اللسان المنحني: البطاقة البيضاء تُقتطع من الغابة. الهندسة كما كانت،
   واللونان انقلبا فحسب — ‎box-shadow يحمل لون المحتوى، والزائدتان تحملان
   لون القشرة. */
.active-sidebar {
    position: relative;
    background-color: var(--bg-color) !important;
    box-shadow: -20px 0px 0px 0px var(--bg-color);
    border-radius: 0px 16px 16px 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 5px;
}

.active-sidebar,
.active-sidebar a,
.active-sidebar .sidebar-item-label,
.active-sidebar .sidebar-item-icon,
.active-sidebar .text-ink-gray-7,
.active-sidebar svg {
    color: var(--gc-900) !important;
}

.active-sidebar::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: -15px;
    width: 30px;
    height: 30px;
    border-radius: 30px 0 0 0;
    background: var(--gc-shell);
    box-shadow: -4px -10px 0 4px var(--bg-color);
}

.active-sidebar::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -15px;
    width: 30px;
    height: 30px;
    border-radius: 0 0 0 34px;
    background: var(--gc-shell);
    box-shadow: -10px 5px 0 4px var(--bg-color);
}

/* المرور كان مُعطَّلاً بالكامل لأن أيّ لون عليه كان يبدو رديئاً فوق النعناعي.
   على الغابة يكفي بياضٌ شفّاف خفيف ليعود الإحساس بالاستجابة. */
.body-sidebar .standard-sidebar-item:not(.active-sidebar):has(a:not(.section-break)):hover {
    background-color: var(--gc-shell-hover) !important;
    border-radius: 8px;
}

/* رأس مبدّل مساحات العمل يجب ألّا يبدو عنصر تنقّل مُختاراً. */
.body-sidebar .sidebar-header.hover,
.body-sidebar .sidebar-header.active-sidebar {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--gc-shell-ink) !important;
    margin: 0 !important;
}

.body-sidebar .sidebar-header.active-sidebar::before,
.body-sidebar .sidebar-header.active-sidebar::after {
    display: none !important;
}

.body-sidebar .sidebar-header.active-sidebar .sidebar-item-label,
.body-sidebar .sidebar-header.active-sidebar .sidebar-item-icon,
.body-sidebar .sidebar-header.active-sidebar svg {
    color: var(--gc-shell-ink) !important;
}

[data-theme-mode="dark"] .active-sidebar,
[data-theme-mode="dark"] .active-sidebar a,
[data-theme-mode="dark"] .active-sidebar .sidebar-item-label,
[data-theme-mode="dark"] .active-sidebar .sidebar-item-icon,
[data-theme-mode="dark"] .active-sidebar .text-ink-gray-7,
[data-theme-mode="dark"] .active-sidebar svg {
    color: var(--gc-d-ink) !important;
}

/* ═══ الشريط العلوي ══════════════════════════════════════════════════════
   كان تدرّجاً نعناعياً ‎#cbffce → #f2fff5 يمتدّ عرض الشاشة أعلى كل صفحة،
   ومعه نصٌّ وأيقونات مفروضة بـ ‎#1b5e20 وثمانية ‎!important. التدرّج زخرفة
   لا تحمل معنى، ووجوده أعلى كل شاشة يضاعف الإجهاد. سطحٌ مسطّح وشعرة حدّ
   يكفيان، وتسقط معهما كل تجاوزات اللون فتعود ألوان Frappe الطبيعية.
   ═══════════════════════════════════════════════════════════════════════ */
.page-head {
    background: var(--gc-surface) !important;
    border-bottom: 1px solid var(--gc-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.page-head .page-head-content {
    min-height: 50px;
    position: relative;
}

/* لا يُعاد فرض لون العلامة هنا — فقط ضمان أن الفتات يعبر AA في الوضعين.
   حذف تجاوزات اللون مع التدرّج ترك الفتات على رمادي Frappe: ٤٫١٦:١ على
   الرأس الداكن. */
.page-head .navbar-breadcrumbs a,
.page-head .navbar-breadcrumbs .breadcrumb-item,
.page-head .navbar-breadcrumbs li {
    color: var(--gc-muted) !important;
}

.page-head .navbar-breadcrumbs li:last-child,
.page-head .navbar-breadcrumbs li:last-child a,
.page-head .title-area {
    color: var(--gc-ink) !important;
}

/* ‎!important مقصود: Frappe تلوّن الفتات عبر ‎.text-ink-gray-7 وأمثالها،
   وهي تغلب انتقائيةً. النسخة السابقة استعملت ‎!important للسبب نفسه. */

/* ═══ الأزرار ════════════════════════════════════════════════════════════
   الأساسي يرث ‎--btn-primary المُعاد تعريفه أعلاه، فلا حاجة لملاحقته هنا.
   ما يلي هو ما لا يغطّيه الرمز: حلقة التركيز والإحساس اللمسي عند الضغط.
   ═══════════════════════════════════════════════════════════════════════ */
/* تجاوز ‎--btn-primary وحده لا يكفي في الوضع الداكن: قاعدة Frappe نفسها
   ‎.btn.btn-primary { color: var(--neutral) } و ‎--neutral تنقلب إلى الأسود
   هناك. مع خلفية خضراء داكنة يهبط النصّ إلى ٣٫٩٩:١. تثبيت الحبر صراحةً
   يعيده إلى ٥٫٢٧:١ في الداكن و ٦٫٨٦:١ في الفاتح. */
.btn.btn-primary {
    color: var(--gc-primary-ink) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--gc-primary-hover) !important;
    border-color: var(--gc-primary-hover) !important;
    color: var(--gc-primary-ink) !important;
}

.btn-primary:active {
    transform: translateY(1px);
}

.btn-primary:focus-visible,
.btn-default:focus-visible {
    outline: 2px solid var(--gc-accent);
    outline-offset: 2px;
}

/* ── أرقام الهواتف تُقرأ من اليسار دائماً (النموذج العربي يعكسها) ────── */
.frappe-control[data-fieldtype="Phone"] input,
.frappe-control[data-fieldtype="Phone"] .control-value,
.frappe-control[data-fieldtype="Phone"] .like-disabled-input,
.frappe-control[data-fieldtype="Data"][data-fieldname*="phone"] input,
.frappe-control[data-fieldtype="Data"][data-fieldname*="phone"] .control-value,
.frappe-control[data-fieldtype="Data"][data-fieldname*="hone"] input,
.frappe-control[data-fieldtype="Data"][data-fieldname*="hone"] .control-value {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate;
}

/* حقول القراءة ولوحات التوقيع تحتاج سطحاً داكناً مقروءاً. */
[data-theme-mode="dark"] .form-control:disabled,
[data-theme-mode="dark"] .like-disabled-input,
[data-theme-mode="dark"] .frappe-control .control-value {
    background-color: var(--gc-d-raised) !important;
    border-color: var(--gc-d-border) !important;
    color: var(--gc-d-ink) !important;
}

[data-theme-mode="dark"] .signature-control,
[data-theme-mode="dark"] .signature-pad,
[data-theme-mode="dark"] .frappe-control[data-fieldtype="Signature"] canvas {
    background-color: #f7faf8 !important;
    border-color: var(--gc-d-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   صفحة الدخول — Login
   ───────────────────────────────────────────────────────────────────────
   كل ما يلي محصور بـ ‎#page-login فلا يمسّ Desk بحرف، ويستهلك رموز العلامة
   أعلاه فقط — لا رقم لوني محلّي واحد. الأرضية الخضراء الداكنة هي نفسها لون
   الشريط الجانبي الجديد، فتُقرأ الصفحتان كنظام واحد لا كصفحتين.

   لا يُعدَّل ‎www/login.html: تجاوزه يُسقط كتلة ‎script فيتوقّف الدخول.
   وCSS مكتوب ‎LTR أولاً لأن ‎bench build يولّد ‎css-rtl/ ويقلبه.
   ═══════════════════════════════════════════════════════════════════════ */

/* الأرضية: كانت ثلاث طبقات تدرّج متراكبة، إحداها شعاعيّ أخضر بشفافية ٥٥٪
   يضرب الربع الأعلى. الآن طبقة عمق واحدة هادئة تحت البطاقة، ولا شيء غيرها.
   ‎`align-content: safe center` لا ‎`center` وحدها: البطاقة أطول من الشاشات
   القصيرة، والتوسيط العادي يدفع أعلاها خارج النافذة حيث لا يمكن التمرير
   إليه — فتختفي حقول الدخول كلياً. ‎`safe` تتراجع إلى المحاذاة العلوية. */
#page-login {
    min-height: 100vh;
    background:
        radial-gradient(52rem 38rem at 50% 8%, rgba(15, 145, 70, 0.22), transparent 64%),
        var(--gc-950);
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: safe center;
    padding: clamp(18px, 5vh, 56px) 16px;
}

#page-login .page-content-wrapper,
#page-login main.container {
    width: 100%;
    max-width: none;
    padding: 0;
}

#page-login .page-breadcrumbs,
#page-login .page-header-wrapper,
#page-login .page-footer,
#page-login footer.web-footer {
    display: none !important;
}

/* البطاقة: جسمٌ حقيقي بارتفاع وظل. */
#page-login .page-card {
    width: min(520px, 100%);
    /* البطاقة تحمل صنف Frappe‏ .login-content ومعه max-width: 371px. ضبط
       العرض وحده لا يكفي: الحدّ الأقصى يغلبه دائماً، فيُرفع صراحةً. */
    max-width: 520px;
    margin: 0 auto;
    position: relative;
    /* يقصّ شريط الهوية عند الزوايا المستديرة. آمنٌ هنا: لا قوائم منسدلة
       داخل البطاقة، وحلقة التركيز تقع داخل حشوة 44px. */
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 22px;
    padding: 40px 44px 34px;
    box-shadow:
        0 32px 64px -24px rgba(6, 26, 16, 0.5),
        0 4px 14px rgba(6, 26, 16, 0.16);
    animation: gc-login-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* التدرّج الوحيد المسموح في النظام كله: شعرة ٤ بكسل تحمل انتقال الشعار
   الحقيقي من أخضره إلى ليمونيّه. الليموني هنا لا يلمس نصّاً ولا يصير سطحاً،
   فيؤدّي دوره كتوقيع علامة بدل أن يكون صرخة لونية. */
#page-login .page-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gc-700) 0%, var(--gc-lime) 100%);
}

@keyframes gc-login-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #page-login .page-card { animation: none; }
}

/* الترويسة: الشعار هو البطل. الشريط المتدرّج الثاني الذي كان تحتها حُذف —
   زخرفتان متدرّجتان في بطاقة واحدة تُلغيان أثر إحداهما الأخرى. */
#page-login .page-card-head {
    text-align: center;
    padding: 0 0 22px;
    margin: 0 0 26px;
    border-bottom: 1px solid var(--gc-n200);
}

/* المفتاح هنا ‎max-height لا ‎height: Frappe تحدّ الشعار بـ ‎max-height: 32px،
   والحدّ الأقصى يقصّ الارتفاع مهما بلغت أولوية ‎height — حتى ‎inline !important
   يخسر أمامه. لذلك يُرفع الحدّ أولاً ثم يُضبط الارتفاع. نفس المزلق عولج في
   قاعدة شاشة البدء أعلى الملف. الشعار أصله 612×408 فالدقة متوفّرة للتكبير. */
#page-login img.app-logo {
    max-height: none !important;
    height: 68px !important;
    width: auto !important;
    max-width: 72% !important;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block;
}

#page-login .page-card-head h4 {
    font-family: "Almarai", sans-serif;
    font-weight: 800;
    font-size: 25px;
    line-height: 1.3;
    color: var(--gc-n900);
    margin: 0 0 6px;
}

#page-login .page-card-subtitle {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--gc-n500);
    margin: 0;
}

/* الحقول: ارتفاع 46px بدل 28px المتقلّص. */
#page-login .form-group { margin-bottom: 18px; }

#page-login .form-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gc-n900);
    margin-bottom: 7px;
    letter-spacing: 0.01em;
}

/* الحشوة اليسرى تُفسح للأيقونة المطلقة (left: 8px) وإلا ركبت النص.
   مكتوبة LTR أولاً — rtlcss يقلبها إلى اليمين في النسخة العربية. */
#page-login .form-control {
    height: 46px;
    padding: 0 14px 0 42px;
    font-size: 14.5px;
    color: var(--gc-n900);
    background: var(--gc-n0);
    border: 1.5px solid var(--gc-n200);
    border-radius: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#page-login .form-control::placeholder { color: var(--gc-n500); opacity: 0.8; }

#page-login .form-control:hover { border-color: var(--gc-n300); }

#page-login .form-control:focus {
    background: #ffffff;
    border-color: var(--gc-accent);
    box-shadow: 0 0 0 4px var(--gc-focus);
    outline: none;
}

/* الأيقونة كانت مثبّتة على ‎top: 23px فتنزاح مع ارتفاع الحقل الجديد —
   توسيطٌ حقيقي بدل رقمٍ مطلق. */
#page-login .field-icon {
    color: var(--gc-accent);
    opacity: 0.8;
    top: 50% !important;
    transform: translateY(-50%);
    left: 15px;
}

/* حقل كلمة المرور له زرّ إظهار على الطرف الآخر — نُفسح له. */
#page-login .password-field .form-control { padding-right: 44px; }

#page-login .toggle-password {
    top: 50% !important;
    transform: translateY(-50%);
    color: var(--gc-n500);
}

/* الزر: كان تدرّجاً عمودياً ‎#2e7d32 → #1b5e20. سطحٌ واحد مسطّح من الرمز
   نفسه الذي يحمل كل أزرار النظام — فيتطابق زر الدخول مع أول زر يراه
   المستخدم بعد الدخول. */
#page-login .page-card-actions { padding: 6px 0 0; }

#page-login .btn-login {
    height: 48px;
    font-family: "Almarai", sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--gc-primary-ink);
    background: var(--gc-primary);
    border: none;
    border-radius: 12px;
    transition: background 0.18s ease, transform 0.15s ease;
}

#page-login .btn-login:hover,
#page-login .btn-login:focus {
    color: var(--gc-primary-ink);
    background: var(--gc-primary-hover);
    transform: translateY(-1px);
}

#page-login .btn-login:active { transform: translateY(0); }

#page-login .btn-login:focus-visible {
    outline: 3px solid var(--gc-400);
    outline-offset: 2px;
}

/* الزر الثانوي: أخضر فاتح هادئ لا رماديٌّ ميت. */
#page-login .btn-login-option {
    height: 44px;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gc-800);
    background: var(--gc-50);
    border: 1px solid var(--gc-200);
    border-radius: 12px;
    transition: background 0.18s ease, border-color 0.18s ease;
}

#page-login .btn-login-option:hover {
    background: var(--gc-100);
    border-color: var(--gc-300);
    color: var(--gc-800);
}

#page-login .forgot-password-message {
    margin-top: 8px;
    font-size: 12.5px;
}

#page-login .forgot-password-message a {
    color: var(--gc-800);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

#page-login .forgot-password-message a:hover { border-bottom-color: var(--gc-800); }

#page-login .login-error-banner {
    border-radius: 10px;
    font-size: 13px;
}

/* شاشات ضيقة: البطاقة تملأ العرض وتخفّ حوافها. */
@media (max-width: 480px) {
    #page-login { padding: 20px 12px; }
    #page-login .page-card {
        padding: 32px 22px 26px;
        border-radius: 18px;
    }
    #page-login img.app-logo { height: 52px; }
    #page-login .page-card-head h4 { font-size: 22px; }
}