/* =========================================
   Alborsagia Admin Dashboard - Clean Design
   تصميم لوحة التحكم النظيف
   ========================================= */

/* =========================================
   1. Google Fonts - Rubik
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

/* =========================================
   2. المتغيرات
   ========================================= */
:root {
    --admin-primary: #316595;
    --admin-primary-dark: #264d73;
    --admin-secondary: #10b981;
    --admin-accent: #f59e0b;
    --admin-danger: #ef4444;
    --admin-bg: #f1f5f9;
    --admin-text: #1e293b;
    --admin-text-light: #64748b;
    --admin-border: #e2e8f0;
    --admin-radius: 8px;
    --admin-transition: 0.2s ease;
}

/* =========================================
   Animations
   ========================================= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

/* =========================================
   3. الخط العام
   ========================================= */
body.wp-admin,
.wp-core-ui,
#adminmenu,
#adminmenu a,
#adminmenu .wp-submenu a,
.postbox,
.postbox-header h2,
.postbox .inside,
input,
select,
textarea,
button,
.rtl h1,
.rtl h2,
.rtl h3,
.rtl h4,
.rtl h5,
.rtl h6 {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* استثناء أيقونات Dashicons */
.dashicons,
.dashicons-before:before,
#adminmenu div.wp-menu-image:before,
#wpadminbar .ab-icon:before,
.wp-menu-image.dashicons-before:before {
    font-family: dashicons !important;
}

/* =========================================
   4. خلفية لوحة التحكم
   ========================================= */
body.wp-admin {
    background: var(--admin-bg) !important;
}

/* =========================================
   5. الشريط العلوي
   ========================================= */
#wpadminbar {
    background: var(--admin-primary) !important;
}

#wpadminbar .ab-item,
#wpadminbar a.ab-item {
    color: rgba(255, 255, 255, 0.9) !important;
}

#wpadminbar .ab-top-menu>li:hover>.ab-item {
    background: var(--admin-primary-dark) !important;
    color: #fff !important;
}

#wpadminbar .ab-submenu {
    background: #23282d !important;
}

/* تنسيق أيقونات الشريط العلوي */
#wpadminbar .ab-icon,
#wpadminbar .ab-item:before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before {
    font-size: 18px !important;
    line-height: 27px !important;
    height: 27px !important;
    vertical-align: middle !important;
}

/* =========================================
   6. القائمة الجانبية
   ========================================= */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
    background: #1e293b !important;
}

#adminmenu a {
    color: #cbd5e1 !important;
    font-size: 13px !important;
}

#adminmenu div.wp-menu-image:before {
    color: #94a3b8 !important;
}

/* Hover */
#adminmenu li.menu-top:hover,
#adminmenu li.opensub>a.menu-top {
    background: #334155 !important;
}

#adminmenu li.menu-top:hover a,
#adminmenu li.menu-top:hover div.wp-menu-image:before {
    color: #fff !important;
}

/* Active */
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
    background: var(--admin-primary) !important;
    color: #fff !important;
}

#adminmenu li.current div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu div.wp-menu-image:before {
    color: #fff !important;
}

/* Submenu */
#adminmenu .wp-submenu {
    background: #0f172a !important;
}

#adminmenu .wp-submenu a {
    color: #94a3b8 !important;
    font-size: 12px !important;
}

#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu li.current a {
    color: #fff !important;
}

/* Separator */
#adminmenu li.wp-menu-separator {
    background: #334155 !important;
    height: 1px !important;
}

/* Collapse Button */
#collapse-button {
    color: #94a3b8 !important;
}

/* =========================================
   7. العناوين
   ========================================= */
.wrap h1 {
    font-size: 23px !important;
    font-weight: 600 !important;
    color: var(--admin-text) !important;
}

/* =========================================
   8. الصناديق (Postbox)
   ========================================= */
.postbox {
    background: #fff !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.postbox-header {
    background: #fff !important;
    border-bottom: 1px solid var(--admin-border) !important;
}

.postbox-header h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--admin-text) !important;
}

.postbox .inside {
    background: #fff !important;
}

/* =========================================
   9. الأزرار
   ========================================= */
.wp-core-ui .button-primary {
    background: var(--admin-primary) !important;
    border-color: var(--admin-primary) !important;
    border-radius: var(--admin-radius) !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.wp-core-ui .button-primary:hover {
    background: var(--admin-primary-dark) !important;
    border-color: var(--admin-primary-dark) !important;
}

.wp-core-ui .button,
.wp-core-ui .button-secondary {
    border-radius: var(--admin-radius) !important;
    font-weight: 500 !important;
}

/* =========================================
   10. الحقول
   ========================================= */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--admin-primary) !important;
    box-shadow: 0 0 0 1px var(--admin-primary) !important;
    outline: none !important;
}

/* حقل العنوان */
#titlediv #title {
    font-size: 20px !important;
    font-weight: 500 !important;
    border-radius: var(--admin-radius) !important;
}

/* =========================================
   11. الجداول
   ========================================= */
.wp-list-table {
    border-collapse: separate;
    border-spacing: 0;
}

.wp-list-table thead th {
    font-weight: 600 !important;
    color: var(--admin-text) !important;
    background: #f8fafc !important;
    border-bottom: 2px solid var(--admin-border) !important;
}

.wp-list-table tbody tr:hover {
    background: rgba(49, 101, 149, 0.05) !important;
}

/* =========================================
   حالات المقالات (مسودة، معلق، مجدول...)
   ========================================= */
.post-state {
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.7 !important;
    white-space: nowrap !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
    background: rgba(49, 101, 149, 0.08) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(49, 101, 149, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 1px 3px rgba(49, 101, 149, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* مسودة - Draft */
.post-state-format {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

/* معلق - Pending */
.wp-list-table .row-title+.post-state[style*="color"] {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

/* =========================================
   12. التنبيهات - تصميم حديث مع أيقونات
   ========================================= */
.notice {
    border-radius: 0 0px 8px 8px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    padding: 16px 20px 16px 50px !important;
    position: relative !important;
    background: #fff !important;
    overflow: hidden !important;
}

/* شريط علوي ملون */
.notice::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--admin-primary);
}

/* أيقونة */
.notice::after {
    font-family: dashicons !important;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
}

/* Success */
.notice-success {
    background: linear-gradient(to left, rgba(16, 185, 129, 0.05), #fff) !important;
}

.notice-success::before {
    background: var(--admin-secondary);
}

.notice-success::after {
    content: '\f147';
    background: var(--admin-secondary);
}

/* Warning */
.notice-warning {
    background: linear-gradient(to left, rgba(245, 158, 11, 0.05), #fff) !important;
}

.notice-warning::after {
    content: '\f534';
    background: var(--admin-accent);
}

/* Error */
.notice-error {
    background: linear-gradient(to left, rgba(239, 68, 68, 0.05), #fff) !important;
}

.notice-error::before {
    background: var(--admin-danger);
}

.notice-error::after {
    content: '\f335';
    background: var(--admin-danger);
}

/* Info */
.notice-info {
    background: linear-gradient(to left, rgba(49, 101, 149, 0.05), #fff) !important;
}

.notice-info::before {
    background: var(--admin-primary);
}

.notice-info::after {
    content: '\f348';
    background: var(--admin-primary);
}

/* RTL */
body.rtl .notice {
    padding: 16px 50px 16px 20px !important;
}

body.rtl .notice::after {
    left: auto;
    right: 16px;
}

body.rtl .notice-success,
body.rtl .notice-warning,
body.rtl .notice-error,
body.rtl .notice-info {
    background: linear-gradient(to right, rgba(49, 101, 149, 0.05), #fff) !important;
}

/* =========================================
   13. منطقة النشر
   ========================================= */
#minor-publishing,
#major-publishing-actions {
    background: transparent !important;
}

/* =========================================
   14. إخفاء الفوتر
   ========================================= */
#wpfooter {
    display: none;
}

/* =========================================
   15. إصلاح أيقونات الشريط العلوي
   ========================================= */
#wpadminbar .ab-icon,
#wpadminbar .ab-item:before,
#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon:before {
    font-family: dashicons !important;
    color: rgba(255, 255, 255, 0.9) !important;
    filter: brightness(0) invert(1) !important;
}

#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon {
    width: 30px !important;
}

#wpadminbar .ab-icon:before {
    font-size: 20px !important;
    line-height: 1 !important;
}

#wpadminbar #wp-admin-bar-site-name>.ab-item:before {
    content: "\f226" !important;
    font-family: dashicons !important;
}

#wpadminbar #wp-admin-bar-comments .ab-icon:before {
    content: "\f101" !important;
}

#wpadminbar #wp-admin-bar-new-content .ab-icon:before {
    content: "\f132" !important;
}

/* =========================================
   16. الويدجات في المحرر التقليدي (Metaboxes)
   ========================================= */
/* تصميم موحد للويدجات */
#postbox-container-1 .postbox,
#postbox-container-2 .postbox,
#side-sortables .postbox,
#normal-sortables .postbox,
#advanced-sortables .postbox {
    background: #fff !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 16px !important;
    overflow: hidden;
}

/* ترويسة الويدجت */
#postbox-container-1 .postbox-header,
#postbox-container-2 .postbox-header,
.postbox .postbox-header {
    background: linear-gradient(to bottom, #f8fafc, #fff) !important;
    border-bottom: 1px solid var(--admin-border) !important;
    padding: 12px 16px !important;
}

.postbox-header h2,
.postbox-header .hndle {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--admin-text) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.postbox-header .hndle {
    justify-content: flex-start !important;
}

/* أيقونة السحب */
.postbox .handle-order-higher,
.postbox .handle-order-lower {
    color: var(--admin-text-light) !important;
}

/* زر التبديل */
.postbox .handlediv,
.postbox .toggle-indicator {
    color: var(--admin-text-light) !important;
}

.postbox .handlediv:hover {
    color: var(--admin-primary) !important;
}

/* محتوى الويدجت */
.postbox .inside {
    padding: 16px !important;
    background: #fff !important;
}

/* =========================================
   17. ويدجت النشر (Publish)
   ========================================= */
#submitdiv .inside {
    padding: 0 !important;
}

#minor-publishing {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--admin-border) !important;
}

#misc-publishing-actions {
    padding: 8px 16px !important;
}

#misc-publishing-actions .misc-pub-section {
    padding: 8px 0 !important;
    border-bottom: 1px dashed var(--admin-border);
}

#misc-publishing-actions .misc-pub-section:last-child {
    border-bottom: none;
}

#major-publishing-actions {
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border-top: 1px solid var(--admin-border) !important;
}

/* زر النشر */
#publish {
    padding: 6px 24px !important;
    height: auto !important;
    line-height: 1.6 !important;
}

/* =========================================
   18. ويدجت التصنيفات والوسوم
   ========================================= */
#categorydiv .inside,
#tagsdiv-post_tag .inside {
    padding: 12px 16px !important;
}

.categorydiv .tabs-panel {
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius) !important;
    background: #fafafa !important;
}

/* حقل إضافة الوسوم */
.tagsdiv .newtag {
    border-radius: var(--admin-radius) !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

/* قائمة الوسوم المختارة */
.tagchecklist {
    margin-top: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.tagchecklist li {
    display: inline-flex !important;
    align-items: center !important;
    background: #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    color: var(--admin-text) !important;
    margin: 0 !important;
}

.tagchecklist span {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* زر الحذف X */
.tagchecklist .ntdelbutton {
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 50% !important;
    color: var(--admin-text-light) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    cursor: pointer !important;

}

.tagchecklist .ntdelbutton:hover {
    background: var(--admin-danger) !important;
    color: #fff !important;
}

/* زر إظهار الوسوم الشائعة */
.tagcloud-link {
    color: var(--admin-primary) !important;
}

/* =========================================
   19. ويدجت الصورة البارزة
   ========================================= */
#postimagediv .inside {
    padding: 16px !important;
}

/* رابط تعيين الصورة البارزة */
#postimagediv .inside a.thickbox,
#set-post-thumbnail {
    display: block !important;
    padding: 20px !important;
    background: #f8fafc !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: var(--admin-radius) !important;
    color: var(--admin-text-light) !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

#postimagediv .inside a.thickbox:hover,
#set-post-thumbnail:hover {
    border-color: var(--admin-primary) !important;
    color: var(--admin-primary) !important;
    background: rgba(49, 101, 149, 0.03) !important;
}

/* الصورة المختارة */
#postimagediv .inside img,
.editor-post-featured-image img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--admin-radius) !important;
    display: block !important;
    margin: 0 auto 12px !important;
}

/* رابط إزالة الصورة */
#remove-post-thumbnail {
    display: inline-block !important;
    margin-top: 8px !important;
    color: var(--admin-danger) !important;
    font-size: 12px !important;
}

/* =========================================
   20. ويدجت ملخص المقال
   ========================================= */
#postexcerpt .inside textarea {
    width: 100% !important;
    min-height: 100px !important;
    border-radius: var(--admin-radius) !important;
}

/* =========================================
   21. ويدجت المناقشة
   ========================================= */
#commentstatusdiv .inside {
    padding: 12px 16px !important;
}

#commentstatusdiv label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

/* =========================================
   22. ويدجت SEO (Yoast/RankMath)
   ========================================= */
#wpseo_meta .inside,
#rank_math_metabox .inside {
    padding: 0 !important;
}

/* =========================================
   23. تحسينات إضافية للمحرر التقليدي
   ========================================= */
/* محرر النص */
#wp-content-wrap {
    border: 1px solid var(--admin-border) !important;
    border-radius: var(--admin-radius) !important;
    overflow: hidden;
}

.wp-editor-tabs {
    background: #f8fafc !important;
}

.wp-switch-editor {
    border-radius: var(--admin-radius) var(--admin-radius) 0 0 !important;
    background: #fff !important;
    border: 1px solid var(--admin-border) !important;
}

.wp-switch-editor.switch-tmce:focus,
.wp-switch-editor.switch-html:focus {
    box-shadow: none !important;
}

.html-active .switch-html,
.tmce-active .switch-tmce {
    background: var(--admin-primary) !important;
    color: #fff !important;
    border-color: var(--admin-primary) !important;
}

/* شريط أدوات المحرر */
.mce-toolbar-grp {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--admin-border) !important;
}

/* =========================================
   24. تحسين Dashboard Widgets
   ========================================= */
#dashboard-widgets .postbox {
    margin-bottom: 20px !important;
}

#dashboard-widgets .postbox-header {
    background: #fff !important;
}

/* Welcome Panel */
.welcome-panel {
    background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-primary-dark) 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
}

.welcome-panel h2,
.welcome-panel p,
.welcome-panel a {
    color: #fff !important;
}

.welcome-panel .welcome-panel-column-container {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--admin-radius) !important;
    margin: 16px !important;
    padding: 16px !important;
}

/* =========================================
   25. تحسين Checkbox و Radio
   ========================================= */
/* إبقاء الشكل الافتراضي مع تحسينات طفيفة */
input[type="checkbox"],
input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

/* =========================================
   26. تحسين Dropdown/Select
   ========================================= */
select {
    padding: 6px 12px !important;
    min-height: 36px !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%2364748b" d="M6 8L1 3h10z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    background-size: 10px !important;
    padding-left: 30px !important;
    margin-bottom: 10px;
}

/* =========================================
   27. Screen Options & Help
   ========================================= */
#screen-meta-links .show-settings {
    border-radius: 0 0 var(--admin-radius) var(--admin-radius) !important;
}

#screen-meta {
    background: #fff !important;
    border-bottom: 1px solid var(--admin-border) !important;
}

/* إخفاء زر المساعدة */
#contextual-help-link-wrap {
    display: none !important;
}

/* =========================================
   28. Animations & Transitions
   ========================================= */

/* Animation للصناديق (Postboxes) */
.postbox {
    animation: fadeIn 0.4s ease forwards;
}

/* تأخير متسلسل للصناديق */
#postbox-container-1 .postbox:nth-child(1) {
    animation-delay: 0.1s;
}

#postbox-container-1 .postbox:nth-child(2) {
    animation-delay: 0.15s;
}

#postbox-container-1 .postbox:nth-child(3) {
    animation-delay: 0.2s;
}

#postbox-container-1 .postbox:nth-child(4) {
    animation-delay: 0.25s;
}

#postbox-container-1 .postbox:nth-child(5) {
    animation-delay: 0.3s;
}

#postbox-container-2 .postbox:nth-child(1) {
    animation-delay: 0.05s;
}

#postbox-container-2 .postbox:nth-child(2) {
    animation-delay: 0.1s;
}

#postbox-container-2 .postbox:nth-child(3) {
    animation-delay: 0.15s;
}

/* Hover effect للصناديق */
.postbox:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px);
}

/* Transition للأزرار */
.wp-core-ui .button,
.wp-core-ui .button-primary,
.wp-core-ui .button-secondary {
    transition: all var(--admin-transition) !important;
}

.wp-core-ui .button-primary:hover {
    transform: translateY(-1px);
}

/* Animation للقائمة الجانبية */
#adminmenu li.menu-top {
    animation: slideInRight 0.3s ease forwards;
    opacity: 0;
}

#adminmenu li.menu-top:nth-child(1) {
    animation-delay: 0.05s;
}

#adminmenu li.menu-top:nth-child(2) {
    animation-delay: 0.08s;
}

#adminmenu li.menu-top:nth-child(3) {
    animation-delay: 0.11s;
}

#adminmenu li.menu-top:nth-child(4) {
    animation-delay: 0.14s;
}

#adminmenu li.menu-top:nth-child(5) {
    animation-delay: 0.17s;
}

#adminmenu li.menu-top:nth-child(6) {
    animation-delay: 0.2s;
}

#adminmenu li.menu-top:nth-child(7) {
    animation-delay: 0.23s;
}

#adminmenu li.menu-top:nth-child(8) {
    animation-delay: 0.26s;
}

#adminmenu li.menu-top:nth-child(9) {
    animation-delay: 0.29s;
}

#adminmenu li.menu-top:nth-child(10) {
    animation-delay: 0.32s;
}

#adminmenu li.menu-top:nth-child(n+11) {
    animation-delay: 0.35s;
}

/* Transition للقائمة */
#adminmenu li.menu-top a {
    transition: all var(--admin-transition) !important;
}

#adminmenu li.menu-top:hover {
    transform: translateX(3px);
}

/* Transition للحقول */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea {
    transition: all var(--admin-transition) !important;
}

input:focus,
select:focus,
textarea:focus {
    transform: scale(1.01);
}

/* Transition للجداول */
.wp-list-table tbody tr {
    transition: background var(--admin-transition) !important;
}

/* Transition للتنبيهات */
.notice {
    animation: fadeIn 0.4s ease forwards;
}

/* Loading animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Smooth scrollbar */
* {
    scroll-behavior: smooth;
}