/* ==========================================================================
   منصة قسم هندسة التخطيط والتصميم العمراني — كلية الهندسة — جامعة طنطا
   لوحة الألوان والأساسيات (Palette & Base)

   ترتيب التحميل: tokens.css ← main.css ← components.css ← layout.css ← ملف الصفحة
   قواعد الترويسة والتنقل والتذييل انتقلت إلى layout.css.
   قيم المسافات والخطوط والحركة في tokens.css.
   ========================================================================== */

@import url('../vendor/fonts.css');

:root {
  /* ---- لوحة البلوبرينت المعماري (النمط الليلي) ---- */
  --bg-dark: #070c18;
  --bg-surface: #0e1629;
  --bg-card: #131e36;
  --bg-elevated: #192746;
  --bg-hover: #22345e;
  --bg-header-bar: #040710;
  --bg-header-blur: rgba(14, 22, 41, 0.90);

  /* ألوان المجالات — تُستخدم للتعبئة والحدود والأيقونات.
     لاستخدامها كنص استعمل مقابلها --on-surface-* في tokens.css. */
  --color-primary: #0284c7;        /* أزرق البلوبرينت */
  --color-primary-light: #38bdf8;
  --color-primary-glow: rgba(56, 189, 248, 0.15);

  --color-accent: #f59e0b;         /* كهرماني التقسيم المناطقي */
  --color-accent-light: #fbbf24;

  --color-emerald: #10b981;        /* أخضر المسطحات واللاندسكيب */
  --color-emerald-glow: rgba(16, 185, 129, 0.15);

  --color-rose: #f43f5e;           /* قرميدي المواعيد النهائية */
  --color-purple: #8b5cf6;         /* بنفسجي الـ GIS والأبحاث */

  /* ---- النصوص ---- */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-inverse: #0f172a;
  /* --text-muted و --text-faint معرّفان في tokens.css (مصححا التباين) */

  /* ---- الحدود ---- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(56, 189, 248, 0.35);

  /* ---- أسطح اللوحات المميّزة (Feature panels) ----
     الخلفيات دي كانت مثبّتة بالكحلي جوّه drive.css و curriculum.css من
     غير أي مقابل نهاري، فالنص (بنّي غامق في النهاري) كان بيقع على كحلي
     غامق = صفر تباين والكلام مش باين. دلوقتي بقت توكنز بتقلب مع الثيم. */
  --panel-feature: linear-gradient(135deg, rgba(14, 22, 41, 0.95), rgba(7, 12, 24, 0.90)),
                   radial-gradient(circle at 100% 0%, rgba(2, 132, 199, 0.15), transparent 50%);
  --panel-solid: rgba(14, 22, 41, 0.95);
  --panel-solid-soft: rgba(14, 22, 41, 0.85);
  --panel-accent-wash: linear-gradient(90deg, rgba(2, 132, 199, 0.12), rgba(14, 22, 41, 0.60));
  --panel-accent-strong: linear-gradient(135deg, rgba(2, 132, 199, 0.20), rgba(15, 23, 42, 0.95));

  /* لون النص فوق اللوحات المميّزة — يضمن التباين مهما كان الثيم */
  --on-panel: #f8fafc;
  --on-panel-muted: #b6c2d4;

  /* ---- توافق خلفي: الظلال القديمة تشير لسلّم الارتفاع الجديد ---- */
  --shadow-sm: var(--elev-1);
  --shadow-md: var(--elev-3);
  --shadow-lg: var(--elev-4);
  --shadow-blueprint: 0 0 25px rgba(2, 132, 199, 0.20);

  /* ---- الخطوط ---- */
  --font-arabic: 'Cairo', system-ui, -apple-system, sans-serif;
  --font-latin: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, monospace;

  /* توافق خلفي مع المكوّنات القديمة */
  --transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

/* ==========================================================================
   النمط النهاري المعماري — بني توسكاني وبيج رملي
   ========================================================================== */
:root[data-theme="light"],
html[data-theme="light"] {
  --bg-dark: #FAF6F0;
  --bg-surface: #F2EAE0;
  --bg-card: #FFFFFF;
  --bg-elevated: #F8F3EA;
  --bg-hover: #E8DED1;
  --bg-header-bar: #EAE1D3;
  --bg-header-blur: rgba(248, 244, 237, 0.94);

  --color-primary: #5C3A21;
  --color-primary-light: #7E4F2D;
  --color-primary-glow: rgba(92, 58, 33, 0.12);

  --color-accent: #B87326;
  --color-accent-light: #D48C38;

  --color-emerald: #2D7A38;
  --color-emerald-glow: rgba(45, 122, 56, 0.12);

  --color-rose: #B93826;
  --color-purple: #6B4E71;

  --text-primary: #261B14;
  --text-secondary: #554236;
  --text-inverse: #FAF6F0;

  --border-subtle: rgba(92, 58, 33, 0.12);
  --border-strong: rgba(92, 58, 33, 0.22);
  --border-accent: rgba(92, 58, 33, 0.38);

  --shadow-blueprint: 0 0 25px rgba(92, 58, 33, 0.14);

  /* اللوحات المميّزة في النهاري: ورق دافئ بدل الكحلي، عشان النص البنّي
     يفضل مقروء. الحبر هنا غامق مش أبيض — دي النقطة اللي كانت مكسورة. */
  --panel-feature: linear-gradient(135deg, #FFFFFF 0%, #F4EADC 100%),
                   radial-gradient(circle at 100% 0%, rgba(92, 58, 33, 0.10), transparent 55%);
  --panel-solid: rgba(252, 249, 244, 0.97);
  --panel-solid-soft: rgba(252, 249, 244, 0.90);
  --panel-accent-wash: linear-gradient(90deg, rgba(184, 115, 38, 0.14), rgba(244, 234, 220, 0.75));
  --panel-accent-strong: linear-gradient(135deg, rgba(184, 115, 38, 0.18), rgba(248, 243, 234, 0.96));

  --on-panel: #261B14;
  --on-panel-muted: #6B5A4C;
}

/* ==========================================================================
   إعادة الضبط والأساسيات
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* مساحة أمان أسفل الروابط الداخلية حتى لا تختفي تحت الترويسة اللاصقة */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: start;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(2, 132, 199, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 40%),
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  background-attachment: fixed;
}

[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 10% 15%, rgba(92, 58, 33, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(184, 115, 38, 0.04) 0%, transparent 45%),
    linear-gradient(to right, rgba(92, 58, 33, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(92, 58, 33, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
}

/* تسلسل العناوين.
   في العربي مش عندنا رفاهية التتبّع السالب (بيفكّ وصلات الحروف)، فالتسلسل
   بيتبني من: الوزن + الحجم + ارتفاع السطر مع بعض — مش من الحجم لوحده. */
h1, h2, h3, h4, h5, h6 { line-height: var(--leading-tight); color: var(--text-primary); }
h1 { font-size: var(--text-3xl); font-weight: var(--weight-display); line-height: var(--leading-display); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-black); }
h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); }
h4 { font-size: var(--text-md); font-weight: var(--weight-bold); }

/* الفقرات تكسر أسطرها بذكاء: ما تسيبش كلمة وحيدة في آخر سطر */
p { text-wrap: pretty; }

a { color: var(--on-surface-primary); }

/* الأرقام اللاتينية داخل نص عربي: التتبّع مسموح هنا لأن الخط لاتيني */
.stat-number, .dash-kpi-value, .num {
  font-family: var(--font-latin);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}

/* حقول النموذج على الموبايل: 16px لمنع التكبير التلقائي في iOS */
input, select, textarea, button { font: inherit; }

@media (max-width: 768px) {
  input, select, textarea { font-size: var(--text-md); }
}

/* المحتوى الرئيسي لا يُظهر حلقة تركيز عند القفز إليه بالرابط */
#mainContent:focus { outline: none; }

/* ==========================================================================
   طبقة الحبيبات (Film grain)
   التصميم المسطّح تمامًا بيبان "رقمي ومعقّم". طبقة ضوضاء خفيفة جدًا بترجّع
   إحساس الورق والحبر — وهو بالظبط مزاج القسم المعماري.
   قواعد الأداء: الطبقة ثابتة (fixed) و pointer-events:none، عمرها ما
   تتحط على حاوية بتتمرّر وإلا المتصفح بيعيد رسمها كل فريم.
   SVG مضمّن كـ data URI فمافيش طلب شبكة إضافي.
   ========================================================================== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="light"] body::after {
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* الطبقة ضوضاء بصرية بحتة — تختفي مع تفضيل تقليل الحركة/الشفافية */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body::after { display: none; }
}

/* ==========================================================================
   بطاقة الهيرو المعمارية
   ========================================================================== */
/* الإطار المزدوج (Double-bezel): البطاقة ما تقعدش مسطّحة على الخلفية.
   غلاف خارجي بحشوة صغيرة + لبّ داخلي بزاوية محسوبة (الخارجية − الحشوة)،
   فالمنحنيين يطلعوا متراكزين وتحسّ إن اللوحة قاعدة في إطار معدني. */
.hero-architectural-banner {
  position: relative;
  padding: var(--bezel-pad);
  background: var(--overlay-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  margin-bottom: var(--gap-section);
  box-shadow: var(--elev-3);
}

.hero-architectural-banner > .hero-content {
  position: relative;
  z-index: var(--z-raised);
  max-width: 64ch;
  border-radius: var(--radius-inner-xl);
  padding: clamp(var(--space-7), 4vw, var(--space-11)) clamp(var(--space-5), 3.5vw, var(--space-10));
  background:
    linear-gradient(135deg, rgba(14, 22, 41, 0.93), rgba(7, 12, 24, 0.97)),
    url('../assets/hero_masterplan.jpg') center / cover no-repeat;
  box-shadow: var(--edge-light);
}

/* اللبّ الداخلي ياخد عرض الإطار كله — الـ max-width فوق للنص مش للصندوق */
.hero-architectural-banner > .hero-content { max-width: none; }
.hero-content > :is(.hero-tag, .hero-title, .hero-sub, .hero-actions) { max-width: 60ch; }

[data-theme="light"] .hero-architectural-banner {
  border-color: rgba(92, 58, 33, 0.16);
  background: rgba(92, 58, 33, 0.05);
  box-shadow: var(--elev-2);
}

[data-theme="light"] .hero-architectural-banner > .hero-content {
  background:
    linear-gradient(135deg, rgba(250, 246, 240, 0.94), rgba(238, 230, 218, 0.97)),
    url('../assets/hero_masterplan.jpg') center / cover no-repeat;
}

/* خطوط إنشائية رفيعة في النصف الفاضي — تملى المساحة من غير ما تزوّد
   ضجيج، وبتقول "رسم هندسي" بلغة بصرية بدل ما تقولها بالكلام.
   تختفي تحت 900px لأن الهيرو بيبقى عمود واحد. */
.hero-architectural-banner::after {
  content: "";
  position: absolute;
  inset-block: var(--bezel-pad);
  inset-inline-start: var(--bezel-pad);
  width: 34%;
  pointer-events: none;
  z-index: var(--z-raised);
  border-radius: var(--radius-inner-xl);
  opacity: 0.5;
  background-image:
    linear-gradient(to left, var(--border-strong) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size: 64px 100%, 100% 64px;
  -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 88%);
  mask-image: linear-gradient(to left, #000 10%, transparent 88%);
}

@media (max-width: 900px) {
  .hero-architectural-banner::after { display: none; }
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary-glow);
  border: 1px solid var(--border-accent);
  color: var(--on-surface-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.hero-tag :is(i, svg) { width: 15px; height: 15px; }

[data-theme="light"] .hero-tag {
  background: rgba(92, 58, 33, 0.08);
  border-color: rgba(92, 58, 33, 0.2);
  color: var(--on-surface-primary);
}

/* العنوان: التسلسل هنا مبني على وزن وحجم مختلفين بين السطرين، مش على
   تلوين كلمة واحدة بلون تاني (ده أشهر علامة على صفحة مولّدة آليًا).
   السطر الأول تمهيد أخفّ، والسطر التاني هو الاسم اللي المفروض يفضل
   في دماغ الزائر. */
.hero-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.hero-title span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-4xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  color: var(--text-primary);
}

.hero-sub {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-7);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-control);
  margin-bottom: var(--space-9);
}

/* الإحصاءات: أربع كروت متطابقة في صف هي بالظبط النمط اللي بيخلّي أي
   صفحة تبان تمبليت. الأرقام هنا مش محتاجة ارتفاع ولا صندوق — محتاجة
   تسلسل. فبقت صفًّا بخطوط شعرية فاصلة، والرقم هو البطل. */
.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-6);
}

.hero-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-5);
  border-inline-start: 1px solid var(--border-subtle);
}

.hero-stat-card:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

[data-theme="light"] .hero-stat-card {
  background: none;
  border-color: rgba(92, 58, 33, 0.16);
  box-shadow: none;
}

/* الأيقونة بقت علامة صغيرة جنب اللابل، مش مربّع ملوّن بيسحب العين
   بعيد عن الرقم */
.stat-label :is(i, svg) {
  width: 14px;
  height: 14px;
  color: var(--on-surface-primary);
  flex-shrink: 0;
}

.stat-number {
  display: block;
  font-family: var(--font-latin);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

@media (max-width: 560px) {
  .hero-stats-row { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
  .hero-stat-card:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
}

/* ==========================================================================
   إشعارات التوست
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  inset-inline-start: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: min(92vw, 400px);
}

@media (max-width: 768px) {
  .toast-container { bottom: calc(var(--bottom-nav-height) + var(--space-4)); inset-inline: var(--space-4); max-width: none; }
}

.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-inline-start: 3px solid var(--text-muted);
  color: var(--text-primary);
  box-shadow: var(--elev-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  animation: toastIn var(--dur-base) var(--ease-out);
}

.toast-item :is(i, svg) { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }

.toast-item.toast-success { border-inline-start-color: var(--color-emerald); }
.toast-item.toast-success :is(i, svg) { color: var(--on-surface-success); }
.toast-item.toast-danger { border-inline-start-color: var(--color-rose); }
.toast-item.toast-danger :is(i, svg) { color: var(--on-surface-danger); }
.toast-item.toast-warning { border-inline-start-color: var(--color-accent); }
.toast-item.toast-warning :is(i, svg) { color: var(--on-surface-accent); }
.toast-item.toast-info { border-inline-start-color: var(--color-primary); }
.toast-item.toast-info :is(i, svg) { color: var(--on-surface-primary); }

.toast-fade-out {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* أسماء الحركات القديمة — مُبقاة لتوافق المكوّنات الموجودة */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   تصحيحات النمط النهاري للمكوّنات المشتركة
   ========================================================================== */
[data-theme="light"] .role-description-banner { background: rgba(92, 58, 33, 0.06); border-color: rgba(92, 58, 33, 0.16); color: var(--text-secondary); }
[data-theme="light"] .role-desc-inner strong { color: var(--on-surface-primary); }
[data-theme="light"] .modal-backdrop { background: rgba(38, 27, 20, 0.62); }
[data-theme="light"] .drawer-backdrop { background: rgba(38, 27, 20, 0.55); }
[data-theme="light"] .drawer-container { background: #FAF6F0; box-shadow: var(--elev-5); }
[data-theme="light"] .form-control { background: #FFFFFF; border-color: rgba(92, 58, 33, 0.22); color: var(--text-primary); }
[data-theme="light"] .btn-outline { background: #FFFFFF; border-color: rgba(92, 58, 33, 0.2); color: var(--text-secondary); }
[data-theme="light"] .btn-outline:hover { background: var(--bg-hover); border-color: var(--color-primary); color: var(--on-surface-primary); }

/* ==========================================================================
   أشرطة الفلاتر وأزرار التصفية الموحدة (Global Filter Pills)
   ========================================================================== */
.curriculum-controls-bar,
.insp-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4, 16px);
  background: var(--bg-surface, #0e1629);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg, 12px);
  padding: 12px 18px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 16px;
  background: var(--bg-card, #131e36);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  color: var(--text-secondary, #cbd5e1);
  font-family: var(--font-arabic, 'Cairo', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 9999px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.filter-pill-btn:hover {
  background: var(--bg-hover, #22345e);
  color: var(--text-primary, #ffffff);
  border-color: var(--color-primary, #0284c7);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
}

.filter-pill-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-weight: 700;
}

[data-theme="light"] .curriculum-controls-bar,
[data-theme="light"] .insp-controls-bar {
  background: #ffffff;
  border-color: rgba(92, 58, 33, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .filter-pill-btn {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="light"] .filter-pill-btn:hover {
  background: #f1f5f9;
  border-color: #0284c7;
  color: #0f172a;
}

[data-theme="light"] .filter-pill-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}