/* JMP Pricing — approved professional interface, build 60. */
:root{
  --pro-bg:#eef3f6;
  --pro-surface:#ffffff;
  --pro-surface-soft:#f6f9fb;
  --pro-navy:#071722;
  --pro-navy-2:#0e2635;
  --pro-teal:#00b887;
  --pro-teal-dark:#078066;
  --pro-gold:#d9a83e;
  --pro-text:#172c38;
  --pro-muted:#6e818d;
  --pro-line:#d6e1e7;
  --pro-shadow:0 12px 34px rgba(16,43,58,.08);
  --sidebar-w:318px;
}
body.app-page{font-feature-settings:"kern" 1,"liga" 1;background:var(--pro-bg)!important}
.topbar{background:linear-gradient(115deg,#06131c,#0d2938)!important;border-bottom:1px solid #1d4254!important;box-shadow:0 8px 26px rgba(2,13,20,.18)!important}
.topbar .brand-mark.small{width:40px!important;height:40px!important;border-radius:12px!important;background:linear-gradient(145deg,var(--pro-teal),#57d9b9)!important;color:#042319!important;font-size:10px!important;font-weight:900!important}
.topbar .brand strong{font-size:14px!important}.topbar .brand small{display:block!important;color:#9fb4c1!important;font-size:9.5px!important}
.topbar .btn{border-radius:9px!important}.topbar .btn:hover{border-color:#2fd2a8!important}
.app-shell{background:var(--pro-bg)!important;display:grid!important;grid-template-columns:minmax(0,1fr) var(--sidebar-w)!important;grid-template-areas:"workspace sidebar"!important;direction:ltr!important;position:relative!important}
.app-shell>.sidebar{grid-area:sidebar;direction:rtl!important}
.app-shell>.workspace{grid-area:workspace;direction:rtl!important;width:auto!important;max-width:none!important;min-width:0!important}
.workspace{padding:18px!important}
.sidebar{background:linear-gradient(180deg,#071722,#091d29)!important;border-color:#173849!important;padding:13px!important;box-shadow:-10px 0 30px rgba(5,21,31,.12)!important}
.sidebar-primary-nav{display:grid;gap:6px;margin:0 0 15px;padding:0 0 14px;border-bottom:1px solid #1d3a48}
.sidebar-primary-nav a{height:42px;display:flex;align-items:center;gap:11px;padding:0 12px;border-radius:10px;color:#b8cbd5;text-decoration:none;font-size:11px;font-weight:700;transition:.18s ease}
.sidebar-primary-nav a:hover,.sidebar-primary-nav a.active{background:linear-gradient(90deg,rgba(0,184,135,.22),rgba(0,184,135,.08));color:#fff;box-shadow:inset -3px 0 0 var(--pro-teal)}
.nav-symbol{width:24px;height:24px;border:1px solid #345365;border-radius:7px;display:grid;place-items:center;color:#6fe1c2;font-size:12px;flex:0 0 auto}
.sidebar-head{background:transparent!important;border-color:#1e3c4c!important}.sidebar-head h2{color:#fff!important;font-size:17px!important}
.sidebar-display-control{padding:10px 0 4px;color:#a9bdc8;font-size:10px}
.sidebar-display-control>span{display:block;margin-bottom:6px}
.sidebar-display-control>div{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid #274555;border-radius:9px;background:#06131b}
.sidebar-display-control button{min-width:0;border:0;border-radius:6px;padding:6px 3px;background:transparent;color:#9fb4c0;font:700 9px Cairo,Tahoma,sans-serif;cursor:pointer}
.sidebar-display-control button:hover,.sidebar-display-control button.active{background:#0c765f;color:#fff}
.sidebar .search-input,.sidebar #projectStatusFilter{background:#06131b!important;border-color:#29495a!important;color:#fff!important}
.project-card{background:#0c222e!important;border-color:#224252!important;color:#eef7fa!important;box-shadow:none!important}
.project-card:hover,.project-card.active{background:#103341!important;border-color:#18bc91!important;box-shadow:inset -3px 0 0 var(--pro-teal)!important}
.project-card small{color:#adc0ca!important}
.sidebar-edge-toggle{background:#0d2a38!important;border-color:#18bc91!important;color:#6fe1c2!important}

/* Three saved sidebar modes. */
body[data-sidebar-mode="compact"]{--sidebar-w:82px}
body[data-sidebar-mode="compact"] .sidebar{width:82px!important;padding-inline:10px!important;overflow:hidden!important;opacity:1!important;pointer-events:auto!important}
body[data-sidebar-mode="compact"] .sidebar>*:not(.sidebar-edge-toggle):not(.sidebar-primary-nav){display:none!important}
body[data-sidebar-mode="compact"] .sidebar-primary-nav{border:0;margin-top:5px;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
body[data-sidebar-mode="compact"] .sidebar-primary-nav a{padding:0;justify-content:center}
body[data-sidebar-mode="compact"] .sidebar-primary-nav .nav-label{display:none}
body[data-sidebar-mode="compact"] .nav-symbol{width:38px;height:38px;font-size:15px}
body[data-sidebar-mode="compact"] .sidebar-edge-toggle{display:none!important}
body[data-sidebar-mode="compact"] .app-shell{grid-template-columns:minmax(0,1fr) 82px!important;grid-template-areas:"workspace sidebar"!important}
body.sidebar-auto{--sidebar-w:82px}
body.sidebar-auto .app-shell{grid-template-columns:minmax(0,1fr) 82px!important;grid-template-areas:"workspace sidebar"!important}
body.sidebar-auto .sidebar{width:82px!important;overflow:hidden!important;z-index:70!important}
body.sidebar-auto .sidebar:not(:hover)>*:not(.sidebar-edge-toggle):not(.sidebar-primary-nav){display:none!important}
body.sidebar-auto .sidebar:not(:hover) .sidebar-primary-nav .nav-label{display:none}
body.sidebar-auto .sidebar:not(:hover) .sidebar-primary-nav a{justify-content:center;padding:0}
body.sidebar-auto .sidebar:hover{width:318px!important;position:fixed!important;right:0!important;left:auto!important;top:var(--topbar-h)!important;box-shadow:-20px 0 45px rgba(0,0,0,.28)!important;overflow:auto!important}
body.sidebar-auto .sidebar-edge-toggle{display:none!important}

#projectWorkspace .workspace-head{background:linear-gradient(135deg,#fff,#f6fbfa)!important;border:1px solid var(--pro-line)!important;border-top:0!important;border-radius:15px!important;box-shadow:var(--pro-shadow)!important}
#projectWorkspace .workspace-head>div:first-child{background:transparent!important;border:0!important;padding:12px 15px!important}
#projectWorkspace #workspaceTitle{font-size:19px!important;font-weight:800!important;color:var(--pro-text)!important}
#projectWorkspace .project-actions-menu>summary{background:linear-gradient(135deg,#008f70,#00b887)!important;border:0!important;box-shadow:0 6px 16px rgba(0,148,112,.22)!important}
#projectWorkspace .kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
#projectWorkspace .kpi-grid .kpi{min-height:100px!important;border:1px solid var(--pro-line)!important;border-radius:14px!important;background:var(--pro-surface)!important;box-shadow:0 7px 20px rgba(16,43,58,.055)!important;transition:.18s ease}
#projectWorkspace .kpi-grid .kpi:hover{transform:translateY(-2px);border-color:#71cbb4!important}
#projectWorkspace .kpi-grid .kpi:before{background:linear-gradient(90deg,var(--pro-teal),#4ad6b2)!important}
#projectWorkspace .kpi-grid .kpi:first-child:before{background:linear-gradient(90deg,var(--pro-gold),#f2cd75)!important}
#projectWorkspace .panel{border-color:var(--pro-line)!important;border-radius:14px!important;box-shadow:0 9px 26px rgba(16,43,58,.055)!important}
#projectWorkspace .project-details>summary{background:#f7fafb!important}
#projectWorkspace .items-panel .panel-head{background:linear-gradient(90deg,#f8fbfc,#fff)!important}
#projectWorkspace .items-help{background:#e8f8f3!important;border-color:#9bd9c7!important;color:#08745d!important}
#itemsTable{table-layout:fixed!important;min-width:0!important;font-size:10px!important}
#itemsTable th,#itemsTable td{padding:6px 4px!important}
#itemsTable thead th{height:48px;background:#0e2635!important;color:#f4fafc!important;border-color:#284755!important;white-space:normal!important;line-height:1.45!important}
#itemsTable tbody tr:nth-child(even){background:#f8fafb}
#itemsTable .item-input{min-width:0!important;white-space:normal!important;line-height:1.55!important}
#itemsTable input{min-width:0!important;width:100%!important;padding:6px 4px!important;font-size:10px!important}
#itemsTable tfoot th{background:#0e7e66!important;color:#fff!important}
#itemsTable .c-order{width:4%}#itemsTable .c-item{width:20%}#itemsTable .c-unit{width:6%}#itemsTable .c-qty{width:6%}#itemsTable .c-rate{width:6%}
#itemsTable .c-purchase-unit{width:8%}#itemsTable .c-purchase-total{width:8%}#itemsTable .c-manufacture{width:8%}#itemsTable .c-cost{width:8%}#itemsTable .c-profit{width:7%}#itemsTable .c-approved{width:9%}#itemsTable .c-grand{width:8%}#itemsTable .c-sale-unit{width:7%}#itemsTable .c-actions{width:7%}

/* Reports: permanent professional navigation and dense analytical canvas. */
.dashboard-layout{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:calc(100vh - var(--topbar-h));background:var(--pro-bg)}
.dashboard-nav{position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));padding:22px 12px;background:linear-gradient(180deg,#071722,#0a202c);display:flex;flex-direction:column;gap:7px}
.dashboard-nav-brand{padding:4px 13px 20px;margin-bottom:7px;border-bottom:1px solid #21404f}.dashboard-nav-brand span{display:block;color:#55d8b5;font-size:24px;font-weight:900}.dashboard-nav-brand small{color:#94abb7}
.dashboard-nav a{display:flex;align-items:center;gap:10px;height:43px;padding:0 13px;border-radius:10px;color:#b9cbd4;text-decoration:none;font-size:11px;font-weight:700}
.dashboard-nav a:hover,.dashboard-nav a.active{background:rgba(0,184,135,.15);color:#fff;box-shadow:inset -3px 0 0 var(--pro-teal)}
.dashboard-nav a span{color:#5dd9b8;font-size:15px}
.dashboard-page.dashboard-nav-compact .dashboard-layout{grid-template-columns:82px minmax(0,1fr)}
.dashboard-page.dashboard-nav-compact .dashboard-nav{padding-inline:9px}
.dashboard-page.dashboard-nav-compact .dashboard-nav-brand small,.dashboard-page.dashboard-nav-compact .dashboard-nav a{font-size:0}
.dashboard-page.dashboard-nav-compact .dashboard-nav a{justify-content:center;padding:0}
.dashboard-page.dashboard-nav-compact .dashboard-nav a span{font-size:16px}
.dashboard-shell{max-width:none!important;padding:20px!important;min-width:0}
.dashboard-heading{padding:20px 22px;border:1px solid var(--pro-line);border-radius:15px;background:linear-gradient(135deg,#fff,#f4faf8);box-shadow:var(--pro-shadow)}
.dashboard-heading h1{font-size:27px!important}
.report-filters{border-radius:14px!important}
.dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
.dashboard-kpis .metric-card{position:relative;min-height:112px;border-radius:14px!important;border:1px solid var(--pro-line)!important;background:#fff!important;box-shadow:0 8px 24px rgba(16,43,58,.055)!important;overflow:hidden}
.dashboard-kpis .metric-card:after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:4px;background:var(--pro-teal)}
.dashboard-kpis .metric-card strong{font-size:22px!important;color:#122b38!important}
.dashboard-kpis .warning-card:after{background:var(--pro-gold)}
.report-card{border-radius:14px!important}.report-card .panel-head{background:#f7fafb}
.chart-pad{min-height:300px}
.dashboard-page .data-table thead th{background:#132c3b!important}
.dashboard-page .data-table tbody tr:hover>*{background:#edf9f5!important;color:#102b36!important}
.dashboard-page .panel-head>.badge{background:#dff7ef!important;color:#086b56!important;border-color:#83d5bf!important}

html[data-theme="dark"]{--pro-bg:#050c12;--pro-surface:#0c1821;--pro-surface-soft:#101f29;--pro-text:#f5fafc;--pro-muted:#a9bac4;--pro-line:#27404f;--pro-shadow:0 14px 38px rgba(0,0,0,.32)}
html[data-theme="dark"] body.app-page,html[data-theme="dark"] .app-shell,html[data-theme="dark"] .dashboard-layout{background:var(--pro-bg)!important}
html[data-theme="dark"] #projectWorkspace .workspace-head,html[data-theme="dark"] #projectWorkspace .kpi,html[data-theme="dark"] #projectWorkspace .panel,html[data-theme="dark"] .dashboard-heading,html[data-theme="dark"] .dashboard-kpis .metric-card{background:#0c1821!important;border-color:var(--pro-line)!important}
html[data-theme="dark"] #projectWorkspace .items-panel .panel-head,html[data-theme="dark"] #projectWorkspace .project-details>summary,html[data-theme="dark"] .report-card .panel-head{background:#10212b!important}
html[data-theme="dark"] #projectWorkspace #workspaceTitle,html[data-theme="dark"] .dashboard-kpis .metric-card strong{color:#fff!important}
html[data-theme="dark"] #itemsTable tbody tr:nth-child(even){background:#0f1d26!important}
html[data-theme="dark"] #itemsTable tbody tr:hover>*{background:#142a35!important}
html[data-theme="dark"] .dashboard-page .data-table tbody tr:hover>*{background:#16323b!important;color:#fff!important}

@media(max-width:1280px){#projectWorkspace .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.dashboard-layout{grid-template-columns:82px minmax(0,1fr)}.dashboard-nav{padding-inline:9px}.dashboard-nav-brand small,.dashboard-nav a:not(.active){font-size:0}.dashboard-nav a{justify-content:center;padding:0}.dashboard-nav a.active{font-size:0}.dashboard-nav a span{font-size:16px}}
@media(max-width:850px){.workspace{padding:10px!important}.sidebar-display-control{display:none}.dashboard-layout{display:block}.dashboard-nav{display:none}#projectWorkspace .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#itemsTable{min-width:1150px!important}.table-wrap{overflow:auto!important}}

/* Build 64 — approved icon rail + independent projects drawer. */
body.app-page .app-shell{
  --app-rail-width:72px;
  grid-template-columns:minmax(0,1fr) var(--app-rail-width)!important;
  grid-template-areas:"workspace rail"!important;
  direction:ltr!important;
}
body.app-page .app-shell>.workspace{grid-area:workspace!important;direction:rtl!important;width:100%!important;min-width:0!important}
.app-rail{
  grid-area:rail;
  direction:rtl;
  position:sticky;
  top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  z-index:90;
  padding:14px 8px;
  background:linear-gradient(180deg,#061620,#0a202c);
  border-inline-start:1px solid #1f4050;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
  box-shadow:-8px 0 24px rgba(0,0,0,.13);
}
.app-rail a,.app-rail button{
  width:56px;
  min-height:58px;
  margin:0 auto;
  padding:7px 3px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#a9bec9;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  font:700 9px Cairo,Tahoma,Arial,sans-serif;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.app-rail a>span,.app-rail button>span{font-size:19px;line-height:1;color:#72dec1}
.app-rail a>small,.app-rail button>small{font-size:8px!important;color:inherit!important;white-space:nowrap}
.app-rail a:hover,.app-rail button:hover,.app-rail button.active,.projects-drawer-open .app-rail #projectsRailButton{
  background:linear-gradient(145deg,rgba(0,184,135,.22),rgba(0,184,135,.08));
  border-color:#197961;
  color:#fff;
  box-shadow:inset -3px 0 0 var(--pro-teal);
}
body.app-page .app-shell>.sidebar{
  display:block!important;
  position:fixed!important;
  top:var(--topbar-h)!important;
  right:var(--app-rail-width)!important;
  left:auto!important;
  width:336px!important;
  height:calc(100vh - var(--topbar-h))!important;
  z-index:85!important;
  padding:16px 14px!important;
  overflow:auto!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateX(calc(100% + var(--app-rail-width)))!important;
  transition:transform .22s ease,opacity .16s ease,visibility .22s!important;
  background:linear-gradient(180deg,#081a25,#0b222e)!important;
  border:1px solid #244757!important;
  border-block:0!important;
  box-shadow:-22px 0 48px rgba(0,0,0,.34)!important;
  direction:rtl!important;
}
body.projects-drawer-open .app-shell>.sidebar{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateX(0)!important;
}
.projects-drawer-backdrop{
  position:fixed;
  inset:var(--topbar-h) var(--app-rail-width) 0 0;
  z-index:80;
  border:0;
  padding:0;
  background:rgba(2,10,15,.2);
  backdrop-filter:blur(1px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:.18s ease;
}
body.projects-drawer-open .projects-drawer-backdrop{opacity:1;visibility:visible;pointer-events:auto}
.sidebar-head-actions{display:flex;align-items:center;gap:7px}
.drawer-close{width:34px;height:34px;border:1px solid #3c5b69;border-radius:9px;background:#102d3a;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.drawer-close:hover{background:#194254;border-color:#6e96a8}
body.app-page .app-shell>.sidebar .sidebar-head{position:static!important;top:auto!important;padding:0 0 12px!important;margin-bottom:4px!important;background:transparent!important}
body.app-page .app-shell>.sidebar .project-list{padding-bottom:24px}
body.app-page .sidebar-edge-toggle,body.app-page .sidebar-display-control,body.app-page .sidebar-primary-nav{display:none!important}
body.app-page .workspace{transition:none!important}

@media(max-width:850px){
  body.app-page .app-shell{--app-rail-width:58px;grid-template-columns:minmax(0,1fr) var(--app-rail-width)!important}
  .app-rail{padding:9px 4px;gap:5px}
  .app-rail a,.app-rail button{width:48px;min-height:50px}
  .app-rail a>small,.app-rail button>small{display:none}
  body.app-page .app-shell>.sidebar{width:min(86vw,336px)!important}
  .projects-drawer-backdrop{background:rgba(2,10,15,.5)}
}

/* Build 65 — readable 12px pricing table typography. */
#itemsTable{font-size:12px!important}
#itemsTable th,#itemsTable td{font-size:12px!important;line-height:1.5!important}
#itemsTable input,#itemsTable select,#itemsTable textarea,
#itemsTable button,#itemsTable .mini-btn,#itemsTable .approved-price-label{
  font-size:12px!important;
  line-height:1.45!important;
}
#itemsTable .item-input{font-size:12px!important;line-height:1.55!important}
#itemsTable thead th{font-size:12px!important;font-weight:800!important}
#itemsTable tfoot th,#itemsTable tfoot td{font-size:12px!important}

/* Build 66 — stronger numeric hierarchy inside pricing rows. */
#itemsTable tbody .num,
#itemsTable tbody td>strong,
#itemsTable tbody input[type="number"],
#itemsTable tbody input[inputmode="decimal"],
#itemsTable tbody .approved-price-label input{
  font-size:14px!important;
  font-weight:400!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.05px!important;
}
#itemsTable tfoot th:not(:first-child),#itemsTable tfoot td{font-size:14px!important;font-weight:500!important;font-variant-numeric:tabular-nums!important}