/* ============================================================
   custom-theme.css
   التصميم الجديد للوحة تحكم مؤسسة داله فارم الطبية
   هوية: كحلي غامق + ذهبي/كهرماني فخم — تباين عالٍ وعناصر واضحة
   يُحمَّل بعد كل ملفات CSS الأصلية (من layouts/head.blade.php)
   ============================================================ */

/* ------------------------------------------------------------
   0) إصلاح مهم: خطوط الأيقونات — لا تلمس هذا الجزء ولا تضف
   قاعدة تفرض font-family على <i> أو أي كلاس فيه "fa-" أو
   "material-icons" بشكل عام (هذا كان يسبب مربعات فارغة سابقًا)
   ------------------------------------------------------------ */
.fas, .fa-solid { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; }
.far, .fa-regular { font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; }
.fab, .fa-brands { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; }
.material-icons { font-family: 'Material Icons' !important; font-weight: normal !important; font-style: normal !important; }

/* ------------------------------------------------------------
   1) الألوان الأساسية (Palette) — كحلي + ذهبي فخم
   ------------------------------------------------------------ */
:root {
    --navy: #0b1220;           /* كحلي غامق جدًا - سايدبار وهيدر */
    --navy-2: #12203c;         /* كحلي ثانوي - شريط علوي/تفرعات */
    --navy-3: #1b2c4f;         /* كحلي أفتح قليلاً - حدود وحوّم */
    --gold: #c9a227;           /* ذهبي أساسي - تمييز وعناصر فعّالة */
    --gold-light: #e6c463;     /* ذهبي فاتح - نص/حدود على الكحلي */
    --gold-dark: #9c7a1a;

    --bg: #f1f3f6;             /* خلفية عامة */
    --surface: #ffffff;
    --text: #16213e;
    --text-muted: #5b6577;
    --border: #c7cdd9;         /* حدود أوضح من قبل */
    --border-strong: #9aa4b5;

    --success: #157a45;
    --warning: #b8590a;
    --danger: #b3211c;
    --danger-dark: #6e1512;
    --info: #1b4fbf;
}

/* ------------------------------------------------------------
   2) الخط العربي (Tajawal) — لا يشمل عناصر الأيقونات
   ------------------------------------------------------------ */
body, h1, h2, h3, h4, h5, h6, p, table, th, td,
.btn, .nav-text, label, input, select, textarea,
.form-control, .badge, .label, .box-header, .dropdown-menu,
.modal-title, .navbar-item {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
}

body, .app-body, .app-content {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* إصلاح اختلاط العربي والإنجليزي داخل الجداول والحقول (مثل WL-2026-MD-0004) */
.table td, .table th, .form-control, .box-header, .nav-text {
    unicode-bidi: plaintext;
}

/* ------------------------------------------------------------
   3) الشريط الجانبي + الهيدر العلوي — هوية موحّدة كحلي/ذهبي
   (كانا يبانان غير متناسقين: سايدبار غامق وهيدر أبيض منفصل)
   ------------------------------------------------------------ */
.app-aside .left.navside,
.app-header.white {
    background-color: var(--navy) !important;
    border-color: var(--navy-3) !important;
}
.app-aside .navbar.navbar-md {
    background-color: var(--navy-2) !important;
    border-bottom: 1px solid var(--navy-3);
}
.app-aside .navbar-brand span {
    color: var(--gold-light) !important;
    font-weight: 800;
}

.app-aside .nav-header small {
    color: var(--gold-light) !important;
    opacity: 0.75;
    font-weight: 700;
    letter-spacing: .3px;
}
.app-aside .nav > li > a {
    color: #c3cadb !important;
    border-right: 3px solid transparent;
}
.app-aside .nav > li > a:hover {
    background-color: rgba(201, 162, 39, 0.12) !important;
    color: #ffffff !important;
    border-right-color: var(--gold);
}
.app-aside .nav > li.active > a {
    background-color: rgba(201, 162, 39, 0.18) !important;
    color: var(--gold-light) !important;
    border-right-color: var(--gold) !important;
    font-weight: 700;
}
.app-aside .nav-icon i { opacity: 0.95; }
.app-aside .nav-sub { background-color: rgba(0,0,0,0.18); }

/* الهيدر العلوي: نص وأيقونات فاتحة بدل الرمادي الافتراضي */
.app-header .navbar-item, .app-header .nav-link, .app-header a {
    color: #e2e6ee !important;
}
.app-header .navbar-item#pageTitle {
    color: var(--gold-light) !important;
    font-weight: 800 !important;
}
.app-header .form-control {
    background-color: var(--navy-2) !important;
    border: 1px solid var(--navy-3) !important;
    color: #fff !important;
}
.app-header .form-control::placeholder { color: #9aa4b8 !important; }
.app-header .input-group-btn .btn.white {
    background-color: var(--navy-2) !important;
    color: #e2e6ee !important;
    border: 1px solid var(--navy-3) !important;
}
.app-header,
.app-header .navbar {
    box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
}

/* ------------------------------------------------------------
   4) بطاقات الإحصائيات في الشاشة الرئيسية (stat-card)
   ------------------------------------------------------------ */
.stat-card {
    border: 1px solid var(--border);
    border-radius: 14px !important;
    box-shadow: 0 3px 10px rgba(11, 18, 32, 0.08) !important;
}
.stat-card .icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem !important;
    margin-bottom: 12px !important;
}
.stat-card .icon.text-info { color: var(--info) !important; background: rgba(27, 79, 191, 0.12); }
.stat-card .icon.text-success { color: var(--success) !important; background: rgba(21, 122, 69, 0.12); }
.stat-card .icon.text-warning { color: var(--warning) !important; background: rgba(184, 89, 10, 0.12); }
.stat-card .icon.text-primary { color: var(--gold-dark) !important; background: rgba(201, 162, 39, 0.15); }
.stat-card h3 {
    font-weight: 800 !important;
    color: var(--navy) !important;
    font-size: 2rem !important;
}
.stat-card .progress-bar.primary { background-color: var(--gold) !important; }
.stat-card .progress-bar.info { background-color: var(--info) !important; }
.stat-card .progress-bar.success { background-color: var(--success) !important; }
.stat-card .progress-bar.warning { background-color: var(--warning) !important; }

/* ------------------------------------------------------------
   5) تصحيح ألوان بطاقات "السجلات والتراخيص"
   منتهية = أحمر غامق | 30 يوم = أحمر | 60 يوم = كهرماني | 90 يوم = أخضر
   ------------------------------------------------------------ */
.license-card.expired,
.license-card.expired::before {
    background: linear-gradient(135deg, var(--danger-dark), #3d0d0b) !important;
}
.license-card.days-30,
.license-card.days-30::before {
    background: linear-gradient(135deg, var(--danger), #8f1a16) !important;
}
.license-card.days-60,
.license-card.days-60::before {
    background: linear-gradient(135deg, var(--warning), #8a4108) !important;
}
.license-card.days-90,
.license-card.days-90::before {
    background: linear-gradient(135deg, var(--success), #0e5c33) !important;
}

/* ------------------------------------------------------------
   6) الجداول — رأس داكن واضح + خطوط فاصلة قوية
   ------------------------------------------------------------ */
.table thead th {
    background-color: var(--navy) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    border-bottom: 3px solid var(--gold) !important;
    border-left: 1px solid var(--navy-3) !important;
    padding: 13px 14px !important;
    vertical-align: middle !important;
    white-space: nowrap;
}
.table tbody td {
    padding: 12px 14px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--border) !important;
    border-left: 1px solid #eef0f4 !important;
    font-weight: 500;
}
.table tbody tr:nth-child(even) {
    background-color: #f7f8fa;
}
.table-hover tbody tr:hover {
    background-color: #fff6e0 !important;
}
.table.table-bordered {
    border: 1px solid var(--border-strong) !important;
}

/* ------------------------------------------------------------
   7) الأزرار — أكبر، ألوان مشبّعة، ظل واضح
   ------------------------------------------------------------ */
.btn {
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    font-size: 0.92rem !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12) !important;
    border: none !important;
}
.btn.btn-sm, .btn.p-x-sm {
    padding: 8px 12px !important;
    font-size: 0.95rem !important;
    min-width: 40px;
}
.btn.primary, .btn.info.header-btn { background-color: var(--info) !important; color: #fff !important; }
.btn.info { background-color: var(--info) !important; color: #fff !important; }
.btn.success { background-color: var(--success) !important; color: #fff !important; }
.btn.warn, .btn.warning { background-color: var(--warning) !important; color: #fff !important; }
.btn.danger { background-color: var(--danger) !important; color: #fff !important; }
.btn.accent { background-color: #6d3fc0 !important; color: #fff !important; }
.btn.blue-grey { background-color: var(--navy-3) !important; color: #fff !important; }
.btn.white {
    background-color: #ffffff !important;
    color: var(--navy) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: none !important;
}
.btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;
}
/* زر "إضافة" الأساسي بلون ذهبي مميز بدل الأخضر العام */
a.btn.primary[href*="create"], button#add_btn.btn.primary {
    background-color: var(--gold) !important;
    color: #1a1400 !important;
}

/* ------------------------------------------------------------
   8) الشارات (Badges) العامة — أوضح وأثقل
   (شارات "الأيام المتبقية" يتحكم بها custom-theme.js بألوان
   inline مباشرة ولا تتأثر بهذا الجزء)
   ------------------------------------------------------------ */
.badge, .label {
    border-radius: 20px !important;
    font-weight: 800 !important;
    padding: 4px 11px !important;
    font-size: 0.8rem !important;
}
.badge.warn, .label.warn { background-color: var(--warning) !important; color:#fff !important; }
.badge.success, .label.success { background-color: var(--success) !important; color:#fff !important; }
.badge.danger, .label.danger { background-color: var(--danger) !important; color:#fff !important; }
.badge.info, .label.info { background-color: var(--info) !important; color:#fff !important; }
.badge.blue, .label.blue { background-color: #2e5bb8 !important; color:#fff !important; }

/* ------------------------------------------------------------
   9) البطاقات العامة (box)
   ------------------------------------------------------------ */
.box {
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(11, 18, 32, 0.07) !important;
    border: 1px solid var(--border);
}
.box-header {
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 2px solid var(--gold) !important;
}
.box-header h3, .box-header h4 {
    font-weight: 800 !important;
    color: var(--navy) !important;
}

/* ------------------------------------------------------------
   10) تحسين عرض الجداول على الجوال
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    .table thead th, .table tbody td {
        font-size: 0.85rem !important;
        padding: 9px 10px !important;
        white-space: nowrap;
    }
    .licenses-cards { grid-template-columns: 1fr !important; }
    .compliance-cards .box { width: 100% !important; }
    .stat-card { text-align: center; }
}