:root{
    --sidebar:#1f2d3d;
    --sidebar-dark:#192736;
    --sidebar-border:#2c4056;
    --accent:#2563eb;
    --accent-soft:#eef5ff;
    --success:#16a34a;
    --danger:#ef4444;
    --warning:#f59e0b;
    --muted:#6b7280;
    --text:#1f2937;
    --line:#e5e7eb;
    --bg:#f3f6fa;
    --panel:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:14px}
a{color:inherit}.perfex-app-shell{min-height:100vh;display:flex}.perfex-sidebar{width:260px;background:var(--sidebar);color:#d9e4ef;position:fixed;left:0;top:0;bottom:0;overflow:auto;z-index:40;box-shadow:2px 0 8px rgba(15,23,42,.16)}.perfex-brand{height:64px;display:flex;align-items:center;gap:12px;padding:0 18px;text-decoration:none;color:#fff;background:var(--sidebar-dark);border-bottom:1px solid var(--sidebar-border)}.brand-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#00bcd4,#4f46e5);display:grid;place-items:center;font-weight:800}.perfex-brand strong{display:block;font-size:21px;line-height:20px}.perfex-brand small{display:block;color:#9fb1c6;font-size:11px;margin-top:3px}.perfex-menu{padding:10px 10px 24px}.menu-section-label{font-size:11px;color:#8296aa;text-transform:uppercase;letter-spacing:.08em;margin:18px 12px 8px}.menu-link,.menu-group summary{height:38px;display:flex;align-items:center;gap:10px;color:#dce6ef;text-decoration:none;border-radius:7px;padding:0 11px;cursor:pointer;list-style:none}.menu-group summary::-webkit-details-marker{display:none}.menu-link:hover,.menu-group summary:hover,.perfex-menu a:hover,.perfex-menu a.active{background:#263a4f;color:#fff}.menu-icon{width:18px;text-align:center;color:#94a9bc}.menu-group{border:0;margin:2px 0}.menu-group a{display:block;color:#b8c8d8;text-decoration:none;border-radius:7px;margin:2px 0 2px 28px;padding:8px 11px;font-size:13px}.perfex-main-area{margin-left:260px;min-height:100vh;width:calc(100% - 260px)}.perfex-topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;padding:0 18px;box-shadow:0 1px 2px rgba(15,23,42,.04)}.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px}.icon-button{border:0;background:#f3f6fa;color:#334155;border-radius:8px;width:36px;height:36px;cursor:pointer}.top-search{width:min(440px,44vw);display:flex;align-items:center;background:#f6f8fb;border:1px solid #edf0f4;border-radius:3px;overflow:hidden}.top-search input{border:0;background:transparent;padding:11px 13px;outline:none;width:100%;color:#334155}.top-search button{border:0;background:transparent;width:42px;color:#64748b;cursor:pointer}.quick-add{width:36px;height:36px;border-radius:50%;background:#2f80ed;color:#fff;text-decoration:none;display:grid;place-items:center;font-size:25px;line-height:36px}.customer-area{text-decoration:none;color:#64748b;font-size:13px}.top-icon{position:relative;width:34px;height:34px;display:grid;place-items:center;color:#64748b}.top-icon.has-badge b{position:absolute;right:0;top:1px;min-width:17px;height:17px;border-radius:99px;background:#f59e0b;color:#fff;font-size:10px;display:grid;place-items:center}.user-chip{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:999px;background:#f8fafc;border:1px solid #e5e7eb}.avatar{width:28px;height:28px;border-radius:50%;background:#e0f2fe;color:#075985;display:grid;place-items:center;font-weight:700}.user-name{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#475569}.logout-form{display:inline}.logout-form button{border:0;background:#eef2ff;color:#1d4ed8;border-radius:8px;padding:8px 11px;cursor:pointer}.login-link{background:#2563eb;color:#fff;text-decoration:none;border-radius:8px;padding:8px 12px}.perfex-content{padding:22px}.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.page-header h1{font-size:25px;margin:0 0 5px;font-weight:600;color:#1f2937}.page-header p{margin:0;color:var(--muted)}.breadcrumb-line{font-size:12px;color:#94a3b8;margin-bottom:6px}.button,.btn-primary,.toolbar button,.edit-form button,.panel-toolbar button{display:inline-flex;align-items:center;gap:7px;background:#2563eb;color:#fff;border:0;border-radius:6px;padding:9px 13px;text-decoration:none;cursor:pointer;font-weight:600}.btn-secondary{display:inline-flex;align-items:center;background:#f8fafc;color:#475569;border:1px solid #dbe3ef;border-radius:6px;padding:8px 12px;text-decoration:none}.btn-danger{background:#ef4444;color:#fff;border:0;border-radius:6px;padding:7px 10px;cursor:pointer}.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 2px rgba(15,23,42,.05);margin-bottom:20px}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}.panel-heading h2{font-size:16px;margin:0;font-weight:600}.panel-body{padding:16px}.panel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar{display:flex;gap:8px;margin:0}.toolbar input,.panel-toolbar input{padding:9px 10px;border:1px solid #dbe3ef;border-radius:4px;min-width:250px}.toolbar a{padding:9px;color:#475569}.table-wrap{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:auto}.data-table{border-collapse:collapse;width:100%;font-size:13px}.data-table th{background:#f7f9fc;text-align:left;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:600;color:#344054}.data-table td{padding:9px 10px;border-bottom:1px solid #edf0f4;white-space:nowrap;vertical-align:top}.data-table tr:hover td{background:#fbfdff}.actions{display:flex;gap:7px;align-items:center}.actions form{display:inline}.actions a{color:#2563eb;text-decoration:none;font-weight:600}.actions button{background:#ef4444;color:white;border:0;border-radius:5px;padding:5px 8px}.status-pill{display:inline-flex;padding:3px 8px;border-radius:99px;font-size:12px;background:#eef2ff;color:#3730a3}.cards,.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:22px}.card,.metric-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:16px;box-shadow:0 1px 2px rgba(15,23,42,.04);position:relative;overflow:hidden}.metric-card:before,.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#2563eb}.metric-card:nth-child(4n+2):before,.card:nth-child(4n+2):before{background:#16a34a}.metric-card:nth-child(4n+3):before,.card:nth-child(4n+3):before{background:#f59e0b}.metric-card:nth-child(4n+4):before,.card:nth-child(4n+4):before{background:#ef4444}.metric-card span,.card span{display:block;color:var(--muted);font-size:13px}.metric-card strong,.card strong{display:block;font-size:28px;margin-top:6px;color:#111827}.module-section h2{margin-top:28px}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.module-tile{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px;text-decoration:none;color:#111827;box-shadow:0 1px 2px rgba(15,23,42,.04)}.module-tile:hover{border-color:#60a5fa;box-shadow:0 8px 20px rgba(37,99,235,.12);transform:translateY(-1px)}.module-tile strong{display:block}.module-tile span{display:block;color:var(--muted);margin-top:5px;font-size:12px}.auth-card,.edit-form{max-width:980px;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 2px rgba(15,23,42,.04)}.auth-card,.edit-form .form-panel-body{padding:18px}.form-tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);padding:0 14px;background:#fafbfc}.form-tab{padding:12px 14px;border-bottom:2px solid transparent;font-weight:600;color:#64748b}.form-tab.active{border-color:#2563eb;color:#2563eb}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}.form-row.full{grid-column:1/-1}label{display:block;margin-bottom:6px;font-weight:600;color:#344054}.auth-card input,.edit-form input,.edit-form textarea,.edit-form select{width:100%;border:1px solid #dbe3ef;border-radius:4px;padding:9px 10px;background:#fff}.edit-form textarea{min-height:96px}.field-hint{display:block;font-size:11px;color:#94a3b8;margin-top:4px}.form-actions{margin-top:18px;display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:15px}.mobile-shell{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 10px 25px rgba(15,23,42,.08)}.mobile-shell h1{margin:0 0 10px;font-size:24px}.mobile-actions{display:grid;gap:12px;margin-top:20px}.mobile-action-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;text-decoration:none;background:#f8fafc}.mobile-action-card b{display:block}.mobile-action-card span{display:block;color:#64748b;font-size:12px;margin-top:2px}.mobile-icon{width:42px;height:42px;border-radius:12px;background:#2563eb;color:#fff;display:grid;place-items:center;font-size:20px}.notice{padding:12px 14px;border-radius:4px;background:#eefaf0;color:#166534;border-left:4px solid #22c55e;margin-bottom:16px}.two-column-dashboard{display:grid;grid-template-columns:2fr 1fr;gap:18px}.activity-list{list-style:none;padding:0;margin:0}.activity-list li{border-left:2px solid #dbeafe;padding:0 0 16px 15px;position:relative;color:#475569}.activity-list li:before{content:"";position:absolute;left:-5px;top:2px;width:8px;height:8px;border-radius:50%;background:#2563eb}.progress-row{display:grid;grid-template-columns:150px 1fr 55px;gap:10px;align-items:center;margin:10px 0}.progress-bar{height:8px;background:#e5e7eb;border-radius:99px;overflow:hidden}.progress-bar span{display:block;height:100%;background:#2563eb}.sidebar-collapsed .perfex-sidebar{transform:translateX(-260px)}.sidebar-collapsed .perfex-main-area{margin-left:0;width:100%}@media(max-width:1000px){.perfex-sidebar{transform:translateX(-260px);transition:.2s}.perfex-main-area{margin-left:0;width:100%}.sidebar-collapsed .perfex-sidebar,body:not(.sidebar-collapsed) .perfex-sidebar{transform:translateX(0)}.top-search{display:none}.two-column-dashboard{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.topbar-right{gap:6px}.customer-area,.user-name{display:none}}@media(max-width:700px){.perfex-content{padding:14px}.page-header{align-items:flex-start;flex-direction:column}.panel-toolbar{align-items:stretch}.toolbar-left,.toolbar-right,.toolbar,.toolbar input,.panel-toolbar input{width:100%}.cards,.dashboard-grid{grid-template-columns:1fr}.data-table{font-size:12px}.top-icon{display:none}}

/* Perfex-style project create/edit workspace */
.project-workspace{display:block}.project-hero,.project-top-row{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px rgba(15,23,42,.04);padding:18px 20px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.project-hero.add-mode{background:linear-gradient(135deg,#fff,#f7fbff)}.project-kicker{text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-size:12px;font-weight:700;margin-bottom:7px}.project-hero h1,.project-title-area h1{margin:0 0 6px;color:#1f2937;font-size:26px}.project-hero p{margin:0;color:#64748b;max-width:760px}.project-hero-actions,.project-action-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.project-title-area{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.project-selector-like{min-width:280px;background:#f8fafc;border:1px solid #dbe3ef;border-radius:6px;padding:9px 12px}.project-selector-like .project-selector-label{display:block;color:#94a3b8;text-transform:uppercase;font-size:11px;font-weight:700}.project-selector-like strong{display:block;color:#1f2937;font-size:16px}.project-selector-like small{display:block;color:#64748b;margin-top:2px}.project-status-label{display:inline-flex;align-items:center;border:1px solid #a8c1f7;background:#f6f9fe;color:#2563eb;border-radius:99px;padding:5px 10px;font-weight:700;font-size:12px}.project-tabs{display:flex;gap:3px;overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:6px 6px 0 0;padding:0 8px;margin-bottom:0}.project-tabs a{white-space:nowrap;text-decoration:none;color:#64748b;border-bottom:2px solid transparent;padding:13px 11px;font-weight:600;font-size:13px}.project-tabs a:hover{color:#2563eb;background:#f8fafc}.project-tabs a.active{color:#2563eb;border-bottom-color:#2563eb}.project-tabs span{margin-right:5px}.project-edit-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}.project-edit-layout.with-overview{grid-template-columns:minmax(0,1fr) 360px}.project-main-card,.project-side-card{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04);border-radius:0 0 6px 6px;padding:18px}.project-side-card{border-radius:6px;position:sticky;top:82px}.perfex-panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}.perfex-panel-title h2{font-size:18px;margin:0 0 4px;color:#1f2937}.perfex-panel-title p{margin:0;color:#64748b}.perfex-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}.perfex-form-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.perfex-form-grid .full{grid-column:1/-1}.form-group label{font-size:13px;color:#344054;margin-bottom:6px}.form-group input,.form-group textarea,.form-group select{width:100%;border:1px solid #dbe3ef;border-radius:4px;padding:9px 10px;background:#fff}.form-group textarea{min-height:96px}.perfex-section-title{font-weight:700;color:#1f2937;border-top:1px solid var(--line);padding-top:16px;margin:18px 0 12px}.project-inner-tabs{display:flex;gap:3px;background:#f8fafc;border:1px solid #e5edf6;border-radius:5px;padding:4px;margin-bottom:14px;overflow-x:auto}.project-inner-tabs a{text-decoration:none;color:#64748b;padding:8px 11px;border-radius:4px;font-weight:600;font-size:13px}.project-inner-tabs a.active,.project-inner-tabs a:hover{background:#fff;color:#2563eb;box-shadow:0 1px 2px rgba(15,23,42,.05)}.sticky-form-actions{display:flex;gap:9px;align-items:center;border-top:1px solid var(--line);padding-top:15px;margin-top:18px;position:sticky;bottom:0;background:#fff}.project-checklist-preview{list-style:none;padding:0;margin:14px 0;display:grid;gap:8px}.project-checklist-preview li{background:#f8fafc;border:1px solid #edf2f7;border-radius:5px;padding:8px 10px;color:#475569}.side-note{background:#eff6ff;border-left:4px solid #2563eb;border-radius:5px;padding:12px;margin-top:14px;color:#475569}.side-note strong{display:block;color:#1f2937;margin-bottom:5px}.side-note span{display:block}.muted-small{color:#64748b;font-size:13px}.project-overview-card h3{font-size:18px;margin:0 0 14px}.project-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.project-mini-grid>div{border:1px solid #e5eaf1;border-radius:6px;padding:10px;background:#fbfdff}.project-mini-grid strong{display:block;color:#111827;font-size:17px;margin-bottom:4px}.project-mini-grid span{display:block;color:#64748b;font-size:12px}.mini-progress{height:7px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:8px}.mini-progress i{display:block;height:100%;background:#16a34a}.project-overview-block{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:7px}.project-overview-block h4{margin:0 0 4px;color:#1f2937}.project-overview-block a{text-decoration:none;color:#2563eb;border:1px solid #dbeafe;background:#f8fbff;border-radius:5px;padding:8px 10px}.advanced-fields{margin-top:16px;border:1px dashed #cbd5e1;border-radius:6px;padding:10px}.advanced-fields summary{cursor:pointer;font-weight:700;color:#475569;margin-bottom:10px}@media(max-width:1100px){.project-edit-layout,.project-edit-layout.with-overview{grid-template-columns:1fr}.project-side-card{position:static}.perfex-form-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.project-hero,.project-top-row{flex-direction:column}.project-action-row,.project-hero-actions{justify-content:flex-start}.perfex-form-grid,.perfex-form-grid.compact{grid-template-columns:1fr}.project-selector-like{min-width:0;width:100%}}

/* Dedicated Perfex-style Projects workspace: used by /Admin/Data/Tblprojects/Edit/{id} and Create */
.perfex-project-page { max-width: 1480px; margin: 0 auto; }
.perfex-breadcrumb { color: #64748b; font-size: 12px; margin: 0 0 14px; }
.perfex-project-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.project-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.project-select-box { background: #fff; border: 1px solid #dbe3ef; border-radius: 8px; padding: 10px 14px; min-width: 280px; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.project-select-box .selector-caption { display: block; font-size: 11px; text-transform: uppercase; color: #64748b; letter-spacing: .04em; margin-bottom: 2px; }
.project-select-box strong { display: block; font-size: 18px; color: #0f172a; line-height: 1.2; }
.project-select-box small { color: #64748b; }
.status-pill, .progress-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 700; }
.status-pill { color: #0f766e; background: #ccfbf1; border: 1px solid #99f6e4; }
.progress-pill { color: #1d4ed8; background: #dbeafe; border: 1px solid #bfdbfe; }
.project-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.btn-primary, .btn-secondary, .btn-light { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; padding: 9px 13px; font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: #2563eb; color: white; border-color: #2563eb; }
.btn-primary:hover { background: #1d4ed8; color: white; }
.btn-secondary { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.btn-secondary:hover { background: #e0e7ff; color: #312e81; }
.btn-light { background: #fff; color: #334155; border-color: #cbd5e1; }
.btn-light:hover { background: #f8fafc; color: #0f172a; }
.btn-light.block { display: flex; width: 100%; margin-top: 8px; }
.perfex-project-tabs { display: flex; align-items: center; gap: 2px; overflow-x: auto; border-bottom: 1px solid #dbe3ef; margin: 0 0 16px; padding-left: 4px; }
.perfex-project-tabs a { color: #475569; text-decoration: none; padding: 12px 14px; font-size: 13px; font-weight: 700; border-bottom: 3px solid transparent; white-space: nowrap; }
.perfex-project-tabs a:hover { color: #2563eb; background: #f8fafc; }
.perfex-project-tabs a.active { color: #2563eb; border-bottom-color: #2563eb; background: #fff; }
.perfex-project-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.perfex-panel { background: #fff; border: 1px solid #dbe3ef; border-radius: 10px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.project-editor-panel { padding: 0; overflow: hidden; }
.panel-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.panel-heading-row h1 { margin: 0; font-size: 22px; color: #0f172a; }
.panel-heading-row p { margin: 4px 0 0; color: #64748b; font-size: 13px; }
.inner-tabs { display: flex; gap: 2px; border-bottom: 1px solid #e2e8f0; padding: 0 16px; background: #f8fafc; overflow-x: auto; }
.inner-tabs a { padding: 11px 12px; text-decoration: none; color: #475569; font-size: 13px; font-weight: 700; border-bottom: 2px solid transparent; }
.inner-tabs a.active { color: #2563eb; border-bottom-color: #2563eb; }
.perfex-form { padding: 20px; }
.perfex-form h2 { font-size: 14px; color: #0f172a; text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 12px; padding-top: 10px; border-top: 1px solid #edf2f7; }
.perfex-form h2:first-of-type { border-top: 0; padding-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.form-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { color: #334155; font-size: 13px; font-weight: 700; }
.form-group input, .form-group textarea, .form-group select { border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #0f172a; padding: 9px 10px; font-size: 14px; width: 100%; box-sizing: border-box; }
.form-group textarea { resize: vertical; min-height: 92px; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.form-group small { color: #94a3b8; font-size: 11px; }
.advanced-box { border: 1px solid #e2e8f0; border-radius: 8px; margin-top: 12px; background: #f8fafc; }
.advanced-box summary { cursor: pointer; padding: 12px 14px; font-weight: 700; color: #334155; }
.advanced-box .form-grid { padding: 0 14px 14px; }
.sticky-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; border-top: 1px solid #e2e8f0; padding-top: 16px; margin-top: 16px; }
.project-side-panel { padding: 18px; position: sticky; top: 78px; }
.project-side-panel h3 { margin: 0 0 12px; font-size: 16px; color: #0f172a; }
.progress-card { border: 1px solid #dbeafe; background: #eff6ff; border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.progress-number { color: #1d4ed8; font-size: 32px; font-weight: 800; }
.progress-bar { height: 8px; border-radius: 999px; background: #bfdbfe; overflow: hidden; margin: 8px 0; }
.progress-bar span { display: block; height: 100%; background: #2563eb; }
.project-meta-list { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; font-size: 13px; margin: 14px 0; }
.project-meta-list dt { color: #64748b; font-weight: 700; }
.project-meta-list dd { color: #0f172a; margin: 0; word-break: break-word; }
.side-actions { border-top: 1px solid #e2e8f0; padding-top: 10px; }
.checklist-list { padding-left: 20px; color: #475569; line-height: 1.8; font-size: 14px; }
@media (max-width: 1100px) { .perfex-project-layout { grid-template-columns: 1fr; } .project-side-panel { position: static; } .form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .perfex-project-header, .panel-heading-row { flex-direction: column; align-items: stretch; } .project-header-left { flex-wrap: wrap; } .project-select-box { min-width: 0; width: 100%; } .form-grid, .form-grid.compact { grid-template-columns: 1fr; } .project-header-actions { justify-content: flex-start; } }

/* Project workspace in-page tabs and sidebar scroll fix support */
.perfex-project-tabs button {
    appearance: none;
    background: transparent;
    border: 0;
    color: #475569;
    text-decoration: none;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}
.perfex-project-tabs button:hover { color: #2563eb; background: #f8fafc; }
.perfex-project-tabs button.active { color: #2563eb; border-bottom-color: #2563eb; background: #fff; }
.project-tab-panel { display: none; }
.project-tab-panel.active { display: block; }
.project-tab-content-card { padding: 20px; min-height: 260px; }
.tab-card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid #e2e8f0; padding-bottom: 14px; margin-bottom: 16px; }
.tab-card-heading h2 { margin: 0 0 4px; font-size: 22px; color: #0f172a; }
.tab-card-heading p { margin: 0; color: #64748b; }
.tab-card-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.workspace-placeholder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.workspace-placeholder-grid > div { border: 1px solid #dbe3ef; background: #f8fafc; border-radius: 8px; padding: 14px; }
.workspace-placeholder-grid strong { display: block; color: #0f172a; margin-bottom: 5px; }
.workspace-placeholder-grid span, .tab-muted { color: #64748b; }
.gantt-placeholder { border: 1px solid #dbe3ef; border-radius: 10px; background: #f8fafc; padding: 18px; display: grid; gap: 16px; }
.gantt-line { position: relative; height: 42px; border-left: 3px solid #cbd5e1; padding-left: 14px; display: flex; align-items: center; }
.gantt-line span { display: block; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #60a5fa, #2563eb); margin-right: 12px; }
.gantt-line b { color: #334155; font-size: 13px; }
.sales-link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.side-actions button.btn-light.block { width: 100%; margin-top: 8px; }
@media (max-width: 900px) {
    .workspace-placeholder-grid, .sales-link-grid { grid-template-columns: 1fr; }
    .tab-card-heading { flex-direction: column; }
    .tab-card-actions { justify-content: flex-start; }
}

/* Generic workspace engine */
.generic-workspace-page { display: flex; flex-direction: column; gap: 16px; }
.workspace-header { margin-bottom: 0; }
.workspace-tabs-block { margin-top: 14px; }
.workspace-tab-buttons { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #dce3ea; padding-bottom: 0; }
.workspace-tab-buttons button { border: 0; background: transparent; color: #4b5b6b; padding: 11px 13px; border-radius: 8px 8px 0 0; cursor: pointer; font-weight: 600; }
.workspace-tab-buttons button:hover { background: #eef4fb; color: #1f2937; }
.workspace-tab-buttons button.active { background: #fff; color: #0b5cab; border: 1px solid #dce3ea; border-bottom-color: #fff; margin-bottom: -1px; }
.workspace-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #e8eef6; color: #334155; font-size: 11px; }
.workspace-tab-panels > .workspace-tab-panel { display: none; padding-top: 16px; }
.workspace-tab-panels > .workspace-tab-panel.active { display: block; }
.workspace-panel-card { margin-bottom: 16px; }
.workspace-panel-heading { align-items: flex-start; gap: 16px; }
.workspace-panel-heading h2 { margin: 0; }
.workspace-panel-heading p { margin: 5px 0 0; color: #64748b; }
.workspace-child-tabs-wrap { margin-top: 18px; padding: 12px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; }
.workspace-child-tabs-wrap .workspace-tab-buttons button { font-size: 13px; padding: 8px 10px; }
.workspace-grid-summary { display: flex; gap: 8px; align-items: center; color: #64748b; margin-bottom: 10px; font-size: 13px; }
.workspace-table-wrap { max-height: 460px; overflow: auto; }
.workspace-table th { position: sticky; top: 0; z-index: 1; background: #f8fafc; }
.compact-actions { white-space: nowrap; }
.workspace-overview-form { margin-top: 8px; }
.tab-muted { color: #64748b; background: #f8fafc; border: 1px dashed #cbd5e1; padding: 14px; border-radius: 10px; }


/* Project edit top tabs and inner form tabs: no redirects, in-page switching only. */
.perfex-project-tabs button {
    appearance: none;
    background: transparent;
    border: 0;
    color: #475569;
    text-decoration: none;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}
.perfex-project-tabs button:hover { color: #2563eb; background: #f8fafc; }
.perfex-project-tabs button.active { color: #2563eb; border-bottom-color: #2563eb; background: #fff; }
.project-tab-panel { display: none; }
.project-tab-panel.active { display: block; }
.project-subtabs button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #475569;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
}
.project-subtabs button:hover,
.project-subtabs button.active { color: #2563eb; background: #fff; border-bottom-color: #2563eb; }
.project-subtab-panel { display: none; }
.project-subtab-panel.active { display: block; }
.advanced-box.open-like { padding: 14px; }
.project-tab-content-card { padding: 20px; min-height: 260px; }
.tab-card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid #e2e8f0; padding-bottom: 14px; margin-bottom: 16px; }
.tab-card-heading h2 { margin: 0 0 4px; font-size: 22px; color: #0f172a; }
.tab-card-heading p { margin: 0; color: #64748b; }
.tab-card-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.workspace-placeholder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.workspace-placeholder-grid > div { border: 1px solid #dbe3ef; background: #f8fafc; border-radius: 8px; padding: 14px; }
.workspace-placeholder-grid strong { display: block; color: #0f172a; margin-bottom: 5px; }
.workspace-placeholder-grid span, .tab-muted { color: #64748b; }
.gantt-placeholder { border: 1px solid #dbe3ef; border-radius: 10px; background: #f8fafc; padding: 18px; display: grid; gap: 16px; }
.gantt-line { position: relative; height: 42px; border-left: 3px solid #cbd5e1; padding-left: 14px; display: flex; align-items: center; }
.gantt-line span { display: block; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #60a5fa, #2563eb); margin-right: 12px; }
.gantt-line b { color: #334155; font-size: 13px; }
.sales-link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.side-actions button.btn-light.block { width: 100%; margin-top: 8px; }
@media (max-width: 900px) {
    .workspace-placeholder-grid, .sales-link-grid { grid-template-columns: 1fr; }
    .tab-card-heading { flex-direction: column; }
    .tab-card-actions { justify-content: flex-start; }
}


/* Clickable breadcrumbs used by Admin/Data and Home pages */
.clickable-breadcrumbs,
.breadcrumb-line.clickable-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 16px;
}

.clickable-breadcrumbs a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.clickable-breadcrumbs a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.clickable-breadcrumbs strong {
    color: #334155;
    font-weight: 600;
}

.clickable-breadcrumbs span {
    color: #94a3b8;
}

/* INGQ jqGrid responsive popup/form tuning */
.ui-jqdialog,
.ui-dialog {
    max-width: calc(100vw - 18px) !important;
    max-height: calc(100vh - 16px) !important;
    overflow: auto !important;
    box-sizing: border-box;
}

.ui-jqdialog .ui-jqdialog-titlebar,
.ui-dialog .ui-dialog-titlebar {
    padding: 5px 8px !important;
}

.ui-jqdialog-content,
.ui-dialog-content {
    max-width: 100% !important;
    box-sizing: border-box;
}

.ui-jqdialog .FormGrid,
.ui-jqdialog .EditTable,
.ui-jqdialog .DelTable {
    width: 100% !important;
    table-layout: auto;
}

.ui-jqdialog .FormGrid td.CaptionTD,
.ui-jqdialog .EditTable td.CaptionTD {
    width: 135px !important;
    min-width: 110px !important;
    max-width: 155px !important;
    padding: 4px 6px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.ui-jqdialog .FormGrid td.DataTD,
.ui-jqdialog .EditTable td.DataTD {
    padding: 3px 6px !important;
    width: auto !important;
}

.ui-jqdialog .FormElement,
.ui-jqdialog input.FormElement,
.ui-jqdialog textarea.FormElement,
.ui-jqdialog select.FormElement {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.ui-jqdialog textarea.FormElement {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    line-height: 1.35;
}

@media (max-width: 700px) {
    .ui-jqdialog,
    .ui-dialog {
        left: 8px !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    .ui-jqdialog .FormGrid tr,
    .ui-jqdialog .EditTable tr {
        display: block;
        margin-bottom: 7px;
    }

    .ui-jqdialog .FormGrid td.CaptionTD,
    .ui-jqdialog .EditTable td.CaptionTD,
    .ui-jqdialog .FormGrid td.DataTD,
    .ui-jqdialog .EditTable td.DataTD {
        display: block;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 2px 6px !important;
    }

    .ui-jqdialog .FormElement,
    .ui-jqdialog input.FormElement,
    .ui-jqdialog textarea.FormElement,
    .ui-jqdialog select.FormElement {
        width: 100% !important;
        min-width: 0 !important;
    }

    .ui-jqdialog .EditButton,
    .ui-jqdialog .DelButton {
        text-align: right;
        padding: 8px 6px !important;
    }
}

/* INGQ responsive shell fix: mobile sidebar + compact header */
@media (max-width: 1000px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-top: 0;
    }

    .perfex-app-shell {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .perfex-sidebar {
        width: 260px;
        max-width: min(82vw, 300px);
        transform: translateX(-105%) !important;
        transition: transform .2s ease;
        z-index: 90;
    }

    body.sidebar-mobile-open .perfex-sidebar {
        transform: translateX(0) !important;
    }

    .sidebar-collapsed .perfex-sidebar {
        transform: translateX(-105%) !important;
    }

    .perfex-main-area,
    .sidebar-collapsed .perfex-main-area {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .perfex-topbar {
        height: auto !important;
        min-height: 56px;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 56px 8px 10px;
        overflow: visible;
        z-index: 60;
    }

    .topbar-left,
    .topbar-right {
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .topbar-left {
        flex: 1 1 auto;
    }

    .topbar-right {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    #sidebarToggle {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 110;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #2563eb;
        color: #ffffff;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
    }

    .top-search {
        display: none !important;
    }

    .quick-add {
        width: 34px;
        height: 34px;
        font-size: 23px;
        flex: 0 0 auto;
    }

    .theme-switcher {
        gap: 4px;
        font-size: 11px;
        max-width: 100%;
    }

    .theme-switcher select {
        max-width: 135px;
        min-width: 88px;
        height: 28px;
        font-size: 11px;
        padding: 2px 5px;
    }

    .customer-area,
    .user-name,
    .top-icon {
        display: none !important;
    }

    .user-chip {
        padding: 3px 6px;
    }

    .logout-form button {
        padding: 6px 8px;
    }

    body.sidebar-mobile-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .35);
        z-index: 80;
    }
}

@media (max-width: 560px) {
    .perfex-topbar {
        padding-left: 8px;
        padding-right: 56px;
    }

    .topbar-right {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px;
        scrollbar-width: thin;
    }

    .theme-switcher span {
        display: none;
    }

    .theme-switcher select {
        width: 98px;
        max-width: 98px;
    }

    .quick-add {
        width: 32px;
        height: 32px;
    }

    .perfex-content {
        padding: 10px !important;
        max-width: 100%;
        overflow-x: hidden;
    }

    .panel,
    .project-hero,
    .project-top-row,
    .workspace-tabs-block,
    .generic-workspace-page {
        max-width: 100%;
    }
}

/* INGQ workspace duplicate bottom actions */
.project-footer-actions,
.workspace-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
    padding-top: 4px;
}

@media (max-width: 700px) {
    .project-footer-actions,
    .workspace-footer-actions {
        position: sticky;
        bottom: 0;
        z-index: 25;
        background: rgba(243, 246, 250, .96);
        border-top: 1px solid #dbe3ef;
        padding: 10px 0 8px;
        margin-bottom: 0;
    }
}


/* Dynamic datatype controls */
.dynamic-bool-input {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    cursor: pointer;
}

.dynamic-bool-input input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.ui-jqgrid .ui-search-toolbar select,
.ui-jqgrid .ui-search-toolbar input {
    min-height: 26px;
    box-sizing: border-box;
}

/* Runtime user admin test screen */
.runtime-user-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.runtime-user-toolbar select,
.runtime-user-form input,
.runtime-user-form select {
    width: 100%;
    max-width: 620px;
    min-height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 9px;
    background: #fff;
}

.runtime-user-context-note {
    margin-top: 12px;
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}

.runtime-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.runtime-user-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.runtime-user-form button {
    align-self: flex-start;
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    color: #fff;
    background: #2563eb;
    cursor: pointer;
}

.runtime-user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.runtime-user-table th,
.runtime-user-table td {
    border-bottom: 1px solid #e2e8f0;
    padding: 8px;
    vertical-align: top;
}

.alert {
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.alert-danger,
.alert-warning {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.table-responsive {
    overflow-x: auto;
}

@media (max-width: 900px) {
    .runtime-user-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   INGQ NICE TOP NAV PATCH - 30 Apr 2026
   Purpose: make the Perfex runtime admin shell look like the
   Ingq.Platform top-menu landing layout while keeping jqGrid.
   ========================================================= */
:root {
    --landing-dark: #0f172a;
    --landing-slate: #1e293b;
    --landing-blue: #0ea5e9;
    --landing-cyan: #22d3ee;
    --landing-green: #10b981;
    --landing-soft: #f8fafc;
    --landing-text: #0f172a;
    --landing-muted: #64748b;
    --landing-border: rgba(15, 23, 42, 0.08);
    --landing-shadow: 0 20px 50px rgba(15, 23, 42, 0.10);
}

body {
    background: #f8fafc;
    color: var(--landing-text);
}

.top-nav-shell,
.perfex-app-shell.top-nav-shell {
    display: block;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 25%),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.10), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #f8fafc 48%, #eef6fb 100%);
}

.top-nav-shell .perfex-main-area,
.perfex-main-area {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: auto;
}

.top-nav-shell .perfex-content,
.perfex-content.container-fluid {
    padding-top: 0 !important;
}

.landing-navbar {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

.landing-navbar .navbar-brand {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.menu-wrap-collapse {
    width: 100%;
}

.navbar-nav.menu-wrap {
    min-width: 0;
}

.navbar-actions {
    flex: 0 0 auto;
}

.runtime-menu-dropdown {
    max-height: min(70vh, 540px);
    overflow-y: auto;
    min-width: 240px;
}

.jqgrid-tools-menu {
    min-width: 260px;
}

.jqgrid-tools-menu .theme-switcher {
    color: #e5e7eb;
    width: 100%;
}

.theme-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
}

.theme-switcher select {
    max-width: 150px;
    height: 30px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    font-size: 12px;
    padding: 3px 7px;
}

@media (min-width: 992px) {
    .menu-wrap-collapse {
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: .35rem;
    }

    .navbar-nav.menu-wrap {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex: 1 1 auto;
        align-items: center;
        column-gap: .15rem;
        row-gap: .15rem;
    }

    .navbar-nav.menu-wrap .nav-link {
        white-space: nowrap;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    .navbar-actions {
        margin-left: auto;
        padding-top: .1rem;
        align-self: flex-start;
    }
}

.app-landing {
    color: var(--landing-text);
    min-height: calc(100vh - 90px);
    padding-bottom: 64px;
}

.hero-card,
.app-card,
.info-card {
    background: rgba(255,255,255,0.94);
    border: 1px solid var(--landing-border);
    box-shadow: var(--landing-shadow);
    border-radius: 24px;
}

.hero-card {
    padding: 34px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.10);
    color: #0369a1;
    font-weight: 700;
    font-size: 0.92rem;
}

.hero-title {
    font-size: clamp(2.1rem, 4.5vw, 4rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 18px 0 18px;
    color: var(--landing-text);
}

.hero-title .accent {
    color: var(--landing-blue);
}

.hero-lead {
    color: var(--landing-muted);
    font-size: 1.08rem;
    line-height: 1.85;
    max-width: 880px;
    margin-bottom: 0;
}

.section-title {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: var(--landing-text);
}

.section-sub {
    color: var(--landing-muted);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 24px;
}

.app-card {
    padding: 26px;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
}

.app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.14);
}

.app-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .02em;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.pill-pm { background: rgba(14,165,233,.12); color: #0369a1; }
.pill-project { background: rgba(16,185,129,.12); color: #047857; }
.pill-she { background: rgba(249,115,22,.12); color: #c2410c; }

.app-card h3 {
    font-weight: 800;
    margin-bottom: 10px;
    font-size: 1.3rem;
    color: var(--landing-text);
}

.app-card p {
    color: var(--landing-muted);
    line-height: 1.75;
    min-height: 96px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: grid;
    gap: 10px;
}

.feature-list li,
.feature-list a {
    color: var(--landing-slate);
    text-decoration: none;
}

.feature-list li {
    background: #f8fbff;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: .95rem;
}

.feature-list li:hover {
    background: #eef8ff;
}

.action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-app {
    border-radius: 14px;
    padding: 12px 18px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    border: none;
    box-shadow: var(--landing-shadow);
}

.btn-pm { background: linear-gradient(135deg, #0ea5e9, #22d3ee); color: #fff; }
.btn-project { background: linear-gradient(135deg, #10b981, #34d399); color: #fff; }
.btn-she { background: linear-gradient(135deg, #f97316, #fb923c); color: #fff; }

.btn-app:hover {
    color: #fff;
    transform: translateY(-1px);
}

.info-card {
    padding: 22px;
    height: 100%;
}

.info-card h2,
.info-card h4 {
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--landing-text);
}

.info-card p {
    color: var(--landing-muted);
    line-height: 1.75;
    margin-bottom: 0;
}

.dashboard-grid-nice {
    margin-bottom: 24px;
}

.metric-card,
.card,
.panel,
.module-tile,
.auth-card,
.edit-form,
.table-wrap {
    border-color: var(--landing-border);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.metric-card {
    min-height: 92px;
}

.metric-card strong,
.card strong {
    color: var(--landing-text);
    font-weight: 800;
}

.panel-heading {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.landing-panel-heading {
    padding: 0 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.module-section {
    margin-top: 32px;
}

.module-section h2 {
    margin: 0 0 14px;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--landing-text);
}

.module-tile {
    border-radius: 18px;
    padding: 18px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.module-tile:hover {
    border-color: rgba(14,165,233,.45);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.13);
    transform: translateY(-2px);
}

.quick-actions-card .module-grid {
    margin-top: 0;
}

.page-header h1 {
    font-weight: 800;
    color: var(--landing-text);
    letter-spacing: -0.02em;
}

.page-header p,
.breadcrumb-line,
.clickable-breadcrumbs,
.panel-body,
.module-tile span {
    color: var(--landing-muted);
}

.button,
.btn-primary,
.toolbar button,
.edit-form button,
.panel-toolbar button {
    border-radius: 12px;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    box-shadow: 0 10px 25px rgba(37, 99, 235, .20);
}

.btn-secondary {
    border-radius: 12px;
    background: #ffffff;
}

.jqgrid-host {
    overflow-x: auto;
}

@media (max-width: 991.98px) {
    .landing-navbar .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .navbar-actions {
        align-items: flex-start !important;
        margin-top: .5rem;
    }

    .runtime-menu-dropdown {
        max-height: 360px;
    }
}

@media (max-width: 760px) {
    .perfex-content.container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero-card {
        padding: 24px;
        border-radius: 20px;
    }

    .app-card,
    .info-card {
        border-radius: 20px;
    }

    .hero-title {
        font-size: 2.15rem;
    }

    .hero-lead,
    .section-sub {
        font-size: .98rem;
    }

    .app-card p {
        min-height: 0;
    }

    .module-grid {
        grid-template-columns: 1fr;
    }
}

/* JQGRID ONLY DATA PAGES
   Admin/Data pages now render only the top menu shell and the jqGrid itself.
   Page breadcrumbs, custom headers, custom search panels, workspace badges and extra CRUD buttons were removed from the Razor view. */
.jqgrid-only-page {
    width: 100%;
}

.jqgrid-only-page .jqgrid-host {
    width: 100%;
    overflow-x: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.top-nav-shell .perfex-content {
    padding-top: 12px;
}

@media (max-width: 700px) {
    .top-nav-shell .perfex-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

.top-nav-shell .perfex-content,
.perfex-content.container-fluid {
    padding-top: 12px !important;
}


/* Runtime app theme hooks for the one-host / many-class-libraries pattern */
.theme-isodoc .hero-card {
    border-top: 4px solid #22c55e;
}

.theme-pm .hero-card {
    border-top: 4px solid #f97316;
}

.runtime-app-pm .landing-navbar {
    background: linear-gradient(135deg, #78350f, #c2410c, #ea580c);
}

.runtime-app-isodoc .landing-navbar {
    background: linear-gradient(135deg, #064e3b, #047857, #059669);
}

.app-card.theme-pm {
    box-shadow: 0 18px 45px rgba(234, 88, 12, 0.18);
}

.app-card.theme-isodoc {
    box-shadow: 0 18px 45px rgba(5, 150, 105, 0.18);
}

.feature-list code {
    white-space: normal;
    word-break: break-word;
}

/* PM brown top-menu dropdowns: keep the PM app in the brown DynamicProject navbar instead of the old black MaintBridge menu. */
.runtime-app-pm .runtime-menu-dropdown {
    background: #7c2d12;
    border: 1px solid rgba(255, 237, 213, 0.22);
    box-shadow: 0 18px 42px rgba(67, 20, 7, 0.28);
}

.runtime-app-pm .runtime-menu-dropdown .dropdown-item {
    color: #ffedd5;
}

.runtime-app-pm .runtime-menu-dropdown .dropdown-item:hover,
.runtime-app-pm .runtime-menu-dropdown .dropdown-item:focus {
    background: #ea580c;
    color: #ffffff;
}

.runtime-app-pm .runtime-menu-dropdown .dropdown-item i {
    color: #fed7aa;
    margin-right: 0.35rem;
}


/* FINAL PM brown navbar fix.
   This does not depend only on the RuntimeAppAccessor.
   _Layout also adds pm-brown-navbar from the /App/pm path, so the PM top menu stays brown even if the active app resolver is late/wrong. */
body.pm-brown-shell .landing-navbar,
body.runtime-app-pm .landing-navbar,
body.runtime-path-app-pm .landing-navbar,
.landing-navbar.pm-brown-navbar {
    background: linear-gradient(90deg, #b43405 0%, #c93a05 48%, #d84305 100%) !important;
    border-bottom: 1px solid rgba(120, 53, 15, 0.35) !important;
}

body.pm-brown-shell .landing-navbar .navbar-brand,
body.pm-brown-shell .landing-navbar .nav-link,
body.pm-brown-shell .landing-navbar .navbar-actions .small,
.landing-navbar.pm-brown-navbar .navbar-brand,
.landing-navbar.pm-brown-navbar .nav-link,
.landing-navbar.pm-brown-navbar .navbar-actions .small {
    color: #fff7ed !important;
}

body.pm-brown-shell .landing-navbar .nav-link:hover,
body.pm-brown-shell .landing-navbar .nav-link:focus,
.landing-navbar.pm-brown-navbar .nav-link:hover,
.landing-navbar.pm-brown-navbar .nav-link:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 6px;
}

body.pm-brown-shell .runtime-menu-dropdown,
.landing-navbar.pm-brown-navbar .runtime-menu-dropdown {
    background: #9a3412 !important;
    border: 1px solid rgba(255, 237, 213, 0.25) !important;
}

body.pm-brown-shell .runtime-menu-dropdown .dropdown-item,
.landing-navbar.pm-brown-navbar .runtime-menu-dropdown .dropdown-item {
    color: #fff7ed !important;
}

body.pm-brown-shell .runtime-menu-dropdown .dropdown-item:hover,
body.pm-brown-shell .runtime-menu-dropdown .dropdown-item:focus,
.landing-navbar.pm-brown-navbar .runtime-menu-dropdown .dropdown-item:hover,
.landing-navbar.pm-brown-navbar .runtime-menu-dropdown .dropdown-item:focus {
    color: #ffffff !important;
    background: #7c2d12 !important;
}

/* SHE / Safety & Health app theme: third runtime app color, separate from ISO green and PM brown. */
.theme-she .hero-card {
    border-top: 4px solid #2563eb;
}

.runtime-app-she .landing-navbar {
    background: linear-gradient(135deg, #075985, #0369a1, #2563eb);
}

.app-card.theme-she {
    box-shadow: 0 18px 45px rgba(37, 99, 235, 0.18);
}

body.she-blue-shell .landing-navbar,
body.runtime-app-she .landing-navbar,
body.runtime-path-app-she .landing-navbar,
.landing-navbar.she-blue-navbar {
    background: linear-gradient(90deg, #075985 0%, #0369a1 48%, #2563eb 100%) !important;
    border-bottom: 1px solid rgba(14, 116, 144, 0.35) !important;
}

body.she-blue-shell .landing-navbar .navbar-brand,
body.she-blue-shell .landing-navbar .nav-link,
body.she-blue-shell .landing-navbar .navbar-actions .small,
.landing-navbar.she-blue-navbar .navbar-brand,
.landing-navbar.she-blue-navbar .nav-link,
.landing-navbar.she-blue-navbar .navbar-actions .small {
    color: #eff6ff !important;
}

body.she-blue-shell .landing-navbar .nav-link:hover,
body.she-blue-shell .landing-navbar .nav-link:focus,
.landing-navbar.she-blue-navbar .nav-link:hover,
.landing-navbar.she-blue-navbar .nav-link:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
}

body.she-blue-shell .runtime-menu-dropdown,
.landing-navbar.she-blue-navbar .runtime-menu-dropdown {
    background: #075985 !important;
    border: 1px solid rgba(219, 234, 254, 0.25) !important;
    box-shadow: 0 18px 42px rgba(7, 89, 133, 0.28);
}

body.she-blue-shell .runtime-menu-dropdown .dropdown-item,
.landing-navbar.she-blue-navbar .runtime-menu-dropdown .dropdown-item {
    color: #eff6ff !important;
}

body.she-blue-shell .runtime-menu-dropdown .dropdown-item:hover,
body.she-blue-shell .runtime-menu-dropdown .dropdown-item:focus,
.landing-navbar.she-blue-navbar .runtime-menu-dropdown .dropdown-item:hover,
.landing-navbar.she-blue-navbar .runtime-menu-dropdown .dropdown-item:focus {
    color: #ffffff !important;
    background: #0f766e !important;
}

/* Keep the SHE app cards in the same blue SHE identity as the top navbar. */
.pill-she { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
.btn-she { background: linear-gradient(135deg, #2563eb, #06b6d4); color: #fff; }