:root{ --navy:#163a5f;--blue:#2463a7;--light:#f3f7fb;--border:#d8e2ec; --text:#1c2733;--muted:#667788;--green:#237a4b;--red:#b33a3a; --amber:#9a6900;--white:#fff;--shadow:0 2px 10px rgba(22,58,95,.08) } *{box-sizing:border-box} html{max-width:100%;overflow-x:hidden} body{margin:0;max-width:100%;overflow-x:hidden;font-family:Segoe UI,Arial,sans-serif;background:var(--light);color:var(--text);line-height:1.4} a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline} img{max-width:100%} /* Shared header */ .top{background:#fff;padding:12px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;border-bottom:4px solid var(--blue);box-shadow:var(--shadow)} .brand-block{display:flex;align-items:center;gap:20px;min-width:0} .brand-logo{display:block;width:clamp(200px,20.5vw,300px);max-height:76px;height:auto;object-fit:contain;flex:0 0 auto} /* Small auto-spinning globe, placed as the last item in the rail — below the "AC" (Access Center) icon — rather than in the header. It's a plain flex child of .rail (which already has gap:5px and centers its items), so no special positioning is needed; it just sits at the end of the list, and moves to the end of the row when the rail collapses to a horizontal strip on narrow screens. See assets/platform-globe.js for the render logic (globe.gl, loaded from a CDN by the page). */ .platform-globe-mount{width:56px;height:56px;flex:0 0 auto;pointer-events:none} .brand-copy{padding-left:20px;border-left:1px solid var(--border);min-width:0} .top h1{font-size:clamp(18px,1.6vw,24px);line-height:1.15;margin:0;color:var(--navy)} .top p{margin:6px 0 0;font-size:12px;color:var(--muted)} .account{text-align:right;font-size:12px;background:#eef5fb;border:1px solid #d3e2f0;border-radius:10px;padding:9px 11px;min-width:225px;max-width:310px} .user-name,.user-level,.user-email{display:block;overflow-wrap:anywhere} .user-name{font-size:14px;font-weight:750;color:var(--navy)} .user-level{font-weight:700;color:var(--blue);margin-top:2px} .user-email{color:var(--muted);margin:2px 0 7px}.account form{display:inline}.signout-btn{padding:6px 10px} /* Main application layout */ .layout{display:grid;grid-template-columns:235px minmax(0,1fr);min-height:calc(100vh - 104px);max-width:100%} nav{background:#fff;border-right:1px solid var(--border);padding:16px 10px;min-width:0} nav a{display:block;padding:11px 13px;border-radius:8px;color:var(--text);margin-bottom:4px;font-size:14px} nav a.active,nav a:hover{background:#e8f1fb;color:var(--blue);font-weight:600;text-decoration:none} main{padding:22px;max-width:1500px;width:100%;min-width:0} .card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:19px;margin-bottom:17px;box-shadow:0 2px 8px rgba(26,53,80,.05);min-width:0} .card h2,.card h3{margin-top:0;color:#122b46} .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .full{grid-column:1/-1} label{display:block;font-size:12px;font-weight:600;margin-bottom:4px} .field-gap{margin-top:13px} input,select,textarea{display:block;width:100%;max-width:100%;padding:6px 9px;border:1px solid #bcc9d5;border-radius:5px;font:inherit;font-size:13px;background:#fff;color:var(--text)} select:disabled,input:disabled{background:#f1f4f7;color:#687887;cursor:not-allowed} textarea{min-height:64px;resize:vertical} .actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;align-items:center} .btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:5px;padding:7px 12px;cursor:pointer;font-weight:650;font-size:12px;text-decoration:none;min-height:32px} .btn:hover{text-decoration:none;filter:brightness(.98)}.primary{background:var(--blue);color:#fff}.secondary{background:#e9eef3;color:#26384a}.success{background:var(--green);color:#fff}.danger{background:var(--red);color:#fff}.warning{background:#f5d98a;color:#604400} .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:17px} .kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:17px;min-width:0}.kpi strong{display:block;font-size:27px;color:var(--navy)}.kpi span{font-size:12px;color:var(--muted)} .table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px} table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px} th,td{border-bottom:1px solid var(--border);padding:9px;text-align:left;vertical-align:top;overflow-wrap:anywhere} th{background:#edf3f8;color:#34495e;white-space:nowrap} .admin-user-table{min-width:1080px} .status{display:inline-block;padding:5px 8px;border-radius:14px;font-size:11px;font-weight:700;background:#e8edf2;white-space:nowrap}.status.pending{background:#fff0bf;color:#725000}.status.approved{background:#dcefe4;color:#1d6840}.status.rejected{background:#f7dddd;color:#8b2626}.status.returned{background:#ffe6be;color:#7d4e00}.status.progress{background:#dce9f8;color:#1e568c}.status.completed{background:#d5eee0;color:#17663b} .flash{padding:12px 14px;border-radius:7px;margin-bottom:13px;border-left:4px solid}.flash.success{background:#e1f2e8;border-color:var(--green);color:#144d2f}.flash.error{background:#fbe3e3;border-color:var(--red);color:#742525}.flash.info{background:#eaf3fb;border-color:var(--blue);color:#164d78} .detail{display:grid;grid-template-columns:190px minmax(0,1fr);gap:8px 14px;font-size:13px}.detail dt{font-weight:700;color:#425466}.detail dd{margin:0;overflow-wrap:anywhere} .small{font-size:12px;color:var(--muted)}.notice{padding:12px 14px;border-left:4px solid var(--blue);background:#eaf3fb;border-radius:6px;margin-bottom:16px;font-size:13px}.muted{color:var(--muted)}.tag{padding:3px 7px;border-radius:10px;background:#edf3f8;font-size:11px;font-weight:700}.right{margin-left:auto}.footer{font-size:11px;color:var(--muted);padding-top:10px}.danger-zone{border-color:#efb9b9}.searchbar{display:flex;gap:8px;align-items:end}.searchbar>div{flex:1}.nowrap{white-space:nowrap}.form-note{font-size:11px;color:var(--muted);margin-top:4px}.credential-input{margin-top:8px;min-width:180px}.checkbox-input{width:auto;min-width:18px;min-height:18px}.admin-actions{display:flex;gap:7px;flex-wrap:wrap;min-width:310px}.reset-request-row{background:#fffaf0}.user-email-cell{margin-top:5px}.master-data-grid textarea{min-height:190px} /* Login and account creation */ .login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(145deg,#f3f7fb,#e4edf7)} .login-box{max-width:540px;width:100%;background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px;box-shadow:0 10px 35px rgba(22,58,95,.13);overflow:hidden} /* v2.24 — shared PDS Group brand block for every login/auth screen on this app (main sign-in, Create User ID, Forgot Password, and the SAP-PO-access interstitial). Mirrors mis/employee_login.php's own .mis-login-brand / .group-eyebrow treatment (mis/assets/mis.css) so the platform's two separate login systems — this one for staff/admin, Payroll's for employee self-service — read as one visual family even though they stay functionally separate (different identity tables, different audiences). Uses assets/pds-logo.png (a transparent-background cutout generated from the PDS Group logo the user supplied, so it drops cleanly onto the gradient page background and the white card alike). */ .login-brand-row{display:flex;align-items:center;gap:14px;justify-content:flex-start;border-bottom:1px solid var(--border);padding:0 0 16px;margin-bottom:16px;overflow:hidden} .login-brand-row img{display:block;width:150px;max-width:38%;height:auto;max-height:61px;object-fit:contain;object-position:left center} .login-brand-copy{min-width:0} .login-brand-copy strong,.login-brand-copy span{display:block} .login-brand-copy strong{color:var(--navy);font-size:18px;line-height:1.2} .login-brand-copy span{margin-top:4px;color:var(--muted);font-size:12px} .group-eyebrow{display:block;margin-bottom:2px;color:#849700;font-size:8px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase} .login-title{margin-bottom:18px}.login-title h1{color:var(--navy);font-size:23px;line-height:1.2;margin:0}.login-title p{margin:6px 0 0;color:var(--muted);font-size:13px} .login-box h1{color:var(--navy);font-size:23px;line-height:1.2;margin:0 0 18px} .login-box h2{font-size:19px;color:var(--navy);margin:0 0 15px}.login-actions{margin-top:16px}.login-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;font-size:13px;font-weight:600}.login-help{margin-top:16px}.compact-notice{margin:14px 0 0} /* Tablet */ @media(max-width:1050px){ .top{grid-template-columns:1fr;gap:12px}.account{justify-self:stretch;text-align:left;max-width:none;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}.account .user-level,.account .user-email{grid-column:1}.account form{grid-column:2;grid-row:1/4}.brand-logo{width:255px}.brand-copy{padding-left:16px} .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Tablet / small laptop navigation */ @media(max-width:850px){ .layout{grid-template-columns:1fr;min-height:auto} nav{display:flex;overflow-x:auto;white-space:nowrap;border-right:0;border-bottom:1px solid var(--border);padding:8px;position:sticky;top:0;z-index:20;box-shadow:0 2px 6px rgba(22,58,95,.05)} nav a{min-width:max-content;margin:0 3px;padding:9px 12px} main{padding:14px} .grid,.grid-3{grid-template-columns:1fr}.full{grid-column:auto}.detail{grid-template-columns:1fr}.detail dt{margin-top:7px}.searchbar{align-items:stretch;flex-direction:column} } /* Mobile */ @media(max-width:620px){ .top{padding:11px 14px}.brand-block{align-items:flex-start;flex-direction:column;gap:10px}.brand-logo{width:213px;max-height:53px}.brand-copy{border-left:0;border-top:1px solid var(--border);padding:10px 0 0;width:100%}.top h1{font-size:19px}.top p{font-size:11px} .account{display:block}.account form{display:block;margin-top:8px}.signout-btn{width:100%} .kpis{grid-template-columns:1fr}.card{padding:15px;border-radius:10px}.actions .btn,.actions button{flex:1 1 100%;width:100%}.right{margin-left:0} .login-page{padding:12px;align-items:flex-start}.login-box{margin-top:12px;padding:18px}.login-brand-row{align-items:flex-start}.login-brand-row img{width:110px;max-height:49px}.login-brand-copy strong{font-size:15px}.login-title h1,.login-box h1{font-size:20px}.login-links{flex-direction:column;gap:8px} .admin-actions{min-width:0}.credential-input{min-width:0} } /* Card-style responsive tables on phones */ @media(max-width:760px){ .responsive-table{min-width:0}.responsive-table thead{display:none}.responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%}.responsive-table tr{border:1px solid var(--border);border-radius:9px;margin:0 0 12px;background:#fff;overflow:hidden}.responsive-table td{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;border-bottom:1px solid var(--border);padding:10px}.responsive-table td:last-child{border-bottom:0}.responsive-table td::before{content:attr(data-label);font-weight:700;color:#425466}.responsive-table td[data-label="Actions"]{display:block}.responsive-table td[data-label="Actions"]::before{display:block;margin-bottom:8px}.request-list td{grid-template-columns:110px minmax(0,1fr)} } /* v2.7 numbered form, dynamic amendment fields and workflow status */ .field-number{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:7px;border-radius:50%;background:#e8f1fb;color:var(--blue);font-size:11px;font-weight:800;vertical-align:middle} .dynamic-field{padding:10px;border:1px solid #d8e5f1;border-radius:9px;background:#f9fbfd} .dynamic-field label{color:var(--navy)} .dynamic-field textarea{min-height:70px} .form-guidance{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:11px 13px;border:1px dashed #b8cde1;border-radius:9px;background:#f7fbff;color:var(--muted);font-size:12px} .form-guidance strong{color:var(--navy);font-size:13px} .workflow-panel{margin:14px 0 19px;padding:14px;border:1px solid var(--border);border-radius:10px;background:#f8fbfe} .workflow-current{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid var(--border)} .workflow-current>span{font-size:12px;font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .workflow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .workflow-step{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--border);border-radius:9px;background:#fff;min-width:0} .workflow-number{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:#e9eef3;color:#5f6d7a;font-size:12px;font-weight:800;flex:0 0 auto} .workflow-step strong,.workflow-step small{display:block;overflow-wrap:anywhere}.workflow-step strong{font-size:12px;color:#34495e}.workflow-step small{margin-top:3px;font-size:10px;color:var(--muted)} .workflow-step.done{border-color:#b8ddc7;background:#f4fbf7}.workflow-step.done .workflow-number{background:#d5eee0;color:#17663b} .workflow-step.current{border-color:#a9c7e7;background:#eef6fd}.workflow-step.current .workflow-number{background:#dce9f8;color:#1e568c} .workflow-step.attention{border-color:#efc88c;background:#fff9ee}.workflow-step.attention .workflow-number{background:#ffe6be;color:#7d4e00} @media(max-width:1050px){.workflow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.workflow-current{align-items:flex-start;flex-direction:column}.workflow-steps{grid-template-columns:1fr}.form-guidance{min-height:72px}} /* v2.9 direct user creation and configurable manual-field dropdowns */ .create-user-grid{align-items:start} .option-check{display:flex;align-items:center;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#f8fbfe} .option-check label{display:flex;align-items:center;gap:9px;margin:0;font-weight:600} .option-check .checkbox-input{margin:0;flex:0 0 auto} .section-heading{margin-top:24px!important;padding-top:18px;border-top:1px solid var(--border)} .master-field-list{display:grid;gap:13px} .master-field-card{padding:14px;border:1px solid var(--border);border-radius:10px;background:#f9fbfd} .master-field-card textarea{min-height:120px} /* v2.22 — Add New User: module access + entity scope (mirrors Access Center's own .platform-entity-checks in mis/assets/mis.css so the same checklist reads consistently whichever screen it's shown on) */ .platform-entity-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px;margin-top:8px} .platform-entity-checks label{display:flex;align-items:flex-start;gap:7px;border:1px solid var(--border);padding:8px;border-radius:5px;background:#fff} /* v2.23 — User Administration: search/filter box, bulk activate/deactivate toolbar, and the per-row expandable "Modules" panel that lets an admin grant/revoke module access (including SAP PO) for an existing user without a separate trip to Access Center. */ .admin-user-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0} .user-search-input{flex:1 1 260px;min-width:200px;padding:8px 10px;border:1px solid var(--border);border-radius:5px;font-size:14px} .admin-bulk-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto} .admin-bulk-actions form{margin:0} tr.module-edit-row{background:#f7f8fa} tr.module-edit-row > td{padding:12px 14px} tr.module-edit-row .wide label{font-weight:600} @media(max-width:850px){ .option-check{min-height:auto} } /* v2.11 configurable request fields and dashboard reference search */ .dashboard-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:18px;align-items:end;margin-bottom:18px} .dashboard-search{margin:0} .dashboard-search label{margin-bottom:6px} .dashboard-search-row{display:flex;gap:8px;align-items:stretch} .dashboard-search-row input{min-width:0} .dashboard-search-row .btn{flex:0 0 auto} .field-config-table{min-width:880px} .field-config-table td:first-child{width:110px;text-align:center;font-weight:750;color:var(--navy)} .field-config-table td:nth-child(2){min-width:260px} .field-config-table td:nth-child(3){min-width:280px} .inline-check{display:inline-flex;align-items:center;gap:8px;margin:0;white-space:nowrap} .inline-check .checkbox-input{margin:0} @media(max-width:1050px){.dashboard-toolbar{grid-template-columns:1fr}.dashboard-search{max-width:none}} @media(max-width:620px){.dashboard-search-row{flex-direction:column}.dashboard-search-row .btn{width:100%}} /* Dashboard UI refinement */ .top{border-bottom:1px solid #2563eb!important} .dashboard-modern{padding-top:4px} .dashboard-panel{border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.06)} .dashboard-panel .kpis{gap:18px} .kpi{border-radius:14px;padding:22px} .new-dashboard{padding:25px}.new-dashboard h2{margin:0;color:#0f355d}.welcome{color:#64748b}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.dash-card{background:#fff;border:1px solid #dbe5f0;border-radius:16px;padding:24px;box-shadow:0 5px 15px rgba(0,0,0,.04)}.dash-card span{display:block;color:#64748b}.dash-card b{display:block;font-size:42px;color:#123d68;margin:10px 0}.dash-card small{color:#16a34a}.analytics-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:22px;margin-top:25px}.chart-card h3,.table-card h3{color:#0f355d}.donut{width:180px;height:180px;border-radius:50%;background:conic-gradient(#2563eb 0 75%,#f97316 75% 85%,#8b5cf6 85% 95%,#cbd5e1 95%);margin:25px auto}.legend{text-align:center;color:#334155}.table-card{position:relative}.view-all{position:absolute;right:25px;top:25px;color:#2563eb}table{width:100%;border-collapse:collapse;margin-top:20px}th{background:#edf4fb;text-align:left;padding:12px;color:#163b63}td{padding:12px;border-bottom:1px solid #e2e8f0;color:#334155}@media(max-width:900px){.kpi-grid,.analytics-grid{grid-template-columns:1fr}} /* Digital workflow banner */ .digital-banner{ background:#fff; padding:18px 30px 14px; text-align:left; font-weight:600; color:var(--navy); } .digital-items{ display:flex; gap:32px; margin-top:8px; color:var(--blue); font-weight:500; font-size:14px; } .top{border-bottom:1px solid var(--blue)!important;} @media(max-width:768px){ .digital-banner{ white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; } .digital-items{gap:20px;width:max-content;} } /* Banner integrated into desktop header */ .top{align-items:center;gap:24px} .header-digital-wrap{flex:1;min-width:0} .header-digital{margin:0;padding:0;background:transparent;border:0} .header-digital .digital-items{display:flex;gap:28px;white-space:nowrap} /* Request tables: keep each PO record on one row */ .request-table,.request-list table{min-width:1100px} .request-table td,.request-table th,.request-list td,.request-list th{white-space:nowrap;vertical-align:middle} .request-table td:first-child{min-width:150px} @media(max-width:900px){ .header-digital{overflow:hidden} .header-digital>div,.header-digital .digital-items{white-space:nowrap} .header-digital-wrap{overflow-x:auto} } .table-search{margin:0 0 12px;text-align:right}.table-search input{width:min(420px,100%);padding:10px 14px;border:1px solid #cbd5e1;border-radius:10px;font-size:14px}.table-card table tbody tr{transition:.15s} .dashboard-toolbar-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; } .dashboard-search{display:flex;gap:10px;align-items:center} .dashboard-search input{ width:360px; padding:12px 16px; border:1px solid #cbd5e1; border-radius:10px; font-size:15px; } @media(max-width:900px){ .dashboard-toolbar-top{flex-direction:column;align-items:stretch} .dashboard-search input{width:100%} } .search-popup{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:9999} .search-popup-box{background:#fff;width:min(800px,90%);max-height:80vh;overflow:auto;border-radius:14px;padding:25px;position:relative} .search-close{position:absolute;right:15px;top:10px;border:0;font-size:24px;background:none} .search-result-item{padding:12px;border-bottom:1px solid #ddd} /* Compact transparent search inside banner */ .digital-search{display:flex;gap:8px;align-items:center;margin-left:18px;margin-top:0} .digital-search input{width:190px;height:32px;background:transparent;border:1px solid #d7e2ef;border-radius:8px;padding:0 12px;color:#183b67} .digital-search button{height:32px;border:0;border-radius:8px;padding:0 14px;background:#eef2f7;font-weight:600;cursor:pointer} .header-digital-wrap{position:relative;padding-top:0!important;margin-top:0!important} .header-digital{margin-top:0!important} @media(max-width:900px){.digital-search{position:relative;right:auto;top:auto;justify-content:flex-end;margin-bottom:8px}.digital-search input{width:160px}} /* Compact header search */ .header-search { width: 240px; margin-left: auto; align-self: center; } .header-search input { height: 34px; width: 170px; background: transparent; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 10px; } .header-search button { height: 34px; margin-left: 6px; border-radius: 8px; } /* Remove dashboard search block */ .dashboard-search, .recent-search, .search-section { display:none!important; } /* Final header digital/search layout */ .brand-copy{display:flex;align-items:center;gap:18px} .digital-search{display:flex;align-items:center;gap:6px} .digital-search input{width:150px;height:32px;background:transparent;border:1px solid #cbd5e1;border-radius:6px;padding:0 8px} .digital-search button{height:32px;padding:0 12px} .header-digital-wrap{grid-column:1/-1} .header-digital{margin-top:4px} .digital-items{display:flex;gap:22px;align-items:center} .digital-items span{font-weight:500} .digitalized{color:#6b46c1}.workflow{color:#2463a7}.speed{color:#2463a7}.errors{color:#237a4b}.audit{color:#2463a7} /* Final header layout adjustments */ .dashboard-search, .dashboard-search-section, .recent-search { display:none !important; } .sap-header-title { white-space: nowrap; display:flex; align-items:center; } .header-feature-row { margin-top:0 !important; white-space:nowrap; } .header-search { background:transparent !important; } .header-search button { background:transparent !important; border:1px solid #cbd5e1 !important; box-shadow:none !important; } .header-search input { background:transparent !important; } .header-feature-row span { display:inline-flex; align-items:center; } /* Final header alignment */ .brand-copy{display:flex;align-items:center;gap:14px;flex-wrap:nowrap} .digital-search input{width:150px;height:30px;background:transparent;border:1px solid #d7e2ef;border-radius:8px;padding:0 10px} .digital-search button{height:30px;background:transparent!important;border:1px solid #d7e2ef!important;border-radius:8px;padding:0 14px;box-shadow:none!important;color:#183b67} .header-digital-wrap{grid-column:1/-1;margin-top:0!important} .header-digital .digital-items{gap:22px} /* Final SAP PO dashboard/header refinement */ .header-digital-wrap{ margin-top:0!important; } .digital-items{ display:flex; flex-wrap:nowrap; gap:28px; align-items:center; } .digital-items span{ white-space:nowrap; font-weight:600; } .digitalized{color:#6d28d9;} .workflow{color:#2563eb;} .speed{color:#2563eb;} .errors{color:#15803d;} .audit{color:#2563eb;} .digital-search{ display:inline-flex!important; align-items:center; margin-left:20px; background:transparent!important; } .digital-search input{ width:180px!important; height:34px!important; background:transparent!important; } .digital-search button{ background:transparent!important; border:1px solid #cbd5e1!important; color:#17365d!important; margin-left:6px; } .dashboard-hero h2, .dashboard-hero p{ display:none!important; } .dashboard-modern .kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; } @media(max-width:900px){ .digital-items{overflow-x:auto;} .dashboard-modern .kpis{grid-template-columns:1fr;} } /* Poeticgem header final refinement */ .poeticgem-logo img, .logo img { object-fit: contain; } .header-divider, .banner-divider { width:100%; height:2px; background:#245fa8; margin:0; padding:0; } .header-banner { padding-bottom:0 !important; margin-bottom:0 !important; } /* Restored compact header search */ .header-search, .top-search { display:flex; align-items:center; background:transparent; } .header-search input, .top-search input { width:180px; height:34px; background:transparent; border:1px solid #cbd5e1; border-radius:8px; } .header-search button, .top-search button { background:transparent; border:1px solid #cbd5e1; margin-left:6px; box-shadow:none; } /* Remove dashboard welcome header area */ .dashboard-header, .dashboard-title, .welcome-message { display:none !important; } /* Feature row position update */ .feature-row, .digital-feature-row, .header-features { display:flex !important; justify-content:flex-end !important; align-items:center !important; width:100% !important; margin-left:auto !important; gap:28px !important; } @media(max-width:900px){ .feature-row, .digital-feature-row, .header-features { justify-content:center !important; overflow-x:auto; } } /* Modern SAP PO header/dashboard refinements */ .dashboard-welcome, .welcome-message, .dashboard-header-title { display:none !important; } .header-search, .top-search { display:flex !important; align-items:center !important; background:transparent !important; } .header-search input, .top-search input { background:transparent !important; height:36px !important; border:1px solid #cbd5e1 !important; border-radius:8px !important; } .header-search button, .top-search button { background:transparent !important; border:0 !important; box-shadow:none !important; } .feature-row, .digital-feature-row, .header-features { display:flex !important; justify-content:center !important; align-items:center !important; gap:28px !important; white-space:nowrap !important; } /* Final dashboard visual alignment */ .top{ padding:12px 24px 0; border-bottom:3px solid #2d66b1; } .banner-search{ display:flex; align-items:center; gap:8px; margin-left:auto; } .banner-search input{ width:260px; height:42px; border:1px solid #cbd5e1; background:transparent; border-radius:8px; padding:0 14px; font-size:15px; } .banner-search button{ background:transparent; border:0; color:#123d68; font-weight:700; cursor:pointer; } .header-digital-wrap{ width:100%; margin-top:18px; } .header-digital .digital-items{ justify-content:flex-end; padding-right:40px; } .new-dashboard{ padding-top:30px; } .new-dashboard .welcome{ display:none!important; } @media(max-width:900px){ .banner-search{display:none} .header-digital .digital-items{justify-content:flex-start;overflow:auto} } /* v2.11.1: center the workflow feature row and keep it aligned with the user panel */ @media (min-width:1051px){ .top{ grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto auto; align-items:center; } .brand-block{ grid-column:1; grid-row:1; } .account{ grid-column:2; grid-row:1 / 3; align-self:center; } .header-digital-wrap{ grid-column:1; grid-row:2; width:100%; margin:8px 0 0!important; } .header-digital{ padding:4px 0 8px!important; } .header-digital .digital-items{ width:100%; justify-content:center!important; align-items:center; padding:0!important; margin:0!important; text-align:center; } .header-divider{ grid-column:1 / -1; grid-row:3; } } @media (max-width:1050px){ .header-digital .digital-items{ justify-content:center!important; padding:0!important; text-align:center; } } .detail-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);align-items:center;justify-content:center;z-index:9999}.detail-modal-box{background:#fff;width:min(700px,90%);max-height:80vh;overflow:auto;border-radius:14px;padding:25px;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.2)}.detail-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px}.detail-row{display:flex;gap:20px;padding:10px;border-bottom:1px solid #e5e5e5}.detail-row b{width:180px;text-transform:capitalize}.detail-row span{flex:1;word-break:break-word} .chart-card{position:relative} .donut{position:relative} .chart-label{position:absolute;font-size:13px;font-weight:600;text-align:center;line-height:1.2} .chart-label b{font-size:18px} .completed-label{left:65px;top:78px;color:#fff} .pending-label{left:25px;top:75px;color:#fff} .progress-label{right:18px;top:38px;color:#fff} .status-badge{font-weight:600} .completed{color:#16803c} .pending-finance-approval{color:#c27803} .finance-approved,.sap-in-progress{color:#2563eb} .rejected,.cancelled{color:#c0392b} /* v2.14 dashboard improvements */ .chart-card .donut{position:relative} .chart-label{position:absolute;font-weight:700;line-height:1.2;z-index:2;text-align:center} .completed-label{left:48%;top:58%;color:#163a5f} .pending-label{left:3%;top:40%;color:#163a5f} .progress-label{right:0;top:18%;color:#163a5f} .status-badge.completed{color:#237a4b!important;font-weight:700} .status-badge.pending-finance-approval,.status-badge.pending-approval{color:#9a6900!important;font-weight:700} .status-badge.in-progress{color:#2463a7!important;font-weight:700} .status-badge.rejected,.status-badge.cancelled{color:#b33a3a!important;font-weight:700} .detail-modal .pdf-btn{margin-bottom:12px;font-size:12px;padding:6px 10px} #requestTable th{cursor:pointer} #requestTable th.asc,#requestTable th.desc{color:#2463a7} /* v2.17.0: compact dual-brand banner and chart summary below the donut */ .brand-logos{ display:flex; align-items:center; flex:0 0 auto; gap:12px; min-width:0; height:58px; } .poeticgem-brand-logo{ width:clamp(185px,17vw,245px)!important; max-height:54px!important; object-fit:contain; object-position:left center; } .brand-logo-divider{ width:1px; height:38px; background:#d8e2ec; flex:0 0 auto; } .sap-brand-logo{ display:block; width:clamp(76px,6.5vw,96px); height:auto; max-height:48px; object-fit:contain; flex:0 0 auto; } .brand-block{ gap:16px!important; min-height:58px; } .brand-copy{ padding-left:16px!important; } .banner-search input{ width:clamp(190px,17vw,250px)!important; } .chart-card{ display:flex; flex-direction:column; align-items:stretch; } .chart-card h3{ width:100%; } .chart-card .donut{ position:relative; width:180px; height:180px; flex:0 0 180px; margin:20px auto 18px; background:conic-gradient( #2563eb 0 var(--completed-end, 0%), #f97316 var(--completed-end, 0%) var(--pending-end, 0%), #8b5cf6 var(--pending-end, 0%) 100% ); box-shadow:inset 0 0 0 1px rgba(15,53,93,.04),0 8px 22px rgba(15,53,93,.08); } .chart-card .donut.empty{background:#e2e8f0} .chart-card .donut::after{ content:""; position:absolute; inset:36px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(216,226,236,.9); } .chart-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:100%; margin-top:auto; } .chart-summary-item{ display:grid; grid-template-columns:10px minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; align-items:center; min-width:0; padding:11px 10px; border:1px solid #e1e9f1; border-radius:10px; background:#f8fbfe; text-align:left; } .chart-summary-dot{ grid-column:1; grid-row:1; width:9px; height:9px; border-radius:50%; } .chart-summary-label{ grid-column:2; grid-row:1; color:#667788; font-size:11px; font-weight:700; white-space:nowrap; } .chart-summary-item strong{ grid-column:1 / -1; grid-row:2; display:block; margin-top:3px; color:#163a5f; font-size:22px; line-height:1; text-align:center; } .completed-summary .chart-summary-dot{background:#2563eb} .pending-summary .chart-summary-dot{background:#f97316} .progress-summary .chart-summary-dot{background:#8b5cf6} @media (min-width:1051px) and (max-width:1320px){ .brand-block{gap:12px!important} .brand-copy{padding-left:12px!important} .top h1{font-size:18px!important} .brand-logos{gap:9px} .poeticgem-brand-logo{width:190px!important} .sap-brand-logo{width:76px} .banner-search input{width:190px!important} } @media(max-width:1050px){ .brand-block{ display:grid!important; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"logos title" "search search"; align-items:center!important; } .brand-logos{grid-area:logos} .brand-copy{grid-area:title} .banner-search{grid-area:search;margin-left:0!important;width:100%} .banner-search input{width:100%!important} } @media(max-width:900px){ .banner-search{display:flex!important} } @media(max-width:620px){ .brand-block{ display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:8px!important; } .brand-logos{ height:48px; justify-content:flex-start; gap:9px; } .poeticgem-brand-logo{width:180px!important;max-height:43px!important} .brand-logo-divider{height:30px} .sap-brand-logo{width:68px;max-height:38px} .brand-copy{ border-left:0!important; border-top:1px solid var(--border)!important; padding:8px 0 0!important; } .banner-search{display:flex!important} .banner-search input{height:38px!important} .chart-summary{grid-template-columns:1fr} .chart-summary-item{ grid-template-columns:10px minmax(0,1fr) auto; grid-template-rows:auto; } .chart-summary-dot{grid-column:1;grid-row:1} .chart-summary-label{grid-column:2;grid-row:1} .chart-summary-item strong{grid-column:3;grid-row:1;margin:0;font-size:20px} } /* v2.19.1: responsive dashboard containment and mobile card layout */ .new-dashboard, .kpi-grid, .analytics-grid, .dash-card, .chart-card, .table-card{ width:100%; max-width:100%; min-width:0; } .analytics-grid{ align-items:start; } .dashboard-table-wrap{ width:100%; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-inline:contain; } .dashboard-recent-table{ width:100%; max-width:100%; } .chart-card .donut{ width:min(180px,58vw); height:auto; aspect-ratio:1; flex:0 0 auto; max-width:180px; } @media(max-width:900px){ .new-dashboard{ padding:0; } .kpi-grid, .analytics-grid{ grid-template-columns:minmax(0,1fr); gap:14px; } .analytics-grid{ margin-top:14px; } .dash-card{ overflow:hidden; } .table-card{ overflow:visible; } } @media(max-width:760px){ .dashboard-table-wrap{ overflow:visible; } .dashboard-recent-table{ min-width:0!important; margin-top:14px; } .dashboard-recent-table tr{ box-shadow:0 1px 3px rgba(15,23,42,.04); } .dashboard-recent-table td{ grid-template-columns:minmax(96px,38%) minmax(0,1fr); align-items:start; } } @media(max-width:620px){ main{ padding:10px; } .new-dashboard{ padding:0; } .kpi-grid, .analytics-grid{ gap:10px; } .dash-card{ padding:16px; border-radius:12px; } .dash-card b{ font-size:34px; line-height:1.15; } .dash-card b small{ display:inline; font-size:.72em; } .chart-card h3, .table-card h3{ font-size:22px; line-height:1.2; margin-bottom:12px; } .chart-card .donut{ width:min(156px,52vw); max-width:156px; margin:8px auto 16px; } .chart-card .donut::after{ inset:31%; } .chart-summary{ gap:8px; } .chart-summary-item{ padding:10px; } .view-all{ position:static; display:inline-flex; margin:-5px 0 2px; } .dashboard-recent-table td{ grid-template-columns:minmax(88px,36%) minmax(0,1fr); gap:8px; padding:9px; } } @media(max-width:380px){ .dash-card{ padding:13px; } .dashboard-recent-table td{ display:block; } .dashboard-recent-table td::before{ display:block; margin-bottom:3px; } } /* v2.19.2 conditional MIS access */ .account-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.account-actions form{margin:0}.access-mis-btn{white-space:nowrap} @media(max-width:1050px){.account-actions{grid-column:2;grid-row:1/4;align-self:center}.account-actions form{grid-column:auto;grid-row:auto}} @media(max-width:620px){.account-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:8px}.account-actions .btn,.account-actions form,.account-actions form .btn{width:100%;margin:0}.account-actions .signout-btn{margin-top:0}} /* v2.20.0: compact fixed PO header, live KPI states and PO-list imports */ .top{ position:sticky!important; top:0; z-index:1200; padding:7px 20px 5px!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-rows:auto auto auto!important; column-gap:16px!important; row-gap:2px!important; background:#fff!important; border-bottom:0!important; box-shadow:0 3px 12px rgba(15,53,93,.10)!important; } .top .brand-block{ grid-column:1!important; grid-row:1!important; min-height:44px!important; gap:12px!important; align-items:center!important; } .top .brand-logos{ height:44px!important; gap:9px!important; } .top .poeticgem-brand-logo{ width:180px!important; max-height:40px!important; } .top .brand-logo-divider{height:28px!important} .top .sap-brand-logo{ width:68px!important; max-height:36px!important; } .top .brand-copy{ padding-left:10px!important; border-left:1px solid var(--border)!important; } .top h1{ font-size:clamp(17px,1.35vw,22px)!important; line-height:1.1!important; } .top .banner-search{margin-left:auto!important;gap:6px!important} .top .banner-search input{ width:clamp(185px,15vw,235px)!important; height:34px!important; padding:0 11px!important; font-size:13px!important; } .top .banner-search button{ min-height:34px!important; padding:0 7px!important; font-size:13px!important; } .top .account{ grid-column:2!important; grid-row:1 / 3!important; align-self:center!important; min-width:215px!important; max-width:270px!important; padding:6px 9px!important; border-radius:9px!important; line-height:1.25!important; } .top .user-name{font-size:13px!important} .top .user-level{font-size:11px!important;margin-top:1px!important} .top .user-email{font-size:11px!important;margin:1px 0 5px!important} .top .account-actions{gap:6px!important;flex-wrap:nowrap!important} .top .account-actions .btn, .top .signout-btn{ min-height:31px!important; padding:5px 10px!important; font-size:12px!important; } .top .header-digital-wrap{ grid-column:1!important; grid-row:2!important; width:100%!important; margin:0!important; overflow:hidden!important; } .top .header-digital{ padding:0 0 3px!important; margin:0!important; } .top .header-digital .digital-items{ width:100%!important; justify-content:center!important; gap:20px!important; padding:0!important; margin:0!important; font-size:12px!important; line-height:1.2!important; } .top .header-divider{ grid-column:1 / -1!important; grid-row:3!important; height:2px!important; margin-top:2px!important; } .layout{min-height:calc(100vh - 92px)!important} .kpi-trend{display:block!important;font-weight:600!important} .dash-card .kpi-trend.good{color:#16a34a!important} .dash-card .kpi-trend.bad{color:#c2413b!important} .dash-card .kpi-trend.neutral{color:#64748b!important} /* Dedicated platform navbar (module switcher, moved out of the account card) — a segmented-control style tab bar: a soft gray track holding a white rounded pill for the active/hovered module, with a thin lime underline on the active pill to keep the shared brand accent. */ .platform-navbar{background:#eef1f4;border-bottom:1px solid var(--border);padding:9px 24px;overflow-x:auto;-webkit-overflow-scrolling:touch} .platform-navbar-inner{display:flex;gap:3px;max-width:1500px;margin:0 auto;min-width:max-content} .platform-navbar-link{display:inline-flex;align-items:center;padding:9px 18px;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:#5c6b7c;text-decoration:none;border-radius:8px;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s} .platform-navbar-link:hover{background:#fff;color:var(--navy);text-decoration:none} .platform-navbar-link.active{color:var(--navy);background:#fff;box-shadow:0 1px 2px rgba(16,24,30,.08),inset 0 -2px 0 #b7cc00} @media(max-width:620px){.platform-navbar{padding:7px 12px}.platform-navbar-link{padding:8px 13px;font-size:11.5px}} /* Sign-out icon button */ .account{position:relative;padding-right:38px!important} .signout-form{position:absolute;top:8px;right:8px;display:inline!important} .signout-icon-btn{width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--border);background:#fff;color:#7a8a9b;cursor:pointer} .signout-icon-btn svg{width:14px;height:14px} .signout-icon-btn:hover{background:#fdeaea;color:#b33a3a;border-color:#f3c8c8} @media(max-width:620px){.account{padding-right:11px!important}.signout-form{position:static;margin-top:8px;display:block!important}.signout-icon-btn{width:100%;border-radius:8px;gap:6px}.signout-icon-btn::after{content:"Sign out";font-size:12px;font-weight:700;margin-left:6px}.signout-icon-btn{width:auto;padding:0 12px}} /* Unified "Meridian" platform rail — replaces the old horizontal platform-navbar strip with a fixed vertical rail of module monograms, same shell as Payroll/PF/MIS/Access Center, Office Management and Courier & Parcel. SAP PO's own page content keeps its own navy/blue theme untouched — only this cross-module switcher is unified. NOTE: SAP PO's left sidebar is a bare `nav` element (not `.aside` like the other modules), and `.rail` is itself a `