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

:root{
  --yusr-brand:#0d9488;
  --yusr-brand-dark:#065f5b;
  --yusr-brand-soft:#ccfbf1;
  --yusr-bg:#f6faf9;
  --yusr-surface:#ffffff;
  --yusr-surface-soft:#f8fffd;
  --yusr-border:#dfeae7;
  --yusr-text:#0f172a;
  --yusr-muted:#64748b;
  --yusr-shadow:0 12px 30px rgba(15,23,42,.07);
  --yusr-radius:14px;
}

html,body{min-height:100%;}
body{
  font-family:'Tajawal','Cairo',Tahoma,Arial,sans-serif !important;
  background:
    radial-gradient(circle at top right, rgba(13,148,136,.10), transparent 32rem),
    linear-gradient(180deg,#ffffff 0%,var(--yusr-bg) 100%) !important;
  color:var(--yusr-text);
  direction:rtl;
}

a{color:var(--yusr-brand);}
a:hover{color:var(--yusr-brand-dark);}

.navbar,
.topbar,
.navbar-metronic{
  background:linear-gradient(135deg,var(--yusr-surface),var(--yusr-surface-soft)) !important;
  color:var(--yusr-text) !important;
  border-bottom:1px solid var(--yusr-border) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.05) !important;
}

.brand-title,
.navbar-brand,
h1,h2,h3,h4,h5,h6{letter-spacing:0 !important;}

.navbar-brand b,
.brand-title,
.stat .icon,
.nav-linkx i{
  color:var(--yusr-brand) !important;
}

.app{
  gap:18px !important;
  padding:18px !important;
}

.sidebar{
  background:var(--yusr-surface) !important;
  border:1px solid var(--yusr-border) !important;
  border-radius:var(--yusr-radius) !important;
  box-shadow:var(--yusr-shadow) !important;
}

.sidebar .section{
  color:var(--yusr-muted) !important;
  font-weight:800 !important;
}

.sidebar .menu a,
.nav-linkx{
  border-radius:10px !important;
  color:var(--yusr-text) !important;
  font-weight:700 !important;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease !important;
}

.sidebar .menu a.active,
.sidebar .menu a:hover,
.nav-linkx.active,
.nav-linkx:hover{
  background:var(--yusr-brand-soft) !important;
  color:var(--yusr-brand-dark) !important;
  outline:0 !important;
  box-shadow:none !important;
}

.card,
.cardy,
.kpi,
.kpi3d,
.mini-card,
.chart-card,
.wizard-card,
.login-box,
.card-success,
.finance-table,
.glass{
  background:var(--yusr-surface) !important;
  border:1px solid var(--yusr-border) !important;
  border-radius:var(--yusr-radius) !important;
  box-shadow:var(--yusr-shadow) !important;
}

.btn,
.form-control,
.form-select,
.input-group-text,
.badge,
.alert,
.modal-content,
.dropdown-menu{
  border-radius:10px !important;
}

.btn-brand,
.btn-primary,
.btn-success,
.btn-primary-mtr,
.dataTables_wrapper .dt-buttons .btn{
  background:var(--yusr-brand) !important;
  border-color:var(--yusr-brand) !important;
  color:#fff !important;
}

.btn-brand:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-primary-mtr:hover,
.dataTables_wrapper .dt-buttons .btn:hover{
  background:var(--yusr-brand-dark) !important;
  border-color:var(--yusr-brand-dark) !important;
  color:#fff !important;
}

.btn-outline-primary,
.btn-outline-success{
  border-color:var(--yusr-brand) !important;
  color:var(--yusr-brand) !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover{
  background:var(--yusr-brand) !important;
  color:#fff !important;
}

.form-control,
.form-select{
  border-color:#d7e4e1 !important;
}

.form-control:focus,
.form-select:focus{
  border-color:var(--yusr-brand) !important;
  box-shadow:0 0 0 .2rem rgba(13,148,136,.14) !important;
}

.table{
  --bs-table-bg:transparent;
  color:var(--yusr-text);
}

.table thead,
.mini-table thead th{
  background:#ecfdf5 !important;
}

.table th{
  color:#134e4a;
  font-weight:800;
  white-space:nowrap;
}

.table thead th,
.table.dataTable thead th,
table.dataTable thead th,
.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead > tr > th,
.dataTables_wrapper table.dataTable thead > tr > th.sorting,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_asc,
.dataTables_wrapper table.dataTable thead > tr > th.sorting_desc,
.mini-table thead th,
.excel-table thead th,
.statement-table thead th,
.payroll-table thead th{
  text-align:right !important;
  direction:rtl !important;
}

.table thead th.text-center,
table.dataTable thead th.text-center,
.dataTables_wrapper table.dataTable thead th.text-center{
  text-align:center !important;
}

.table thead th.text-end,
table.dataTable thead th.text-end,
.dataTables_wrapper table.dataTable thead th.text-end{
  text-align:left !important;
}

.progress-bar,
.progress-glassy .bar,
.bar > span:not([style*="background"]){
  background:linear-gradient(90deg,var(--yusr-brand),#14b8a6) !important;
}

footer{
  color:var(--yusr-muted) !important;
}

.login-container{
  min-height:100vh;
  background:linear-gradient(135deg,#ffffff 0%,#edfdfa 100%) !important;
}

.login-form{
  background:var(--yusr-surface) !important;
}

.login-hero{
  background:linear-gradient(135deg,var(--yusr-brand-dark),var(--yusr-brand)) !important;
}

.login-box h2,
.show-password-btn{
  color:var(--yusr-brand) !important;
}

.input-icon .icon-box{
  background:var(--yusr-brand) !important;
}

@media (max-width: 768px){
  .app{padding:12px !important;}
  .login-container{display:block !important;}
  .login-hero{min-height:34vh;}
  .login-form{min-height:66vh;}
}

@media print{
  body{background:#fff !important;}
  .navbar,.topbar,.sidebar,.print-hide{box-shadow:none !important;}
}