/* ============================================================
   White Code | وايت كود — هوية منطقة العملاء
   WHMCS 7.3.2 — قالب Six (طبقة CSS فقط، بدون أي تعديل tpl)
   التركيب: ارفع هذا الملف إلى  templates/six/css/custom.css
   (يُحمَّل تلقائياً من القالب — هذه الطريقة الرسمية في WHMCS)
   الألوان: Navy #0A1633 · Blue #2563EB · Cyan #22D3EE · Gold #F5A623
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ---------- 1) الأساسيات (خطوط وألوان فقط — لا تغيير في الأبعاد) ---------- */
body {
    font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    background-color: #F4F7FD;
    color: #243353;
}
h1, h2, h3, h4, h5, h6, .panel-title, .btn, .navbar, legend {
    font-family: 'Alexandria', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
}
a { color: #2563EB; }
a:hover, a:focus { color: #1E50C8; }

/* ---------- 2) الترويسة والشعار ---------- */
/* خلفية بيضاء أنيقة ليظهر الشعار الملوّن بوضوح (نفس الشعار يصلح للفواتير PDF) */
#header, section#header {
    background: #FFFFFF;
    border-bottom: 1px solid #E4EAF6;
    box-shadow: 0 2px 12px rgba(10, 22, 51, .05);
}
/* حماية من تضخّم الشعار مهما كان مقاس الملف المرفوع */
#header .logo img, #header img {
    max-height: 52px !important;
    width: auto !important;
}
#header .logo-text {
    color: #0A1633 !important;
    font-family: 'Alexandria', sans-serif;
    font-weight: 800;
}
#header .account .dropdown-toggle,
#header .btn-group .btn,
#header .navbar-text { color: #243353; }

/* ---------- 3) شريط التنقل الرئيسي ---------- */
#main-menu, section#main-menu { background: transparent; padding: 0; }
.navbar-main, #main-menu .navbar, nav#nav {
    background: linear-gradient(180deg, #101D45 0%, #0A1633 100%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 6px 18px rgba(10, 22, 51, .22);
}
.navbar-main .navbar-nav > li > a,
#main-menu .navbar-nav > li > a {
    color: #DCE5FA !important;
    font-weight: 500;
    transition: color .15s, background .15s;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > li.active > a,
.navbar-main .navbar-nav > li.open > a,
#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > li.open > a {
    color: #22D3EE !important;
    background: rgba(34, 211, 238, .08) !important;
}
/* خط نبض سفلي مميز أسفل القائمة */
.navbar-main { position: relative; }
.navbar-main:after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg, #2563EB, #22D3EE, #F5A623, #2563EB);
    background-size: 300% 100%;
    animation: wcPulse 9s linear infinite;
}
@keyframes wcPulse { to { background-position: 300% 0; } }

/* القوائم المنسدلة */
.navbar-main .dropdown-menu, #main-menu .dropdown-menu {
    background: #FFFFFF;
    border: 1px solid #E4EAF6;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(10, 22, 51, .16);
    padding: 6px;
}
.navbar-main .dropdown-menu > li > a, #main-menu .dropdown-menu > li > a {
    color: #243353;
    border-radius: 8px;
    padding: 8px 14px;
}
.navbar-main .dropdown-menu > li > a:hover,
#main-menu .dropdown-menu > li > a:hover {
    background: #EFF5FF;
    color: #2563EB;
}
/* زر القائمة على الجوال */
.navbar-main .navbar-toggle { border-color: rgba(34,211,238,.5); }
.navbar-main .navbar-toggle .icon-bar { background: #22D3EE; }
.navbar-main .navbar-toggle:hover, .navbar-main .navbar-toggle:focus {
    background: rgba(34,211,238,.12);
}

/* ---------- 4) بانر الصفحة الرئيسية وبحث النطاقات ---------- */
#home-banner, .home-banner, section#home-banner {
    background: radial-gradient(circle at 80% 15%, rgba(37,99,235,.45), transparent 50%),
                radial-gradient(circle at 10% 90%, rgba(34,211,238,.25), transparent 50%),
                #0A1633 !important;
}
#home-banner h2, .home-banner h2, #home-banner p, .home-banner p { color: #FFFFFF; }
#home-banner input.form-control, .home-banner input.form-control {
    border: 0;
    border-radius: 12px;
    height: 50px;
    font-size: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
#home-banner .btn, .home-banner .btn {
    height: 50px;
    border-radius: 12px;
    font-weight: 700;
}

/* اختصارات الرئيسية (الأزرار الثلاثة الكبيرة) */
.home-shortcuts {
    background: #101D45 !important;
    border-top: 1px solid rgba(34,211,238,.18);
    border-bottom: 1px solid rgba(34,211,238,.18);
}
.home-shortcuts li a, .home-shortcuts a { color: #DCE5FA !important; }
.home-shortcuts li a:hover { color: #22D3EE !important; background: rgba(34,211,238,.06); }
.home-shortcuts i { color: #22D3EE; }
.home-shortcuts .btn { border-radius: 10px; }

/* ---------- 5) جسم الصفحة والبطاقات ---------- */
#main-body, section#main-body { background: #F4F7FD; }

.panel, .panel-default {
    border: 1px solid #E4EAF6;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(10, 22, 51, .05);
    overflow: hidden;
}
.panel-default > .panel-heading {
    background: #FFFFFF;
    border-bottom: 1px solid #EDF1FA;
    color: #0A1633;
}
.panel-title { color: #0A1633; font-weight: 700; }
.panel-title i { color: #2563EB; }
.panel-footer { background: #FAFBFF; border-top: 1px solid #EDF1FA; }

/* بطاقات ملوّنة (إن وُجدت) تبقى مقروءة */
.panel-primary > .panel-heading { background: #2563EB; border-color: #2563EB; }
.panel-info > .panel-heading    { background: #22D3EE; border-color: #22D3EE; color: #06303A; }
.panel-success > .panel-heading { background: #19B27B; border-color: #19B27B; }
.panel-warning > .panel-heading { background: #F5A623; border-color: #F5A623; color: #5B3C00; }

/* القائمة الجانبية */
.sidebar .panel { border-radius: 14px; }
.sidebar .panel-heading {
    background: linear-gradient(135deg, #101D45, #0A1633) !important;
    color: #FFFFFF !important;
    border: 0;
}
.sidebar .panel-heading .panel-title, .sidebar .panel-title { color: #FFFFFF; }
.sidebar .panel-heading i { color: #22D3EE; }
.list-group-item { border-color: #EDF1FA; color: #243353; }
.list-group-item:hover { background: #F4F8FF; color: #2563EB; }
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background: linear-gradient(135deg, #2563EB, #22D3EE);
    border-color: #2563EB;
    color: #FFFFFF;
}
.list-group-item .badge { background: #2563EB; }

/* ---------- 6) الأزرار ---------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary {
    background: linear-gradient(135deg, #2563EB 0%, #22D3EE 100%);
    border: 0;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:active:hover, .open > .dropdown-toggle.btn-primary {
    background: linear-gradient(135deg, #1E50C8 0%, #14B8D4 100%);
    border: 0;
}
.btn-success { background: #19B27B; border-color: #19B27B; }
.btn-success:hover, .btn-success:focus { background: #128F62; border-color: #128F62; }
.btn-info { background: #22D3EE; border-color: #22D3EE; color: #06303A; }
.btn-info:hover { background: #14B8D4; border-color: #14B8D4; color: #06303A; }
.btn-warning { background: #F5A623; border-color: #F5A623; color: #5B3C00; }
.btn-danger { background: #E5484D; border-color: #E5484D; }
.btn-default {
    background: #FFFFFF;
    border: 1.5px solid #D9E1F2;
    color: #243353;
}
.btn-default:hover, .btn-default:focus {
    background: #F4F8FF;
    border-color: #2563EB;
    color: #2563EB;
}
.btn-link { color: #2563EB; }

/* ---------- 7) النماذج ---------- */
.form-control {
    border: 1.5px solid #D9E1F2;
    border-radius: 10px;
    box-shadow: none;
    color: #243353;
}
.form-control:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
label, .control-label { color: #0A1633; font-weight: 600; }
.input-group-addon { border-color: #D9E1F2; background: #F4F8FF; border-radius: 10px; }
.help-block { color: #6F7FA8; }

/* ---------- 8) الجداول ---------- */
.table > thead > tr > th {
    background: #0A1633;
    color: #FFFFFF;
    border-bottom: 0 !important;
    font-family: 'Alexandria', sans-serif;
    font-weight: 600;
}
.table > tbody > tr > td { border-color: #EDF1FA; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #F8FAFE; }
.table-hover > tbody > tr:hover { background: #F0F6FF; }
.dataTables_wrapper .table > thead > tr > th { background: #0A1633; }

/* ---------- 9) شارات الحالة (خدمات / فواتير / تذاكر) ---------- */
.label { border-radius: 999px; padding: .3em .9em; font-weight: 600; }
.label-success, .status-active   { background: #19B27B !important; }
.label-info                       { background: #22D3EE !important; color: #06303A !important; }
.label-primary                    { background: #2563EB !important; }
.label-warning, .status-pending  { background: #F5A623 !important; color: #5B3C00 !important; }
.label-danger,
.status-suspended, .status-terminated, .status-cancelled { background: #E5484D !important; }
.label-default, .status-closed   { background: #8B97BC !important; }
/* حالات التذاكر النصية */
.status-open          { background: #19B27B !important; }
.status-answered      { background: #2563EB !important; }
.status-customerreply { background: #22D3EE !important; color: #06303A !important; }
.status-onhold        { background: #F5A623 !important; color: #5B3C00 !important; }

/* ---------- 10) تنبيهات / مسارات / تبويبات / ترقيم ---------- */
.alert { border-radius: 12px; border-width: 1px; }
.alert-success { background: #E9F9F0; border-color: #BFE9D2; color: #0E7A4F; }
.alert-info    { background: #E8F8FC; border-color: #BCEAF4; color: #0A5666; }
.alert-warning { background: #FFF6E6; border-color: #F5DCAE; color: #7A5200; }
.alert-danger  { background: #FDEEEE; border-color: #F5C8C6; color: #B3261E; }

.breadcrumb { background: transparent; }
.breadcrumb > li + li:before { color: #B9C4E0; }
.breadcrumb a { color: #6F7FA8; }
.breadcrumb > .active { color: #2563EB; font-weight: 600; }

.nav-tabs { border-bottom: 2px solid #E4EAF6; }
.nav-tabs > li > a { color: #6F7FA8; border: 0; border-radius: 10px 10px 0 0; font-weight: 600; }
.nav-tabs > li > a:hover { background: #F0F6FF; color: #2563EB; border: 0; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #2563EB;
    border: 0;
    border-bottom: 3px solid #2563EB;
    background: transparent;
}

.pagination > li > a, .pagination > li > span {
    color: #2563EB;
    border-color: #E4EAF6;
    margin: 0 2px;
    border-radius: 8px !important;
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover {
    background: linear-gradient(135deg, #2563EB, #22D3EE);
    border-color: #2563EB;
}

/* ---------- 11) النوافذ المنبثقة وشريط التقدم ---------- */
.modal-content { border-radius: 16px; border: 0; box-shadow: 0 30px 80px rgba(10,22,51,.3); }
.modal-header {
    background: linear-gradient(135deg, #101D45, #0A1633);
    color: #FFFFFF;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
}
.modal-header .close { color: #FFFFFF; opacity: .8; text-shadow: none; }
.modal-title { color: #FFFFFF; }
.progress { border-radius: 999px; background: #E9EFFB; box-shadow: none; }
.progress-bar { background: linear-gradient(90deg, #2563EB, #22D3EE); }

/* ---------- 12) مربعات إحصاءات الصفحة الرئيسية للعميل ---------- */
.tiles .tile, .client-home-panels .tile {
    background: #FFFFFF;
    border: 1px solid #E4EAF6;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(10,22,51,.05);
    transition: transform .18s, box-shadow .18s;
}
.tiles .tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(10,22,51,.10); }
.tiles .tile .icon i, .tiles .tile i { color: #2563EB; }
.tiles .tile .stat {
    color: #0A1633;
    font-family: 'Alexandria', sans-serif;
    font-weight: 800;
}
.tiles .highlighted .stat, .tiles .tile .stat span { color: #2563EB; }

/* ---------- 13) صفحة تسجيل الدخول ---------- */
.logincontainer {
    background: #FFFFFF;
    border: 1px solid #E4EAF6;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(10, 22, 51, .10);
    padding-top: 25px;
    padding-bottom: 25px;
}
.logincontainer .styled_title h2, .logincontainer h2 { color: #0A1633; font-weight: 800; }

/* ---------- 14) التذييل ---------- */
#footer, section#footer, .footer {
    background: #0A1633 !important;
    color: #8B97BC !important;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #2563EB, #22D3EE, #F5A623) 1;
}
#footer a, .footer a { color: #B9C4E0 !important; }
#footer a:hover, .footer a:hover { color: #22D3EE !important; }
#footer hr { border-color: rgba(139,151,188,.2); }

/* ---------- 15) لمسات عامة آمنة ---------- */
::selection { background: rgba(34, 211, 238, .35); }
hr { border-color: #E4EAF6; }
.well { background: #F8FAFE; border: 1px solid #E4EAF6; border-radius: 14px; box-shadow: none; }
.text-primary { color: #2563EB !important; }
.bg-primary { background: #2563EB !important; }
code { background: #EFF3FC; color: #1E50C8; border-radius: 6px; }
.popover { border-radius: 12px; border-color: #E4EAF6; box-shadow: 0 14px 36px rgba(10,22,51,.14); }
.tooltip-inner { background: #0A1633; border-radius: 8px; }

/* أعمدة آمنة على الشاشات الصغيرة (لا تغيير هيكلي — حماية فقط) */
img { max-width: 100%; }

/* ============================================================
   نهاية هوية White Code — أي سطر هنا تجميلي بحت ولا يمسّ
   هيكل القالب، لذا التحديثات والصفحات تعمل كما هي تماماً.
   ============================================================ */

/* ============================================================
   دعم اللغة العربية RTL — يُفعّل تلقائياً عند اختيار العربية
   WHMCS يضيف dir="rtl" على <html> عند اللغة العربية
   ============================================================ */

html[dir="rtl"] body,
html[lang="arabic"] body,
.rtl body {
    direction: rtl;
    text-align: right;
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

/* الترويسة والقائمة */
html[dir="rtl"] #header .logo,
html[dir="rtl"] .navbar-brand { float: right; }
html[dir="rtl"] .navbar-nav { padding-right: 0; }
html[dir="rtl"] .navbar-right { float: left !important; }
html[dir="rtl"] .navbar-nav > li { float: right; }

/* الأعمدة والشبكة */
html[dir="rtl"] .pull-right { float: left !important; }
html[dir="rtl"] .pull-left { float: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }
html[dir="rtl"] .text-left { text-align: right !important; }

/* القوائم الجانبية والبطاقات */
html[dir="rtl"] .list-group { padding-right: 0; }
html[dir="rtl"] .panel-title { text-align: right; }
html[dir="rtl"] .sidebar .list-group-item { text-align: right; }

/* النماذج */
html[dir="rtl"] label,
html[dir="rtl"] .control-label { text-align: right; }
html[dir="rtl"] .form-control { text-align: right; }
html[dir="rtl"] .input-group-addon:first-child { border-radius: 0 10px 10px 0; }
html[dir="rtl"] .input-group-addon:last-child { border-radius: 10px 0 0 10px; }

/* الجداول */
html[dir="rtl"] .table > thead > tr > th,
html[dir="rtl"] .table > tbody > tr > td { text-align: right; }

/* الأزرار والأيقونات */
html[dir="rtl"] .btn i,
html[dir="rtl"] .btn .fa { margin-left: 6px; margin-right: 0; }

/* مسار التنقل breadcrumb */
html[dir="rtl"] .breadcrumb { padding-right: 15px; }
html[dir="rtl"] .breadcrumb > li + li:before { padding: 0 5px; transform: scaleX(-1); display: inline-block; }

/* القوائم المنسدلة */
html[dir="rtl"] .dropdown-menu { right: 0; left: auto; text-align: right; }

/* التذييل */
html[dir="rtl"] #footer { text-align: right; }

/* الإزاحات */
html[dir="rtl"] .col-md-3,
html[dir="rtl"] .col-md-4,
html[dir="rtl"] .col-md-6,
html[dir="rtl"] .col-md-8,
html[dir="rtl"] .col-md-9 { float: right; }

/* الهوامش المعكوسة للعناصر الشائعة */
html[dir="rtl"] .margin-left { margin-left: 0; margin-right: 15px; }
html[dir="rtl"] .checkbox label,
html[dir="rtl"] .radio label { padding-right: 20px; padding-left: 0; }

/* شريط التقدم */
html[dir="rtl"] .progress-bar { float: right; }

/* البطاقات الترحيبية في لوحة العميل */
html[dir="rtl"] .client-home-panels .panel,
html[dir="rtl"] .tiles .tile { text-align: right; }