/* ==========================================================================
   SAS Radius 4.59.1 - واجهة طبق الأصل
   كل القيم مسحوبة بالـ computed styles من اللوحة الأصلية (demo4)
   ========================================================================== */

:root{
  /* Shell */
  --body-bg:#EFF3F8;
  --text:#151B1E;
  --border:#E3E8EC;
  --header-bg:#FFFFFF;
  --header-h:45px;
  --sidebar-w:220px;
  --sidebar-bg:#2A3238;
  --sidebar-color:#D8D8D8;
  --sidebar-active-bg:#1D2327;
  --sidebar-icon:#94A0B2;
  --brand-red:#D63230;
  --footer-bg:#F1F3F8;
  --footer-h:30px;

  /* Cards / tables */
  --card-header-bg:#343E45;
  --th-color:#495057;
  --th-border:#DEE2E6;
  --primary:#20A8D8;
  --page-border:#BCC5D0;
  --page-active-bg:#C2CFD6;

  /* Dashboard (dark) */
  --dash-bg:#314757;
  --widget-bg:#263946;
  --widget-title:rgba(254,254,254,.93);
  --widget-key:#8FBCD4;
  --widget-line:rgba(255,255,255,.15);

  /* Utility text colors */
  --info:#5DADE2;
  --success:#58D68D;
  --warning:#F4D03F;
  --danger:#EC7063;

  /* Status legend */
  --st-active:#9FE22B;
  --st-expired:#FF9416;
  --st-depleted:#E3DD4E;
  --st-disabled:#BB3436;
  --st-online:#1B9DEC;
  --st-fup:#7C40A5;
  --st-zombie:#000000;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  background:var(--body-bg);
  color:var(--text);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.5;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
ul{list-style:none;margin:0;padding:0}

/* ===================== HEADER ===================== */
.app-header{
  position:fixed;top:0;left:0;right:0;z-index:1020;
  height:var(--header-h);
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
}
.navbar-brand{
  width:var(--sidebar-w);
  height:var(--header-h);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 var(--sidebar-w);
}
/* الهوية: --brand يتحكم بمقاس الاسم كله */
.logo{
  --brand:26px;
  line-height:1;text-align:center;user-select:none;
}
.logo .logo-sas{
  display:block;font-weight:800;font-size:var(--brand);letter-spacing:1px;
  color:#F26522;font-family:Arial,Helvetica,sans-serif;
}
.logo .logo-radius{
  display:block;font-size:calc(var(--brand) * .385);letter-spacing:calc(var(--brand) * .21);
  color:#C6CBD0;font-family:Arial,Helvetica,sans-serif;margin-top:-3px;
}
.navbar-toggler{
  background:none;border:0;cursor:pointer;
  padding:0 18px;font-size:19px;color:#3E515B;line-height:1;
}
.header-spacer{flex:1}
.header-right{display:flex;align-items:center;gap:14px;padding-right:16px}
.lang-btn{
  border:0;background:none;cursor:pointer;color:#3E515B;font-size:17px;
  display:flex;align-items:center;padding:0;
}
.user-menu{position:relative}
.user-menu-toggle{
  display:flex;align-items:center;gap:8px;background:none;border:0;
  cursor:pointer;font-size:14px;color:var(--text);font-family:inherit;
}
.avatar{
  width:30px;height:30px;border-radius:50%;background:#C8CED3;
  display:flex;align-items:center;justify-content:center;color:#8A9399;font-size:15px;
}

/* Dropdown (shared) */
.dropdown-menu{
  position:absolute;z-index:1030;min-width:200px;
  background:#fff;border:1px solid rgba(0,0,0,.15);
  box-shadow:0 6px 12px rgba(0,0,0,.175);
  padding:6px 0;display:none;
}
.dropdown-menu.show{display:block}
.dropdown-menu a{
  display:flex;align-items:center;gap:10px;
  padding:9px 20px;color:#151B1E;font-size:14px;white-space:nowrap;
}
.dropdown-menu a:hover{background:#F0F3F5;text-decoration:none}
.dropdown-menu a i{width:16px;text-align:center;color:#73818F}
.dropdown-menu .divider{height:1px;background:var(--border);margin:6px 0}
.user-menu .dropdown-menu{right:0;top:calc(var(--header-h) - 4px)}

/* ===================== SIDEBAR ===================== */
.sidebar{
  position:fixed;top:var(--header-h);bottom:0;left:0;
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  color:var(--sidebar-color);
  overflow-y:auto;overflow-x:hidden;z-index:1010;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:#3A444C}
.sidebar-nav .nav-link{
  display:flex;align-items:center;
  padding:12px 24px;
  color:var(--sidebar-color);
  font-size:13.6px;line-height:20.4px;
  border-left:5px solid transparent;
  cursor:pointer;
}
.sidebar-nav .nav-link:hover{background:var(--sidebar-active-bg);color:#fff;text-decoration:none}
.sidebar-nav .nav-link:hover i{color:var(--brand-red)}
.sidebar-nav .nav-link i:first-child{
  width:20px;margin-right:10px;font-size:14px;text-align:center;
  color:var(--sidebar-icon);flex:0 0 20px;
}
.sidebar-nav .nav-link.active{
  background:var(--sidebar-active-bg);
  color:#fff;
  border-left-color:var(--brand-red);
}
.sidebar-nav .nav-link.active i:first-child{color:var(--brand-red)}
.nav-dropdown-toggle .caret{margin-left:auto;font-size:12px;transition:transform .2s}
.nav-dropdown.open > .nav-dropdown-toggle .caret{transform:rotate(-90deg)}
.nav-dropdown.open > .nav-dropdown-toggle{background:var(--sidebar-active-bg);color:#fff}
.nav-dropdown.open > .nav-dropdown-toggle i:first-child{color:var(--brand-red)}
.nav-dropdown-items{display:none;background:#2A3238}
.nav-dropdown.open .nav-dropdown-items{display:block}
.nav-dropdown-items .nav-link{
  padding:9px 24px;font-size:13.6px;color:#A4B0B9;
}
.nav-dropdown-items .nav-link.active{
  color:var(--brand-red);background:var(--sidebar-active-bg);
  border-left-color:var(--brand-red);
}

/* Minimized sidebar */
body.sidebar-minimized .sidebar{width:50px}
body.sidebar-minimized .sidebar-nav .nav-link{padding:12px 0;justify-content:center;border-left-width:3px}
body.sidebar-minimized .sidebar-nav .nav-link span,
body.sidebar-minimized .nav-dropdown-items,
body.sidebar-minimized .caret{display:none}
body.sidebar-minimized .sidebar-nav .nav-link i:first-child{margin:0}
body.sidebar-minimized .main{margin-left:50px}
body.sidebar-minimized .app-footer{left:50px}

/* ===================== BODY / MAIN ===================== */
.app-body{margin-top:var(--header-h);margin-bottom:var(--footer-h);min-height:calc(100vh - var(--header-h) - var(--footer-h))}
.main{margin-left:var(--sidebar-w);transition:margin-left .2s}
.breadcrumb{
  background:#fff;color:var(--text);
  padding:8px 20px;margin:0 0 7px;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.container-fluid{padding:0 15px}

.app-footer{
  position:fixed;bottom:0;left:var(--sidebar-w);right:0;
  height:var(--footer-h);
  background:var(--footer-bg);
  border-top:1px solid var(--border);
  padding:0 16px;
  display:flex;align-items:center;
  font-size:14px;color:var(--text);z-index:1015;
}
.app-footer a{color:var(--primary)}

/* ===================== CARD ===================== */
.card{background:#fff;border:1px solid var(--border);border-radius:0;margin-bottom:20px}
.card-header{
  background:var(--card-header-bg);color:#fff;
  padding:12px 20px;font-size:14px;
  display:flex;align-items:center;gap:10px;
}
.card-header .ch-title{font-weight:400}
.card-header .ch-count{font-size:12px;color:#B7C0C7;margin-left:6px}
.card-header .ch-tools{margin-left:auto;display:flex;align-items:center;gap:18px}
.card-header .ch-tools i{color:#8C979E;cursor:pointer;font-size:15px}
.card-header .ch-tools i:hover{color:#fff}
.card-body{padding:20px}

/* Info alert */
.alert-info{
  background:#E0F3F8;border:1px solid #D3EEF6;color:#336573;
  padding:12px 20px;margin-bottom:20px;font-size:14px;border-radius:0;
  display:flex;align-items:center;gap:10px;
}
.alert-info i{color:#4B93B0}

/* Status legend */
.legend-box{
  background:#fff;border-bottom:1px solid var(--border);
  padding:5px 15px;margin:0 0 5px;font-size:13px;
}
.legend-box table{width:100%;border-collapse:collapse}
.legend-box td{padding:0;white-space:nowrap;line-height:20px}
.legend-box em{
  width:9px;height:9px;display:inline-block;font-style:normal;
  margin-right:7px;vertical-align:baseline;
}
.sq-active{background:var(--st-active)}
.sq-expired{background:var(--st-expired)}
.sq-depleted{background:var(--st-depleted)}
.sq-disabled{background:var(--st-disabled)}
.sq-online{background:var(--st-online)}
.sq-fup{background:var(--st-fup)}
.sq-zombie{background:var(--st-zombie)}

/* ===================== TOOLBAR ===================== */
.table-toolbar{display:flex;align-items:center;padding:16px 20px;gap:12px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;font-size:14px;font-family:inherit;
  border:1px solid transparent;border-radius:2px;cursor:pointer;line-height:1.5;
}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:#1B8EB7;text-decoration:none;color:#fff}
/* بالأصل رمادي معبّأ مو أبيض — مقيس من ورقة أنماط الأصل مباشرة */
.btn-secondary{background:#BCC5D0;border-color:#BCC5D0;color:#151B1E}
.toolbar-spacer{flex:1}
.search-group{display:flex}
.form-control{
  padding:8px 12px;font-size:14px;font-family:inherit;
  border:1px solid #C8CED3;border-radius:2px;background:#fff;color:var(--text);
  width:100%;
}
.form-control::placeholder{color:#A9B3BC}
.form-control:focus{outline:0;border-color:#8AD4EE;box-shadow:0 0 0 2px rgba(32,168,216,.15)}
/* مقيس من الأصل: الحقل 191×35 بحد #E1E2DD، والزر span.input-group-text
   خلفيته #F1F3F8 وحده #E3E8EC ولونه #3E515B بقياس 40×35 */
.search-group .form-control{width:191px;height:35px;border-color:#E1E2DD;border-radius:0}
.search-group .btn{border:1px solid #E3E8EC;background:#F1F3F8;color:#3E515B;border-left:0;border-radius:0;padding:0;width:40px;height:35px}
.actions-dropdown{position:relative}
.actions-dropdown .dropdown-menu{left:0;top:100%}

/* قوائم PrimeNG (زر العمليات + الزر الأيمن على الصف) — مقيسة من الأصل:
   العرض 200، حشوة اللوحة 4/0، العنصر 12/16 بخط 14.4، والأيقونة بلا عرض ثابت
   فالنص يزيح حسب عرض كل أيقونة — الأصل ما يحاذي النصوص على عمود واحد */
.actions-dropdown .dropdown-menu,
.ctx-menu{
  min-width:200px;background:#fff;border:0;border-radius:3px;padding:4px 0;
  box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),
             0 1px 10px 0 rgba(0,0,0,.12);
}
.actions-dropdown .dropdown-menu a,
.ctx-menu a{
  display:flex;align-items:center;gap:0;line-height:1;
  padding:12px 16px;font-size:14.4px;color:#495057;white-space:nowrap;
}
.actions-dropdown .dropdown-menu a:hover,
.ctx-menu a:hover{background:#E9ECEF;text-decoration:none}
.actions-dropdown .dropdown-menu a i,
.ctx-menu a i{
  width:auto;margin-inline-end:8px;color:#6C757D;font-size:14.4px;text-align:start;
}
.actions-dropdown .dropdown-menu .divider{
  height:0;background:none;border-top:1px solid #DEE2E6;margin:4px 0;
}
.ctx-menu{position:fixed;z-index:2000;display:none}
.ctx-menu.show{display:block}

/* ===================== TABLE ===================== */
.table-wrap{overflow-x:auto;padding:0 20px}
/* بلا شريط أدوات: الأصل يخلّي فراغ 20 بين رأس البطاقة والجدول */
.table-wrap.no-toolbar{padding-top:20px}

/* جدول بسيط (المشتركين المشبوهين) — عناوينه 14px/700 بلا كبيتال وبلا خلفية */
table.plain-table{width:100%;border-collapse:collapse;border:1px solid var(--border)}
table.plain-table th{
  padding:12px;text-align:start;vertical-align:bottom;
  font-size:14px;font-weight:700;color:var(--text);
  border-top:1px solid var(--border);border-bottom:2px solid var(--border);
}
table.plain-table td{padding:12px;font-size:14px;border-top:1px solid var(--border)}
table.plain-table tbody tr:hover{background:#F8F9FA}
table.data-table{width:100%;border-collapse:collapse;background:#fff}
table.data-table thead th{
  color:var(--th-color);font-size:12px;font-weight:600;text-transform:uppercase;
  padding:12px 4px 12px 16px;text-align:left;white-space:nowrap;
  border-bottom:2px solid var(--th-border);background:#F8F9FA;cursor:pointer;
}
table.data-table thead th .sort{color:#A6AFB6;margin-left:5px;font-size:10px}
table.data-table thead th.sorted .sort{color:var(--primary)}
table.data-table tbody td{
  padding:12px 4px 12px 16px;font-size:14px;color:var(--text);
  border-bottom:1px solid #EEF1F4;white-space:nowrap;
  line-height:21px;vertical-align:middle;
}
table.data-table tbody tr:last-child td{border-bottom:0}
table.data-table tbody tr:hover{background:#F7F9FA}
.st-box{width:18px;height:18px;display:inline-block;vertical-align:middle}
.chk{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;vertical-align:top;margin:3px 0 0}
.text-muted{color:#A6AFB6}
.text-danger{color:#F86C6B}

/* Empty state */
.empty-state{
  border:1px solid #EEF1F4;border-top:0;margin:0 20px;
  padding:44px 0;text-align:center;color:#8E979E;
}
.empty-state i{font-size:40px;color:#C9D0D6;display:block;margin-bottom:14px}

/* ===================== PAGINATION ===================== */
.table-footer{display:flex;align-items:center;padding:12px 20px;gap:0}
.page-sizes,.pager{display:flex}
.page-link{
  padding:8px 12px;font-size:14px;background:#fff;color:var(--text);
  border:1px solid var(--page-border);margin-left:-1px;cursor:pointer;
  font-family:inherit;line-height:1.5;
}
.page-link:first-child{margin-left:0}
.page-link:hover{background:#F0F3F5;text-decoration:none}
.page-link.page-link-active{background:var(--page-active-bg);color:#fff;border-color:var(--page-border)}
.page-link.current{background:var(--primary);color:#fff;border-color:var(--primary)}
.pager{margin-left:auto}

/* ===================== DASHBOARD (dark) ===================== */
.dashboard-container{background:var(--dash-bg);padding:15px}
.dash-row{display:flex;flex-wrap:wrap;margin:0 -10px}
.dash-col-6{width:50%;padding:10px}
.dash-col-4{width:33.3333%;padding:10px}
.advanced-widget{
  position:relative;background:var(--widget-bg);padding:15px;
  border:6px solid var(--widget-bg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  height:100%;
}
.advanced-widget h5.title{
  margin:0 0 12px;padding:0;font-size:14.4px;font-weight:600;
  color:var(--widget-title);display:flex;align-items:center;gap:9px;
}
.widget-icon{
  width:28px;height:28px;border-radius:4px;font-size:14.4px;line-height:28px;
  text-align:center;display:inline-block;flex:0 0 28px;
}
.widget-icon.users,.widget-icon.chart{background:rgba(13,110,253,.2);color:#5DADE2}
.widget-icon.finance{background:rgba(25,135,84,.2);color:#58D68D}
.widget-icon.system{background:rgba(220,53,69,.2);color:#EC7063}
.widget-icon.cpu{background:rgba(253,126,20,.2);color:#F5B041}
.widget-icon.memory{background:rgba(111,66,193,.2);color:#BB8FCE}
.widget-icon.disk{background:rgba(32,201,151,.2);color:#58D68D}
.advanced-widget-badge{
  position:absolute;top:15px;right:25px;font-size:28px;color:rgba(255,255,255,.5);
}
.advanced-widget table{width:100%;border-collapse:collapse;font-size:14px}
.advanced-widget tr{height:32px;border-bottom:1px solid var(--widget-line)}
.advanced-widget tr.last-tr{border-bottom:0}
.advanced-widget td{padding:1px;line-height:20.4px;font-size:13.6px}
.advanced-widget td.key{color:var(--widget-key)}
.advanced-widget td.value{color:#fff;text-align:right}
.advanced-widget td.value.text-info{color:var(--info)}
.advanced-widget td.value.text-success{color:var(--success)}
.advanced-widget td.value.text-warning{color:var(--warning)}
.advanced-widget td.value.text-danger{color:var(--danger)}

/* Charts */
.chart-credit{position:absolute;right:22px;bottom:12px;font-size:9px;color:#7B8B96}
.chart-legend{display:flex;justify-content:center;gap:8px;margin-top:2px}
.chart-legend span{
  background:#1C2B36;color:#E4E9ED;font-size:11px;font-weight:600;
  padding:4px 10px;display:flex;align-items:center;gap:6px;
}
.chart-legend em{width:8px;height:8px;border-radius:50%;display:inline-block}
.gauge-wrap{display:flex;justify-content:center;align-items:center;padding-top:6px}

/* ===================== FORMS (settings / profile) ===================== */
.form-section-title{
  font-size:16px;color:#3E515B;margin:0 0 18px;padding-bottom:10px;
  border-bottom:1px solid var(--border);font-weight:400;
}
/* الصفوف المشروطة تنخفي فعلاً — display:flex يغلب قاعدة hidden الافتراضية */
.form-row[hidden]{display:none !important}
.form-row{display:flex;align-items:center;margin-bottom:14px;gap:14px}
.form-row .form-label{
  flex:0 0 33.333%;max-width:33.333%;text-align:right;font-size:14px;color:#3E515B;
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
}
.form-label .req,.req{color:#DC3545}
.form-label .help{color:#A6AFB6;font-size:12px;cursor:help}
.form-row .form-field{flex:1}
.form-grid{display:flex;flex-wrap:wrap;margin:0 -12px}
.form-grid > .form-row{width:50%;margin:0 0 16px;padding:0 12px}
.form-grid > .form-row .form-label{width:auto;flex:0 0 46%;justify-content:flex-end}
select.form-control{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23606A72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
  padding-right:34px;
}
.switch{
  position:relative;display:inline-block;width:46px;height:24px;
  background:#C8CED3;border-radius:12px;cursor:pointer;transition:background .2s;
  border:0;padding:0;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  background:#fff;border-radius:50%;transition:transform .2s;
}
.switch.on{background:var(--primary)}
.switch.on::after{transform:translateX(22px)}
.fa-spacer{flex:1}
.form-actions{
  display:flex;justify-content:flex-end;gap:14px;align-items:center;
  padding-top:18px;margin-top:6px;border-top:1px solid var(--border);
}
.form-actions .cancel{color:#5C6873;cursor:pointer}

/* ===================== TABS ===================== */
.tabs{
  background:#fff;border:1px solid var(--border);border-bottom:0;
  display:flex;padding:0 8px;overflow-x:auto;
}
.tabs a{
  padding:13px 16px;font-size:14px;color:#5C6873;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.tabs a:hover{color:var(--primary);text-decoration:none}
.tabs a.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-panel{background:#fff;border:1px solid var(--border);padding:24px}

/* ===================== USER OVERVIEW ===================== */
.overview{display:flex;gap:20px;flex-wrap:wrap}
.overview-left{flex:1 1 540px;min-width:340px}
.overview-right{flex:1 1 420px;min-width:340px}
.user-head{display:flex;gap:24px;margin-bottom:16px}
.user-photo{
  width:160px;height:125px;background:#E4E5E6;
  display:flex;align-items:center;justify-content:center;color:#C6C7C8;font-size:70px;
}
.user-meta{display:flex;flex-direction:column;justify-content:center;gap:9px;font-size:14px}
.user-meta div{display:flex;align-items:center;gap:12px;color:#3E515B}
.user-meta i{color:#5C6873;width:14px;text-align:center}
/* مربّعات صفحة المشترك — القيم منسوخة حرفياً من .overview-button بالأصل */
.quick-tiles{display:flex;flex-wrap:wrap;max-width:750px;margin-top:10px}
.quick-tile{
  width:150px;height:100px;
  background:#6E84A7;color:#fff;
  border:1px solid #B4BCBF;
  padding-top:25px;
  font-size:14px;text-align:center;
  cursor:pointer;box-sizing:border-box;
  display:block;
}
.quick-tile:hover{background:#1F64A7;text-decoration:none;color:#fff}
.quick-tile:active{background:#6E84A7}
.quick-tile i{margin-bottom:4px}
.map-note{background:#E7F4FA;padding:18px 20px;font-size:13px;color:#3A5A66;line-height:1.7}
.map-note b{color:#2A4551}
.latlng{display:flex;gap:26px;align-items:center;padding:16px 0;font-size:13px}
.latlng label{display:flex;align-items:center;gap:6px}
.latlng input{width:145px;padding:4px 6px;border:1px solid #A6AFB6;font-size:13px;font-family:inherit}
.info-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border)}
.info-table td{padding:11px 16px;font-size:14px;border-bottom:1px solid #EEF1F4}
.info-table td:last-child{text-align:right}
.info-table tr:last-child td{border-bottom:0}

/* ===================== ABOUT ===================== */
.about-logo{text-align:center;padding:34px 0 18px}
.about-logo .logo-sas{font-size:64px;letter-spacing:3px}
.about-logo .logo-radius{font-size:22px;letter-spacing:14px;color:#EFEFEF;margin-top:-8px}
.about-body{display:flex;align-items:center;gap:40px;flex-wrap:wrap;padding:20px 30px 50px}
.about-company h3{font-size:22px;font-weight:600;margin:0 0 22px;color:#2F3E46}
.about-company div{display:flex;align-items:center;gap:14px;margin-bottom:14px;color:#3E515B;font-size:14px}
.about-company i{color:#5C6873;width:14px;text-align:center}
.about-art{flex:1;min-width:260px;display:flex;justify-content:flex-end;opacity:.95}

/* ===================== لوحة الوكيل (Reseller Dashboard) =====================
   كل رقم هنا مقاس من جلسة وكيل حية بالأصل (تشريح DOM):
   مربع 395×169 زوايا 8 · رأس 83 بتظليل rgba(0,0,0,.03) وحشوة 16/24،
   عنوان 17.5px وزن 500 كبتل + سطر ثانوي 14px ·
   جسم 86 بتظليل rgba(0,0,0,.1) · أيقونة 60px شفافية 0.2 معلّقة على خط
   الفصل بجهة البداية (اتجاهية) · الرقم 25px تحتها بجهة البداية */
.rdash{ padding-top:6px; }
/* موضع الشعار مقاس من اللوحة الحقيقية: يبدأ ~110 من الأعلى وتحته فجوة للمربعات */
.rdash-logo{ display:flex; justify-content:center; padding:50px 0 40px; }
.rdash-logo .logo{ --brand:52px; }
/* اللوحة الحقيقية: خلفية الصفحة الفاتحة (مو الداكنة مال لوحة الأدمن)،
   4 مربعات بالصف (col-3 = 25%) · فجوة 30 · ظل خفيف rgba(80,90,100,.4) 1px */
.rdash{ background:transparent; }
.rdash-row{ display:flex; gap:30px; flex-wrap:wrap; margin-bottom:30px; }
.rdash-cell{ display:contents; }
.rdash .x-card{
  flex:0 0 calc(25% - 23px); min-width:240px; max-width:100%;
  height:169px; border-radius:8px; overflow:visible; position:relative;
  box-shadow:0 0 1px 0 rgba(80,90,100,.4);
}
.rdash .x-card .xc-head{
  height:83px; box-sizing:border-box; padding:16px 24px;
  background:rgba(0,0,0,.03); text-align:start; display:block;
  border-radius:8px 8px 0 0;
}
.rdash .x-card .xc-t{
  font-size:17.5px; font-weight:500; text-transform:uppercase;
  color:#fff; line-height:21px;
}
.rdash .x-card .xc-s{ font-size:14px; color:#fff; margin-top:8px; line-height:21px; }
.rdash .x-card .xc-body{
  height:86px; box-sizing:border-box; padding:24px;
  background:rgba(0,0,0,.1); display:block; position:relative;
  border-radius:0 0 8px 8px;
}
.rdash .x-card .xc-body i{
  /* مقاس بالحالتين عربي/إنكليزي بالأصل: يمين ثابتة بالاتجاهين (right:10px فيزيائي)
     transform:none يبطل translateY(-50%) الجاي من قاعدة بطاقة المصمم */
  position:absolute; right:10px; left:auto; top:-32px; transform:none;
  font-size:60px; width:60px; opacity:.2; color:#fff; text-align:center;
}
.rdash .x-card .xc-v{
  display:block; font-size:25px; font-weight:400; color:#fff;
  text-align:start; line-height:38px;
}
@media (max-width:991.98px){
  /* grow=0 حتى المربع المفرد بآخر صف ما يتمدد (مثل الأصل) */
  .rdash .x-card{ flex:0 1 calc(50% - 12px); min-width:0; }
}

/* ===================== TOAST ===================== */
.toast-box{position:fixed;top:14px;right:14px;z-index:2000;display:flex;flex-direction:column;gap:8px}
.toast{
  background:#D9433F;color:#fff;padding:14px 22px;font-size:14px;
  display:flex;align-items:center;gap:12px;box-shadow:0 4px 12px rgba(0,0,0,.18);
  min-width:240px;animation:tin .2s ease-out;
}
@keyframes tin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ===================== RESPONSIVE =====================
   القيم مقيسة من CSS الأصل (demo4) مباشرة:
   الفاصل 991.98px · القائمة 220px تنزلق فوق المحتوى (بلا دفع وبلا تظليل) ·
   الشعار يتوسّط الهيدر (left:50% margin-left:-110px) · z: هيدر 1020 فوق قائمة 1019 */
@media (max-width:991.98px){
  /* لا تكبير-للخارج: الصفحة بعرض الشاشة والجداول تنسحب داخل بطاقاتها */
  html,body{max-width:100%;overflow-x:hidden}

  .navbar-brand{
    position:absolute;left:50%;margin-left:-110px;width:220px;
    background:transparent;border-bottom:0;justify-content:center;
  }
  .sidebar{
    width:220px;transform:translateX(-100%);transition:transform .25s;
    z-index:1019;
  }
  body.sidebar-open .sidebar{transform:none}
  .main,.app-footer{margin-left:0 !important}
  .app-footer{left:0 !important;right:0 !important}

  /* الجداول العريضة: سحب أفقي داخل البطاقة مثل الأصل */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card-body{overflow-x:auto}

  /* الشبكات والفورمات تتراصف عمودياً */
  .dash-col-6,.dash-col-4{width:100%}
  .form-grid > .form-row{width:100%}
  .form-row{flex-direction:column;align-items:stretch}
  .form-row .form-label{width:auto;max-width:100%;flex:none;justify-content:flex-start}

  /* المودالات بعرض الشاشة تقريباً */
  .modal-box,.modal-box.plain,.modal-box.sm{max-width:calc(100vw - 24px)}

  /* شريط الأدوات وترويسة البطاقة يلفّون بدل ما يوسّعون الصفحة */
  .card-header{flex-wrap:wrap;row-gap:6px}

  /* الهيدر الضيق: نخفي اسم المسجّل (يبقى رمزه) حتى ما يركب على الشعار */
  .user-menu #userToggle span:last-child{display:none}
}

/* ==========================================================================
   MODAL / CONFIRM / FILTER  (الجزء التفاعلي)
   ========================================================================== */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1900;
  display:flex;align-items:flex-start;justify-content:center;
  padding:70px 16px 40px;overflow-y:auto;
}
.modal-box{
  background:#fff;border:1px solid rgba(0,0,0,.2);width:100%;max-width:620px;
  box-shadow:0 5px 22px rgba(0,0,0,.35);animation:mIn .16s ease-out;
}
.modal-box.sm{max-width:430px}
@keyframes mIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.modal-head{
  background:var(--card-header-bg);color:#fff;padding:12px 20px;
  display:flex;align-items:center;gap:10px;font-size:14px;
}
.modal-head .x{margin-left:auto;cursor:pointer;color:#B7C0C7;font-size:16px;background:none;border:0}
.modal-head .x:hover{color:#fff}
.modal-body{padding:22px 20px}
.modal-body .form-row{margin-bottom:13px}
.modal-body .form-row .form-label{flex:0 0 38%;max-width:38%}
.modal-msg{font-size:14px;color:#3E515B;line-height:1.7}
.modal-foot{
  padding:14px 20px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:12px;align-items:center;background:#FBFCFD;
}
.modal-foot .cancel{color:#5C6873;cursor:pointer;font-size:14px}
.btn-danger{background:#F86C6B;border-color:#F86C6B;color:#fff}
.btn-danger:hover{background:#B92B29;color:#fff}
.field-err{border-color:#D63230 !important}
.err-text{color:#D63230;font-size:12px;margin-top:4px;display:block}

/* التنبيهات */
.toast.ok{background:#3EA96B}
.toast.warn{background:#E0952B}

/* صف الفلترة */
/* لوحة الفلترة المتقدّمة — الأصل يفتحها يمين البطاقة ويضغط عرض الجدول */
.filter-split{display:flex;align-items:stretch;gap:0}
.filter-split > .card{flex:1 1 auto;min-width:0}
.filter-panel{
  flex:0 0 32%;max-width:32%;background:#fff;
  border:1px solid var(--border);border-inline-start:0;margin-bottom:20px;
}
.fp-head{
  height:40px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:#2F353A;color:#fff;font-size:15px;font-weight:400;
}
.fp-head i{cursor:pointer;font-size:17px;opacity:.85}
.fp-head i:hover{opacity:1}
.fp-body{padding:16px 22px 24px}
.fp-group{margin-bottom:8px}
.fp-group label{display:block;font-size:13px;color:#5C6873;margin:0 0 6px;font-weight:400}
.fp-group .form-control{width:100%;height:38px}
.fp-sel{position:relative}
.fp-sel select{appearance:none;-webkit-appearance:none;padding-inline-end:34px}
.fp-sel i{
  position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:13px;
  color:#8A93A2;font-size:13px;pointer-events:none;
}
.fp-search{
  width:100%;height:32px;margin-top:8px;border:0;cursor:pointer;
  background:#C8CED3;color:#23282C;font-size:13px;border-radius:2px;
}
.fp-search:hover{background:#BCC3C9}

/* صحّ عمود "مدفوعة" */
td .tick{color:#3E515B;font-size:14px}

/* صفوف تنتخب بالضغط (جداول بلا مربّع تحديد) */
table.data-table tbody tr.row-pick{cursor:pointer}

/* حالة الصف المحدد */
table.data-table tbody tr.sel{background:#EAF6FC}
table.data-table tbody tr.sel:hover{background:#E0F1FA}
.sel-count{font-size:13px;color:#5C6873;margin-left:4px}

/* الأدوات المفعّلة برأس البطاقة */
.card-header .ch-tools i.on{color:#fff}

/* شارات الحالة داخل الجداول */
.badge{
  display:inline-block;padding:3px 9px;font-size:12px;border-radius:2px;
  color:#fff;line-height:1.5;
}
.badge.green{background:#4DBD74}
.badge.grey{background:#A4B7C1}
.badge.red{background:#D63230}

/* ==========================================================================
   RTL - الواجهة العربية
   ========================================================================== */
html[dir="rtl"] body{ font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif; }

/* الهيكل ينقلب */
html[dir="rtl"] .sidebar{ left:auto; right:0; }
html[dir="rtl"] .main{ margin-left:0; margin-right:var(--sidebar-w); }
html[dir="rtl"] .app-footer{ left:0; right:var(--sidebar-w); }
html[dir="rtl"] body.sidebar-minimized .main{ margin-left:0; margin-right:50px; }
html[dir="rtl"] body.sidebar-minimized .app-footer{ left:0; right:50px; }
html[dir="rtl"] .header-right{ padding-right:0; padding-left:16px; }
html[dir="rtl"] .user-menu .dropdown-menu{ right:auto; left:0; }

/* عناصر القائمة الجانبية */
html[dir="rtl"] .sidebar-nav .nav-link i:first-child{
  margin-right:0; margin-left:10px;
}
html[dir="rtl"] .nav-dropdown-toggle .caret{
  margin-left:0; margin-right:auto; transform:scaleX(-1);
}
html[dir="rtl"] .nav-dropdown.open > .nav-dropdown-toggle .caret{ transform:rotate(90deg); }


/* الجداول */
html[dir="rtl"] table.data-table thead th .sort{ margin-left:0; margin-right:5px; }
html[dir="rtl"] .advanced-widget td.value{ text-align:left; }
html[dir="rtl"] .info-table td:last-child{ text-align:left; }

/* البطاقة وشريط الأدوات */
html[dir="rtl"] .card-header .ch-tools{ margin-left:0; margin-right:auto; }
html[dir="rtl"] .card-header .ch-count{ margin-left:0; margin-right:6px; }
html[dir="rtl"] .toolbar-spacer{ flex:1; }
html[dir="rtl"] .search-group .btn{ border-left:1px solid #E3E8EC; border-right:0; }
html[dir="rtl"] .pager{ margin-left:0; margin-right:auto; }
html[dir="rtl"] .page-link{ margin-left:0; margin-right:-1px; }
html[dir="rtl"] .page-link:first-child{ margin-right:0; }
html[dir="rtl"] .sel-count{ margin-left:0; margin-right:4px; }
html[dir="rtl"] .legend-box em{ margin-right:0; margin-left:7px; }
html[dir="rtl"] .actions-dropdown .dropdown-menu{ left:auto; right:0; }

/* الفورمات */
html[dir="rtl"] .form-row .form-label{ text-align:right; }
html[dir="rtl"] select.form-control{
  background-position:left 12px center; padding-right:12px; padding-left:34px;
}
html[dir="rtl"] .switch::after{ left:auto; right:2px; }
html[dir="rtl"] .switch.on::after{ transform:translateX(-22px); }
html[dir="rtl"] .form-actions{ justify-content:flex-end; }

/* النوافذ والتنبيهات */
html[dir="rtl"] .modal-head .x{ margin-left:0; margin-right:auto; }
html[dir="rtl"] .toast-box{ right:auto; left:14px; }

@media (max-width:991px){
  html[dir="rtl"] .sidebar{ transform:translateX(100%); }
  html[dir="rtl"] body.sidebar-open .sidebar{ transform:none; }
  html[dir="rtl"] .main{ margin-right:0 !important; }
  html[dir="rtl"] .app-footer{ right:0 !important; left:0 !important; }
}
/* ==========================================================================
   صفحة الدخول — كل القيم مقيسة من الأصل
   ========================================================================== */
.login-page{
  position:fixed; inset:0; z-index:3000; overflow:auto;
  background:#EFF3F8 center/cover no-repeat;
  display:flex; flex-direction:column; align-items:center;
}

.login-wrap{
  width:100%; max-width:1140px; padding:0 15px; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center;
  margin-top:84px;
}
.login-logo{ height:120px; display:flex; align-items:center; justify-content:center; }
/* بصفحة الدخول: النسر فوق النص والمجموع بحدود 232×120 مثل شعار الأصل */
.login-logo .logo{ --brand:47px; }
.login-logo .logo-radius{ color:#fff; }

/* البطاقة: 445×390، خلفية بيضاء بشفافية 0.7 وبلا زوايا */
.login-card{
  width:445px; max-width:100%; box-sizing:border-box;
  background:rgba(255,255,255,.7); border:1px solid var(--border);
  border-radius:0; padding:45px; margin-top:20px;
}
.login-card h1{ font-size:35px; font-weight:500; color:var(--text); margin:0 0 8px; }
.login-card .text-muted{ font-size:14px; color:#73818F; margin:0 0 16px; }

/* حقل بأيقونة على شكل input-group */
.login-card .input-group{ display:flex; margin-bottom:16px; }
.login-card .input-group:last-of-type{ margin-bottom:24px; }
.login-card .input-group-text{
  width:38px; height:35px; flex:0 0 38px;
  background:#F1F3F8; border:1px solid #E1E2DD; border-inline-end:0;
  display:flex; align-items:center; justify-content:center;
  color:#5C6873; font-size:14px;
}
.login-card .input-group-text.wide{ width:44px; flex-basis:44px; }
.login-card .input-group .form-control{
  flex:1; height:35px; border-radius:0; min-width:0;
}
.login-card .btn{ width:100%; height:35px; justify-content:center; border-radius:0; }

.lc-err{ background:#FBE3E3; color:#A32623; padding:9px 12px; font-size:13px; margin-bottom:12px; }

/* وقت الدخول مفتوح: نحبس عرض الصفحة حتى متصفح الموبايل ما يصغّرها
   لعرض قشرة التطبيق الي خلف النافذة (شاشة الدخول تغطيها أصلاً) */
body.login-open{ overflow:hidden; width:100%; height:100vh; }

/* موبايل: البطاقة بعرض الشاشة والشعار أصغر — نفس سلوك الأصل، بلا تمرير أفقي */
@media (max-width:560px){
  .login-wrap{ margin-top:36px; padding:0 12px; }
  .login-logo{ height:96px; }
  .login-logo .logo{ --brand:38px; }
  .login-card{ width:100%; padding:30px 22px; margin-top:14px; }
  .login-card h1{ font-size:29px; }
}


/* ==========================================================================
   اختيار الأعمدة / العرض الشجري
   ========================================================================== */
.col-list{ display:flex;flex-wrap:wrap;gap:2px; }
.col-list label{
  display:flex;align-items:center;gap:9px;width:50%;
  padding:8px 6px;font-size:14px;color:#3E515B;cursor:pointer;
}
.col-list label:hover{ background:#F5F7F9; }
.tree{ font-size:14px;padding:6px 0; }
.tree ul{ margin:0;padding-inline-start:26px; }
.tree li{ padding:5px 0;position:relative; }
.tree .node{ display:flex;align-items:center;gap:9px; }
.tree .node i{ color:#8C979E;width:15px;text-align:center; }
.tree .node .cnt{ color:#96A2AB;font-size:12px; }
.tree .root > .node{ font-weight:600;color:#2F3E46; }

/* ==========================================================================
   أنماط النوافذ المنقولة من الساس الأصلي
   1) modal-plain  : رأس أبيض والعناوين فوق الحقول (Deposit / Rename)
   2) confirm-box  : نافذة "Confirmation" بمثلث تحذير وزرّي No/Yes
   3) sweet        : نافذة الحذف (دائرة برتقالية + Yes/Cancel)
   ========================================================================== */

/* ---------- 1) مودال بسيط ---------- */
/* نوافذ الأصل عرضها 500 (Rename User / Add-Remove Traffic / Deposit …) */
.modal-box.plain{ max-width:500px; }
.modal-box.plain .modal-head{
  background:#fff; color:#151B1E; padding:16px;
  border-bottom:1px solid var(--border); font-size:21px; font-weight:500;
}
.modal-box.plain .modal-head .x{ color:#9AA4AC; font-size:22px; line-height:1; }
.modal-box.plain .modal-head .x:hover{ color:#151B1E; }
.modal-box.plain .modal-body{ padding:16px; }
.modal-box.plain .modal-foot{ padding:16px; background:#fff; border-top:1px solid var(--border); }
.plain-field{ margin-bottom:14px; }
.plain-field label{ display:inline-block; font-size:14px; color:#151B1E; margin-bottom:8px; }
.plain-field .form-control{ padding:6px 12px; border-radius:0; border:1px solid #E1E2DD; }
.plain-field .form-control[readonly]{ background:#E3E8EC; }
.btn-light{ background:#fff; border-color:#C8CED3; color:#151B1E; }
.btn-light:hover{ background:#F0F3F5; }

/* ---------- 2) نافذة التأكيد ---------- */
.confirm-box{ max-width:340px; }
.confirm-box .cf-head{
  display:flex; align-items:center; padding:18px 20px 6px;
  font-size:18px; color:#151B1E;
}
.confirm-box .cf-head .x{
  margin-left:auto; background:none; border:0; cursor:pointer;
  color:#9AA4AC; font-size:20px; line-height:1;
}
.confirm-box .cf-body{
  display:flex; align-items:center; gap:14px;
  padding:12px 20px 20px; font-size:14px; color:#3E515B;
}
.confirm-box .cf-body i{ font-size:20px; color:#5C6873; }
.confirm-box .cf-foot{ display:flex; justify-content:flex-end; gap:10px; padding:0 20px 20px; }
.btn-no { background:#2C8FD6; border-color:#2C8FD6; color:#fff; }
.btn-yes{ background:#3BADE3; border-color:#3BADE3; color:#fff; }
.btn-no:hover,.btn-yes:hover{ filter:brightness(.93); color:#fff; }

/* ---------- 3) نافذة الحذف ---------- */
/* swal2 بالأصل: عرض 500 وحشوة 20 وعنوان 25px/500 وأزرار 17px بارتفاع 45.5 */
.sweet-box{ width:500px; max-width:calc(100vw - 30px); padding:20px; text-align:center; background:#fff; border-radius:5px; }
.sweet-icon{
  width:80px; height:80px; margin:6px auto 20px; border-radius:50%;
  border:4px solid #F8BB86; color:#F8BB86;
  font-size:44px; font-weight:600; line-height:74px;
}
.sweet-box h3{ font-size:25px; font-weight:500; color:#595959; margin:0 0 10px; line-height:1.2; }
.sweet-box p{ font-size:18px; color:#797979; margin:0 0 26px; }
.sweet-foot{ display:flex; justify-content:center; }
/* الهامش على الأزرار نفسها مثل swal2 — حتى ما ينطبق مع هامش العنوان */
.sweet-foot .btn{
  padding:10px 32px; border-radius:3px; font-size:17px; font-weight:500;
  height:45.5px; margin:15px 5px 0;
}
.btn-sweet-yes{ background:#3085D6; border-color:#3085D6; color:#fff; }
.btn-sweet-no { background:#AAAAAA; border-color:#AAAAAA; color:#fff; }
.btn-sweet-yes:hover,.btn-sweet-no:hover{ filter:brightness(.93); color:#fff; }

/* نافذة "New Expiration" — swal2 بحقل إدخال، مقيسة من الأصل */
/* خلية قابلة للتعديل بالجدول */
td.cell-edit{ cursor:pointer; }
td.cell-edit:hover{ text-decoration:underline; }

.sweet-prompt{ max-width:500px; width:500px; padding:20px; }
.sweet-prompt h3{ font-size:25px; font-weight:500; color:#595959; margin:0 0 20px; }
.sweet-input{
  width:100%; height:43px; box-sizing:border-box; padding:0 12px;
  border:1px solid #D9D9D9; border-radius:3px; font-size:14px;
  font-family:inherit; color:#000; background:#fff; outline:none;
  unicode-bidi:plaintext; text-align:start;
}
.sweet-input:focus{ border-color:#B4DBED; }
.sweet-prompt .sweet-foot{ margin-top:20px; padding:3px 0; }
.sweet-prompt .sweet-foot .btn{ height:46px; font-size:17px; padding:0 32px; margin:0 5px; }

/* ---------- صفحة التفعيل ---------- */
.info-pair{ display:flex; align-items:center; margin-bottom:16px; gap:14px; }
.info-pair .ip-label{
  flex:0 0 46%; max-width:46%; text-align:end; font-size:14px; color:#3E515B;
}
.info-pair .ip-value{ flex:1; font-size:14px; color:#151B1E; }
.info-pair .ip-value.strong{ font-weight:700; }
.act-sep{ border:0; border-top:1px solid var(--border); margin:8px 0 24px; }

.modal-backdrop.centered{ align-items:center; padding:40px 16px; }

/* ==========================================================================
   تصحيحات RTL - مقيسة من الواجهة العربية بالساس الأصلي
   ========================================================================== */

/* 1) شريط العنصر المفعّل يضل على اليسار (الحافة الداخلية) مثل الأصل،
      ما ينقلب لليمين */
html[dir="rtl"] .sidebar-nav .nav-link{
  border-left:5px solid transparent; border-right:0; text-align:right;
}
html[dir="rtl"] .sidebar-nav .nav-link.active,
html[dir="rtl"] .nav-dropdown-items .nav-link.active{
  border-left-color:var(--brand-red); border-right-color:transparent;
}
html[dir="rtl"] body.sidebar-minimized .sidebar-nav .nav-link{ border-left-width:3px; }

/* 2) حشوة خلايا الجدول ما تنقلب بالأصل — بس المحاذاة تصير يمين */
html[dir="rtl"] table.data-table thead th,
html[dir="rtl"] table.data-table tbody td{
  text-align:right; padding:12px 4px 12px 16px;
}

/* 3) الفورمات: الأصل يخلّي عمود العناوين يسار والحقول يمين حتى بالعربي.
      خلّينا النص محاذي للحقل حتى يقرا صح بالعربي */
html[dir="rtl"] .form-row .form-label{ text-align:right; }
html[dir="rtl"] .info-pair .ip-label{ text-align:right; }

/* 4) منع التمدد الأفقي — كان يقص القيم من اليسار بالوضع العربي */
html, body{ max-width:100%; overflow-x:hidden; }
.main, .container-fluid, .app-body{ min-width:0; max-width:100%; }
.overview, .overview-left, .overview-right{ min-width:0; }
.overview-left{ flex:1 1 480px; }
.overview-right{ flex:1 1 380px; }
.tab-panel{ overflow-x:auto; }
.info-table{ table-layout:fixed; }
.info-table td{ overflow:hidden; text-overflow:ellipsis; }
.info-table td:first-child{ width:55%; }
.quick-tiles{ max-width:750px; }

@media (max-width:1200px){
  .overview-left, .overview-right{ flex:1 1 100%; }
}

/* المبالغ والأرقام تضل بترتيبها الصحيح داخل النص العربي */
html[dir="rtl"] .info-table td,
html[dir="rtl"] .info-pair .ip-value,
html[dir="rtl"] .advanced-widget td.value{
  unicode-bidi:plaintext;
}
/* خلايا الجدول: الأصل يستعمل isolate مو plaintext — يعني "$ 0.00" تنعرض
   "0.00 $" و"2026-04-16 12:37:51" تنعرض "12:37:51 2026-04-16" بالعربي */
html[dir="rtl"] table.data-table td{ unicode-bidi:isolate; }

/* أيقونة الويدجت الكبيرة تنتقل لليسار بالعربي حتى ما تتداخل مع العنوان */
html[dir="rtl"] .advanced-widget-badge{ right:auto; left:25px; }
html[dir="rtl"] .chart-credit{ right:auto; left:22px; }

/* جدول الفاتورة: الأصل ما يحوّل رؤوسه لأحرف كبيرة */
table.data-table.plain-head thead th{ text-transform:none; font-size:13px; }

/* شريط تنبيه أصفر فوق فورم المشترك — نفس alert-warning بالأصل */
.alert-warn{
  background:#FFF3CD; color:#856404; border:1px solid #FFEEBA;
  padding:12px 20px; margin-bottom:20px; font-size:14px;
  display:flex; align-items:center; gap:10px;
}

/* ==========================================================================
   صفحات الأدوات
   ========================================================================== */
/* الصيانة: صورة + عنوان + أكورديون — الأصل يفتح الصفحة وكل الألسنة مطوية */
.maint-top{ text-align:center; padding:0 0 8px; }
/* الأصل يخفّف الصورة لنص الشفافية فتطلع سلموني على الخلفية الفاتحة */
.maint-top svg{ display:inline-block; opacity:.5; }
.maint-top h4{
  font-size:21px; font-weight:300; color:#3E515B; margin:0 0 8px;
}

.maint-list{ background:#fff; }
.maint-row + .maint-row{ margin-top:-1px; }
.maint-head{
  display:flex; align-items:center;
  background:#F8F9FA; border:1px solid #DEE2E6;
  padding:16px 20px; cursor:pointer; font-size:14.4px; color:#3E515B;
}
.maint-head:hover{ background:#F1F3F5; }
.maint-head b{ font-weight:600; }
.maint-head .caret{ font-size:12px; color:#8C979E; transition:transform .18s;
  margin-inline-end:11px; }
.maint-row:not(.open) .maint-head .caret{ transform:rotate(-90deg); }
html[dir="rtl"] .maint-row:not(.open) .maint-head .caret{ transform:rotate(90deg); }
/* الأيقونة ملتصقة بالعنوان مباشرة (fa-pull-right داخل p-header ضيّق) — مو بآخر السطر */
.maint-head .mi{ color:#5C6873; font-size:14px; margin-inline-start:.3em; }
.maint-body{
  display:none; border:1px solid #DEE2E6; border-top:0;
  padding:16px 20px; font-size:14px; color:#3E515B;
}
.maint-body p{ margin:0 0 16px; padding:16px; unicode-bidi:plaintext; }
/* أزرار الصيانة: زوايا 4px وعرض أدنى 100 وارتفاع 35 — مقيسة من الأصل */
.maint-btn{ border-radius:4px; min-width:100px; height:35px; padding:6px 12px; margin-inline-end:8px; }
.maint-row.open .maint-body{ display:block; }

/* الإعلانات: محرر نصوص */
/* الإعلانات: عمود col-md-7 بمحاذاة البداية (937px عند نافذة 1920) */
.an-row{ display:flex; margin:0 -15px; }
.an-col{ width:58.3333%; padding:0 15px; box-sizing:border-box; min-width:0; }
.an-label{ display:block; font-size:14px; color:#3E515B; margin:0 0 8px; }
.an-col > .form-control{ width:100%; height:35px; margin-bottom:12px; }
.an-col > .form-control[hidden]{ display:none; }
.an-foot{ display:flex; align-items:center; margin-top:14px; }
.an-count{ color:#151B1E; font-size:14px; }
.an-foot .btn{ margin-inline-start:auto; height:35px; }
.an-foot .btn i{ margin-inline-end:4px; }

/* شريط المحرر — ست مجاميع مفصولة مثل Quill */
.editor-bar{
  border:1px solid #E1E2DD; border-bottom:0; background:#FBFCFD;
  padding:8px 10px; height:42px; box-sizing:border-box;
  display:flex; align-items:center; gap:14px; flex-wrap:nowrap; overflow:hidden;
  color:#5C6873; font-size:14px;
}
.eb-group{ display:inline-flex; align-items:center; gap:10px; }
/* الأصل يفصل المجاميع بفراغ 15 فقط — بلا خط عمودي */
.eb-group + .eb-group{ margin-inline-start:15px; }
.editor-bar i{ cursor:pointer; }
.editor-bar i:hover{ color:#151B1E; }
/* "Normal" و"Sans Serif" بالأصل قوائم Quill (ql-picker) وعليها سهم صغير */
.editor-bar .eb-sel{
  font-size:14px; color:#444; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center;
}
.editor-bar .eb-sel::after{
  content:"\2195"; font-size:11px; color:#8C979E; margin-inline-start:6px;
}
.editor-area{
  border:1px solid #E1E2DD; height:320px; overflow-y:auto; padding:14px;
  background:#fff; font-size:14px; outline:none;
}

/* التحكم بالسرعات — جدولان بأعمدة 325 / مرن / 488 وحدود #E9E9E9 وحشوة 15
   والمنزلق: مسار 5px لونه #DEE2E6، الممتلئ #2196F3، والمقبض دائرة 18 بيضاء بحد 2 */
.bw-table{ width:100%; border-collapse:collapse; }
.bw-table td{
  padding:15px; border:1px solid #E9E9E9; font-size:17.6px; color:#151B1E;
  vertical-align:middle;
}
.td-profile-name{ width:325px; text-align:end; }
.td-profile-speed{ width:488px; }
.td-speed-slider{ text-align:center; }

.bw-pct{ font-size:14px; color:#151B1E; text-align:center; margin-bottom:6px; }

.bw-range{
  -webkit-appearance:none; appearance:none; width:100%; height:5px;
  border-radius:3px; outline:none; display:block;
  background:linear-gradient(to right,#2196F3 var(--p,42.8571%),#DEE2E6 var(--p,42.8571%));
}
.bw-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px;
  border-radius:50%; background:#fff; border:2px solid #2196F3; cursor:pointer;
}
.bw-range::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:#fff;
  border:2px solid #2196F3; cursor:pointer;
}
html[dir="rtl"] .bw-range{
  background:linear-gradient(to left,#2196F3 var(--p,42.8571%),#DEE2E6 var(--p,42.8571%));
}

/* خدمات النظام */
/* جدول ثلاث خانات: 855 / 183 بالوسط / 576 بالنهاية — والحالة نص عريض بلا خلفية */
.services-table{ width:100%; border-collapse:collapse; }
.services-table tr{ border-bottom:1px solid #D2D2D2; }
.services-table td{ padding:12px; font-size:14px; color:#0E2231; font-weight:400; }
.service-name{ width:855px; }
.service-name span{ font-size:11.6667px; font-weight:100; }
.service-status{ width:183px; text-align:center; font-weight:700; }
.services-table .status-running{ color:#008000; }
.services-table .status-stopped{ color:#FF0000; }
.buttons{ text-align:end; white-space:nowrap; }
/* مو أزرار بالأصل — نصوص قابلة للضغط بفاصل 30 */
.service-action{ cursor:pointer; margin-inline-end:30px; }
.service-action i{ margin-inline-end:4px; }


/* ==========================================================================
   تقارير خاصة
   ========================================================================== */
/* شريط فلاتر التقارير — بالأصل ملزوق بالحافة اليمنى فيزيائياً بالاتجاهين */
.filter-bar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  padding:14px 0; justify-content:flex-end;
}
html[dir="rtl"] .filter-bar{ justify-content:flex-start; }

/* زر مزدوج يومي/شهري */
.seg{ display:inline-flex; border:1px solid var(--primary); border-radius:2px; overflow:hidden; }
.seg-btn{
  background:#fff; color:var(--primary); border:0; cursor:pointer;
  padding:8px 20px; font-size:14px; font-family:inherit;
}
.seg-btn.on{ background:var(--primary); color:#fff; }

/* حقل تاريخ مع زر تقويم */
.dt-group{ display:flex; }
.dt-group .form-control{ width:150px; border-radius:0; }
.dt-group .btn{ border-radius:0; padding:8px 12px; }

/* استخدام الكروت */
.cu-row{ margin-bottom:26px; }
.cu-label{ text-align:center; font-size:14px; color:#3E515B; margin-bottom:10px; }
.cu-bar{ height:3px; background:#F0E4CE; position:relative; }
.cu-bar span{ position:absolute; inset-inline-start:0; top:0; height:100%; }

/* حالة الراديوس */
.rad-head{
  position:relative; overflow:hidden;
  background:linear-gradient(90deg,#101B33 0%,#16243F 60%,#1B2C4B 100%);
  color:#fff; padding:18px 22px; display:flex; align-items:center; gap:20px;
  flex-wrap:wrap; margin-bottom:22px;
}
.rad-title{ margin-inline-start:auto; text-align:end; }
.rad-title div{ font-size:17px; font-weight:600; }
.rad-title span{ font-size:12.5px; color:#9FB0CC; }
.rad-ctrl{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rad-btn{
  background:#20304F; color:#DCE6F5; border:1px solid #2E4166; cursor:pointer;
  padding:7px 14px; font-size:12.5px; font-family:inherit; border-radius:3px;
}
.rad-btn:hover{ background:#2A3E63; }
.rad-pill{
  background:#1B2B49; border:1px solid #2E4166; color:#9FB0CC;
  padding:6px 12px; font-size:12px; border-radius:14px;
}
.rad-upd{ font-size:12px; color:#8FA0BD; }
.rad-bg{
  position:absolute; inset-inline-end:24px; top:50%; transform:translateY(-50%);
  font-size:34px; color:#2A3E63; opacity:.6;
}
.rad-sec{
  text-align:end; font-size:14px; color:#3E515B; font-weight:600;
  margin:6px 0 12px; padding-inline-end:4px;
}
.rad-sec i{ color:#20A8D8; margin-inline-start:6px; }
.rad-cards{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.rad-card{
  flex:1 1 132px; background:#fff; border:1px solid var(--border);
  border-radius:4px; padding:16px 10px; text-align:center;
}
.rad-card.hot{ border-color:#8ECBEA; background:#F5FBFE; }
.rad-card i{ font-size:16px; color:#8A959D; }
.rad-card.hot i{ color:#20A8D8; }
.rad-num{ font-size:24px; font-weight:600; color:#2F3E46; margin:8px 0 4px; }
.rad-card.hot .rad-num{ color:#1B7FA8; }
.rad-lbl{ font-size:10.5px; letter-spacing:.4px; color:#8A959D; text-transform:uppercase; }
.rad-raw{
  background:#0E1526; color:#8FA0BD; padding:18px 22px;
  font-family:Consolas,"Courier New",monospace; font-size:12.5px; line-height:1.9;
  direction:ltr; text-align:end; overflow-x:auto;
}
.rad-raw .rk{ color:#6FB3E0; }
.rad-raw .rv{ color:#8BC98B; }

/* ==========================================================================
   Dashboard Manager — كل القيم مقيسة من الأصل بـ getComputedStyle
   ========================================================================== */
/* الشريط: صف بوتستراب بعمودين md-6، بلا خلفية ولا إطار */
.dm-bar{ display:flex; margin:0 -15px; }
.dm-bar .dm-col{ width:50%; padding:0 15px; box-sizing:border-box; }
.dm-bar .form-control{ height:35px; padding:6px 12px; width:100%; }

.dm-btns{ display:inline-flex; }
.dm-btns .btn{
  width:38px; height:35px; padding:0; background:transparent;
  border:1px solid transparent; color:#151B1E; font-size:14px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.dm-btns .btn:hover{ color:var(--primary); }

.dm-hr{ border:0; border-top:1px solid rgba(0,0,0,.1); margin:16px 0; }

/* اللوح: عمود مرن للتصميم + عمود ثابت للويدجتات */
.dm-grid{ display:flex; margin:0 -15px; }
.dm-canvas{ flex:1 1 0; padding:0 15px; min-width:0; }
.dm-palette{
  width:25%; max-width:411px; padding:0 15px; box-sizing:border-box;
  height:600px; overflow-y:auto;
}

/* مربّع الويدجت بلوحة الاختيار — 365×50، حد رمادي 1px */
.dm-tile{
  height:50px; box-sizing:border-box; border:1px solid #808080; padding:5px;
  margin:0 0 5px; cursor:pointer; color:#fff; user-select:none;
}
.dm-tile > i{
  float:left; font-size:18px; width:18px; margin-left:10px; padding-top:10px;
}
.dm-tile > div{ font-size:14px; margin:10px 0 0 10px; }
html[dir="rtl"] .dm-tile > i{ float:right; margin:0 10px 0 0; }
html[dir="rtl"] .dm-tile > div{ margin:10px 10px 0 0; }

/* صف داخل اللوح */
.dm-row{ display:flex; flex-wrap:wrap; margin:0 -15px; }
.dm-row.is-empty{
  background:#F8F8F8; border:1.7px dashed #B9DCD5; padding-top:20px;
}
.dm-row.dm-over, .dm-addrow.dm-over{ border-color:var(--primary); background:#EAF6FC; }

.dm-delrow{
  width:100%; box-sizing:border-box; border:1.7px dashed #00ACED; padding:0 15px;
  margin-top:-8.7px;
  height:60px; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#3E515B; cursor:pointer;
}
.dm-addrow{
  border:1.7px dashed #CEBFC4; height:60px; margin:0 -15px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#3E515B; cursor:pointer;
}
.dm-addrow i{ font-size:12px; margin-inline-end:6px; }
.dm-delrow i{ font-size:12px; margin-inline-end:6px; }

/* خانة الويدجت الموضوع — col-3 بحشوة 15px */
.dm-cell{ width:25%; padding:0 15px; box-sizing:border-box; margin-bottom:14px; cursor:pointer; }

/* بطاقة الويدجت الملوّنة (.x-card بالأصل) */
/* مقيسة من معاينة "مصنع الويدجت" بالأصل: الطول الطبيعي 169 = رأس 83 + جسم 86
   والنصوص **بمحاذاة البداية**. وداخل مصمّم اللوحة نفس البطاقة تنحصر بـ101
   (رأس 50 + جسم 51) والنص يصير بالوسط والزايد ينقص */
.x-card{ position:relative; overflow:hidden; color:#fff; }
.xc-head{
  box-sizing:border-box; padding:16px 24px; text-align:start;
  background:rgba(0,0,0,.03); border-bottom:1px solid rgba(0,0,0,.125);
}
.xc-t{ font-size:17.5px; font-weight:500; text-transform:uppercase; line-height:1.2; }
.xc-s{ font-size:14px; font-weight:400; line-height:1.2; margin-top:8px; }
.xc-body{
  box-sizing:border-box; padding:24px; background:rgba(0,0,0,.1);
}
.dm-cell .x-card{ height:101px; }
.dm-cell .xc-head{ height:50px; padding:4px 24px; text-align:center; }
.dm-cell .xc-s{ margin-top:0; }
.dm-cell .xc-body{
  height:51px; padding:0 24px; text-align:center;
  display:flex; align-items:center; justify-content:center;
}
/* الأيقونة الباهتة: 60×60 بقياس خط 60 على بُعد 11 من الحافة، ومركزها على البطاقة كاملة */
.x-card > .xc-body > i{
  position:absolute; inset-inline-end:11px; top:50%; transform:translateY(-50%);
  width:60px; height:60px; font-size:60px; color:rgba(255,255,255,.25);
  pointer-events:none; display:flex; align-items:center; justify-content:center;
}
.xc-v{ font-size:25px; unicode-bidi:plaintext; }

/* ---------- Widget Factory ---------- */
.wf-grid{ display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; }
.wf-grid > .card{ flex:1 1 420px; min-width:0; margin:0; }

.wf-pick{ display:flex; align-items:center; gap:0; margin-bottom:14px; }
.wf-pick .form-control{ width:370px; max-width:100%; height:35px; }
.wf-pick .btn{
  width:38px; height:35px; padding:0; background:transparent;
  border:1px solid transparent; color:#151B1E; font-size:14px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.wf-pick .btn:hover{ color:var(--primary); }

/* الأصل: العنوان فوق الحقل والحقل بعرض كامل */
.wf-row{ margin-bottom:12px; }
.wf-row > label{ display:block; height:35px; line-height:35px; font-size:14px; color:#151B1E; }
.wf-row > .form-control{ width:100%; height:35px; }
.wf-row[hidden]{ display:none; }

/* ---------- Import Data ---------- */
/* استيراد البيانات — سطر واحد بلا بطاقة بتوزيع space-between (مقيس من الأصل) */
.im-bar{ display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; margin-bottom:0; }
.im-g{ display:flex; align-items:center; gap:20px; }
.im-label{ font-size:14px; color:#151B1E; margin:0; }
.im-bar .form-control{ width:150px; height:35px; }
.im-chk{ display:flex; align-items:center; gap:5px; font-size:14px; color:#151B1E; margin:0; }
.im-bar .btn{ width:120px; height:35px; }
.im-bar .btn i{ margin-inline-end:4px; }

/* ---------- Bandwidth Controller ---------- */
/* شريط أدوات رمادي بعرض الجدول: زر التحديث ببدايته وحفظ/تصفير بنهايته */
.bw-tools{ display:flex; align-items:center; gap:5px; margin-bottom:10px;
  background:#F0F3F5; padding:9px 10px; }
.bw-spacer{ flex:1; }
.bw-tools .bw-refresh{ width:40px; padding:0; }
.bw-tools .btn{ height:35px; }
.bw-tools #bwSave{ width:100px; }
.bw-tools #bwReset{ width:100px; }

/* ---------- Bulk Changes ---------- */
/* مقيس من الأصل: جدول بأربعة أعمدة 651 / 163 / 651 / 163 على عرض 1628،
   والعمودان الضيّقان محتواهما بالوسط */
.bk-table{ width:100%; border-collapse:collapse; }
.bk-table th{
  font-size:14px; font-weight:700; color:#151B1E; text-align:start;
  padding:5px; border:0;
}
.bk-table td{ padding:5px; border:0; font-size:14px; color:#151B1E; }
.bk-table th:nth-child(1),.bk-table td:nth-child(1),
.bk-table th:nth-child(3),.bk-table td:nth-child(3){ width:40%; }
.bk-table .bk-op,.bk-table .bk-act{ width:10%; text-align:center; }
.bk-table .form-control{ width:100%; height:35px; }
.bk-act .btn{ width:30px; height:28px; padding:0; font-size:12px; margin:0 2px; }
.btn-warning{ background:#FFC107; border-color:#FFC107; color:#151B1E; }

/* شريط "عثر على N سجل" — تنبيه فاتح بزر تحديث بنهايته */
.bk-found{
  background:#F1F3F8; border:1px solid transparent; border-radius:0;
  padding:12px 20px; margin:0 0 10px; font-size:14px; color:#151B1E;
  display:flex; align-items:center; gap:10px;
}
.bk-found span{ flex:1; }
.bk-found .btn{ width:30px; height:28px; padding:0; font-size:12px; }

/* صندوق العملية: قائمة بعرض ~39% ببدايته وزر Apply بعرض ~16.5% بنهايته */
.action-box{
  background:#F1F3F8; border:1px solid #D3D3D3; padding:10px;
  display:flex; align-items:center; justify-content:space-between;
}
.action-box .form-control{ width:39.3%; height:35px; }
.action-box .btn{ width:16.5%; height:35px; }

/* ---------- إضافات صفحات الإعدادات ---------- */
/* روابط الترخيص Upgrade / Renew */
.set-links{ display:flex; gap:18px; padding:6px 0 0; }
.set-links a{ color:var(--primary); font-size:14px; }

/* أزرار نقل الصلاحيات بالرأس */
.perm-item.sel{ background:var(--primary); color:#fff; }

/* صف الإدخال بجدول Free Zone */
tr.fz-input td{ padding:8px 10px; }
tr.fz-input .form-control{ width:100%; height:32px; }
tr.fz-input input[type=range]{ width:100%; }

/* بوابات الدفع: عمودان */
/* مقيس من الأصل: البطاقة 74.6% والقائمة الباقي بفاصل 30 */
.gw-grid{ display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; }
.gw-main{ width:74.6%; min-width:0; margin:0; }
.gw-main .card-body{ height:452px; display:flex; align-items:center; justify-content:center; }
.gw-placeholder{ font-size:28px; font-weight:300; color:#C3C3C3; text-align:center; }
.gw-list{ flex:1; min-width:0; margin:0; padding:0; }
.gw-row{ display:block; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; }
.gw-row:last-child{ border-bottom:0; }
.gw-row:hover, .gw-row.on{ background:#F5F8FA; }
.gw-top{ display:flex; align-items:baseline; gap:10px; }
.gw-name{ font-size:17.5px; font-weight:500; color:#3E515B; }
.gw-country{ margin-inline-start:auto; font-size:11.2px; color:#3E515B; }
.gw-state{ font-size:11.2px; color:#CC5050; margin-top:2px; }

/* ---------- قائمة الأسعار: شجرة المدراء + جدول الأسعار ---------- */
.pr-grid{ display:flex; margin:0 -15px; align-items:flex-start; }
.pr-tree-col{ width:33.3333%; padding:0 15px; box-sizing:border-box; min-width:0; }
.pr-list-col{ flex:1 1 0; padding:0 15px; box-sizing:border-box; min-width:0; }
.pr-grid .card{ margin:0; }

.pr-search{ display:flex; margin-bottom:14px; }
.pr-search .form-control{ flex:1; height:40px; border-radius:0; min-width:0; }
.pr-search .btn{ width:44px; padding:0; border-radius:0; justify-content:center; }

.mgr-tree, .mgr-tree ul{ list-style:none; margin:0; padding:0; }
.mgr-tree ul{ padding-inline-start:22px; }
.mgr-tree li{ padding:2px 0; }
.mgr-tree .tree-anchor{
  display:flex; align-items:center; gap:8px; height:24px;
  padding:0 6px; font-size:14px; color:#3E515B; cursor:pointer;
}
.mgr-tree .tree-anchor i{ color:#5C6873; font-size:13px; }
.mgr-tree .tree-anchor:hover{ background:#F0F3F5; text-decoration:none; }
.mgr-tree .tree-anchor.on{ background:#E7F4FA; color:var(--primary); }

/* ===================== تقارير المخططات ===================== */
/* شريط الفلاتر فوق البطاقة (مو داخلها) — مقيس من الأصل */
.chart-bar{ display:flex; align-items:center; gap:0; margin:0 0 24px 16px; }
.chart-sel,.chart-btn,.chart-date{
  height:35px; font-size:14px; font-family:inherit; background:#fff;
  border:1px solid #E1E2DD; padding:6px 12px; color:#3E515B; border-radius:0;
}
.chart-btn{ display:inline-flex; align-items:center; gap:8px; color:var(--text); cursor:pointer; }
.chart-btn:hover{ background:#F4F6F8; }
.chart-btn i{ color:#3E515B; }
.chart-date{ height:40px; width:188px; border-color:#CED4DA; color:#495057; }
.chart-cal{
  height:40px; width:38px; border:1px solid #2196F3; background:#2196F3; color:#fff;
  cursor:pointer; font-size:14px;
}
.chart-cal:hover{ filter:brightness(.94); }

.chart-body{ padding:24px; }
.hc-title{
  text-align:center; font-weight:400; font-size:19px; color:#3E515B; margin:0 0 20px;
}
.chart-body .hc-title:not(:first-child){ margin-top:44px; }
.hc-credit{ text-align:end; font-size:9px; color:#98A5AE; }
.hc-empty{ text-align:center; color:#8E979E; padding:56px 0; }

/* تبويبات صفحة "المشتركين" — PrimeNG tabview */
.rtabs{
  display:flex; background:#fff; border-bottom:2px solid #DEE2E6; margin:0;
}
.rtabs a{
  display:block; padding:16px; font-size:14.4px; color:#6C757D;
  border-bottom:2px solid #DEE2E6; margin-bottom:-2px;
}
.rtabs a:hover{ text-decoration:none; color:#495057; }
.rtabs a.on{ color:#2196F3; border-bottom-color:#2196F3; }
.rtab-panel{ background:#fff; padding:16px; }

.rt-tools{ display:flex; justify-content:flex-end; gap:0; }
.btn-100{
  width:100px; height:28px; font-size:12px; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:transparent; border:1px solid #BCC5D0; color:#8A93A2;
}
.btn-100:hover{ background:#F0F3F5; }

.rt-split{ display:flex; align-items:flex-start; gap:20px; }
.rt-chart{ flex:1 1 auto; min-width:0; }
.rt-side{ flex:0 0 26%; max-width:26%; padding-top:30px; }
.rt-list{ border:1px solid var(--border); }
.rt-list li{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; font-size:15px; color:#3E515B;
}
.rt-list li + li{ border-top:1px solid var(--border); }
.rt-list b{ font-weight:700; color:var(--text); }

.rt-dd{ margin:6px 0 10px; }
.rt-dd .chart-sel{ width:100%; height:38px; }
.rt-year{ margin:0 0 10px; }
.rt-table{ margin-top:14px; border:0; }
.rt-table th{ border-top:0; }
.rt-map{ border:1px solid var(--border); padding:18px; margin-top:10px; }
/* المخططات بالأصل ارتفاعها ثابت 400 مهما كان عرض الشاشة */
.hc-box{ height:400px; }
.hc-box svg{ display:block; width:100%; height:100%; }

/* سطور الملخّص تحت حقول النافذة (نافذة تسديد الديون) */
.plain-note{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; font-size:14px; color:#3E515B;
}
.plain-note b{ color:var(--text); }
/* سعر الخدمة الاضافية تحت قائمة الاختيار */
.addon-price{ margin-top:14px; font-size:14px; color:#3E515B; }

/* ===================== غطاء التحميل (block-UI) =====================
   القيم مقيسة من الأصل: غطاء ثابت يغطي الشاشة بـrgba(0,0,0,.4) وz-index 30000
   ومؤشّر "انتظار"، وبوسطه صندوق 200×60 بحشوة 15 وزوايا 5 */
.block-ui-wrapper{
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.4); z-index:30000; cursor:wait;
}
.block-ui-wrapper.active{ display:block; }
.block-ui-template{
  position:absolute; top:40%; left:0; right:0; margin:0 auto;
  transform:translateY(-50%);
  width:200px; padding:15px; border-radius:5px;
  text-align:center; font-size:20px; color:#fff;
}
/* المؤشّر: صفّ مربّعات يمشي بيها مربّع برتقالي — 154×20 مثل الأصل */
.blk-loader{ display:flex; gap:2px; justify-content:center; }
.blk-loader i{
  display:block; width:12px; height:20px; background:#41566B;
  animation:blkMarch 1.1s linear infinite;
}
.blk-loader i:nth-child(1){ animation-delay:0s }
.blk-loader i:nth-child(2){ animation-delay:.1s }
.blk-loader i:nth-child(3){ animation-delay:.2s }
.blk-loader i:nth-child(4){ animation-delay:.3s }
.blk-loader i:nth-child(5){ animation-delay:.4s }
.blk-loader i:nth-child(6){ animation-delay:.5s }
.blk-loader i:nth-child(7){ animation-delay:.6s }
.blk-loader i:nth-child(8){ animation-delay:.7s }
.blk-loader i:nth-child(9){ animation-delay:.8s }
.blk-loader i:nth-child(10){ animation-delay:.9s }
.blk-loader i:nth-child(11){ animation-delay:1s }
/* قفزات حادّة بلا تدرّج — مربّع برتقالي واحد بس بكل لحظة مثل الأصل */
@keyframes blkMarch{
  0%,8.9%    { background:#41566B }
  9%,17%     { background:#F0A128 }
  17.1%,100% { background:#41566B }
}

/* كونسول سجل الراديوس — مقيس من الأصل */
.console{
  background:#464646; color:#EEE8D5; font-family:"Courier New", Monospace;
  font-size:14px; padding:10px; height:500px; overflow-y:auto; white-space:pre-wrap;
}

/* صف مربّع تأشير داخل النافذة (تعميم على المدراء/المشتركين، قرض) */
.plain-check{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.plain-check label{ margin:0; font-size:14px; color:#151B1E; }

/* نموذج الخدمة الاضافية — عنوان فوق الحقل وصف مدة برقم ووحدة */
.af-row{ margin-bottom:16px; max-width:640px; }
.af-row > label{ display:block; font-size:14px; color:#151B1E; margin-bottom:7px; }
.af-pair{ display:flex; gap:10px; }
.af-pair .form-control:first-child{ flex:1 1 auto; }
.af-pair select{ width:130px; flex:0 0 130px; }

/* ===================== صفحات نظام الكروت ===================== */
/* التحقق من كارت */
.cv-bar{ display:flex; gap:0; align-items:center; }
.cv-bar select{ width:310px; flex:0 0 310px; }
.cv-bar input{ flex:1 1 auto; }
.cv-bar .btn{ background:#fff; border:1px solid #E1E2DD; color:#3E515B; height:35px; }
.cv-sep{ border:0; border-top:1px solid var(--border); margin:18px 0 20px; }
.cv-grid{ display:flex; flex-wrap:wrap; }
.cv-cell{ width:50%; padding:0 18px 20px 0; box-sizing:border-box; }
.cv-cell:nth-child(even){ padding:0 0 20px 18px; }
.cv-cell label{ display:block; font-size:14px; color:#151B1E; margin-bottom:7px; }
.cv-val{ height:34px; background:#E3E8EC; border:1px solid #E3E8EC; }

/* مصمّم الكارت — ثلاث بطاقات جنب بعض */
.cd-wrap{ display:flex; align-items:flex-start; gap:24px; }
.cd-tools{ flex:0 0 253px; }
.cd-main{ flex:1 1 auto; min-width:0; }
.cd-props{ flex:0 0 395px; }
.cd-item{
  display:flex; align-items:center; gap:8px; cursor:grab;
  border:1px solid var(--border); border-radius:3px;
  padding:6px 10px; margin-bottom:6px; font-size:14px; color:#151B1E;
}
.cd-item:hover{ border-color:#E83E8C; }
.cd-item i{ color:#3E515B; font-size:12px; }
.cd-body{ padding:0; }
.cd-canvas{
  background:#DFDBE5; height:340px; display:flex; align-items:center; justify-content:center;
}
.cd-card{ width:325px; height:245px; border:1px solid #9E9AA6; background:transparent; }
.cd-lab{ display:block; font-size:14px; color:#151B1E; margin-bottom:8px; }

/* ==========================================================================
   نموذج الفاتورة  #/billing/userInvoiceForm
   المقاسات مأخوذة من الأصل على شاشة 1920: محتوى البطاقة 1613px،
   والشبكة bootstrap: صف بهوامش -15 وأعمدة بحشوة 15
   ========================================================================== */
.inv-pick input{width:176px;height:28px}

.inv-parties{display:flex;margin:0 -15px}
.inv-party{width:50%;padding:0 15px}
.inv-party-title{font-size:14px;color:#151B1E;padding-bottom:11px}
.inv-party-grid{display:flex;margin:0 -15px}
.inv-party-role,.inv-party-addr{width:50%;padding:0 15px;font-size:11.6667px;color:#151B1E;line-height:28px}
.inv-party-role{font-weight:100}

.inv-sep{border:0;border-top:1px solid rgba(0,0,0,.1);margin:14px 0}

.inv-add{display:flex;gap:4px;margin-bottom:10px}
.inv-add .btn i{margin-inline-end:4px}

}
.btn-sm{font-size:12.25px;padding:4px 8px;line-height:1.5;border-radius:0}

.inv-table{width:100%;border-collapse:collapse;font-size:14px}
.inv-table th{font-weight:700;padding:1px;text-align:start;border:0}
.inv-table td{padding:7px;border:0;vertical-align:middle}
.inv-table td input[type=text],.inv-table td input[type=number]{
  width:179px;height:22px;border:1px solid #C2CFD6;padding:0 4px;font-size:14px;
}
.inv-sel{width:auto;max-width:100%;font-weight:700;font-size:14px;height:20px;border:1px solid #C2CFD6;background:#fff}
.inv-act{white-space:nowrap}
.inv-act .btn{padding:4px 8px;margin-inline-start:2px}

.inv-row{display:flex;align-items:center;margin:0 -15px 16px}
.inv-lbl{width:25%;padding:0 15px;margin:0;font-size:14px;color:#151B1E}
.inv-lbl.b{font-weight:700}
.inv-fld{width:75%;padding:0 15px}
.inv-fld .form-control{width:100%;height:35px}
.inv-static{margin:0;font-size:14px;color:#151B1E}
.inv-static.b{font-weight:700}

.inv-actions{display:flex;justify-content:flex-end;gap:5px}
.inv-actions .btn{width:100px}

/* ==========================================================================
   مصمّم فاتورة المشترك  #/settings/userInvoiceDesigner
   بالأصل مو داخل بطاقة: صف فيه عمود المحرّر (10/12) وعمود الإعدادات (2/12)
   والمحرّر Monaco بثيمة vs-dark
   ========================================================================== */
.ce-row{display:flex;margin:0 -15px}
.ce-main{width:83.3333%;padding:0 15px}
.ce-side{width:16.6667%;padding:0 15px}
.ce-side label{display:block;font-size:14px;color:#151B1E;margin:0;line-height:21px}
.ce-side select{width:100%;height:35px;margin:0}
.ce-side hr{border:0;border-top:1px solid rgba(0,0,0,.1);margin:16px 0}
.ce-side .btn{width:100%;height:35px}

.ce-box{background:#1E1E1E;height:650px;display:flex;overflow:hidden;
  font:14px/19px Consolas,"Courier New",monospace}
.ce-gutter{width:64px;flex:0 0 64px;color:#C6C6C6;text-align:right;padding:0 26px 0 0;
  user-select:none;background:#1E1E1E}
.ce-code{flex:1;color:#D4D4D4;background:#1E1E1E;border:0;outline:0;resize:none;
  font:inherit;padding:0;caret-color:#AEAFAD}

/* عمود فاضي بآخر رأس الجدول — موجود بالأصل (عرض 50 وبلا خانة بالصفوف) */
.data-table th.th-pad{width:50px}

/* تحديث النظام — مقيس من الأصل */
.su-bar{
  background:#F2F3F6;padding:10px;display:flex;align-items:center;
  justify-content:space-between;font-size:14px;color:#151B1E;min-height:41px;
}
.su-bar .btn{width:100px}
.su-bar .btn i{margin-inline-end:4px}
.su-hist{border:1px solid #C5C5C5;padding:10px;font-size:14px;color:#151B1E}

/* بطاقة ضيّقة بوسط الصفحة (صفحة الترخيص) */
.card-narrow{ width:800px; max-width:100%; margin-inline:auto; }
/* صف أزرار بعرض متساوٍ */
.btn-row{ display:flex; gap:10px; }
.btn-row .btn{ flex:1; height:35px; }
.btn-row .btn i{ margin-inline-end:6px; }
.info-table td.b{ font-weight:700; }
.info-table td.txt-ok{ color:#4DBD74; font-weight:700; }

/* جدول بنمط PrimeNG (صفحة الحقول) — عمود فارغ بربع العرض ثم كتلة 75% */
.pt-wrap{ display:flex; }
.pt-block{ width:74.6%; margin-inline-start:auto; }
.pt-tools{ display:flex; align-items:center; margin-bottom:10px; }
.pt-search{ position:relative; display:inline-flex; align-items:center; }
.pt-search i{
  position:absolute; inset-inline-start:12px; color:#6C757D; font-size:13px; pointer-events:none;
}
.pt-search input{ width:212px; height:40px; padding-inline-start:32px; border-radius:4px; }
.pt-actions{ display:flex; }
.pt-act,.pt-caret{
  background:#2196F3; border-color:#2196F3; color:#fff; height:40px; border-radius:0;
}
.pt-act{ width:80px; border-start-start-radius:4px; border-end-start-radius:4px; }
.pt-caret{ width:54px; border-inline-start:1px solid rgba(255,255,255,.25);
  border-start-end-radius:4px; border-end-end-radius:4px; }
.pt-table{ width:100%; border-collapse:collapse; }
.pt-table th{
  background:#F8F9FA; font-weight:600; font-size:14px; color:#151B1E;
  text-align:start; padding:12px 16px; border-bottom:1px solid #DEE2E6;
}
.pt-pager{ display:flex; justify-content:center; gap:4px; padding:10px 0; }
.pt-pg{
  background:none; border:0; width:36px; height:36px; border-radius:50%;
  color:#6C757D; cursor:pointer; opacity:.5;
}

/* صفحة الصلاحيات: صف ثلاثي تحت جدول المجموعات — 672 / وسط / 672 */
.acl-row{ display:flex; align-items:flex-start; margin-top:20px; }
.acl-side{ width:40.6%; margin:0; }
.acl-mid{ flex:1; display:flex; flex-direction:column; align-items:center;
  gap:46px; padding-top:50px; }
.acl-mid .acl-move{ width:221px; height:43px; padding:0;
  display:flex; align-items:center; justify-content:center; }
.acl-mid .acl-move i{ font-size:22px; line-height:1; }
.perm-box{ height:400px; overflow-y:auto; background:#fff; }
.perm-item{ padding:10px 16px; font-size:14px; border-bottom:1px solid #EEF1F4; cursor:pointer; }
.perm-item:hover{ background:#F0F3F5; }
.perm-item.sel{ background:#E3F2FB; }

/* تبويب الاستهلاك بصفحة المشترك */
.ut-bar{ display:flex; justify-content:flex-end; align-items:center; gap:6px; padding:10px 0; }
.ut-bar .form-control{ width:auto; min-width:90px; height:31px; padding:2px 8px; }
.ut-bar .ut-refresh{ background:none; border:0; color:#5C6873; padding:4px 8px; }
.ut-title{ text-align:center; font-size:20px; color:#3E515B; padding:6px 0 0; }

/* تبويب RADIUS بصفحة المشترك */
.rad-table td{ padding:8px 10px; }
.rad-table .form-control{ width:100%; height:35px; }
.rad-c{ text-align:center; }
.rad-save{ color:#3E515B; cursor:pointer; font-size:15px; }
.rad-save:hover{ color:var(--primary); }

/* تبويب Hardware بصفحة "حول" — ثلاثة أسطر بالوسط بلا قيم */
.hw-box{ padding:0; }
.hw-row{
  text-align:center; font-size:14px; color:#8A959D;
  padding:26px 20px; border-bottom:1px solid #EEF1F4;
}
.hw-row:last-child{ border-bottom:0; }

/* رسالة "لا بيانات" — الأصل: صف عادي داخل الجدول ببداية السطر، إنجليزية دائماً */
.no-data td{ padding:12px 16px; font-size:14px; color:#151B1E; text-align:start; }

/* راديو يومي/شهري بإحصائيات التفعيل */
.seg-radios{ display:inline-flex; align-items:center; gap:14px; }
.seg-rad{ display:inline-flex; align-items:center; gap:6px; font-size:14px;
  color:#151B1E; cursor:pointer; margin:0; }

/* نسبة المنطقة المجانية بصف الإدخال */
.fz-pct{ font-size:13px; color:#151B1E; margin-inline-end:8px; }
.fz-input td{ vertical-align:middle; }
.af-row[hidden]{ display:none !important; }