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

:root{
  --it-primary:#5b5bd6;
  --it-primary-2:#7c3aed;
  --it-accent:#06b6d4;
  --it-success:#10b981;
  --it-warning:#f59e0b;
  --it-danger:#ef4444;
  --it-ink:#0f172a;
  --it-muted:#64748b;
  --it-line:#e2e8f0;
  --it-surface:#ffffff;
  --it-surface-soft:rgba(255,255,255,.72);
  --it-bg:#f4f7fb;
  --it-shadow:0 18px 50px rgba(15,23,42,.10);
  --it-shadow-soft:0 10px 30px rgba(15,23,42,.07);
  --it-radius:22px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--it-ink);
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(91,91,214,.14), transparent 60%),
    radial-gradient(700px 420px at -10% 100%, rgba(6,182,212,.12), transparent 60%),
    linear-gradient(180deg,#f8fbff 0%, var(--it-bg) 100%);
  min-height:100vh;
  overflow-x:hidden;
}

a{
  color:var(--it-primary);
  text-decoration:none;
  transition:.25s ease;
}

a:hover{
  color:var(--it-primary-2);
}

img,
svg,
canvas,
iframe,
video{
  max-width:100%;
  height:auto;
  display:block;
}

button,
.btn,
input,
select,
textarea{
  transition:.25s ease;
}

.btn,
.button,
button[type="submit"],
button[type="button"]{
  border-radius:14px!important;
  box-shadow:var(--it-shadow-soft);
}

.card,
.box,
.panel,
.service-card,
.stat-card,
.feature-card,
.login-card,
.register-card,
.table-wrap,
.content-card{
  background:var(--it-surface-soft)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:var(--it-shadow)!important;
  border-radius:var(--it-radius)!important;
  max-width:100%;
}

.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  min-height:48px;
  border-radius:14px!important;
  border:1px solid var(--it-line)!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:none!important;
  max-width:100%;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(91,91,214,.45)!important;
  box-shadow:0 0 0 4px rgba(91,91,214,.12)!important;
  outline:none!important;
}

.table,
.table table{
  background:transparent;
  width:100%;
}

.table thead th,
table thead th{
  background:linear-gradient(135deg, rgba(91,91,214,.12), rgba(6,182,212,.10));
  color:var(--it-ink);
  border-bottom:1px solid var(--it-line)!important;
}

.table td,
.table th,
table td,
table th{
  vertical-align:middle;
  border-color:#eef2f7!important;
  word-break:break-word;
}

.badge,
.tag,
.label{
  border-radius:999px!important;
  padding:.5rem .85rem;
}

.navbar,
.topbar,
header.sticky-top{
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(148,163,184,.18)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

.hero-title,
.page-title,
h1,
h2,
h3,
.navbar-brand{
  letter-spacing:.2px;
  word-break:break-word;
}

.navbar-brand,
.brand-text,
.logo-text{
  font-weight:800!important;
  background:linear-gradient(135deg,var(--it-primary),var(--it-accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}

.float-lift:hover,
.card:hover,
.service-card:hover,
.stat-card:hover,
.feature-card:hover{
  transform:translateY(-4px);
}

.table-responsive,
.table-wrap{
  width:100%;
  max-width:100%;
}

.container,
.container-fluid,
.row,
.col,
[class*="col-"]{
  max-width:100%;
}

::-webkit-scrollbar{
  width:12px;
  height:12px;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--it-primary),var(--it-accent));
  border-radius:999px;
  border:3px solid #f4f7fb;
}

::-webkit-scrollbar-track{
  background:#edf2f7;
}

.fade-in-up{
  opacity:0;
  transform:translateY(16px);
  animation:itFadeUp .7s ease forwards;
}

@keyframes itFadeUp{
  to{
    opacity:1;
    transform:none;
  }
}

@media (max-width: 992px){
  .table-responsive,
  .table-wrap{
    overflow:auto;
  }

  .navbar-brand{
    font-size:1.1rem!important;
  }
}

@media (max-width: 768px){
  body{
    background-attachment:scroll;
  }

  .card,
  .box,
  .panel,
  .service-card,
  .stat-card,
  .feature-card,
  .login-card,
  .register-card,
  .table-wrap,
  .content-card{
    border-radius:18px!important;
  }

  .btn,
  .button,
  button[type="submit"],
  button[type="button"]{
    width:100%;
    min-height:46px;
  }

  .table thead{
    display:none;
  }

  .table tr,
  table tr{
    display:block;
    margin-bottom:12px;
    border:1px solid #edf2f7;
    border-radius:16px;
    background:rgba(255,255,255,.9);
  }

  .table td,
  table td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    border:0!important;
    padding:.85rem 1rem;
  }
}
/* Soft motion and semantic chips */
.ui-chip,.status-chip,.service-chip{
  display:inline-flex;align-items:center;gap:8px;padding:.5rem .9rem;border-radius:999px;font-weight:700;font-size:.88rem;
  background:rgba(255,255,255,.86);border:1px solid rgba(148,163,184,.16);box-shadow:var(--it-shadow-soft)
}
.ui-chip i,.status-chip i,.service-chip i{font-size:.9em}
.ui-chip.success{color:#047857;background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(20,184,166,.10))}
.ui-chip.warning{color:#b45309;background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(251,191,36,.10))}
.ui-chip.danger{color:#b91c1c;background:linear-gradient(135deg,rgba(239,68,68,.16),rgba(249,115,22,.10))}
.icon-badge{width:42px;height:42px;border-radius:14px;display:inline-grid;place-items:center;background:linear-gradient(135deg,rgba(91,91,214,.14),rgba(6,182,212,.14));box-shadow:var(--it-shadow-soft)}
.soft-float{animation:itFadeUp .7s ease forwards, gentleFloat 4s ease-in-out infinite .7s}
@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}