| side-by-side layout into a stacked,
full-width layout — no markup changes needed, table cells simply
become block-level and flow vertically. */
.getbeli, .getbeli > tbody, .getbeli > tbody > tr, .getbeli > tbody > tr > td{
display:block;
width:100% !important;
}
.getbeli > tbody > tr > td{ border-top:1px solid var(--pm-border); }
.getbeli > tbody > tr > td:first-child{ border-top:0; }
.tblpembelian, .tblpembelian > tbody, .tblpembelian tr,
.tblpembelian th, .tblpembelian td{
display:block;
width:100% !important;
}
.tblpembelian th{ border-bottom:0; padding-bottom:2px; }
.tblpembelian td{ padding-top:2px; }
.tblpembelian tr.odd{ border-bottom:0; padding:var(--pm-space-2) 0; }
.getbeli input[type="text"], .getbeli select,
.tblpembelian input[type="text"]{ width:100% !important; }
.tblpembelian .button,
.tblpembelian input[type="button"],
.tblpembelian input[type="submit"]{ margin-top:var(--pm-space-2); width:100%; }
}
/* ---------- Two-column layout (column2.php): widen the content column,
replacing the old fixed 750px/190px Blueprint grid with a fluid layout.
Scoped to "#page .container" (not just ".container") because #page
itself also carries the "container" class — this avoids turning the
whole page shell into a flex row. ---------- */
#page .container{
display:flex;
flex-wrap:wrap;
gap:var(--pm-space-5);
margin:var(--pm-space-5) 0 0;
width:auto;
}
#page .container > #content{
flex:1 1 auto;
min-width:0;
}
#page .container .span-19{
flex:1 1 0;
min-width:0;
width:auto;
}
#page .container .span-5{
flex:0 0 260px;
width:auto;
}
@media (max-width:900px){
#page .container{ flex-direction:column; }
#page .container .span-5{ flex:1 1 auto; width:100%; }
}
/* =========================================================================
Home dashboard: 9-button grid (mirrors the mbmenu top-level destinations)
========================================================================= */
/* Neutralize legacy #idx/#welcome rules from css/main.css: they were
sized/padded (900x400 box, 150px top padding) to frame the old logo
image that has since been removed, and were pushing the shell down
with a large empty gap plus an unwanted leftover background image. */
#idx{ background:none; height:auto; margin:0; width:auto; }
#welcome{ border:0; padding:0; }
#idx{ padding:0; }
/* Tight 2px spacing, scoped only to this dashboard page (body.pm-no-scroll)
so every other page keeps its normal comfortable padding. */
body.pm-no-scroll #page{ padding-left:0; padding-right:0; }
body.pm-no-scroll #content{ background:none; box-shadow:none; padding:2px; }
body.pm-no-scroll #mainMbMenu{ margin-bottom:-2px; }
.pm-dashboard{
display:none;
gap:var(--pm-space-4);
grid-template-columns:repeat(2,1fr);
justify-items:center;
margin:0 auto;
max-width:480px;
}
@media (max-width:768px){
.pm-dashboard{ display:grid; }
}
.pm-dash-btn{
align-items:center;
aspect-ratio:1/1;
background:var(--pm-surface);
border:1px solid var(--pm-border);
border-radius:var(--pm-radius-sm);
box-shadow:var(--pm-shadow-sm);
color:var(--pm-text);
display:flex;
height:32px;
justify-content:center;
text-decoration:none;
transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease;
width:32px;
}
.pm-dash-btn:hover{
background:var(--pm-primary-light);
border-color:var(--pm-primary);
box-shadow:var(--pm-shadow-md);
color:var(--pm-primary-dark);
transform:translateY(-2px);
}
.pm-dash-btn:active{ transform:translateY(0); }
.pm-dash-icon{
background:var(--pm-primary);
border-radius:var(--pm-radius-sm);
flex:none;
height:28px;
width:28px;
}
.pm-dash-btn:hover .pm-dash-icon{ background:var(--pm-primary-dark); }
.pm-dash-icon{
background-color:var(--pm-primary);
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-size:22px;
mask-size:22px;
}
.pm-dash-btn:hover .pm-dash-icon{ background-color:var(--pm-primary-dark); }
.pm-dash-icon::before{ content:''; }
.pm-dash-label{
clip:rect(0 0 0 0);
height:1px;
overflow:hidden;
position:absolute;
white-space:nowrap;
width:1px;
}
.pm-dash-icon-info{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12'/%3E%3C/svg%3E"); }
.pm-dash-icon-cart{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); }
.pm-dash-icon-stock{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.pm-dash-icon-wallet{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='5' width='22' height='14' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='5' width='22' height='14' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E"); }
.pm-dash-icon-receipt{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h8M9 9h1'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h8M9 9h1'/%3E%3C/svg%3E"); }
.pm-dash-icon-chart{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); }
.pm-dash-icon-users{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='11' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='11' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.pm-dash-icon-database{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5'/%3E%3Cpath d='M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5'/%3E%3Cpath d='M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3'/%3E%3C/svg%3E"); }
.pm-dash-icon-settings{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E"); }
.pm-dash-icon-location{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
/* No page scroll for the dashboard/welcome page: it's a fixed 9-button
grid meant to fit within one screen. Scoped to #idx's page only via
body class set in site/index.php, so other pages keep normal scrolling. */
body.pm-no-scroll{ background:var(--pm-bg) url("../images/bg.png") center top / cover no-repeat fixed; height:100vh; overflow:hidden; }
body.pm-no-scroll #page{ height:100%; overflow:hidden; }
/* =========================================================================
Desktop dashboard shell: page1 (button grid, 20% of page2's width) +
page2 (iframe that loads whichever submenu was clicked). Desktop only;
mobile keeps the standalone .pm-dashboard grid instead.
========================================================================= */
.pm-shell{
display:grid;
gap:var(--pm-space-4);
grid-template-columns:1fr 5fr; /* page1 width = 20% of page2 width */
height:calc(100vh - 130px);
}
.pm-shell-page1{
background:linear-gradient(135deg,#eef2f7 0%,#dbe6f2 30%,#e8eef5 55%,#d3e0ee 80%,#eef2f7 100%);
border:0;
border-radius:0;
box-shadow:none;
overflow-y:auto;
padding:13px var(--pm-space-3) var(--pm-space-3);
}
.pm-shell-grid{
align-content:start;
display:grid;
gap:12px 18px;
grid-template-columns:repeat(2,1fr);
justify-items:center;
}
.pm-shell-btn{
align-items:center;
color:var(--pm-text);
display:flex;
flex-direction:column;
gap:7px;
text-align:center;
text-decoration:none;
width:100%;
}
.pm-shell-circle{
align-items:center;
aspect-ratio:1/1;
border:1px solid var(--pm-border);
border-radius:50%; /* perfect circle, regardless of page height */
box-shadow:0 2px 6px rgba(15,23,42,.08);
display:flex;
justify-content:center;
transition:box-shadow .15s ease,transform .12s ease;
width:38px; /* fixed diameter — never stretches to fill the grid row; ~40% smaller than the previous 64px */
}
.pm-shell-btn:hover .pm-shell-circle{ box-shadow:0 6px 14px rgba(15,23,42,.16); transform:translateY(-2px); }
.pm-shell-btn:active .pm-shell-circle{ transform:translateY(0); }
.pm-shell-grid a:nth-child(1) .pm-shell-circle{ background:linear-gradient(135deg,#93c5fd,#3b82f6); border-color:#3b82f6; color:#fff; }
.pm-shell-grid a:nth-child(2) .pm-shell-circle{ background:linear-gradient(135deg,#86efac,#16a34a); border-color:#16a34a; color:#fff; }
.pm-shell-grid a:nth-child(3) .pm-shell-circle{ background:linear-gradient(135deg,#fde68a,#f59e0b); border-color:#f59e0b; color:#78350f; }
.pm-shell-grid a:nth-child(4) .pm-shell-circle{ background:linear-gradient(135deg,#a5f3fc,#0891b2); border-color:#0891b2; color:#fff; }
.pm-shell-grid a:nth-child(5) .pm-shell-circle{ background:linear-gradient(135deg,#fca5a5,#dc2626); border-color:#dc2626; color:#fff; }
.pm-shell-grid a:nth-child(6) .pm-shell-circle{ background:linear-gradient(135deg,#c4b5fd,#7c3aed); border-color:#7c3aed; color:#fff; }
.pm-shell-grid a:nth-child(7) .pm-shell-circle{ background:linear-gradient(135deg,#fbcfe8,#db2777); border-color:#db2777; color:#fff; }
.pm-shell-grid a:nth-child(8) .pm-shell-circle{ background:linear-gradient(135deg,#bef264,#65a30d); border-color:#65a30d; color:#fff; }
.pm-shell-grid a:nth-child(9) .pm-shell-circle{ background:linear-gradient(135deg,#94a3b8,#475569); border-color:#475569; color:#fff; }
.pm-shell-grid a:nth-child(10) .pm-shell-circle{ background:linear-gradient(135deg,#fdba74,#ea580c); border-color:#ea580c; color:#fff; }
.pm-shell-grid a:nth-child(11) .pm-shell-circle{ background:linear-gradient(135deg,#67e8f9,#0e7490); border-color:#0e7490; color:#fff; }
.pm-shell-grid a:nth-child(12) .pm-shell-circle{ background:linear-gradient(135deg,#fde047,#ca8a04); border-color:#ca8a04; color:#78350f; }
.pm-shell-grid a .pm-dash-icon{ background-color:currentColor !important; }
.pm-shell-btn:hover{
background:var(--pm-primary-light);
border-color:var(--pm-primary);
transform:translateY(-2px);
}
.pm-shell-btn .pm-dash-icon{ height:19px; width:19px; }
.pm-shell-label{ color:var(--pm-text); font-size:11.5px; font-weight:600; line-height:1.2; }
.pm-shell-page2{
background:var(--pm-surface);
border:1px solid var(--pm-border);
border-radius:0;
box-shadow:var(--pm-shadow-sm);
overflow:hidden;
position:relative;
}
.pm-shell-back{
align-items:center;
background:var(--pm-surface);
border:1px solid var(--pm-border);
border-radius:var(--pm-radius-sm);
box-shadow:var(--pm-shadow-md);
color:var(--pm-text);
cursor:pointer;
display:flex;
height:32px;
justify-content:center;
left:10px;
position:absolute;
top:10px;
width:32px;
z-index:10;
}
.pm-shell-back:hover{ background:var(--pm-primary-light); border-color:var(--pm-primary); }
.pm-shell-back .pm-icon{ background-color:currentColor; height:18px; width:18px; }
.pm-shell-frame{
background:var(--pm-surface);
border:0;
height:100%;
width:100%;
}
@media (max-width:768px){
.pm-shell{ display:none; }
}
/* Page2 loads other app pages via iframe; when a page detects it's
running inside that iframe (see js/responsive-nav.js), hide its
scrollbar for a cleaner embedded look — scrolling (wheel/touch/drag)
still works exactly the same, only the visible bar is removed. */
html.pm-in-shell-frame{ scrollbar-width:none; }
html.pm-in-shell-frame::-webkit-scrollbar{ display:none; width:0; height:0; }
html.pm-in-shell-frame body{ -ms-overflow-style:none; scrollbar-width:none; }
html.pm-in-shell-frame body::-webkit-scrollbar{ display:none; width:0; height:0; }
/* Page2 already has its own outer header/nav (in the parent page), so a
page loaded inside its iframe doesn't need a second, duplicate one —
this also frees up the top of the content area for the "back" button
overlay to sit naturally above e.g. "Daftar Penjualan", instead of
floating over a redundant logo/menu bar. */
html.pm-in-shell-frame #header,
html.pm-in-shell-frame #mainMbMenu{ display:none; }
html.pm-in-shell-frame #page{ padding-top:var(--pm-space-4); }
/* =========================================================================
Login page: floating card, centered, modern & elegant, fits one screen
========================================================================= */
body.pm-login-page{
background-image:url("../images/bg.png") !important;
background-position:center top !important;
background-repeat:no-repeat !important;
background-size:cover !important;
background-attachment:fixed !important;
height:100vh;
overflow:hidden;
position:relative;
}
/* Transparent overlay layer, sitting between the background image and the
floating card — keeps the triangle pattern visible while giving the
centered card a touch more contrast to sit on. */
body.pm-login-page::before{
background:transparent;
content:'';
inset:0;
position:fixed;
z-index:0;
}
.pm-login-wrap{
align-items:center;
display:flex;
height:100vh;
justify-content:center;
padding:var(--pm-space-3) 0;
position:relative;
z-index:1;
}
/* The app's own header/nav would be redundant chrome on the login screen
and eats into the space needed to fit everything on one screen — hide
them here, same idea as the Halaman 2 iframe pages. */
body.pm-login-page #header,
body.pm-login-page #mainMbMenu{ display:none; }
body.pm-login-page #page{ height:100vh; overflow:hidden; padding-top:0; }
body.pm-login-page #content{
background:none;
box-shadow:none;
height:100vh;
overflow:hidden;
padding:0;
}
.pm-login-card{
background:linear-gradient(155deg,#dc2626 0%,#f97316 45%,#fb923c 75%,#fde047 100%);
border-radius:var(--pm-radius);
box-shadow:0 14px 34px rgba(220,38,38,.3);
margin-top:-36px;
max-width:320px;
padding:18px var(--pm-space-4);
width:100%;
}
.pm-login-brand{
align-items:center;
display:flex;
flex-direction:column;
gap:4px;
margin-bottom:var(--pm-space-3);
text-align:center;
}
.pm-login-brand img{ height:38px; width:auto; }
.pm-login-brand-text{ align-items:baseline; display:flex; gap:6px; }
.pm-login-brand-pos{ color:#fff; font-size:16px; font-weight:800; letter-spacing:1.5px; }
.pm-login-brand-tagline{ color:#fef3c7; font-size:11px; }
.pm-login-title{
color:#fff;
font-size:19px;
font-weight:700;
margin:0 0 2px;
text-align:center;
}
.pm-login-subtitle{
color:#fef3c7;
font-size:12px;
margin:0 0 var(--pm-space-3);
text-align:center;
}
.pm-login-card .form .row{ margin-bottom:12px; }
.pm-login-card .form label{
color:#fff7ed;
display:block;
font-size:12.5px;
font-weight:600;
margin-bottom:4px;
}
.pm-login-card .form input[type="text"],
.pm-login-card .form input[type="password"]{
background:rgba(255,255,255,.95);
border:1px solid rgba(255,255,255,.3);
font-size:14px;
padding:8px 12px;
width:100%;
}
.pm-login-card .form input:focus{
box-shadow:0 0 0 3px rgba(254,240,138,.6);
}
.pm-login-remember{ align-items:center; display:flex; }
.pm-login-remember label{
align-items:center;
color:#fef3c7;
display:flex;
font-size:12.5px;
font-weight:500;
gap:8px;
margin:0;
}
.pm-login-remember input{ margin:0; }
.pm-login-submit{ margin-top:var(--pm-space-3); }
.pm-login-btn{
background:linear-gradient(135deg,#fde68a 0%,#fbbf24 50%,#f59e0b 100%) !important;
border:0 !important;
color:#78350f !important;
font-size:14px;
font-weight:700 !important;
padding:10px;
width:100%;
}
/* =========================================================================
Login — Portrait / Smartphone: dark red-orange gradient card, compact
and floating, distinct from the desktop blue treatment.
========================================================================= */
@media (max-width:768px){
.pm-login-card{
background:linear-gradient(155deg,#7c2d12 0%,#c2410c 40%,#ea580c 75%,#f97316 100%);
box-shadow:0 16px 36px rgba(124,45,18,.4);
margin-top:-24px;
max-width:300px;
padding:16px 18px;
}
.pm-login-brand img{ height:34px; }
.pm-login-brand-pos{ color:#fed7aa; font-size:15px; }
.pm-login-brand-tagline{ color:#fdba94; }
.pm-login-brand{ gap:3px; margin-bottom:10px; }
.pm-login-title{ font-size:17px; margin-bottom:1px; }
.pm-login-subtitle{ font-size:11px; margin-bottom:10px; }
.pm-login-card .form .row{ margin-bottom:9px; }
.pm-login-card .form label{ font-size:11.5px; margin-bottom:3px; }
.pm-login-card .form input[type="text"],
.pm-login-card .form input[type="password"]{ font-size:13px; padding:7px 10px; }
.pm-login-remember{ margin-bottom:2px; }
.pm-login-submit{ margin-top:10px; }
.pm-login-btn{
background:linear-gradient(135deg,#fde68a 0%,#fbbf24 50%,#f59e0b 100%) !important;
color:#78350f !important;
font-size:13px;
padding:9px;
}
}
.pm-login-btn:hover{ background:linear-gradient(135deg,#fcd34d 0%,#f59e0b 50%,#d97706 100%) !important; }
.pm-login-btn:disabled{ cursor:not-allowed; opacity:.55; }
.pm-login-status-msg{ color:#fef3c7; font-size:11.5px; margin-top:8px; text-align:center; }
.pm-login-card .errorMessage{
background:transparent !important;
border-left:3px solid #cbd5e1 !important;
border-radius:0 !important;
color:#e2e8f0 !important;
display:block !important;
font-size:11.5px !important;
font-style:italic !important;
font-weight:600 !important;
margin-top:5px !important;
padding:2px 9px !important;
}
/* ---------- Device info bar (bottom of Halaman 1) ---------- */
.pm-device-info{
color:#94a3b8;
font-size:12px;
font-style:italic;
padding:var(--pm-space-3) var(--pm-space-2) 0;
text-align:center;
}
.pm-device-info span{ margin:0 6px; }
/* =========================================================================
Halaman 1 — Portrait / Smartphone refinements
Scoped to the Dashboard page (body.pm-no-scroll) at the mobile
breakpoint, so desktop and other pages are untouched.
========================================================================= */
@media (max-width:768px){
/* Locked to one screen — no scrolling, per explicit request. */
body.pm-no-scroll{ height:100vh; min-height:0; overflow:hidden !important; }
body.pm-no-scroll #page{ height:100%; overflow:hidden !important; }
/* Hide the top nav bar with an upward-sliding collapse — the button
grid is the primary navigation on this page, so the bar is
redundant and just eats into the vertical space needed to fit
one screen. */
body.pm-no-scroll #mainMbMenu{
max-height:0;
opacity:0;
overflow:hidden;
transform:translateY(-12px);
transition:max-height .3s ease,opacity .25s ease,transform .3s ease;
}
/* Hide these 7 items from Sales-level users specifically. */
/* Sales-specific hiding disabled — all buttons now show for every role. */
/* body.pm-user-sales .pm-hide-sales{ display:none !important; } */
/* Background: bg.png (same as desktop) for the area outside Halaman 1 & 2 */
body.pm-no-scroll{ background:var(--pm-bg) url("../images/bg.png") center top / cover no-repeat fixed !important; }
body.pm-no-scroll #page,
body.pm-no-scroll .container,
body.pm-no-scroll #idx,
body.pm-no-scroll #welcome{
background:transparent !important;
}
body.pm-no-scroll #content{ background:transparent !important; box-shadow:none !important; }
body.pm-no-scroll #header{
align-items:center;
background:linear-gradient(135deg,#f97316 0%,#fb923c 30%,#facc15 65%,#fde047 100%);
flex-direction:column;
gap:4px;
padding:8px 0 6px;
}
body.pm-no-scroll #brandAdibakti .brand-pos{ color:#7c2d12; text-shadow:0 1px 1px rgba(255,255,255,.3); }
body.pm-no-scroll #brandAdibakti .brand-tagline{ color:#78350f; }
body.pm-no-scroll #brandAdibakti .brand-sep{ color:#92400e; }
body.pm-no-scroll #logout{ color:#78350f; }
body.pm-no-scroll #logout a{ color:#451a03; font-weight:700; }
body.pm-no-scroll .pm-nav-toggle{ display:none; }
body.pm-no-scroll #mainMbMenu{ background:#111827; }
body.pm-no-scroll #logout{ color:#94a3b8; }
body.pm-no-scroll #logout a{ color:#e2e8f0; }
body.pm-no-scroll #brandAdibakti{
flex-direction:column;
gap:6px;
width:100%;
}
body.pm-no-scroll #brandAdibakti img{ height:43px; } /* +3px */
body.pm-no-scroll #brandAdibakti .brand-pos{ font-size:23px; letter-spacing:2px; } /* one size step up */
body.pm-no-scroll #brandAdibakti .brand-tagline{ display:inline; color:#94a3b8; }
body.pm-no-scroll #brandAdibakti .brand-sep{ display:inline; color:#64748b; }
body.pm-no-scroll #logo{
justify-content:center;
width:100%;
}
body.pm-no-scroll .pm-dashboard{
display:grid;
gap:10px;
grid-template-columns:repeat(3,1fr);
justify-content:center;
justify-items:center;
margin:var(--pm-space-4) auto 0;
max-height:calc(100vh - 190px);
max-width:340px;
overflow-y:auto;
}
body.pm-no-scroll .pm-dash-btn{
aspect-ratio:1/1;
background:#1e293b;
border:1px solid #334155;
border-radius:14px;
box-shadow:0 4px 10px rgba(0,0,0,.35);
flex-direction:column;
gap:6px;
height:74px; /* square, +10px over the previous 64px baseline */
padding:8px 4px;
width:74px;
}
body.pm-no-scroll .pm-dash-btn:hover{ background:#273449; border-color:#475569; box-shadow:0 6px 14px rgba(0,0,0,.45); }
body.pm-no-scroll .pm-dash-icon{
background-color:var(--pm-primary);
height:24px;
width:24px;
}
body.pm-no-scroll .pm-dash-btn:hover .pm-dash-icon{ background-color:#60a5fa; }
body.pm-no-scroll .pm-dash-label{
clip:auto;
color:#e2e8f0;
font-size:10.5px;
font-weight:600;
height:auto;
overflow:visible;
position:static;
text-align:center;
white-space:normal;
width:auto;
}
body.pm-no-scroll .pm-device-info{ color:#64748b; }
}
/* =========================================================================
Responsive breakpoints
========================================================================= */
.pm-kasir-create-card{
background:linear-gradient(160deg,#f8fafc 0%,#f1f5f9 50%,#e2e8f0 100%);
border-radius:var(--pm-radius);
box-shadow:0 10px 28px rgba(15,23,42,.14);
margin:0 auto;
max-width:50%;
padding:var(--pm-space-5);
}
.pm-single-col{
border:none;
border-radius:var(--pm-radius);
padding:var(--pm-space-4);
}
.pm-single-col #content{
background:none;
box-shadow:none;
padding:0;
}
.pm-kasir-title-row{
align-items:flex-start;
display:flex;
gap:var(--pm-space-4);
justify-content:space-between;
margin-bottom:var(--pm-space-2);
margin-top:-3px;
}
.pm-kasir-operasi-inline .portlet{ margin:0 0 0 auto; }
.pm-kasir-operasi-inline .portlet-content{ margin-bottom:0; padding:3px 13px 3px 3px; }
.pm-kasir-operasi-inline .portlet-content li{ border:none; }
.pm-kasir-title-row + div.flash-info,
.pm-kasir-title-row + .search-form,
.pm-kasir-title-row ~ .search-form{ margin:0; }
.pm-kasir-title-row ~ .grid-view{ margin-top:4px; }
.pm-kasir-title-row h3, .pm-kasir-title-row h1{ margin:0; }
.pm-kasir-operasi-inline{ flex:none; }
.pm-kasir-operasi-inline .portlet{ padding-left:11.5px; padding-right:11.5px; }
@media (max-width:992px){
#page{ padding-left:var(--pm-space-4); padding-right:var(--pm-space-4); }
#header, #mainMbMenu{ margin-left:0; margin-right:0; padding-left:var(--pm-space-4); padding-right:var(--pm-space-4); }
#content{ padding:var(--pm-space-4); }
}
@media (max-width:768px){
.pm-nav-toggle{ display:flex; }
#mainMbMenu{ top:65px; }
#nav-bar{ border-radius:var(--pm-radius-sm); }
/* Collapse the hover dropdown into a stacked mobile menu, toggled by
the .pm-nav-open class added via JS (see js/responsive-nav.js) */
#nav-bar{ display:none; }
#mainMbMenu.pm-nav-open #nav-bar{ display:block; }
#nav, #nav li{ float:none !important; width:100%; }
#nav li a{ float:none !important; padding:12px var(--pm-space-3) !important; }
#nav ul{
background:rgba(255,255,255,.06);
border-top:0 !important;
display:none;
left:auto !important;
position:static !important;
top:auto !important;
width:100% !important;
}
#nav li.over > ul{ display:block; }
#nav ul li a{ background:transparent !important; color:#e2e8f0 !important; padding-left:var(--pm-space-5) !important; }
#logo img{ max-height:36px; }
#brandAdibakti img{ height:34px; }
#brandAdibakti .brand-pos{ font-size:17px; }
#brandAdibakti .brand-tagline{ display:none; }
#brandAdibakti .brand-sep{ display:none; }
.grid-view table, .detail-view table{ font-size:13px; }
}
@media (max-width:480px){
body{ font-size:14px; }
#content{ border-radius:var(--pm-radius-sm); padding:var(--pm-space-3); }
.btn, button, input[type="submit"], input[type="button"]{ width:100%; }
}
/* ---------- "Pencarian" search-toggle row ---------- */
.pm-search-toggle{
align-items:center;
display:flex;
margin-bottom:var(--pm-space-3);
}
.pm-search-toggle .search-button{ font-weight:600; }
/* ---------- Grid summary row ("Displaying X-Y of Z results.") + actions ---------- */
.grid-view .summary{
align-items:center;
color:var(--pm-text-muted);
display:flex;
flex-wrap:wrap;
font-size:13px;
gap:var(--pm-space-3);
justify-content:space-between;
margin-bottom:var(--pm-space-3);
}
.pm-list-actions{
align-items:center;
display:inline-flex;
gap:var(--pm-space-2);
}
.pm-list-action{
align-items:center;
border-radius:var(--pm-radius-sm);
display:inline-flex;
gap:6px;
height:40px;
justify-content:center;
padding:0 14px;
transition:background .15s ease,border-color .15s ease,transform .05s ease;
}
.pm-list-action:active{ transform:translateY(1px); }
.pm-list-action-add{
background:#f1f5f9;
border:1px solid var(--pm-border);
color:var(--pm-text) !important;
width:40px;
}
.pm-list-action-add:hover{ background:var(--pm-primary-light); border-color:var(--pm-primary); }
.pm-list-action-add .pm-icon{ background-color:var(--pm-text); }
.pm-list-action-add .pm-icon,
.pm-list-action-print .pm-icon{ height:30px; width:30px; } /* 2x the default 15px, box size unchanged */
.pm-list-action-print{
background:#f1f5f9;
border:1px solid var(--pm-border);
width:40px;
}
.pm-list-action-print:hover{ background:var(--pm-primary-light); border-color:var(--pm-primary); }
/* ---------- Sidebar "Operasi" menu icons (plus / printer) ---------- */
.operations li a{
align-items:center;
display:flex;
gap:8px;
}
.pm-icon{
background-color:currentColor;
display:inline-block;
flex:none;
height:15px;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-size:contain;
mask-size:contain;
width:15px;
}
.pm-icon-plus{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E");
}
.pm-icon-new{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zM11 7H13V11H17V13H13V17H11V13H7V11H11Z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3a9 9 0 100 18 9 9 0 000-18zM11 7H13V11H17V13H13V17H11V13H7V11H11Z'/%3E%3C/svg%3E");
}
.pm-icon-print{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-2M6 14h12v7H6z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-2M6 14h12v7H6z'/%3E%3C/svg%3E");
}
.pm-icon-back{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
}
|
