/* Basra MIS institutional UI identity. Screen-only by design; official documents/exports are excluded. */ :root{--bmis-navy:#0F2D5B;--bmis-blue:#1E6FD9;--bmis-teal:#00B3A4;--bmis-gray:#9AA4B2;--navy:#0F2D5B;--blue:#1E6FD9;--blue2:#00B3A4} @media screen{ .bmis-lockup{display:flex;align-items:center;gap:10px;direction:ltr;min-width:0} .bmis-mark{width:46px;height:46px;display:block;flex:0 0 auto} .bmis-wording{display:flex;flex-direction:column;line-height:1.08;min-width:0} .bmis-name{font-family:Arial,Tahoma,sans-serif;font-size:19px;font-weight:600;letter-spacing:.1px;white-space:nowrap} .bmis-name b{font-weight:900} .bmis-ar{font-family:Tahoma,Arial,sans-serif;font-size:10px;font-weight:600;direction:rtl;margin-top:5px;white-space:nowrap} header .bmis-name,header .bmis-ar{color:#fff}.bmis-header-sub{opacity:.78} .bmis-login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto 22px} .bmis-login-brand .bmis-mark{width:82px;height:82px;margin-bottom:10px} .bmis-login-brand .bmis-name{font-size:28px;color:var(--bmis-navy)} .bmis-login-brand .bmis-ar{font-size:13px;color:#566574;margin-top:7px} .bmis-system-avatar{width:34px;height:34px;border-radius:10px;background:#f2f7fb;padding:5px;display:inline-grid;place-items:center} .bmis-system-avatar img{width:100%;height:100%} .sessionBootMark.bmis-boot{background:#fff!important;border:1px solid #d8e2ea;color:transparent!important;padding:10px} .sessionBootMark.bmis-boot img{width:100%;height:100%;display:block} @media(max-width:700px){ header .bmis-mark{width:36px;height:36px} header .bmis-name{font-size:16px} header .bmis-ar{display:none} .bmis-login-brand .bmis-mark{width:68px;height:68px} .bmis-login-brand .bmis-name{font-size:24px} } } @media print{.bmis-lockup,.bmis-login-brand,.bmis-system-avatar{display:none!important}} /* AAA authentication composition — Basra MIS screen identity only */ @media screen{ #gate,#login{min-height:calc(100vh - 74px);padding:30px 18px 54px;background:radial-gradient(circle at 50% 0%,rgba(30,111,217,.055),transparent 34%)} #gate .authModernShell,#login .authModernShell{position:relative;overflow:hidden;border:1px solid #d9e3ec;box-shadow:0 24px 70px rgba(15,45,91,.10);background:rgba(255,255,255,.985)} #gate .authModernShell{max-width:760px;padding:0 30px 30px;border-radius:28px} #login .authModernShell{max-width:560px;padding:0 30px 30px;border-radius:28px} #gate .bmis-login-brand,#login .bmis-login-brand{margin:0 -30px 0;padding:30px 30px 22px;border-bottom:1px solid #e8eef4;background:linear-gradient(180deg,#f8fbfe 0%,#fff 100%)} #gate .bmis-login-brand .bmis-mark,#login .bmis-login-brand .bmis-mark{width:72px;height:72px;margin-bottom:8px} #gate .bmis-login-brand .bmis-name,#login .bmis-login-brand .bmis-name{font-size:27px;letter-spacing:-.25px} #gate .bmis-login-brand .bmis-ar,#login .bmis-login-brand .bmis-ar{font-size:12px;color:#526276;margin-top:7px} #gate .authModernBrand,#login .authModernBrand{display:block;text-align:center;border:0;padding:23px 0 17px;margin:0 auto;max-width:620px} #gate .authModernBrand>div,#login .authModernBrand>div{width:100%} #gate .authModernBrand small,#login .authModernBrand small{display:inline-block;color:#617186;font-size:11px;font-weight:700;letter-spacing:.05px;margin-bottom:5px} #gate .authModernBrand h2,#login .authModernBrand h2{margin:0;color:var(--bmis-navy);font-size:26px;font-weight:900;line-height:1.35} #gate .authModernBrand p{max-width:590px;margin:8px auto 0;color:#667085;font-size:12px;line-height:1.9} #gate .authPortalCards{padding-top:5px;gap:12px} #gate .authPortalCard{min-height:76px;border-radius:16px;padding:14px 16px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease} #gate .authPortalCard:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(15,45,91,.08)} #gate .authPortalCard.primary{background:var(--bmis-navy);border-color:var(--bmis-navy)} #gate .organizationsGateway{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--bmis-navy);min-height:76px;border:1px solid #a9bed4;border-radius:16px;padding:14px 16px;background:#fff;grid-column:1/-1} #gate .organizationsGateway .authPortalIcon{display:grid;place-items:center} #gate .organizationsGateway svg{width:24px;height:24px} #gate .organizationsGateway:focus-visible{outline:3px solid #0758bd;outline-offset:3px} #gate .authForumCode{margin-top:16px;border-radius:18px;background:#f8fafc;padding:18px 20px;border-color:#dce6ef} #gate .authSectionLabel{padding-bottom:2px} #gate .authForumCode input{background:#fff;border-color:#cbd8e5;min-height:44px} #gate .authActions button,#login .authActions button{min-height:46px;border-radius:12px;font-weight:800} #login .loginContext{margin-top:18px} #login .authFields{margin-top:12px} #login .authSecurityNote{border:1px solid #dcece4} .authSecureMark{display:none!important} @media(max-width:700px){ #gate,#login{padding:16px 10px 34px;min-height:calc(100vh - 62px)} #gate .authModernShell,#login .authModernShell{padding:0 17px 20px;border-radius:22px} #gate .bmis-login-brand,#login .bmis-login-brand{margin:0 -17px;padding:23px 17px 18px} #gate .bmis-login-brand .bmis-mark,#login .bmis-login-brand .bmis-mark{width:62px;height:62px} #gate .bmis-login-brand .bmis-name,#login .bmis-login-brand .bmis-name{font-size:23px} #gate .authModernBrand,#login .authModernBrand{padding:19px 0 14px} #gate .authModernBrand h2,#login .authModernBrand h2{font-size:22px} } } /* Exact supplied logo in the existing header. No palette/layout changes. */ @media screen{ header .brand[data-bmis="1"]{display:flex;align-items:center} header .bmis-header-exact-logo{display:block;width:auto;height:48px;max-width:min(360px,42vw);object-fit:contain;object-position:left center} @media(max-width:700px){header .bmis-header-exact-logo{height:38px;max-width:245px}} } /* Basra MIS AAA visual layer — application chrome only. Official report/document previews and footer/navigation retain their native styling. */ @media screen{ :root{ --bmis-ink:#17212b;--bmis-graphite:#334a5f;--bmis-graphite-hover:#263b4e; --bmis-line:#d8e0e7;--bmis-soft:#f5f7f9; } /* Only the real application header receives the premium blend. */ body > header,header.appHeader,header#appHeader{ background:linear-gradient(90deg,#17212b 0%,#26333f 24%,#66727c 46%,#d8dde1 56%,#f7f8f9 63%,#fff 69%,#fff 100%)!important; } body > header .brand[data-bmis="1"],header.appHeader .brand[data-bmis="1"],header#appHeader .brand[data-bmis="1"]{background:transparent!important} /* High contrast for dark graphite action controls only. Do not recolor every button globally. */ .settingsDrawer button:not(.ghost):not(.danger):not(.warn):not(.okbtn), .actionBar button:not(.ghost):not(.danger):not(.warn):not(.okbtn), .actions button:not(.ghost):not(.danger):not(.warn):not(.okbtn), .tableActions button:not(.ghost):not(.danger):not(.warn):not(.okbtn){ background:var(--bmis-graphite);border-color:var(--bmis-graphite);color:#fff; } .settingsDrawer button:not(.ghost):not(.danger):not(.warn):not(.okbtn) *, .actionBar button:not(.ghost):not(.danger):not(.warn):not(.okbtn) *, .actions button:not(.ghost):not(.danger):not(.warn):not(.okbtn) *, .tableActions button:not(.ghost):not(.danger):not(.warn):not(.okbtn) *{color:#fff} .settingsDrawer button:not(.ghost):not(.danger):not(.warn):not(.okbtn):hover, .actionBar button:not(.ghost):not(.danger):not(.warn):not(.okbtn):hover, .actions button:not(.ghost):not(.danger):not(.warn):not(.okbtn):hover, .tableActions button:not(.ghost):not(.danger):not(.warn):not(.okbtn):hover{background:var(--bmis-graphite-hover)} /* White/light surfaces always use dark readable text. */ .card,.adminPanel,.recordCard,.entityCard,.notificationCard,.approvalItem,.governanceCard,.searchResult,.auditStat,.kpi, input,select,textarea{color:var(--bmis-ink)} input::placeholder,textarea::placeholder{color:#77838e} /* Icon tiles: explicit contrast instead of inherited white-on-pastel. */ .icon,.menuIcon,.actionIcon,.quickIcon,.tileIcon,.settingsIcon{ color:var(--bmis-graphite)!important; } .icon svg,.menuIcon svg,.actionIcon svg,.quickIcon svg,.tileIcon svg,.settingsIcon svg{ color:var(--bmis-graphite)!important;stroke:currentColor; } .icon svg [fill="currentColor"],.menuIcon svg [fill="currentColor"],.actionIcon svg [fill="currentColor"], .quickIcon svg [fill="currentColor"],.tileIcon svg [fill="currentColor"],.settingsIcon svg [fill="currentColor"]{fill:currentColor} /* Settings drawer/navigation cards return to light surfaces; no dark block merging. */ .settingsDrawer{background:#f7f9fa;border-color:var(--bmis-line)} .settingsDrawer .settingsMenuItem,.settingsDrawer .settingsNavItem,.settingsDrawer .menuItem{ background:#fff;color:var(--bmis-ink);border-color:var(--bmis-line) } .settingsDrawer .settingsMenuItem *,.settingsDrawer .settingsNavItem *,.settingsDrawer .menuItem *{color:inherit} /* Footer/bottom navigation must remain separated light controls as before. */ footer button,.bottomNav button,.bottom-nav button,.mobile-bottom-nav button,.footerNav button,.footerActions button{ background:#fff!important;color:var(--bmis-ink)!important;border-color:var(--bmis-line)!important; } footer button *,.bottomNav button *,.bottom-nav button *,.mobile-bottom-nav button *,.footerNav button *,.footerActions button *{color:inherit!important} /* Never skin official document/report preview content. */ .documentPreview,.document-preview,.reportPreview,.report-preview,.printPreview,.print-preview, .officialDocument,.official-document,.reportDocument,.report-document, iframe.reportPreview,iframe.documentPreview{ --navy:#0F2D5B;--blue:#1E6FD9;--blue2:#00B3A4;--text:#111827;--muted:#667085; } } /* Hard isolation for print/export: official documents keep their established original appearance. */ @media print{ :root{--navy:#0F2D5B;--blue:#1E6FD9;--blue2:#00B3A4;--text:#111827;--muted:#667085} } /* Settings-only icon contrast fix. */ @media screen{ /* Applies only inside the settings drawer/menu on every page. */ .settingsDrawer .settingsMenuItem .icon, .settingsDrawer .settingsNavItem .icon, .settingsDrawer .menuItem .icon, .settingsDrawer .settingsMenuItem .menuIcon, .settingsDrawer .settingsNavItem .menuIcon, .settingsDrawer .menuItem .menuIcon, .settingsDrawer .settingsIcon{ background:#eef3f6!important; color:#263b4e!important; border:1px solid #cbd6df!important; opacity:1!important; } .settingsDrawer .settingsMenuItem .icon *, .settingsDrawer .settingsNavItem .icon *, .settingsDrawer .menuItem .icon *, .settingsDrawer .settingsMenuItem .menuIcon *, .settingsDrawer .settingsNavItem .menuIcon *, .settingsDrawer .menuItem .menuIcon *, .settingsDrawer .settingsIcon *{ color:#263b4e!important; stroke:#263b4e!important; opacity:1!important; } .settingsDrawer .settingsMenuItem .icon svg, .settingsDrawer .settingsNavItem .icon svg, .settingsDrawer .menuItem .icon svg, .settingsDrawer .settingsMenuItem .menuIcon svg, .settingsDrawer .settingsNavItem .menuIcon svg, .settingsDrawer .menuItem .menuIcon svg, .settingsDrawer .settingsIcon svg{ stroke:#263b4e!important; fill:none; opacity:1!important; } .settingsDrawer .settingsMenuItem .icon svg [fill="currentColor"], .settingsDrawer .settingsNavItem .icon svg [fill="currentColor"], .settingsDrawer .menuItem .icon svg [fill="currentColor"], .settingsDrawer .settingsMenuItem .menuIcon svg [fill="currentColor"], .settingsDrawer .settingsNavItem .menuIcon svg [fill="currentColor"], .settingsDrawer .menuItem .menuIcon svg [fill="currentColor"], .settingsDrawer .settingsIcon svg [fill="currentColor"]{ fill:#263b4e!important; } /* Logout keeps a distinct but readable destructive icon treatment. */ .settingsDrawer .danger .icon, .settingsDrawer .danger .menuIcon, .settingsDrawer .danger .settingsIcon{ background:#fff1ef!important; color:#9f3a31!important; border-color:#efc7c1!important; } .settingsDrawer .danger .icon *, .settingsDrawer .danger .menuIcon *, .settingsDrawer .danger .settingsIcon *{ color:#9f3a31!important; stroke:#9f3a31!important; } } /* Settings glyphs only: strong AAA icon visibility. */ @media screen{ /* Do not change settings labels/cards/backgrounds here — glyphs only. */ .settingsDrawer :is(.settingsMenuItem,.settingsNavItem,.menuItem) :is(.icon,.menuIcon,.settingsIcon), .settingsDrawer :is(.icon,.menuIcon,.settingsIcon){ color:#0f2d46!important; opacity:1!important; font-weight:900!important; text-shadow:none!important; } .settingsDrawer :is(.settingsMenuItem,.settingsNavItem,.menuItem) :is(.icon,.menuIcon,.settingsIcon) svg, .settingsDrawer :is(.icon,.menuIcon,.settingsIcon) svg{ color:#0f2d46!important; stroke:#0f2d46!important; stroke-width:2.35!important; opacity:1!important; filter:none!important; } .settingsDrawer :is(.settingsMenuItem,.settingsNavItem,.menuItem) :is(.icon,.menuIcon,.settingsIcon) svg path, .settingsDrawer :is(.settingsMenuItem,.settingsNavItem,.menuItem) :is(.icon,.menuIcon,.settingsIcon) svg circle, .settingsDrawer :is(.settingsMenuItem,.settingsNavItem,.menuItem) :is(.icon,.menuIcon,.settingsIcon) svg line, .settingsDrawer :is(.settingsMenuItem,.settingsNavItem,.menuItem) :is(.icon,.menuIcon,.settingsIcon) svg polyline, .settingsDrawer :is(.icon,.menuIcon,.settingsIcon) svg path, .settingsDrawer :is(.icon,.menuIcon,.settingsIcon) svg circle, .settingsDrawer :is(.icon,.menuIcon,.settingsIcon) svg line, .settingsDrawer :is(.icon,.menuIcon,.settingsIcon) svg polyline{ stroke:#0f2d46!important; opacity:1!important; } .settingsDrawer :is(.icon,.menuIcon,.settingsIcon) svg [fill]:not([fill="none"]){ fill:#0f2d46!important; } /* Text/emoji glyph fallback used by some settings entries. */ .settingsDrawer :is(.icon,.menuIcon,.settingsIcon)>span, .settingsDrawer :is(.icon,.menuIcon,.settingsIcon)>i{ color:#0f2d46!important; opacity:1!important; filter:none!important; } /* Logout glyph alone uses a clear destructive tone. */ .settingsDrawer .danger :is(.icon,.menuIcon,.settingsIcon), .settingsDrawer .danger :is(.icon,.menuIcon,.settingsIcon) *{ color:#9f3a31!important; stroke:#9f3a31!important; } } /* Exact settingsItemIcon SVG rendering — glyph only. */ @media screen{ .settingsDrawer .settingsItemIcon svg{ width:22px!important;height:22px!important;display:block!important; stroke:#173b57!important;stroke-width:2.15!important; stroke-linecap:round!important;stroke-linejoin:round!important; opacity:1!important;filter:none!important; } .settingsDrawer .settingsLogout .settingsItemIcon svg{ stroke:#9f3a31!important; } } /* Sync status remains readable on the header gradient in every semantic state. Scope is the existing control only; state, visibility and queue ownership stay unchanged. */ @media screen{ body > header #cloudStatusBadge{ box-sizing:border-box;min-height:44px;min-width:44px;max-width:100%; padding:10px 12px;border:1px solid #9fb2c2;border-radius:12px; background:#edf3f8;color:#173b57;font-size:12px;font-weight:700;line-height:1.5; vertical-align:middle;cursor:pointer; } body > header #cloudStatusBadge.approved{background:#e7f6ee;color:#14532d} body > header #cloudStatusBadge.change{background:#fff3d6;color:#654500} body > header #cloudStatusBadge.rejected{background:#fdecea;color:#7f1d1d} body > header #cloudStatusBadge:focus-visible{outline:3px solid #173b57;outline-offset:3px;box-shadow:0 0 0 3px #fff} }