/* ==============================================
   POSitive ERP Desk Theme (Combined)
   - Global theme, navbar, search, icons, layout
   - ملاحظة: تصميم السايدبار انتقل إلى positive_sidebar.css
   ============================================== */


/* 1️⃣ تعريف خط Tajawal واستخدامه في كل الواجهة */
@font-face {
  font-family: 'Tajawal';
  src: url('/assets/positive_erp/fonts/Tajawal-Regular.ttf') format('truetype'),
    url('/assets/positive_erp/fonts/Tajawal-Medium.ttf') format('truetype'),
    url('/assets/positive_erp/fonts/Tajawal-Bold.ttf') format('truetype'),
    url('/assets/positive_erp/fonts/Tajawal-Black.ttf') format('truetype'),
    url('/assets/positive_erp/fonts/Tajawal-Light.ttf') format('truetype'),
    url('/assets/positive_erp/fonts/Tajawal-ExtraBold.ttf') format('truetype'),
    url('/assets/positive_erp/fonts/Tajawal-ExtraLight.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---- POS: compact cards + denser grid (Tailwind override) ---- */
.grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.xl\:grid-cols-5.gap-4 {
  gap: 12px !important;
}

.interactive-card.h-60 {
  height: 12rem !important;
}

.interactive-card .p-4,
.interactive-card .p-3 {
  padding: 10px !important;
}

.interactive-card .text-base {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}

.interactive-card .text-sm {
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
}

.interactive-card {
  border-radius: 12px !important;
}




/* 2️⃣ خلفية عامة هادئة */
html {
  background-color: #f7f9f7;
}

/* 3️⃣ فرض خط Tajawal على أهم عناصر الواجهة */
body,
html,
.desk-container,
.desk-sidebar,
.page-wrapper,
.layout-main,
.layout-main-section,
.form-control,
input,
select,
textarea,
.modal,
.dialog,
.widget,
.standard-sidebar-section,
.sidebar-item,
.sidebar-item-label,
.navbar,
.btn,
button {
  font-family: 'Tajawal', sans-serif !important;
}

/* 4️⃣ إزالة خلفية الـ page-head والـ shadow الافتراضي */
.page-head {
  background: transparent !important;
  box-shadow: none !important;
}

/* 5️⃣ خلفية عامة للجسم باستخدام متغيّر brand-bg */
.page-container,
body {
  /* background: #ffffff !important; */
  background: var(--brand-bg) !important;
}

/* 6️⃣ متغيّرات الثيم العامة (ألوان وتحجيم التخطيط) */
:root,
[data-theme="light"] {
  --control-bg: #fdcb0112;
  --disabled-control-bg: #fdcb0112;
  --card-shadow: #ffffff;
  --control-bg-on-gray: #fdcb0112;
  --bg-color: #ffffff;
  --dark-green-avatar-color: #091239;
  --primary-color: #081c09;

  /* مقاسات تخطيط سطح المكتب */
  --sidebar-w: 260px;
  /* عرض السايدبار */
  --layout-pad-x: 24px;
  /* الهوامش يمين/يسار المحتوى */

  [data-theme="light"] {
    --brand-bg: #02150c;
    /* الخلفية الغامقة الأساسية */
    --brand-accent: #00c853;
    /* الأخضر الأساسي */
    --brand-soft: #eaffe9;
    /* الأخضر الفاتح للكروت */
  }

  /* 7️⃣ تنسيق الحقول (inputs) في الفورمات */
  .form-control {
    border: 1px solid #d1d8dd;
    border-radius: 20px;
    padding: 5px 20px;
    font-size: 14px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .form-control:focus {
    color: var(--text-color);
    background-color: var(--control-bg);
    outline: 0;
    border-color: #80bdff;
    box-shadow:
      inset 0 1px 2px rgba(0, 0, 0, 0.075),
      0 0 8px rgba(128, 189, 255, 0.6);
  }

  /* 8️⃣ عدد الوثائق/التقارير في form links كـ badge صغيرة */
  .form-links .document-link .document-link-badge .count,
  .form-links .document-link .report-link-badge .count {
    font-size: var(--text-xs);
    background-color: #114871;
    border-radius: var(--border-radius-sm);
    color: var(--gray-50);
    padding: 0 var(--padding-xs);
    margin-right: var(--margin-xs);
  }

  /* ================================
     Navbar – Positive Identity
     ================================ */

  /* 9️⃣ إعدادات عامة للـ Navbar (خلفية شفافة + بدون shadow) */
  header.navbar.navbar-expand {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 16px !important;
    margin-left: 0 !important;
    /* ما في margin يسار ثابت */
    margin-right: 0 !important;
  }

  /* 🔟 صندوق أبيض يحتضن محتوى الـ Navbar */
  header.navbar.navbar-expand>.container {
    background: #ffffff !important;
    border-radius: 6px !important;
    height: 64px !important;
    box-shadow: 0px 2px 8px rgb(47 43 61 / 0.12);
    position: relative;
    overflow: visible;
  }

  /* 1️⃣1️⃣ توحيد عرض الـ Navbar مع الـ Page Body على الشاشات الكبيرة */
  @media (min-width: 1200px) {

    /* نفس المقاس والموقع للمحتوى والنافبار:
       - يبدأ بعد السايدبار
       - ينتهي قبل حافة الشاشة بنفس المسافة */
    .container.page-body,
    header.navbar.navbar-expand>.container {
      max-width: none !important;
      width: calc(100% - var(--sidebar-w) - (2 * var(--layout-pad-x))) !important;
      margin-left: calc(var(--sidebar-w) + var(--layout-pad-x)) !important;
      margin-right: var(--layout-pad-x) !important;
    }
  }

  /* 1️⃣2️⃣ بطاقات الـ Workspaces (مربعات بيضاء بظل خفيف) */
  [data-page-route=Workspaces] .layout-main .layout-main-section {
    padding: var(--padding-md);
    margin-bottom: var(--margin-sm);
    box-shadow: 0px 3px 12px rgb(47 43 61 / 0.14);
    border-radius: 6px;
  }

  /* 1️⃣3️⃣ إخفاء اللوجو الافتراضي في الهيدر */
  header.navbar.navbar-expand .navbar-brand.navbar-home {
    display: none !important;
  }

  /* 1️⃣4️⃣ توزيع شريط البحث + الأيقونات داخل الـ Navbar */
  header.navbar .collapse.navbar-collapse {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    gap: 16px;
  }

  /* 1️⃣5️⃣ جعل الفورم (البحث) يأخذ أغلب عرض الـ Navbar */
  header.navbar form[role="search"].form-inline.fill-width {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
    margin-inline-end: 0;
  }

  /* 1️⃣6️⃣ حاوية شريط البحث بدون حدود أو خلفية إضافية */
  header.navbar .search-bar {
    position: relative;
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* 1️⃣7️⃣ حقل البحث – طويل ومستدير مع ظل */
  #navbar-search {
    width: 100%;
    height: 44px !important;
    border-radius: 999px !important;
    border: none !important;
    outline: none !important;
    padding-left: 44px !important;
    padding-right: 16px !important;
    font-size: 14px;
    color: #02150c;
    background-color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
  }

  #navbar-search::placeholder {
    color: #7c8a80;
  }

  /* 1️⃣8️⃣ أيقونة البحث داخل خانة البحث */
  header.navbar .search-bar .search-icon {
    position: absolute;
    left: 14px !important;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #4b5c52;
  }

  header.navbar .search-bar .search-icon .icon-sm {
    width: 18px;
    height: 18px;
  }

  /* 1️⃣9️⃣ إزالة ستايل awesomplete الداخلي من input */
  header.navbar .search-bar .awesomplete input.form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #02150c !important;
    -webkit-text-fill-color: #02150c !important;
    caret-color: #02150c !important;
    opacity: 1 !important;
  }

  header.navbar .search-bar .awesomplete {
    position: relative;
    display: block;
    width: 100%;
  }

  header.navbar .search-bar .awesomplete > ul,
  header.navbar .search-bar .awesomplete > [role="listbox"] {
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
  }

  .search-bar input[type="text"] {
    padding-left: 42px !important;
    color: #02150c !important;
    -webkit-text-fill-color: #02150c !important;
    caret-color: #02150c !important;
    opacity: 1 !important;
  }

  /* ================================
     Navbar Icons (لغة، ثيم، جرس...)
     ================================ */

  /* 2️⃣0️⃣ تنسيق مجموعة الأيقونات في يمين الـ Navbar */
  header.navbar .nav {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-right: 0;
    flex: 0 0 auto !important;
    flex-wrap: nowrap;
    margin-left: 0 !important;
    min-width: max-content;
  }


  /* 2️⃣1️⃣ شكل الأيقونات الدائرية */
  header.navbar .navbar-nav .nav-item>.nav-link,
  header.navbar .navbar-nav .nav-item>button.nav-link {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 2px;
    background: transparent;
    border: none;
    color: #02150c !important;
  }

  header.navbar .navbar-nav .es-icon.icon-sm,
  header.navbar .navbar-nav .icon.icon-sm {
    width: 18px;
    height: 18px;
    filter: none !important;
    color: #02150c;
  }

  header.navbar .navbar-nav .vertical-bar {
    width: 1px;
    height: 22px;
    background: rgba(2, 21, 12, 0.28);
    margin: 0 4px;
  }

  header.navbar .navbar-nav {
    gap: 8px;
  }

  header.navbar .navbar-nav > .nav-item {
    margin: 0 !important;
  }

  header.navbar .navbar-nav .nav-item > .nav-link,
  header.navbar .navbar-nav .nav-item > button.nav-link,
  .positive-lang-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 14px !important;
    border: 1px solid rgba(8, 28, 9, 0.06);
    background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%) !important;
    box-shadow: 0 10px 24px rgba(8, 28, 9, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
      background-color 0.18s ease;
  }

  header.navbar .navbar-nav .nav-item > .nav-link:hover,
  header.navbar .navbar-nav .nav-item > button.nav-link:hover,
  .positive-lang-toggle:hover,
  .dropdown-notifications.show .notifications-icon {
    transform: translateY(-1px);
    border-color: rgba(18, 200, 100, 0.16);
    background: linear-gradient(180deg, #ffffff 0%, #eef8f1 100%) !important;
    box-shadow: 0 14px 26px rgba(8, 28, 9, 0.12);
  }

  /* ================================
     User Avatar in Navbar
     ================================ */

  /* 2️⃣2️⃣ شكل صورة المستخدم في الـ Navbar */
  .dropdown-navbar-user .avatar.avatar-medium {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    position: relative;
    box-shadow: 0 10px 22px rgba(18, 200, 100, 0.18);
  }

  .dropdown-navbar-user .avatar-frame.standard-image {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: linear-gradient(135deg, #16d46a 0%, #0ba44f 100%);
    color: #ffffff !important;
    position: relative;
  }

  .dropdown-navbar-user .avatar-frame.standard-image::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #00c853;
    border: 2px solid #ffffff;
    bottom: 0;
    right: -1px;
  }

  .positive-lang-toggle-item {
    display: flex;
    align-items: center;
  }

  .positive-lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #0a2a13;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 0.06em;
  }

  .positive-lang-toggle__icon {
    display: none !important;
  }

  .positive-lang-toggle__icon svg {
    display: none !important;
  }

  .positive-lang-toggle__badge {
    position: static;
    min-width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0a8a49;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    box-shadow: none;
  }

  /* 2️⃣3️⃣ إخفاء بعض عناصر المساعدة غير الضرورية */
  .nav-item.dropdown.dropdown-help.dropdown-mobile.d-none.d-lg-block,
  .dropdown-help.dropdown-mobile {
    display: none !important;
  }

  .nav.navbar-nav li a::before {
    filter: none !important;
  }

  /* ================================
     Notifications Dropdown
     ================================ */

  .dropdown-notifications .notifications-icon {
    color: #234230 !important;
  }

  .dropdown-notifications .notifications-list.dropdown-menu {
    width: min(440px, calc(100vw - 32px)) !important;
    margin-top: 14px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(8, 28, 9, 0.08) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%) !important;
    box-shadow: 0 24px 54px rgba(8, 28, 9, 0.16) !important;
  }

  .dropdown-notifications .notification-list-header {
    padding: 18px 18px 14px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4faf5 100%) !important;
    border-bottom: 1px solid rgba(8, 28, 9, 0.06);
  }

  .dropdown-notifications .header-items,
  .dropdown-notifications .header-actions {
    display: flex;
    align-items: center;
  }

  .dropdown-notifications .notification-item-tabs {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none !important;
  }

  .dropdown-notifications .notification-item-tabs .notifications-category {
    list-style: none;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(8, 28, 9, 0.04);
    color: #5d7062;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
  }

  .dropdown-notifications .notification-item-tabs .notifications-category.active {
    background: linear-gradient(135deg, #12c864 0%, #0a8a49 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(18, 200, 100, 0.22);
  }

  .dropdown-notifications .header-actions {
    gap: 8px;
    margin-left: auto;
  }

  .dropdown-notifications .header-actions > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(8, 28, 9, 0.06);
    color: #2b4733;
    transition: all 0.18s ease;
    cursor: pointer;
  }

  .dropdown-notifications .header-actions > span:hover {
    background: #f0faf2;
    border-color: rgba(18, 200, 100, 0.2);
    color: #0a8a49;
  }

  .dropdown-notifications .notification-list-body {
    max-height: 70vh;
    overflow: auto;
    padding: 10px 10px 12px;
  }

  .dropdown-notifications .panel-notifications,
  .dropdown-notifications .panel-events,
  .dropdown-notifications .panel-changelog-feed {
    padding: 0 !important;
  }

  .dropdown-notifications .recent-item.notification-item {
    display: block;
    margin-bottom: 8px;
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(8, 28, 9, 0.06);
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .dropdown-notifications .recent-item.notification-item:hover {
    transform: translateY(-1px);
    border-color: rgba(18, 200, 100, 0.2);
    box-shadow: 0 12px 24px rgba(8, 28, 9, 0.08);
  }

  .dropdown-notifications .recent-item.notification-item.unread {
    background: linear-gradient(180deg, #ffffff 0%, #f3fbf5 100%);
    border-color: rgba(18, 200, 100, 0.14);
  }

  .dropdown-notifications .notification-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .dropdown-notifications .notification-body .avatar.avatar-medium {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(18, 200, 100, 0.12);
  }

  .dropdown-notifications .notification-body .message {
    flex: 1;
    min-width: 0;
    color: #20382a;
    font-size: 13px;
    line-height: 1.55;
  }

  .dropdown-notifications .notification-body .message strong {
    font-weight: 800;
    color: #102c18;
  }

  .dropdown-notifications .notification-timestamp {
    margin-top: 6px;
    font-size: 11px;
    color: #7b8f81 !important;
  }

  .dropdown-notifications .mark-as-read {
    width: 10px;
    height: 10px;
    margin-top: 2px;
    margin-left: auto;
    border-radius: 999px;
    background: linear-gradient(135deg, #12c864 0%, #0a8a49 100%);
    box-shadow: 0 0 0 4px rgba(18, 200, 100, 0.08);
  }

  .dropdown-notifications .list-footer {
    display: block;
    margin-top: 8px;
    text-decoration: none !important;
  }

  .dropdown-notifications .full-log-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f2faf4 0%, #e8f7ec 100%);
    color: #0a8a49;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid rgba(18, 200, 100, 0.12);
  }

  .dropdown-notifications .notification-null-state {
    padding: 26px 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px dashed rgba(8, 28, 9, 0.12);
  }

  .dropdown-notifications .notification-null-state .title {
    margin-top: 10px;
    color: #173722;
    font-weight: 800;
  }

  .dropdown-notifications .notification-null-state .subtitle {
    margin-top: 6px;
    color: #7b8f81;
    font-size: 12px;
    line-height: 1.5;
  }

  /* ================================
     Page-head alignment
     ================================ */

  /* 2️⃣4️⃣ محاذاة محتوى رأس الصفحة لليسار مع مساحة داخلية */
  .row.flex.align-center.page-head-content.justify-between {
    justify-content: flex-start !important;
    padding-left: 2rem !important;
    width: 100% !important;
  }

  .page-head>.container {
    max-width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }


  /* ================================
     Fix: content width on Doctype pages
     ================================ */
  @media (min-width: 1200px) {


    /* 2️⃣8️⃣ صفحات الدوكتايب (List / Form / Report ...) بعرض متساوي يمين ويسار */
    body:not([data-route^="Workspaces/"]) .container.page-body,
    body:not([data-route^="Workspaces/"]) header.navbar.navbar-expand>.container {
      max-width: 100% !important;
      width: calc(100% - 2 * var(--layout-pad-x)) !important;
      margin-left: var(--layout-pad-x) !important;
      margin-right: var(--layout-pad-x) !important;
    }

    /* 2️⃣9️⃣ جعل الـ layout-main-section يستخدم عرض الكونتينر بالكامل */
    body .layout-main-section {
      width: 100% !important;
    }

    /* 3️⃣0️⃣ إزالة ::before القديم للّوجو (علشان نعتمد على العنصر الحقيقي) */
    header.navbar.navbar-expand>.container::before {
      content: none !important;
    }

    /* 3️⃣1️⃣ اللوجو الحقيقي في الهيدر (معتمد على .positive-logo-hit-area من الجافاسكربت) */
    header.navbar.navbar-expand>.container .positive-logo-hit-area {
      position: relative;
      display: inline-block;
      flex: 0 0 auto;
      width: 56px;
      height: 40px;
      margin-inline-start: 16px;
      margin-inline-end: 12px;
      vertical-align: middle;
      background: url("/assets/positive_erp/icons/POSitive-logo.png") no-repeat center;
      background-size: contain;
      cursor: pointer;
    }

  }

}

/* نهاية بلوك :root / [data-theme="light"] */