#externalDirectoryView{--directory-radius:var(--fluid-radius,16px);--directory-shadow:0 6px 18px rgba(60,44,21,.10)} .external-directory-shell{margin-top:18px;width:100%} .external-directory-toolbar{display:grid;grid-template-columns:minmax(280px,2fr) minmax(210px,1fr) auto;gap:var(--fluid-gap,14px);align-items:end;background:var(--ops-panel);border:1.5px solid #c8b99a;border-radius:var(--directory-radius);padding:clamp(14px,1.4vw,20px);margin-bottom:var(--fluid-gap,14px);box-shadow:var(--directory-shadow)} html[data-theme="dark"] .external-directory-toolbar{border-color:var(--ops-line);box-shadow:0 8px 22px rgba(0,0,0,.18)} .external-directory-toolbar .filter-group{display:flex;flex-direction:column;gap:7px;min-width:0} .external-directory-toolbar .filter-label{font-size:clamp(18px,1.2vw,22px);font-weight:900;color:var(--ops-text);line-height:1.2} .external-directory-toolbar .search-box,.external-directory-toolbar .select-box{width:100%;min-height:48px;border:1.5px solid var(--ops-line);border-radius:12px;background:var(--ops-panel);color:var(--ops-text);padding:10px 14px;font-family:inherit;font-size:clamp(17px,1.08vw,20px);font-weight:800;outline:none;box-shadow:inset 0 1px 2px rgba(15,23,42,.04);transition:border-color .16s,box-shadow .16s,background .16s} .external-directory-toolbar .select-box{appearance:none;-webkit-appearance:none;padding-left:44px;background-image:linear-gradient(45deg,transparent 50%,var(--ops-muted) 50%),linear-gradient(135deg,var(--ops-muted) 50%,transparent 50%);background-position:20px 20px,14px 20px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;cursor:pointer} .external-directory-toolbar .search-box:hover,.external-directory-toolbar .select-box:hover{border-color:#b8a98a} .external-directory-toolbar .search-box:focus,.external-directory-toolbar .select-box:focus{border-color:var(--srca-navy);box-shadow:0 0 0 3px rgba(16,35,61,.12)} html[data-theme="dark"] .external-directory-toolbar .search-box,html[data-theme="dark"] .external-directory-toolbar .select-box{background:#10223a;border-color:var(--ops-line);color:#f8fafc} html[data-theme="dark"] .external-directory-toolbar .search-box:focus,html[data-theme="dark"] .external-directory-toolbar .select-box:focus{border-color:#4a9fd4;box-shadow:0 0 0 3px rgba(74,159,212,.18)} .external-directory-toolbar #externalDirectoryReset{min-height:48px;border-radius:12px;padding-inline:18px;align-self:end} .external-directory-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fluid-gap,14px);margin-bottom:var(--fluid-gap,14px)} .external-directory-summary>div{background:var(--ops-panel);border:1.5px solid #c8b99a;border-radius:var(--directory-radius);padding:clamp(13px,1.2vw,18px);text-align:center;box-shadow:var(--directory-shadow);min-width:0} html[data-theme="dark"] .external-directory-summary>div{border-color:var(--ops-line);box-shadow:0 8px 22px rgba(0,0,0,.15)} .external-directory-summary strong{display:block;color:var(--srca-green);font-size:clamp(28px,2.1vw,40px);line-height:1;font-weight:900;direction:ltr} .external-directory-summary span{display:block;color:var(--ops-muted);font-size:clamp(15px,1vw,18px);font-weight:800;margin-top:7px} .external-directory-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--fluid-gap,14px);margin-bottom:clamp(16px,1.5vw,24px)} .external-category{border:1.5px solid #c8b99a;background:linear-gradient(180deg,var(--ops-panel) 0%,#f7f0e6 100%);color:var(--ops-text);border-radius:var(--directory-radius);padding:clamp(14px,1.3vw,19px);cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;text-align:right;transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:var(--directory-shadow);font-family:inherit;min-height:112px;align-content:center} .external-category:hover{transform:translateY(-2px);border-color:#b8a98a;box-shadow:0 12px 28px rgba(60,44,21,.16)} .external-category.active{background:linear-gradient(180deg,var(--srca-navy),var(--srca-navy-2));color:#fff!important;border-color:var(--srca-orange)!important;box-shadow:0 10px 24px rgba(16,35,61,.24)} html[data-theme="dark"] .external-category{background:linear-gradient(180deg,#152b45,#10223a);border-color:var(--ops-line);box-shadow:none} html[data-theme="dark"] .external-category:hover{border-color:#4a6b8f;box-shadow:0 10px 24px rgba(0,0,0,.22)} html[data-theme="dark"] .external-category.active{background:linear-gradient(180deg,#173759,#10233d)} .external-category>span{grid-row:1/3;font-size:32px;align-self:center}.external-category strong{align-self:end;font-size:clamp(18px,1.2vw,22px);font-weight:900;line-height:1.25}.external-category small{color:var(--ops-muted);font-size:clamp(15px,1vw,18px);font-weight:900;direction:rtl}.external-category.active small{color:#f3e5c8} .external-directory-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:var(--fluid-gap,14px)} .external-contact-card{background:var(--ops-panel);border:1.5px solid #c8b99a;border-radius:var(--directory-radius);padding:clamp(14px,1.3vw,19px);box-shadow:var(--directory-shadow);display:flex;flex-direction:column;min-width:0;overflow:hidden} html[data-theme="dark"] .external-contact-card{border-color:var(--ops-line);box-shadow:0 8px 22px rgba(0,0,0,.15)} .external-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid var(--ops-line);padding-bottom:12px}.external-card-head>div{min-width:0}.external-card-head h3{margin:0 0 5px;font-size:clamp(19px,1.25vw,23px);font-weight:900;line-height:1.35;color:var(--ops-text)}.external-card-head>div>span{font-size:clamp(14px,.95vw,17px);color:var(--ops-muted);font-weight:800} .external-status{align-self:flex-start!important;background:rgba(0,132,61,.12);color:var(--srca-green)!important;border:1px solid rgba(0,132,61,.24);padding:5px 9px;border-radius:999px;font-size:13px;font-weight:900;white-space:nowrap}.external-status-muted{background:rgba(111,102,92,.10);color:var(--ops-muted)!important;border-color:var(--ops-line)} .external-card-body{display:grid;gap:10px;padding:14px 0;flex:1}.external-field{display:grid;grid-template-columns:86px minmax(0,1fr);gap:9px;align-items:start;font-size:clamp(16px,1.02vw,19px);line-height:1.5}.external-field strong{color:var(--srca-navy);font-weight:900}html[data-theme="dark"] .external-field strong{color:#93c5fd}.external-field a{overflow-wrap:anywhere;color:var(--srca-blue)} .external-phone-list{display:flex;gap:7px;flex-wrap:wrap}.external-phone{border:1.5px solid var(--ops-line)!important;background:var(--ops-bg)!important;border-radius:10px!important;padding:7px 10px!important;cursor:pointer;color:var(--ops-text)!important;font-family:inherit;font-size:16px;font-weight:900!important;direction:ltr;box-shadow:none!important}.external-phone:hover{border-color:var(--srca-green)!important;background:rgba(0,132,61,.08)!important} .external-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}.external-actions .btn{padding:8px 14px;text-decoration:none;border-radius:10px;min-width:84px;text-align:center} .external-empty{grid-column:1/-1;text-align:center;padding:38px;border:1.5px dashed var(--ops-line);background:var(--ops-panel);border-radius:var(--directory-radius);color:var(--ops-muted);font-size:19px;font-weight:800} @media(max-width:760px){.external-directory-toolbar{grid-template-columns:1fr}.external-directory-summary{grid-template-columns:1fr}.external-directory-results{grid-template-columns:1fr}.external-directory-toolbar #externalDirectoryReset{width:100%}.external-category{min-height:96px}.external-card-head{flex-direction:column}.external-status{align-self:flex-start!important}} .external-directory-adminbar{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,rgba(16,35,61,.97),rgba(24,63,99,.97));color:#fff;border:1.5px solid var(--srca-orange);border-radius:var(--directory-radius);padding:14px 18px;margin-bottom:14px;box-shadow:var(--directory-shadow)} .external-directory-adminbar[hidden]{display:none!important}.external-directory-adminbar strong{display:block;font-size:20px}.external-directory-adminbar span{display:block;color:#dbe8f5;font-size:14px;margin-top:3px}.external-admin-actions{display:flex;gap:8px;flex-wrap:wrap}.external-directory-adminbar .btn{min-height:42px}.external-directory-adminbar .btn-gray{background:#fff!important;color:var(--srca-navy)!important}.external-directory-adminbar .btn-gray.active{background:var(--srca-orange)!important;color:#fff!important} .external-admin-card-actions{display:flex;gap:8px;border-top:1px dashed var(--ops-line);padding-top:12px;margin-top:10px}.external-admin-card-actions .btn{flex:1}.external-admin-card-actions .danger{background:#b4232c!important;color:#fff!important;border-color:#b4232c!important} .external-editor-overlay{position:fixed;inset:0;z-index:10050;background:rgba(8,18,32,.64);display:grid;place-items:center;padding:18px;backdrop-filter:blur(3px)}.external-editor-overlay[hidden]{display:none!important}.external-editor-dialog{width:min(820px,100%);max-height:92vh;overflow:auto;background:var(--ops-panel);border:1.5px solid var(--ops-line);border-radius:20px;box-shadow:0 28px 80px rgba(0,0,0,.35);padding:20px}.external-editor-head{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--ops-line);padding-bottom:12px;margin-bottom:16px}.external-editor-head h2{margin:0;color:var(--ops-text)}.external-editor-head button{width:42px;height:42px;border:1px solid var(--ops-line);border-radius:12px;background:var(--ops-bg);color:var(--ops-text);font-size:28px;cursor:pointer}.external-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.external-editor-grid label{display:flex;flex-direction:column;gap:7px;color:var(--ops-text);font-weight:900}.external-editor-grid label.wide{grid-column:1/-1}.external-editor-grid input,.external-editor-grid select,.external-editor-grid textarea{width:100%;border:1.5px solid var(--ops-line);border-radius:12px;background:var(--ops-panel);color:var(--ops-text);padding:11px 13px;font:inherit;outline:none}.external-editor-grid input:focus,.external-editor-grid select:focus,.external-editor-grid textarea:focus{border-color:var(--srca-navy);box-shadow:0 0 0 3px rgba(16,35,61,.12)}.external-editor-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.external-editor-open{overflow:hidden} html[data-theme="dark"] .external-directory-adminbar{background:linear-gradient(135deg,#10233d,#173759)}html[data-theme="dark"] .external-editor-grid input,html[data-theme="dark"] .external-editor-grid select,html[data-theme="dark"] .external-editor-grid textarea{background:#10223a} @media(max-width:760px){.external-directory-adminbar{align-items:flex-start;flex-direction:column}.external-admin-actions{width:100%}.external-admin-actions .btn{flex:1}.external-editor-grid{grid-template-columns:1fr}.external-editor-grid label.wide{grid-column:auto}.external-editor-actions{flex-direction:column}.external-editor-actions .btn{width:100%}} /* مرحلة 43: أدوات إدارة صغيرة ومتجانسة مع أزرار المنصة */ .external-admin-actions{align-items:center;gap:6px} .external-directory-adminbar .external-admin-tool{min-height:34px!important;height:34px;padding:5px 10px!important;border-radius:9px!important;min-width:auto!important;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:14px!important;font-weight:900;line-height:1;box-shadow:none!important} .external-directory-adminbar .external-admin-tool>span[aria-hidden="true"]{font-size:15px;line-height:1;width:16px;text-align:center} .external-directory-adminbar .external-admin-add{background:var(--srca-green)!important;border-color:var(--srca-green)!important;color:#fff!important} .external-directory-adminbar .external-admin-tool.btn-gray{background:rgba(255,255,255,.96)!important;color:var(--srca-navy)!important;border-color:rgba(255,255,255,.82)!important} .external-directory-adminbar .external-admin-tool.btn-gray.active{background:var(--srca-orange)!important;color:#fff!important;border-color:var(--srca-orange)!important} .external-directory-adminbar .external-admin-tool.danger{background:#a61f29!important;color:#fff!important;border-color:#a61f29!important} .external-directory-adminbar .external-admin-tool.danger.active{background:#7f111a!important;border-color:#fff!important;box-shadow:0 0 0 2px rgba(255,255,255,.18)!important} .external-directory-adminbar .external-admin-tool:hover{transform:translateY(-1px)} .external-admin-card-actions .btn{min-height:34px;padding:6px 12px!important;border-radius:9px!important;font-size:14px!important} @media(max-width:760px){.external-admin-actions{width:auto!important}.external-admin-actions .external-admin-tool{flex:0 0 auto!important}.external-directory-adminbar{gap:10px}.external-directory-adminbar strong{font-size:18px}} /* مرحلة 44: توحيد كامل لألوان بطاقات الاتصال في الوضعين النهاري والليلي */ #externalDirectoryView{ --directory-surface:var(--ops-panel); --directory-surface-alt:color-mix(in srgb,var(--ops-panel) 88%,var(--ops-bg) 12%); --directory-text:var(--ops-text); --directory-muted:var(--ops-muted); --directory-border:var(--ops-line); --directory-accent:var(--srca-navy); --directory-accent-text:#fff; --directory-hover:color-mix(in srgb,var(--ops-panel) 82%,var(--srca-blue) 18%); color:var(--directory-text); } #externalDirectoryView .external-directory-toolbar, #externalDirectoryView .external-directory-summary>div, #externalDirectoryView .external-contact-card, #externalDirectoryView .external-empty, #externalDirectoryView .external-editor-dialog{ background:var(--directory-surface)!important; color:var(--directory-text)!important; border-color:var(--directory-border)!important; } #externalDirectoryView .external-directory-toolbar .search-box, #externalDirectoryView .external-directory-toolbar .select-box, #externalDirectoryView .external-editor-grid input, #externalDirectoryView .external-editor-grid select, #externalDirectoryView .external-editor-grid textarea, #externalDirectoryView .external-editor-head button{ background:var(--directory-surface-alt)!important; color:var(--directory-text)!important; border-color:var(--directory-border)!important; caret-color:var(--directory-text); } #externalDirectoryView input::placeholder, #externalDirectoryView textarea::placeholder{color:var(--directory-muted)!important;opacity:.88} #externalDirectoryView select option{ background:var(--directory-surface)!important; color:var(--directory-text)!important; } #externalDirectoryView .external-directory-toolbar .search-box:hover, #externalDirectoryView .external-directory-toolbar .select-box:hover, #externalDirectoryView .external-editor-grid input:hover, #externalDirectoryView .external-editor-grid select:hover, #externalDirectoryView .external-editor-grid textarea:hover, #externalDirectoryView .external-editor-head button:hover{ background:var(--directory-hover)!important; color:var(--directory-text)!important; border-color:color-mix(in srgb,var(--directory-accent) 56%,var(--directory-border) 44%)!important; } #externalDirectoryView .external-directory-toolbar .search-box:focus, #externalDirectoryView .external-directory-toolbar .select-box:focus, #externalDirectoryView .external-editor-grid input:focus, #externalDirectoryView .external-editor-grid select:focus, #externalDirectoryView .external-editor-grid textarea:focus, #externalDirectoryView .external-editor-head button:focus-visible{ background:var(--directory-surface)!important; color:var(--directory-text)!important; border-color:var(--directory-accent)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--directory-accent) 20%,transparent)!important; outline:none; } #externalDirectoryView .external-category{ background:var(--directory-surface-alt)!important; color:var(--directory-text)!important; border-color:var(--directory-border)!important; } #externalDirectoryView .external-category strong{color:inherit!important} #externalDirectoryView .external-category small{color:var(--directory-muted)!important} #externalDirectoryView .external-category:hover{ background:var(--directory-hover)!important; color:var(--directory-text)!important; border-color:color-mix(in srgb,var(--directory-accent) 52%,var(--directory-border) 48%)!important; } #externalDirectoryView .external-category:hover small{color:var(--directory-text)!important} #externalDirectoryView .external-category.active, #externalDirectoryView .external-category.active:hover{ background:linear-gradient(180deg,var(--srca-navy),var(--srca-navy-2))!important; color:var(--directory-accent-text)!important; border-color:var(--srca-orange)!important; } #externalDirectoryView .external-category.active strong, #externalDirectoryView .external-category.active small{color:var(--directory-accent-text)!important} #externalDirectoryView .external-card-head h3, #externalDirectoryView .external-editor-head h2, #externalDirectoryView .external-editor-grid label, #externalDirectoryView .external-directory-toolbar .filter-label{color:var(--directory-text)!important} #externalDirectoryView .external-card-head>div>span, #externalDirectoryView .external-directory-summary span, #externalDirectoryView .external-empty{color:var(--directory-muted)!important} #externalDirectoryView .external-field strong{color:color-mix(in srgb,var(--directory-accent) 78%,var(--directory-text) 22%)!important} #externalDirectoryView .external-field a{color:var(--srca-blue)!important} #externalDirectoryView .external-phone{ background:var(--directory-surface-alt)!important; color:var(--directory-text)!important; border-color:var(--directory-border)!important; } #externalDirectoryView .external-phone:hover, #externalDirectoryView .external-phone:focus-visible{ background:color-mix(in srgb,var(--directory-surface) 82%,var(--srca-green) 18%)!important; color:var(--directory-text)!important; border-color:var(--srca-green)!important; outline:none; } #externalDirectoryView .external-actions .btn, #externalDirectoryView .external-admin-card-actions .btn, #externalDirectoryView #externalDirectoryReset, #externalDirectoryView .external-editor-actions .btn{ transition:background-color .16s,color .16s,border-color .16s,box-shadow .16s,transform .16s; } #externalDirectoryView #externalDirectoryReset, #externalDirectoryView .external-actions .btn-gray, #externalDirectoryView .external-editor-actions .btn-gray{ background:var(--directory-surface-alt)!important; color:var(--directory-text)!important; border-color:var(--directory-border)!important; } #externalDirectoryView #externalDirectoryReset:hover, #externalDirectoryView .external-actions .btn-gray:hover, #externalDirectoryView .external-editor-actions .btn-gray:hover{ background:var(--directory-hover)!important; color:var(--directory-text)!important; border-color:var(--directory-accent)!important; } #externalDirectoryView .external-directory-adminbar{ background:linear-gradient(135deg,var(--srca-navy),var(--srca-navy-2))!important; color:#fff!important; } #externalDirectoryView .external-directory-adminbar strong, #externalDirectoryView .external-directory-adminbar>div>span{color:#fff!important} #externalDirectoryView .external-directory-adminbar .external-admin-tool.btn-gray{ background:color-mix(in srgb,#fff 94%,var(--srca-navy) 6%)!important; color:var(--srca-navy)!important; border-color:rgba(255,255,255,.78)!important; } #externalDirectoryView .external-directory-adminbar .external-admin-tool.btn-gray:hover{ background:#fff!important; color:var(--srca-navy)!important; border-color:#fff!important; } #externalDirectoryView .external-directory-adminbar .external-admin-tool.active, #externalDirectoryView .external-directory-adminbar .external-admin-tool.active:hover{ color:#fff!important; } html[data-theme="dark"] #externalDirectoryView{ --directory-surface:var(--ops-panel); --directory-surface-alt:color-mix(in srgb,var(--ops-panel) 84%,#06111f 16%); --directory-hover:color-mix(in srgb,var(--ops-panel) 78%,#2d79ad 22%); --directory-accent:#69b7e8; --directory-accent-text:#fff; --directory-shadow:0 8px 22px rgba(0,0,0,.18); } html[data-theme="dark"] #externalDirectoryView .external-category.active, html[data-theme="dark"] #externalDirectoryView .external-category.active:hover{ background:linear-gradient(180deg,#24527d,#173754)!important; color:#fff!important; border-color:var(--srca-orange)!important; } html[data-theme="dark"] #externalDirectoryView .external-field strong{color:#a8d8f5!important} html[data-theme="dark"] #externalDirectoryView .external-field a{color:#79c4f2!important} html[data-theme="dark"] #externalDirectoryView .external-status{ background:rgba(34,197,94,.16)!important; color:#86efac!important; border-color:rgba(134,239,172,.32)!important; } html[data-theme="dark"] #externalDirectoryView .external-status-muted{ background:rgba(148,163,184,.12)!important; color:#cbd5e1!important; border-color:var(--directory-border)!important; } html[data-theme="dark"] #externalDirectoryView .external-directory-summary strong{color:#6ee7a8!important} /* مرحلة 45: توحيد زر إنهاء التحرير/الحذف في جميع الأوضاع */ #externalDirectoryView .external-directory-adminbar .external-admin-tool{ font-family:inherit!important; font-size:inherit; font-weight:700; line-height:1.25; } #externalDirectoryView .external-directory-adminbar .external-admin-tool.active, #externalDirectoryView .external-directory-adminbar .external-admin-tool.active:hover, #externalDirectoryView .external-directory-adminbar .external-admin-tool.active:focus-visible{ background:var(--srca-orange)!important; color:#fff!important; border-color:color-mix(in srgb,var(--srca-orange) 72%,#fff 28%)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--srca-orange) 25%,transparent)!important; } html[data-theme="dark"] #externalDirectoryView .external-directory-adminbar .external-admin-tool.active, html[data-theme="dark"] #externalDirectoryView .external-directory-adminbar .external-admin-tool.active:hover, html[data-theme="dark"] #externalDirectoryView .external-directory-adminbar .external-admin-tool.active:focus-visible{ background:color-mix(in srgb,var(--srca-orange) 88%,#111827 12%)!important; color:#fff!important; border-color:#ffc58f!important; }