/* ========================================================================= My Profile (N4LRegistration/UpdateRegistration + ViewMemberDetails) Page-scoped redesign rules — everything here is scoped under .n4l-myprofile so it can NEVER affect any other page that also loads main.css / CustomLayout.css / CustomTab.css / style_theme.css. Ref: SRS_NET4LOG_MyProfile_v0.1, TDD_NET4LOG_MyProfile_v0.1. ========================================================================= */ .n4l-myprofile { --n4l-purple: #2A007C; --n4l-purple-b: #4D00E2; --n4l-orange: #FE5F00; } /* Bootstrap's .container caps at 540/720/960/1140px by breakpoint, which reads as a very narrow column on a wide screen for a page this content-heavy. Drop the cap entirely (scoped to this page only) so the page uses the full available width. Horizontal padding matches .name-CidStuck's own `padding: 10px 2rem` (style_theme.css) so the hero/cards align with the blue context strip's edges above. */ .n4l-myprofile .container { max-width: 100% !important; width: 100%; padding-left: 2rem !important; padding-right: 2rem !important; } /* The "ace" admin-theme stylesheet (Assets/dist/css/ace.min.css) also defines .page-content with its own responsive horizontal padding (up to 2.25rem at wide viewports). Since .page-content is a CHILD of .container here, that padding was stacking on top of the 2rem above, pushing this page's content in further than the blue .name-CidStuck context strip. Zero it out so only .container's 2rem controls the inset, matching that strip exactly. */ .n4l-myprofile .page-content { padding-left: 0 !important; padding-right: 0 !important; } /* Belt-and-braces: reset every remaining ancestor in the chain (.dc-main-section > .container > .page-content > .row > the 97%-width .dc-docsingle-holder) so nothing left in it can still narrow the page below .container's controlled width. */ .n4l-myprofile .dc-main-section, .n4l-myprofile .row.justify-content-md-center { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .n4l-myprofile .dc-docsingle-holder { width: 100% !important; } /* ------------------------------------------------------------------- FR-1 / FR-2 — Profile summary hero: logo, company name, quick stats, completion meter. New markup (no equivalent existed before); all values are read-only summaries of data already on the page. ------------------------------------------------------------------- */ .n4l-myprofile .n4l-hero { /* .row (Bootstrap 4) is a flex container and .justify-content-md-center centers flex items that don't have an explicit width instead of stretching them -- without this, the hero shrinks to content width and gets centered with gaps on both sides. */ width: 100%; box-sizing: border-box; background: linear-gradient(120deg, var(--n4l-purple-b) 0%, var(--n4l-purple) 78%); border-radius: 16px; padding: 20px 24px; color: #fff; margin: 14px 5px 20px; box-shadow: 0 10px 30px rgba(42, 0, 124, .18); } .n4l-myprofile .n4l-hero-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .n4l-myprofile .n4l-hero-logo { width: 56px; height: 56px; box-sizing: border-box; padding: 6px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); } /* jQuery UI's default .ui-autocomplete has no height cap at all -- fine for short suggestion lists (Country, Group Company, etc.) but the UN Location autocomplete (Office & Locations -> Location Covered, #txtunloc) can return a very long result set that then runs off the bottom of the viewport with no way to scroll to the rest. NOTE: jQuery UI always appends the menu as a direct child of , never inside .n4l-myprofile -- a page-scoped ".n4l-myprofile .ui-autocomplete" selector can never match it (verified live), so this is scoped instead via the widget's own `classes` option (see #txtunloc's .autocomplete({ classes: {...} }) call), which tags only that one instance regardless of where jQuery UI parks it in the DOM. */ .n4l-unloc-autocomplete { max-height: 260px; overflow-y: auto; overflow-x: hidden; } .n4l-myprofile .n4l-hero-logo img { width: 100%; height: 100%; object-fit: contain; } .n4l-myprofile .n4l-hero-id { flex: 1; min-width: 220px; } .n4l-myprofile .n4l-hero-id h1 { font-size: 19px; font-weight: 800; margin: 0; color: #fff; } .n4l-myprofile .n4l-hero-sub { font-size: 12px; opacity: .88; margin-top: 4px; display: flex; gap: 14px; flex-wrap: wrap; } .n4l-myprofile .n4l-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; } .n4l-myprofile .n4l-btn { border: 0; border-radius: 9px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .n4l-myprofile .n4l-btn-ghost { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .5); } .n4l-myprofile .n4l-btn-ghost:hover { background: rgba(255, 255, 255, .28); } .n4l-myprofile .n4l-btn-orange { background: var(--n4l-orange); color: #fff; box-shadow: 0 6px 14px rgba(254, 95, 0, .35); } .n4l-myprofile .n4l-btn-orange:hover { background: #e35400; } .n4l-myprofile .n4l-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; } .n4l-myprofile .n4l-hstat { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 10px 12px; } .n4l-myprofile .n4l-hstat-n { font-size: 17px; font-weight: 800; } .n4l-myprofile .n4l-hstat-l { font-size: 10.5px; opacity: .82; margin-top: 2px; } .n4l-myprofile .n4l-meter-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .n4l-myprofile .n4l-meter { flex: 1; height: 8px; background: rgba(255, 255, 255, .22); border-radius: 10px; overflow: hidden; } .n4l-myprofile .n4l-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--n4l-orange), #ffb347); border-radius: 10px; } .n4l-myprofile .n4l-meter-txt { font-size: 11px; font-weight: 700; white-space: nowrap; } @media (max-width: 900px) { .n4l-myprofile .n4l-hero-stats { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------------------------- FR-3 — Tab bar: pill style, brand active-state, wrap instead of horizontal scroll on narrow viewports. ------------------------------------------------------------------- */ .n4l-myprofile .dc-navdocsingletab { display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px; margin: 0 0 24px !important; background: #fff; border: 1px solid #e7e8f0; border-radius: 14px; box-shadow: 0 4px 18px rgba(42, 0, 124, .06); } .n4l-myprofile .dc-navdocsingletab li { float: none; flex: 0 0 auto !important; width: auto !important; list-style: none; } .n4l-myprofile .dc-navdocsingletab li a { display: inline-block; border: 0; border-radius: 10px; padding: 9px 18px !important; line-height: 1.4 !important; color: #565b70; font-weight: 600; white-space: nowrap; } .n4l-myprofile .dc-navdocsingletab li a:hover { background: #f4f2fb; color: var(--n4l-purple); } .n4l-myprofile .dc-navdocsingletab li a.active { background: linear-gradient(120deg, var(--n4l-purple-b), var(--n4l-purple)) !important; color: #fff; box-shadow: 0 6px 14px rgba(42, 0, 124, .28); } /* ------------------------------------------------------------------- FR-7 / FR-9 / FR-14 / FR-15 — In-page grid section banners (".dc-hrading": Office, Location Covered, Office Contact, Social Media, Services, Key Clients, Business Volume, Company Finance, Shareholders, Directors, Group Companies, My Documents). Replaces the legacy sky-blue gradient with the brand gradient. ------------------------------------------------------------------- */ .n4l-myprofile .dc-hrading { background: #fff !important; height: auto !important; padding: 14px 20px !important; border-bottom: 1px solid #e7e8f0; border-top-left-radius: 10px; border-top-right-radius: 10px; display: flex !important; align-items: center; gap: 10px; } .n4l-myprofile .dc-hrading h3, .n4l-myprofile .dc-hrading h4 { color: var(--n4l-purple) !important; font-weight: 800 !important; font-size: 15px !important; margin: 0 !important; } /* ------------------------------------------------------------------- Grid section header (icon + title + count badge + Add button, all on one row) — combines what used to be two disconnected pieces (a separate "row" holding just the Add button, and the table's own
banner). Only markup touched is the section-head row itself; the table/tbody/Add-modal-trigger button keep their existing ids/onclick handlers untouched. ------------------------------------------------------------------- */ .n4l-myprofile .n4l-sect-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 5px 10px; /* The theme's own .form-group is float:left (see main.css) -- the old markup's
wrapper (Bootstrap clearfix) absorbed that float; this replaces it now that the row wrapper is gone, so a sect-head following a table's .form-group doesn't collapse to 0 width and get shoved beside the float instead of below it. */ clear: both; } /* The theme's global .dc-btn is a fixed width:103px (main.css), sized for a short label like "ADD" -- longer labels ("Add Office", "Add Location") overflow that fixed box and clip. Let this button size to its own content instead. */ /* Every "Add X" button on this page is .dc-btn.btn-sm regardless of which container it sits in (a .n4l-sect-head, or its own div below a table like Key Clients) -- fix the width globally for that combination rather than re-scoping per container each time. */ .n4l-myprofile .dc-btn.btn-sm { width: auto; min-width: 103px; padding: 0 16px; white-space: nowrap; } .n4l-myprofile .n4l-sect-head h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 800; color: #2a3040; } .n4l-myprofile .n4l-sect-head h4 img.menuiconright { width: 20px; height: 20px; margin: 0; /* these SVGs are hardcoded fill="#FFFFFF" (designed for the old purple banner background) -- invisible on the new white/light header backgrounds. img can't take a CSS fill, so force it dark via filter instead of touching the (shared) source SVG files. */ filter: brightness(0); } .n4l-myprofile .n4l-count { background: #efe9fb; color: var(--n4l-purple); font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 20px; } .n4l-myprofile .dc-hrading img.menuiconright { width: 22px !important; height: 22px !important; margin: 0 !important; /* same hardcoded-white-SVG issue as .n4l-sect-head above, applies to every other grid's still-in-table banner icon (Location Covered, Office Contacts, Services, Key Clients, ...). */ filter: brightness(0); } .n4l-myprofile .n4l-card-head-row { display: flex; align-items: center; gap: 8px; } .n4l-myprofile .n4l-hint { color: #70768c; font-size: 11.5px; font-weight: 500; margin-top: 3px; } /* .n4l-card-head shares the .dc-hrading rule above (same element) for background/padding/border, but stacks icon+title over an optional hint line instead of a single row. The Billing Contact header needs its title alongside the Copy-Admin-Contact checkbox instead, so it opts back into a row via .n4l-card-head-inline. */ .n4l-myprofile .n4l-card-head { flex-direction: column !important; align-items: flex-start !important; } .n4l-myprofile .n4l-card-head.n4l-card-head-inline { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } /* ------------------------------------------------------------------- FR-4 / FR-5 / FR-6 / FR-13 — Profile Details (#page1) + Corporate Information (#page7): group existing fields into distinct cards (Company Details / Admin Contact / Billing Contact / Tax Registration / Company Profile), reusing the same purple-banner header treatment as the grid sections above for consistency. No field ids, validation handlers, or the Copy-Admin-Contact / VAT-GST JS behaviour are touched — only wrapper markup + colour. Generic .n4l-card rules apply page-wide (any tab); page1-only specifics (VAT radios, billing checkbox, disabled field) stay scoped to #page1 below. ------------------------------------------------------------------- */ .n4l-myprofile .n4l-card { background: #fff; border: 1px solid #e7e8f0; border-radius: 12px; box-shadow: 0 4px 18px rgba(42, 0, 124, .06); margin: 0 5px 18px; overflow: hidden; } /* Standalone Save action card (Profile Details) -- centred, not tied to a specific field layout. */ .n4l-myprofile .n4l-save-card { padding: 18px; text-align: center; } .n4l-myprofile .n4l-card-head .dc-check-container label, .n4l-myprofile .n4l-card-head .dc-check-container .copy-text { color: #3a3f52 !important; margin: 0 0 0 8px; } .n4l-myprofile #page1 .n4l-card-head #chkbillcntact { border-color: var(--n4l-purple-b); accent-color: var(--n4l-orange); } .n4l-myprofile .n4l-card-body { padding: 16px 15px 4px; /* .n4l-card-head carries the theme's .dc-title class, which is a bare, unscoped float:left; width:100% in main.css. Our own .dc-hrading rule makes the head display:flex, but flex and float aren't mutually exclusive -- it's still floated. A plain block child (e.g. .form-group) just flows below a float in normal flow, but any BFC-establishing child here (Bootstrap's .row is display:flex, itself a new BFC) gets squeezed to 0 width beside a still-active 100%-wide float instead of flowing below it. Clearing here fixes it for every card, present and future. */ clear: both; } /* ------------------------------------------------------------------- Company Profile card (#page7) -- logo dropzone + requirements side by side (mockup's .logobox/.dropzone/.logo-meta), and the Company Type / Year / Capital / Employees / Offices fields as a 3-column grid with stacked labels, matching every other converted section. #dropArea / #CompanyFile / #logoPreview keep their ids -- the drag & drop / click-to-upload / preview JS is untouched. ------------------------------------------------------------------- */ .n4l-myprofile .n4l-logobox { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .n4l-myprofile .n4l-dropzone { width: 150px; height: 150px; border: 2px dashed #cfc7ea; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #70768c; font-size: 11.5px; background: #faf9ff; flex-shrink: 0; padding: 10px; cursor: pointer; box-sizing: border-box; } .n4l-myprofile .n4l-dropzone.drag-over { border-color: var(--n4l-purple-b); background: #f3f1fc; } .n4l-myprofile .n4l-dropzone .logo-preview-box { margin-bottom: 6px; } .n4l-myprofile .n4l-drop-text { margin: 0; } .n4l-myprofile .n4l-logo-meta { font-size: 12px; color: #70768c; line-height: 1.6; } .n4l-myprofile .n4l-logo-meta b { color: #2a3040; } /* Add Document modal's file drop zone -- wider/shorter than the square Company Logo dropzone above, same .n4l-dropzone base (border/hover/ click-to-browse behavior reused via docDropArea's JS). */ .n4l-myprofile .n4l-doc-dropzone { width: 100%; height: auto; min-height: 90px; padding: 18px; } .n4l-myprofile .n4l-doc-dropzone-icon { font-size: 20px; color: var(--n4l-purple-b); margin-bottom: 4px; } .n4l-myprofile .n4l-doc-dropzone-hint { margin: 4px 0 0; font-size: 10.5px; color: #9a9fb0; } .n4l-myprofile .n4l-btn-line, .n4l-myprofile .n4l-btn-danger-soft { border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .n4l-myprofile .n4l-btn-line { background: #fff; border: 1px solid #d8dae4; color: var(--n4l-purple-b); } .n4l-myprofile .n4l-btn-line:hover { background: #f6f4fd; border-color: var(--n4l-purple-b); } .n4l-myprofile .n4l-btn-danger-soft { background: #fdecea; border: 1px solid #fdecea; color: #e0483e; } .n4l-myprofile .n4l-btn-danger-soft:hover { background: #fbdedb; } .n4l-myprofile .n4l-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0px; margin: 0 5px; } /* The theme's global .form-group (main.css) carries its own margin-bottom:20px, which stacks on TOP of the grid's own gap between rows -- zero it out here so gap is the only spacing. */ .n4l-myprofile .n4l-grid3 .form-group { margin: 0; } .n4l-myprofile .n4l-grid3 label { display: block; font-size: 12px; font-weight: 700; color: #3a3f52; margin-bottom: 6px; } .n4l-myprofile .n4l-grid3 .form-control, .n4l-myprofile .n4l-grid3 select.dc-select { width: 100%; height: 40px !important; border: 1px solid #d8dae4 !important; border-radius: 9px !important; padding: 0 12px !important; font-size: 13.5px !important; } @media (max-width: 900px) { .n4l-myprofile .n4l-grid3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 576px) { .n4l-myprofile .n4l-grid3 { grid-template-columns: 1fr; } } /* Sub-heading inside the Tax Registration card ("Do You Have VAT/GST ID?") */ .n4l-myprofile #page1 .vat-gst-checkDiv .dc-formtitle h4 { color: var(--n4l-purple) !important; font-weight: 600 !important; } .n4l-myprofile #page1 .dc-radio-container .dc-radio, .n4l-myprofile #page1 .vat-gst-checkDiv div .dc-radio { accent-color: var(--n4l-orange); border-color: var(--n4l-orange) !important; } /* Remove the legacy sky-blue highlight on the disabled Company Name field */ .n4l-myprofile #txtCustName { background-color: #F3F1FC !important; border-color: #d8dae4 !important; color: var(--n4l-purple) !important; } /* ------------------------------------------------------------------- FR-16 — Add / Edit popup headers (".modal-header.modalheaderblue": Office, Location Covered, Office Contact, Social Media, Service, Key Client, Business Volume, Financial Year, Shareholder, Director, Group Company, Document + the Location Map popup). Same brand gradient as the section banners, for visual parity across every popup. Field markup / Save handlers are untouched by this file. ------------------------------------------------------------------- */ .n4l-myprofile .modal-header.modalheaderblue { background: linear-gradient(120deg, var(--n4l-purple-b), var(--n4l-purple)) !important; } /* Exact spec from MOCKUP_NET4LOG_MyProfile_v0.1.html's .fld rules -- applies to every Add/Edit popup's fields at once. */ .n4l-myprofile .modal-body label { display: block; font-size: 12px; font-weight: 700; color: #3a3f52; margin-bottom: 6px !important; } .n4l-myprofile .modal-body input[type="text"], .n4l-myprofile .modal-body textarea, .n4l-myprofile .modal-body select { width: 100%; height: 40px !important; border: 1px solid #d8dae4 !important; border-radius: 9px !important; padding: 0 12px !important; font-size: 13.5px !important; outline: none; background: #fff; color: #1c1c1c; } .n4l-myprofile .modal-body textarea { height: 78px !important; padding: 10px 12px !important; resize: vertical; } .n4l-myprofile .modal-body input[type="text"]:focus, .n4l-myprofile .modal-body textarea:focus, .n4l-myprofile .modal-body select:focus { border-color: var(--n4l-purple-b) !important; box-shadow: 0 0 0 3px rgba(77, 0, 226, .1); } .n4l-myprofile .modal-body.n4l-modal-fields .form-group { margin-bottom: 14px; } .n4l-myprofile .modal-body.n4l-modal-fields .form-group:last-child { margin-bottom: 0; } .n4l-myprofile .modal-body.n4l-modal-fields > .row { margin-bottom: 14px; } .n4l-myprofile .modal-body.n4l-modal-fields > .row:last-child { margin-bottom: 0; } /* Fix: every modal's footer pairs a plain Bootstrap .btn-outline-secondary Cancel next to a .dc-btn Add/Save -- Bootstrap's default radius (.25rem) and 1px border don't match .dc-btn's 7px radius + 2px border, so the two buttons' corners visibly disagree. Matched here instead of restyling every Cancel button individually (12 modals share this pairing). */ .n4l-myprofile .modal-footer .btn-outline-secondary { border-radius: 7px; border-width: 2px; /* .dc-btn (the paired Add/Save button) sets its own font-size:14px and a fixed line-height:21.5px -- Bootstrap's .btn-outline-secondary defaults (1rem/16px, line-height:1.5 relative) don't match either, so even with the same border/radius above the two buttons came out slightly different heights. Matched explicitly. */ font-size: 14px; line-height: 21.5px; } /* Mockup's toggle switch (.switchrow/.switch) for Key Clients' Profile Access -- the real value still lives on the original hidden markup and onclick handlers everywhere — selecting on the existing `value` attribute (Edit / Remove are static, server-rendered, never changed by JS) instead of any new class, so no markup or JS changes are needed at all. ------------------------------------------------------------------- */ .n4l-myprofile table.table { border: 1px solid #e7e8f0; border-radius: 0 0 10px 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: 0 2px 8px rgba(20, 20, 40, .04); } /* Mockup's table.dt has no vertical cell borders at all -- only horizontal row separators (border-bottom). Whatever loaded stylesheet is giving these tables vertical lines, kill them here. */ .n4l-myprofile table.table td, .n4l-myprofile table.table th { border-left: 0 !important; border-right: 0 !important; } /* Offices and Location Covered are converted to the .n4l-sect-head pattern (their in-table banner row was removed, moved above the table) -- round all four corners since there's no banner sitting on top of them anymore. The other grids still have their in-table banner and keep the bottom-only radius above until they're converted the same way. */ .n4l-myprofile #Officetable, .n4l-myprofile #Unloctable, .n4l-myprofile #OffCntcttable, .n4l-myprofile #socialtable, .n4l-myprofile #CustKeytable, .n4l-myprofile #busvoltable, .n4l-myprofile #CompFintable, .n4l-myprofile #ShareHoldtable, .n4l-myprofile #OtherHoldtable, .n4l-myprofile #GrpCmptable { border-radius: 10px; } /* Hide the "Action"/"Action" header labels visually only -- the text is untouched in the DOM, just made transparent so the two action columns read as a blank icon-button area, matching the target design, without deleting/renaming anything. */ .n4l-myprofile #Officetable tr.table-active th:nth-last-child(-n+2) { color: transparent !important; } .n4l-myprofile #Unloctable tr.table-active th:nth-child(6), .n4l-myprofile #Unloctable tr.table-active th:nth-last-child(1) { color: transparent !important; } .n4l-myprofile #OffCntcttable tr.table-active th:nth-child(7), .n4l-myprofile #OffCntcttable tr.table-active th:nth-last-child(1) { color: transparent !important; } .n4l-myprofile #socialtable tr.table-active th:nth-child(3), .n4l-myprofile #socialtable tr.table-active th:nth-last-child(1) { color: transparent !important; } .n4l-myprofile #CustKeytable tr.table-active th:nth-child(9), .n4l-myprofile #CustKeytable tr.table-active th:nth-last-child(1) { color: transparent !important; } .n4l-myprofile #busvoltable tr.table-active th:nth-child(6), .n4l-myprofile #busvoltable tr.table-active th:nth-child(7) { color: transparent !important; } .n4l-myprofile #CompFintable tr.table-active th:nth-child(4), .n4l-myprofile #CompFintable tr.table-active th:nth-child(5) { color: transparent !important; } .n4l-myprofile #ShareHoldtable tr.table-active th:nth-child(7), .n4l-myprofile #ShareHoldtable tr.table-active th:nth-child(10) { color: transparent !important; } .n4l-myprofile #OtherHoldtable tr.table-active th:nth-child(8), .n4l-myprofile #OtherHoldtable tr.table-active th:nth-child(12) { color: transparent !important; } .n4l-myprofile #GrpCmptable tr.table-active th:nth-child(5), .n4l-myprofile #GrpCmptable tr.table-active th:nth-child(8) { color: transparent !important; } /* Address isn't shown as its own column (mockup drops it from the read-only Directors grid) -- hidden visually only, stays fully editable in the Add/Edit modal and the underlying cell data is untouched for save/edit JS. */ .n4l-myprofile #OtherHoldtable tr.table-active th:nth-child(6), .n4l-myprofile #OtherHoldtable tbody td:nth-child(6) { display: none; } /* Website / Profile Access don't appear as their own columns (mockup folds Website into the Customer Name cell as a subtitle, and drops Profile Access from the read-only grid view entirely) -- hidden visually only, both fields stay fully editable in the Add/Edit modal and the underlying cell data is untouched for save/edit JS. */ .n4l-myprofile #CustKeytable tr.table-active th:nth-child(2), .n4l-myprofile #CustKeytable tr.table-active th:nth-child(3), .n4l-myprofile #CustKeytable tbody td:nth-child(2), .n4l-myprofile #CustKeytable tbody td:nth-child(3) { display: none; } .n4l-myprofile table.table tr.table-active { /* A negative alpha is invalid CSS -- browsers clamp it to 0, i.e. fully transparent (no tint at all, plain white shows through). */ background: rgba(0, 0, 0, 0) !important; } .n4l-myprofile table.table tr.table-active th { color: #5c6178; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #e7e8f0; /* column width% hints often sum past 100% across a grid's many columns, so the browser shrinks columns below their header's natural width -- keep headers ("Office Name" etc.) on one line instead of wrapping. */ white-space: nowrap; } .n4l-myprofile table.table.table-hover tbody tr:hover { background: #FBFAFF; } .n4l-myprofile table.table tbody td { vertical-align: middle; } /* Pin icon in front of the Offices grid's Geo Coordinate column -- CSS ::before generated content, NOT part of the cell's actual innerHTML, so anything that reads this cell's .html() (the Save payload builder, the Edit-popup readback) still gets back exactly the plain "lat,lng" string, unaffected. */ .n4l-myprofile #Officetable tbody td:nth-child(3)::before { content: "📍 "; } /* Icon-only Edit/Remove buttons: the value="Edit"/"Remove" text/DOM is untouched (still there for any code or assistive tech that reads it) -- it's just made transparent so only a background-image icon shows. can't render ::before/::after content, so background-image is the only CSS-only route to an icon here. */ .n4l-myprofile input[type="button"][value="Edit"], .n4l-myprofile input[type="button"][value="Remove"] { border-radius: 7px !important; font-size: 11.5px !important; padding: 4px !important; font-weight: 600; box-shadow: none !important; color: transparent !important; width: 32px !important; min-width: 32px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important; } /* Icon is plain dark/black by default in both states (matching the mockup's .icobtn, which never recolours the glyph itself) -- only the border colour and a faint tint background change on hover. */ .n4l-myprofile input[type="button"][value="Edit"] { background-color: #fff !important; border: 1px solid #e7e8f0 !important; background-image: url("data:image/svg+xml,") !important; } .n4l-myprofile input[type="button"][value="Edit"]:hover { background-color: #f6f4fd !important; border-color: var(--n4l-purple-b) !important; } .n4l-myprofile input[type="button"][value="Remove"] { background-color: #fff !important; border: 1px solid #e7e8f0 !important; background-image: url("data:image/svg+xml,") !important; } .n4l-myprofile input[type="button"][value="Remove"]:hover { background-color: #fdecea !important; border-color: #e0483e !important; } /* ------------------------------------------------------------------- FR-10 — Key Clients: display-only live progress banner replacing the plain red note. Count is refreshed by a MutationObserver on #tbody_custkey (see UpdateRegistration.cshtml) — no existing Add/Edit/Remove handler is touched. ------------------------------------------------------------------- */ .n4l-myprofile .n4l-info-banner { background: #eef4ff; color: #1a4d99; border: 1px solid #d3e3fb; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 500; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 5px 14px; } .n4l-myprofile .n4l-progress-chip { margin-left: auto; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #d3e3fb; border-radius: 20px; padding: 3px 12px; font-weight: 700; color: var(--n4l-purple); } .n4l-myprofile .n4l-miniprog { width: 64px; height: 7px; border-radius: 6px; background: #eee; overflow: hidden; display: inline-block; vertical-align: middle; } .n4l-myprofile .n4l-miniprog i { display: block; height: 100%; background: var(--n4l-purple-b); } /* Key Clients' Customer Name cell folds the website in as a small muted subtitle under the bold name (mockup pattern) instead of its own grid column -- the standalone Website column stays in the DOM (data preserved for save/edit) but is hidden visually below. */ .n4l-myprofile .n4l-muted-sm { color: #9aa0b4; font-size: 11px; font-weight: 500; } /* ------------------------------------------------------------------- FR-11 — Business Volume / Company Finance: display-only summary stat cards above each grid, computed client-side from the rows already rendered (see UpdateRegistration.cshtml) — no new data source, no existing handler touched. ------------------------------------------------------------------- */ .n4l-myprofile .n4l-statcards { display: flex; gap: 12px; margin: 0 5px 14px; flex-wrap: wrap; } .n4l-myprofile .n4l-statcard { flex: 1; min-width: 160px; background: #fff; border: 1px solid #e7e8f0; border-radius: 10px; padding: 12px 16px; } .n4l-myprofile .n4l-statcard .n4l-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: #70768c; font-weight: 700; } .n4l-myprofile .n4l-statcard .n4l-stat-value { font-size: 19px; font-weight: 800; margin-top: 2px; color: var(--n4l-purple); } /* First card in a stat row is highlighted (mockup's .statcard.hl) -- the rest stay plain white/bordered. */ .n4l-myprofile .n4l-statcard.n4l-hl { background: linear-gradient(120deg, var(--n4l-purple-b), var(--n4l-purple)); color: #fff; border: 0; } .n4l-myprofile .n4l-statcard.n4l-hl .n4l-stat-label { color: rgba(255, 255, 255, .75); } .n4l-myprofile .n4l-statcard.n4l-hl .n4l-stat-value { color: #fff; } /* ------------------------------------------------------------------- FR-7 — Port Type badges (Air/Sea/Land/Rail) on the Locations Covered grid. Class assigned client-side (see portTypeBadgeClass in UpdateRegistration.cshtml) purely for display — the underlying cell text/value is unchanged. ------------------------------------------------------------------- */ .n4l-myprofile .n4l-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; } .n4l-myprofile .n4l-badge.air { background: #e6f3ff; color: #0a6ebd; } .n4l-myprofile .n4l-badge.sea { background: #e5f8ef; color: #128a4a; } .n4l-myprofile .n4l-badge.land { background: #fff4e5; color: #b96a0a; } .n4l-myprofile .n4l-badge.rail { background: #f3f1fc; color: var(--n4l-purple); } /* Icon is now a real injected by the classifier script (refreshPortTypeBadges) -- same class + EmojiBaseline.css font as the Port Type dropdown, so the two render identically instead of a CSS ::before glyph that fell back to a plain recolourable outline icon (2026-09-07). The cell's data-raw stays the plain "Air"/"Sea" value; only the badge's own innerHTML gains the icon markup. */ /* Key Clients' Business Classification badge -- class assigned client-side (see refreshClassBadges in UpdateRegistration.cshtml) purely for colour, same data-raw-safe pattern as Port Type above. */ .n4l-myprofile .n4l-badge.n4l-class-manufacturer { background: #efe9fb; color: var(--n4l-purple); } .n4l-myprofile .n4l-badge.n4l-class-exporter { background: #e5f8ef; color: #128a4a; } .n4l-myprofile .n4l-badge.n4l-class-importer { background: #e6f3ff; color: #0a6ebd; } .n4l-myprofile .n4l-badge.n4l-class-trader { background: #fff0e6; color: #c1550f; } /* Directors' Director Type badge -- class assigned client-side (see refreshOtherHoldInitials) purely for colour, same pattern as above. */ .n4l-myprofile .n4l-badge.n4l-director-managing { background: #efe9fb; color: var(--n4l-purple); } .n4l-myprofile .n4l-badge.n4l-director-board { background: #e6f3ff; color: #0a6ebd; } .n4l-myprofile .n4l-badge.n4l-director-plain { background: #f3f4f7; color: #5c6178; } /* ------------------------------------------------------------------- FR-9 — Services as a chip list. CSS-only: the /// renders as a wrapped pill instead of a table row. Zero JS risk: nothing reads layout, only cell text/values. ------------------------------------------------------------------- */ /* display:contents on BOTH the table and its real tbody dissolves their own boxes so the chips are promoted two levels up to become direct flex items of the .n4l-chip-row wrapper (Services now lives inside an .n4l-card, which already supplies the card look). */ .n4l-myprofile #Servicetable { display: contents; } /* The naked banner (no / wrapper in the markup) gets auto-wrapped by the browser into its OWN anonymous , separate from the explicit #tbody_service -- "> tr.table-active" never matches it (the tr's parent is that anonymous tbody, not the table). Hide whichever tbody isn't the real one instead. */ .n4l-myprofile #Servicetable > tbody:not(#tbody_service) { display: none; } .n4l-myprofile #Servicetable tbody { display: contents; } .n4l-myprofile #Servicetable tbody tr { display: inline-flex; align-items: center; gap: 8px; background: #f7f6fc; border: 1px solid #e7e8f0; border-radius: 20px; padding: 6px 8px 6px 16px; } .n4l-myprofile #Servicetable tbody td { border: none !important; padding: 0 !important; vertical-align: middle; } .n4l-myprofile #Servicetable tbody td:first-child { font-weight: 700; font-size: 13px; color: #2a3040; } /* Description isn't shown on the chip -- hidden visually only, the data stays in the DOM so Edit still repopulates it correctly. */ .n4l-myprofile #Servicetable tbody td[style*="text-align:left"] { display: none; } .n4l-myprofile #Servicetable tbody input[type="button"] { padding: 2px 8px !important; font-size: 10.5px !important; } /* ------------------------------------------------------------------- Social Media as a chip list -- same CSS-only technique as the Services chip list above (table/tbody/tr/td DOM untouched, same Removesocial / btnSocialMediaeditmodalclick handlers). The platform class on td:first-child is assigned client-side (see refreshSocialIcons in UpdateRegistration.cshtml) purely for the icon -- the underlying cell text/value used by the save/edit JS is never touched. ------------------------------------------------------------------- */ /* Mockup's .chiplist is a plain flex row (no card border/shadow of its own) -- .social-media-grid / .n4l-chip-row is that flex row; the table itself contributes no box, only its chips. .n4l-chip-row is the generic name for reuse (Services etc.); .social-media-grid stays for Social Media's own wrapper div. */ .n4l-myprofile .social-media-grid, .n4l-myprofile .n4l-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* display:contents on BOTH the table and its real tbody dissolves their own boxes so the chips are promoted two levels up to become direct flex items of .social-media-grid, sitting inline with the dashed "+ Add Social Link" chip that follows the table in markup. */ .n4l-myprofile #socialtable { display: contents; } /* The naked header (no / wrapper in the markup) gets auto-wrapped by the browser into its OWN anonymous , separate from the explicit #tbody_social -- "> tr.table-active" never matches it (the tr's parent is that anonymous tbody, not the table). Hide whichever tbody isn't the real one instead. */ .n4l-myprofile #socialtable > tbody:not(#tbody_social) { display: none; } .n4l-myprofile #socialtable tbody { display: contents; } .n4l-myprofile #socialtable tbody tr { display: inline-flex; align-items: center; gap: 6px; background: #f7f6fc; border: 1px solid #e7e8f0; border-radius: 20px; padding: 6px 8px 6px 16px; } .n4l-myprofile #socialtable tbody td { border: none !important; padding: 0 !important; vertical-align: middle; } .n4l-myprofile #socialtable tbody td:first-child { font-weight: 700; font-size: 13px; color: #2a3040; } .n4l-myprofile #socialtable tbody td:nth-child(2) { color: #70768c; font-size: 12.5px; } .n4l-myprofile #socialtable tbody td:nth-child(2)::before { content: "— "; color: #9aa0b4; } .n4l-myprofile #socialtable tbody td.n4l-soc-instagram::before { content: "📸 "; } .n4l-myprofile #socialtable tbody td.n4l-soc-linkedin::before { content: "💼 "; } .n4l-myprofile #socialtable tbody td.n4l-soc-facebook::before { content: "📘 "; } .n4l-myprofile #socialtable tbody td.n4l-soc-twitter::before { content: "✖️ "; } .n4l-myprofile #socialtable tbody td.n4l-soc-youtube::before { content: "▶️ "; } /* The "+ Add Social Link" trigger, styled as its own dashed chip inline with the real chips (mockup's .chip.add) instead of a sect-head button -- Social Media has no Add button in the mockup's header. */ .n4l-myprofile .n4l-chip-add { display: inline-flex; align-items: center; background: #fff; border: 1.5px dashed #c9c4e6; border-radius: 20px; padding: 8px 16px; font-weight: 700; font-size: 13px; color: var(--n4l-purple-b); cursor: pointer; } .n4l-myprofile .n4l-chip-add:hover { background: #f6f4fd; border-color: var(--n4l-purple-b); } /* ------------------------------------------------------------------- FR-15 — My Documents as a required-document checklist. Real div markup (table dropped per user instruction, 2026-08-31): one card per Model.listDoctype entry (excluding any explicitly opted out via Mandatory_field = N/0/false), cross-referenced against Model.Mydoc by doc_type name to decide Uploaded vs Pending. Uploaded docs whose type no longer matches a listDoctype entry render in a separate "Other Documents" grid below so nothing already uploaded becomes invisible. Progress banner counts/percent are computed server-side on load and kept in sync client-side by refreshDocProgress() after every Add/Remove. ------------------------------------------------------------------- */ .n4l-myprofile .n4l-doc-banner { display: flex; align-items: center; gap: 12px; background: #eef1fd; border: 1px solid #d9e0fb; border-radius: 12px; padding: 12px 18px; margin: 16px 0; } .n4l-myprofile .n4l-doc-banner-icon { font-size: 16px; } .n4l-myprofile .n4l-doc-banner-text { flex: 1; font-size: 13px; color: #2a3040; } .n4l-myprofile .n4l-doc-banner-count { color: var(--n4l-purple-b); } .n4l-myprofile .n4l-doc-banner-progress { display: flex; align-items: center; gap: 10px; } .n4l-myprofile .n4l-doc-banner-progress .n4l-meter { width: 120px; height: 7px; background: #d9e0fb; border-radius: 10px; overflow: hidden; } .n4l-myprofile .n4l-doc-banner-progress .n4l-meter i { display: block; height: 100%; background: var(--n4l-purple-b); border-radius: 10px; } .n4l-myprofile .n4l-doc-banner-pct { font-size: 12.5px; font-weight: 800; color: var(--n4l-purple-b); white-space: nowrap; } .n4l-myprofile .n4l-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .n4l-myprofile .n4l-doc-card { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; background: #fff8f2; border: 1px solid #fbdfc0; border-left: 4px solid var(--n4l-orange); border-radius: 12px; padding: 16px; } /* Non-mandatory doc types still show (so an optional/test type with a real upload isn't hidden) but read as visually secondary next to the mandatory ones -- plain white, thin neutral border, no accent. */ .n4l-myprofile .n4l-doc-card.n4l-doc-card-optional { background: #fff; border: 1px solid #e7e8f0; border-left: 1px solid #e7e8f0; } .n4l-myprofile .n4l-doc-optional-tag { display: inline-block; margin-left: 6px; background: #f0f1f5; color: #70768c; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; vertical-align: middle; } .n4l-myprofile .n4l-doc-card-head { display: flex; align-items: flex-start; gap: 10px; } .n4l-myprofile .n4l-doc-icon { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: #f2effc; border-radius: 9px; } .n4l-myprofile .n4l-doc-title { font-weight: 700; font-size: 13px; color: #2a3040; } .n4l-myprofile .n4l-doc-sub { color: #70768c; font-size: 11.5px; margin-top: 2px; } .n4l-myprofile .n4l-doc-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .n4l-myprofile .n4l-doc-status { font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } .n4l-myprofile .n4l-doc-status-ok { background: #e9f9ef; color: #1fae59; } .n4l-myprofile .n4l-doc-status-pending { background: #fdf1e2; color: #c8791a; } .n4l-myprofile .n4l-doc-actions { display: flex; align-items: center; gap: 10px; } .n4l-myprofile .n4l-doc-preview, .n4l-myprofile .n4l-doc-remove { font-weight: 600; font-size: 11.5px; text-decoration: none; cursor: pointer; } .n4l-myprofile .n4l-doc-preview { color: var(--n4l-purple-b); } .n4l-myprofile .n4l-doc-remove { color: #d64545; } .n4l-myprofile .n4l-doc-upload-btn { background: #fff; border: 1px solid #d8dae4; border-radius: 8px; padding: 4px 12px; font-size: 11.5px; font-weight: 700; color: #2a3040; } .n4l-myprofile .n4l-doc-upload-btn:hover { border-color: var(--n4l-purple-b); color: var(--n4l-purple-b); } /* ========================================================================= ViewMemberDetails (Public Profile Preview) -- read-only summary of the same profile data as UpdateRegistration, reusing .n4l-myprofile's hero/ chip-row/badge/avatar-circle components. Rules here are scoped under the extra .n4l-preview class (always paired with .n4l-myprofile on this page's wrapper) so nothing here can affect UpdateRegistration, which never carries .n4l-preview. ========================================================================= */ .n4l-preview.n4l-myprofile { max-width: 1180px; margin: 0 auto; padding: 20px 16px 40px; } .n4l-preview .n4l-preview-topbar { margin-bottom: 14px; } .n4l-preview .n4l-btn-back { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e7e8f0; border-radius: 9px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: #2a3040; text-decoration: none; } .n4l-preview .n4l-btn-back:hover { border-color: var(--n4l-purple-b); color: var(--n4l-purple-b); } .n4l-preview .n4l-hero-logo-initials { font-weight: 800; font-size: 18px; color: var(--n4l-purple); } .n4l-preview .n4l-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .n4l-preview .n4l-pill { display: inline-flex; align-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5); border-radius: 20px; padding: 4px 12px; font-size: 11px; font-weight: 700; color: #fff; } .n4l-preview .n4l-info-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; margin-top: 20px; } @media (max-width: 900px) { .n4l-preview .n4l-info-grid { grid-template-columns: 1fr; } } .n4l-preview .n4l-pv-card { background: #fff; border: 1px solid #e7e8f0; border-radius: 12px; box-shadow: 0 4px 18px rgba(42, 0, 124, .06); padding: 16px 18px; margin-bottom: 18px; } .n4l-preview .n4l-pv-card-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--n4l-purple); margin-bottom: 12px; } .n4l-preview .n4l-pv-card-body { font-size: 13px; color: #3a3f52; line-height: 1.6; } .n4l-preview .n4l-muted-sm { color: #9a9fb0; font-size: 12.5px; font-style: italic; } .n4l-preview .n4l-loc-card { border: 1px solid #e7e8f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .n4l-preview .n4l-loc-card:last-child { margin-bottom: 0; } .n4l-preview .n4l-loc-name { font-weight: 700; font-size: 13px; color: #2a3040; margin-bottom: 6px; } .n4l-preview .n4l-loc-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: #70768c; } .n4l-preview .n4l-chip { display: inline-flex; align-items: center; background: #f3f1fc; color: var(--n4l-purple); border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600; } .n4l-preview .n4l-chip-more { background: #f0f1f5; color: #70768c; } .n4l-preview a.n4l-chip-link { text-decoration: none; } .n4l-preview .n4l-kv-list { display: flex; flex-direction: column; gap: 10px; } .n4l-preview .n4l-kv-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #70768c; border-bottom: 1px dashed #eceef4; padding-bottom: 8px; } .n4l-preview .n4l-kv-row:last-child { border-bottom: none; padding-bottom: 0; } .n4l-preview .n4l-kv-row b { color: #2a3040; font-weight: 700; } .n4l-preview .n4l-mini-people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .n4l-preview .n4l-mini-person { display: flex; align-items: center; gap: 8px; } .n4l-preview .n4l-mini-person-name { font-weight: 700; font-size: 12px; color: #2a3040; } .n4l-preview .n4l-mini-person-role { font-size: 10.5px; color: #70768c; } /* Location Covered's "Port Type" custom dropdown -- visual layer over the real (hidden) #txtporttype
DOM is completely untouched (same server render, same JS-built rows on Add/Edit via #tbody_service, same Removeservice / btnServiceeditmodalclick handlers) -- only the CSS `display` of the table/rows is overridden so each