/*
 * Yemeni Engineers Syndicate — Institutional Redesign v2.0
 * Presentation layer only: preserves Laravel / Livewire business logic.
 * Mobile-first, RTL-aware, WCAG-focused.
 */

:root {
    --yes2-navy-950:#061827;
    --yes2-navy-900:#09263e;
    --yes2-navy-800:#103c5e;
    --yes2-blue-700:#0d5f91;
    --yes2-blue-600:#0f76ad;
    --yes2-blue-100:#dbeef8;
    --yes2-blue-50:#f0f8fc;
    --yes2-gold-600:#b98521;
    --yes2-gold-500:#d7a33a;
    --yes2-gold-100:#faedcc;
    --yes2-emerald-600:#13845d;
    --yes2-slate-950:#0f2432;
    --yes2-slate-800:#273f4f;
    --yes2-slate-700:#3d5665;
    --yes2-slate-600:#5c7180;
    --yes2-slate-500:#748894;
    --yes2-slate-300:#cad7df;
    --yes2-slate-200:#dce6ec;
    --yes2-slate-100:#eef3f6;
    --yes2-slate-50:#f7fafb;
    --yes2-canvas:#f4f7f9;
    --yes2-surface:#ffffff;
    --yes2-danger:#b42318;
    --yes2-radius-sm:10px;
    --yes2-radius-md:14px;
    --yes2-radius-lg:18px;
    --yes2-radius-xl:24px;
    --yes2-shadow-xs:0 1px 2px rgba(6,24,39,.04);
    --yes2-shadow-sm:0 8px 24px rgba(6,24,39,.055);
    --yes2-shadow-md:0 18px 48px rgba(6,24,39,.09);
    --yes2-shadow-lg:0 28px 72px rgba(6,24,39,.15);
    --yes2-focus:0 0 0 4px rgba(15,118,173,.16);
}

html { background:var(--yes2-canvas); }
body.yes-app { color:var(--yes2-slate-800); background:var(--yes2-canvas); text-rendering:optimizeLegibility; }
body.yes-app :where(a,button,input,select,textarea,summary) { -webkit-tap-highlight-color:transparent; }
body.yes-app :where(button,input,select,textarea) { font:inherit; }
.yes-icon { display:block; flex:0 0 auto; }

/* Unified focus visibility */
body.yes-app :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
    outline:2px solid #fff !important;
    outline-offset:2px !important;
    box-shadow:var(--yes2-focus) !important;
}

/* Shared UI primitives */
body.yes-app .yes-ui-button {
    border-radius:12px;
    font-weight:800;
    letter-spacing:0;
    box-shadow:var(--yes2-shadow-xs);
}
body.yes-app .yes-ui-button--primary {
    background:linear-gradient(135deg,var(--yes2-navy-900),var(--yes2-navy-800));
    border-color:var(--yes2-navy-800);
}
body.yes-app .yes-ui-button--primary:hover { background:linear-gradient(135deg,#041a2b,#0c4469); box-shadow:0 10px 24px rgba(6,38,62,.16); }
body.yes-app .yes-ui-button--accent { background:linear-gradient(135deg,#e2b44f,var(--yes2-gold-500)); border-color:#c99129; color:#172b36; }
body.yes-app .yes-ui-button--secondary { border-color:var(--yes2-slate-200); color:var(--yes2-navy-800); }
body.yes-app .yes-ui-card,
body.yes-app .yes-panel {
    border-color:rgba(202,215,223,.88) !important;
    border-radius:var(--yes2-radius-lg) !important;
    background:rgba(255,255,255,.985);
    box-shadow:var(--yes2-shadow-sm) !important;
}
body.yes-app .yes-ui-card--interactive:hover { border-color:#abcbdc !important; box-shadow:var(--yes2-shadow-md) !important; }
body.yes-app .yes-ui-input,
body.yes-app .yes-ui-select,
body.yes-app .yes-ui-textarea {
    border-color:#cfdce4 !important;
    border-radius:12px !important;
    background:#fff !important;
    color:var(--yes2-slate-950) !important;
}
body.yes-app .yes-ui-input:hover,
body.yes-app .yes-ui-select:hover,
body.yes-app .yes-ui-textarea:hover { border-color:#adc4d1 !important; }
body.yes-app .yes-ui-input:focus,
body.yes-app .yes-ui-select:focus,
body.yes-app .yes-ui-textarea:focus { border-color:var(--yes2-blue-600) !important; box-shadow:var(--yes2-focus) !important; }
body.yes-app .yes-ui-label { color:var(--yes2-slate-800); font-weight:800; }
body.yes-app .yes-ui-table-shell { border-color:var(--yes2-slate-200); border-radius:var(--yes2-radius-lg); box-shadow:var(--yes2-shadow-xs); }
body.yes-app .yes-ui-table thead { background:linear-gradient(180deg,#f8fafc,#f1f5f8); }
body.yes-app .yes-ui-table th { color:#405866; font-weight:850; letter-spacing:.01em; }
body.yes-app .yes-ui-table tbody tr:hover { background:#f8fbfd; }
body.yes-app .yes-ui-dropdown-panel,
body.yes-app .yes-ui-modal { border-color:rgba(202,215,223,.95); box-shadow:var(--yes2-shadow-lg); }
body.yes-app .yes-ui-modal { border-radius:22px; }
body.yes-app .yes-ui-modal__header { background:linear-gradient(180deg,#fff,#fbfdfe); }
body.yes-app .yes-ui-alert { border-radius:14px; }
body.yes-app .yes-ui-badge { font-weight:800; }

/* Public portal shell */
body[data-surface="public"] { background:#fff; }
body[data-surface="public"] .yes-ux-shell { background:#fff; }
body[data-surface="public"] .yes-ux-topbar {
    background:linear-gradient(90deg,#041725 0%,#082a43 52%,#0a3552 100%);
    border-bottom-color:rgba(255,255,255,.08);
}
body[data-surface="public"] .yes-ux-topbar__inner { min-height:38px; font-size:12px; }
body[data-surface="public"] .yes-ux-topbar__contact a { gap:7px; opacity:.94; }
body[data-surface="public"] .yes-ux-topbar__contact .yes-icon { width:14px; height:14px; color:#d8b35a; }
body[data-surface="public"] .yes-ux-social-mini { width:29px; height:29px; border-radius:9px; background:rgba(255,255,255,.035); }
body[data-surface="public"] .yes-ux-social-mini:hover { border-color:rgba(216,179,90,.5); background:rgba(255,255,255,.08); }
body[data-surface="public"] .yes-ux-header {
    border-bottom:1px solid rgba(214,225,232,.94);
    background:rgba(255,255,255,.975);
    box-shadow:0 7px 26px rgba(6,31,48,.055);
}
body[data-surface="public"] .yes-ux-header__inner { min-height:84px; }
body[data-surface="public"] .yes-ux-brand__mark {
    width:50px; height:50px; min-width:50px; border-radius:15px; padding:3px;
    border-color:#d8e4ea; box-shadow:0 8px 22px rgba(6,34,56,.09);
}
body[data-surface="public"] .yes-ux-brand__mark img { width:42px; height:42px; }
body[data-surface="public"] .yes-ux-brand__copy strong { color:#0c2a3d; font-size:14px; font-weight:900; }
body[data-surface="public"] .yes-ux-brand__copy small { margin-top:2px; font-size:9.5px; color:#728795; }
body[data-surface="public"] .yes-ux-nav { gap:3px; }
body[data-surface="public"] .yes-ux-nav-link {
    min-height:44px; border-radius:12px; padding-inline:11px; font-size:12.5px; font-weight:800; color:#304b5c;
}
body[data-surface="public"] .yes-ux-nav-link:hover { background:#f1f7fa; color:var(--yes2-blue-700); }
body[data-surface="public"] .yes-ux-nav-link.is-active { background:#e9f5fa; color:#075d87; }
body[data-surface="public"] .yes-ux-nav-link.is-active:after { bottom:-21px; height:3px; background:linear-gradient(90deg,var(--yes2-blue-600),var(--yes2-gold-500)); }
body[data-surface="public"] .yes-ux-dropdown { width:310px; padding:8px; border-radius:17px; border-color:#d8e4ea; box-shadow:0 24px 56px rgba(5,31,48,.16); }
body[data-surface="public"] .yes-ux-dropdown a { padding:11px 12px; border-radius:11px; }
body[data-surface="public"] .yes-ux-dropdown strong { font-size:12px; }
body[data-surface="public"] .yes-ux-dropdown small { margin-top:4px; font-size:10px; }
body[data-surface="public"] .yes-ux-header-btn,
body[data-surface="public"] .yes-ux-icon-btn { min-height:44px; border-radius:12px; }
body[data-surface="public"] .yes-ux-header-btn { padding-inline:14px; font-size:12px; }
body[data-surface="public"] .yes-ux-header-btn--gold { border-color:#c9952e; background:linear-gradient(135deg,#e2b550,#d6a039); box-shadow:0 7px 18px rgba(200,145,35,.16); }
body[data-surface="public"] .yes-ux-header-btn--ghost { border-color:#d5e2e9; color:#0b5d87; }
body[data-surface="public"] .yes-ux-icon-btn { width:44px; border-color:#d5e2e9; color:#28495d; }
body[data-surface="public"] .yes-ux-mobile-menu { border-top-color:#e2ebef; box-shadow:0 18px 32px rgba(6,31,48,.09); }
body[data-surface="public"] .yes-ux-mobile-link { font-size:13px; }
body[data-surface="public"] .yes-ux-footer { background:linear-gradient(140deg,#041724 0%,#062a43 55%,#08324e 100%); }
body[data-surface="public"] .yes-ux-footer__grid { padding-block:52px; }
body[data-surface="public"] .yes-ux-footer h2 { font-size:12px; letter-spacing:.01em; }
body[data-surface="public"] .yes-ux-footer a,
body[data-surface="public"] .yes-ux-footer li,
body[data-surface="public"] .yes-ux-footer__desc { font-size:11.5px; }

/* Member portal */
body[data-surface="portal"] { background:#f3f6f8; }
body[data-surface="portal"] .yes-portal-shell { background:
    radial-gradient(circle at 85% 4%,rgba(15,118,173,.07),transparent 24rem),#f3f6f8; }
body[data-surface="portal"] #portal-sidebar {
    width:292px; border-color:#dce6ec; background:linear-gradient(180deg,#fff,#fbfdfe); box-shadow:8px 0 30px rgba(6,31,48,.045);
}
html[dir="rtl"] body[data-surface="portal"] #portal-sidebar { box-shadow:-8px 0 30px rgba(6,31,48,.045); }
body[data-surface="portal"] .yes-portal-sidebar-brand { padding:20px; border-bottom-color:#e6edf1; }
body[data-surface="portal"] .yes-portal-sidebar-brand-link { display:flex; align-items:center; gap:11px; text-decoration:none; }
body[data-surface="portal"] .yes-portal-sidebar-logo { display:grid; width:44px; height:44px; place-items:center; flex:0 0 44px; border:1px solid #d9e5eb; border-radius:13px; background:#fff; box-shadow:0 7px 18px rgba(6,34,56,.07); }
body[data-surface="portal"] .yes-portal-sidebar-logo img { width:36px; height:36px; object-fit:contain; }
body[data-surface="portal"] .yes-portal-sidebar-brand-copy small { display:block; color:var(--yes2-blue-700); font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
body[data-surface="portal"] .yes-portal-sidebar-brand-copy strong { display:block; margin-top:3px; color:var(--yes2-navy-950); font-size:16px; font-weight:900; }
body[data-surface="portal"] .yes-portal-sidebar-nav { padding:18px 14px; }
body[data-surface="portal"] .yes-portal-sidebar-nav section > h2 { padding-inline:10px; color:#8798a4; font-size:10px; }
body[data-surface="portal"] .yes-portal-nav-link { min-height:46px; padding:8px 10px; border-radius:12px; }
body[data-surface="portal"] .yes-portal-nav-link__main { display:flex; min-width:0; align-items:center; gap:10px; }
body[data-surface="portal"] .yes-portal-nav-link__icon { display:grid; width:31px; height:31px; flex:0 0 31px; place-items:center; border-radius:9px; background:#f1f5f7; color:#647b89; transition:.18s ease; }
body[data-surface="portal"] .yes-portal-nav-link:hover .yes-portal-nav-link__icon { background:#e8f4f9; color:var(--yes2-blue-700); }
body[data-surface="portal"] .yes-portal-nav-link[aria-current="page"] { background:#eaf6fb; color:#075f8a; box-shadow:inset 0 0 0 1px #cce5f0; }
body[data-surface="portal"] .yes-portal-nav-link[aria-current="page"] .yes-portal-nav-link__icon { background:#0e739f; color:#fff; box-shadow:0 5px 12px rgba(8,119,166,.18); }
body[data-surface="portal"] .yes-portal-sidebar-account { padding:14px; border-top-color:#e5edf1; }
body[data-surface="portal"] .yes-portal-account-card { border:1px solid #e0e9ee; border-radius:14px; background:#f7fafb; padding:12px; }
body[data-surface="portal"] .yes-portal-account-avatar { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:11px; background:linear-gradient(135deg,#082b47,#0b668f); color:#fff; font-size:14px; font-weight:900; }
body[data-surface="portal"] .yes-portal-content-shell { min-height:100vh; }
body[data-surface="portal"] .yes-portal-topbar { border-bottom:1px solid #dce6ec; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); box-shadow:0 6px 20px rgba(6,31,48,.035); }
body[data-surface="portal"] .yes-portal-topbar__inner { min-height:72px; }
body[data-surface="portal"] .yes-portal-main { max-width:1540px; margin-inline:auto; padding:28px clamp(16px,2.3vw,36px) 48px; }
body[data-surface="portal"] .yes-portal-dashboard__hero { padding:4px 2px 2px; }
body[data-surface="portal"] .yes-portal-dashboard__hero h1 { font-size:clamp(25px,2.3vw,34px); letter-spacing:-.02em; }
body[data-surface="portal"] .yes-portal-metric-card { overflow:hidden; position:relative; }
body[data-surface="portal"] .yes-portal-metric-card::after { content:""; position:absolute; inset-inline-start:0; bottom:0; width:100%; height:3px; background:linear-gradient(90deg,var(--yes2-blue-600),rgba(15,118,173,.15)); }

/* Organization portal */
body[data-surface="organization"] { background:#f3f6f8; }
.yes-org-shell { min-height:100vh; background:radial-gradient(circle at 82% 2%,rgba(19,132,93,.055),transparent 25rem),#f3f6f8; }
.yes-org-sidebar { position:fixed; inset-block:0; z-index:50; width:292px; overflow:hidden; border-inline-end:1px solid #dce6ec; background:linear-gradient(180deg,#fff,#fbfdfe); transition:transform .22s ease; }
.yes-org-sidebar__inner { display:flex; height:100%; min-height:0; flex-direction:column; }
.yes-org-brand { display:flex; align-items:center; gap:11px; padding:20px; border-bottom:1px solid #e6edf1; text-decoration:none; }
.yes-org-brand__logo { display:grid; width:44px; height:44px; flex:0 0 44px; place-items:center; border:1px solid #d9e5eb; border-radius:13px; background:#fff; box-shadow:0 7px 18px rgba(6,34,56,.07); }
.yes-org-brand__logo img { width:36px; height:36px; object-fit:contain; }
.yes-org-brand__copy small { display:block; color:var(--yes2-emerald-600); font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.yes-org-brand__copy strong { display:block; margin-top:3px; color:var(--yes2-navy-950); font-size:16px; font-weight:900; }
.yes-org-nav { flex:1; min-height:0; overflow-y:auto; padding:16px 14px; scrollbar-width:thin; scrollbar-color:#c8d7df transparent; }
.yes-org-nav-link { display:flex; min-height:46px; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; border-radius:12px; padding:7px 10px; color:#4d6573; font-size:13px; font-weight:800; text-decoration:none; transition:.18s ease; }
.yes-org-nav-link:hover { background:#f1f6f8; color:#173c50; }
.yes-org-nav-link.is-active { background:#eaf7f2; color:#126947; box-shadow:inset 0 0 0 1px #cbe8dc; }
.yes-org-nav-link__main { display:flex; min-width:0; align-items:center; gap:10px; }
.yes-org-nav-link__icon { display:grid; width:31px; height:31px; flex:0 0 31px; place-items:center; border-radius:9px; background:#f1f5f7; color:#647b89; }
.yes-org-nav-link.is-active .yes-org-nav-link__icon { background:var(--yes2-emerald-600); color:#fff; box-shadow:0 5px 12px rgba(19,132,93,.18); }
.yes-org-account { padding:14px; border-top:1px solid #e5edf1; }
.yes-org-account__card { display:flex; align-items:center; gap:10px; border:1px solid #e0e9ee; border-radius:14px; background:#f7fafb; padding:11px; }
.yes-org-account__avatar { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:11px; background:linear-gradient(135deg,#0b3b4f,#14845d); color:#fff; font-weight:900; }
.yes-org-account__meta { min-width:0; }
.yes-org-account__meta strong,.yes-org-account__meta small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yes-org-account__meta strong { color:#183647; font-size:12.5px; }
.yes-org-account__meta small { margin-top:2px; color:#78909d; font-size:10.5px; }
.yes-org-logout { display:flex; width:100%; min-height:42px; align-items:center; justify-content:center; gap:7px; margin-top:9px; border:1px solid #d9e4ea; border-radius:11px; background:#fff; color:#4a6170; font-size:12px; font-weight:800; }
.yes-org-workspace { min-width:0; min-height:100vh; }
html[dir="rtl"] .yes-org-workspace { margin-right:292px; }
html[dir="ltr"] .yes-org-workspace { margin-left:292px; }
.yes-org-topbar { position:sticky; top:0; z-index:30; border-bottom:1px solid #dce6ec; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); box-shadow:0 6px 20px rgba(6,31,48,.035); }
.yes-org-topbar__inner { display:flex; min-height:72px; align-items:center; justify-content:space-between; gap:16px; padding-inline:clamp(16px,2.3vw,36px); }
.yes-org-topbar__identity { display:flex; min-width:0; align-items:center; gap:11px; }
.yes-org-topbar__eyebrow { color:#8295a1; font-size:11px; font-weight:800; }
.yes-org-topbar__title { overflow:hidden; max-width:40vw; color:#122f41; font-size:14px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
.yes-org-topbar__actions { display:flex; align-items:center; gap:8px; }
.yes-org-topbar__link { display:inline-flex; min-height:42px; align-items:center; gap:7px; border-radius:11px; padding-inline:12px; color:#536b79; font-size:12px; font-weight:800; text-decoration:none; }
.yes-org-topbar__link:hover { background:#f0f5f7; color:#143d52; }
.yes-org-mobile-btn { display:none; width:44px; height:44px; place-items:center; border:1px solid #d7e2e8; border-radius:12px; background:#fff; color:#24475a; }
.yes-org-main { max-width:1540px; margin-inline:auto; padding:28px clamp(16px,2.3vw,36px) 48px; }
.yes-org-overlay { display:none; position:fixed; inset:0; z-index:40; background:rgba(4,23,37,.52); backdrop-filter:blur(2px); }

/* Auth */
body[data-surface="auth"] .yes-ds-auth-page { background:radial-gradient(circle at 10% 8%,rgba(15,118,173,.08),transparent 28rem),radial-gradient(circle at 88% 92%,rgba(215,163,58,.10),transparent 26rem),#f4f7f9; }
body[data-surface="auth"] .yes-ds-auth-visual { background:linear-gradient(145deg,#041b2c,#0a3b5d 70%,#0b5173); box-shadow:0 24px 64px rgba(6,34,56,.15); }
body[data-surface="auth"] .yes-ds-auth-card { border-color:#d7e3e9; box-shadow:0 18px 48px rgba(6,34,56,.085); }

/* Admin refinements */
body[data-surface="admin"] .admin-pro-shell { background:radial-gradient(circle at 82% 2%,rgba(15,118,173,.055),transparent 26rem),#f3f6f8; }
body[data-surface="admin"] .admin-pro-sidebar { border-color:#d9e5eb; }
body[data-surface="admin"] .admin-pro-header { border-bottom-color:#d8e4ea; box-shadow:0 6px 20px rgba(6,31,48,.035); }
body[data-surface="admin"] .admin-pro-content { max-width:1540px; }
body[data-surface="admin"] .admin-pro-search input { border-color:#d2dfe6; background:#f9fbfc; }
body[data-surface="admin"] .admin-pro-search input:focus { border-color:var(--yes2-blue-600); box-shadow:var(--yes2-focus); background:#fff; }
body[data-surface="admin"] .admin-pro-panel,
body[data-surface="admin"] .admin-pro-stat,
body[data-surface="admin"] .admin-pro-action { border-color:#dbe5eb; box-shadow:var(--yes2-shadow-sm); }

/* Responsive */
@media (min-width:1024px) {
    html[dir="rtl"] body[data-surface="portal"] .yes-portal-content-shell { padding-right:312px; }
    html[dir="ltr"] body[data-surface="portal"] .yes-portal-content-shell { padding-left:312px; }
}
@media (max-width:1023px) {
    body[data-surface="portal"] #portal-sidebar { width:292px; }
    body[data-surface="portal"] .yes-portal-content-shell { padding:0 !important; }
    .yes-org-workspace { margin:0 !important; }
    .yes-org-sidebar { box-shadow:0 28px 70px rgba(6,24,39,.18); }
    html[dir="rtl"] .yes-org-sidebar { right:0; transform:translateX(105%); }
    html[dir="ltr"] .yes-org-sidebar { left:0; transform:translateX(-105%); }
    .yes-org-sidebar.is-open { transform:translateX(0) !important; }
    .yes-org-overlay.is-open { display:block; }
    .yes-org-mobile-btn { display:grid; }
    .yes-org-topbar__title { max-width:55vw; }
}
@media (max-width:767px) {
    body.yes-app :where(a,button,input,select,textarea,summary) { min-height:44px; }
    body[data-surface="public"] .yes-ux-topbar__inner { min-height:34px; }
    body[data-surface="public"] .yes-ux-header__inner { min-height:70px; }
    body[data-surface="public"] .yes-ux-brand__mark { width:44px; height:44px; min-width:44px; border-radius:13px; }
    body[data-surface="public"] .yes-ux-brand__mark img { width:37px; height:37px; }
    body[data-surface="portal"] .yes-portal-main,.yes-org-main { padding-top:20px; }
    .yes-org-topbar__link span { display:none; }
    .yes-org-topbar__link { width:44px; padding:0; justify-content:center; }
}
@media (max-width:639px) {
    body[data-surface="public"] .yes-ux-topbar__contact a:first-child { display:none; }
    body[data-surface="public"] .yes-ux-footer__grid { gap:28px; padding-block:38px; }
    body[data-surface="portal"] .yes-portal-topbar__inner,.yes-org-topbar__inner { min-height:64px; }
    .yes-org-topbar__title { max-width:52vw; }
}
@media (prefers-reduced-motion:reduce) {
    body.yes-app *,body.yes-app *::before,body.yes-app *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
@media (prefers-contrast:more) {
    body.yes-app :where(.yes-ui-card,.yes-panel,.yes-ui-input,.yes-ui-select,.yes-ui-textarea) { border-color:#8fa3af !important; }
}
@media print {
    .yes-ux-topbar,.yes-ux-header,.yes-ux-footer,#portal-sidebar,.yes-portal-topbar,.yes-org-sidebar,.yes-org-topbar,.admin-pro-sidebar,.admin-pro-header { display:none !important; }
    .yes-portal-content-shell,.yes-org-workspace,.admin-pro-workspace { margin:0 !important; padding:0 !important; }
    body.yes-app { background:#fff; }
}