/* Payno Cloud V4.1 — production-safe responsive polish */

/* Approved Midnight Plum login, preserving the split-screen composition. */
body.p4-auth{background:#f7f6fb;color:#292a4d}
body.p4-auth .p4-auth-layout{background:#f7f6fb}
body.p4-auth .p4-auth-hero{
 background:radial-gradient(circle at 85% 15%,rgba(149,130,230,.23),transparent 44%),
 linear-gradient(150deg,#292a4d 0%,#262340 52%,#171930 100%);
}
body.p4-auth .p4-auth-hero-shape{background:#6d5f9d;opacity:.20}
body.p4-auth .p4-auth-hero-words>span{color:#cfc6ff}
body.p4-auth .p4-auth-hero-words p{color:#c6c2de}
body.p4-auth .p4-auth-hero-bottom{color:#b8b5ce}
body.p4-auth .p4-auth-content h1{color:#292a4d}
body.p4-auth .p4-auth-lead,
body.p4-auth .p4-auth-footnote{color:#6d6887}
body.p4-auth .p4-auth-form label{color:#34304f}
body.p4-auth .p4-auth-form .field{
 background:#fff;color:#292a4d;border-color:#d5d2e6
}
body.p4-auth .p4-auth-form .field:focus{
 border-color:#7669b8;box-shadow:0 0 0 3px rgba(118,105,184,.19)
}
body.p4-auth .p4-password-toggle{color:#524987}
body.p4-auth .p4-password-toggle:hover{background:#eeebf8}
body.p4-auth .p4-remember input{accent-color:#51467e}
body.p4-auth .p4-login-btn{background:#292a4d;box-shadow:0 8px 19px rgba(41,42,77,.18)}
body.p4-auth .p4-login-btn:hover{background:#403a6a}
body.p4-auth .p4-auth-actions button{border-color:#d9d5e9;color:#3f3965}
body.p4-auth .p4-auth-actions button:hover{background:#f1effb;border-color:#8f85cb}
body.p4-auth .p4-auth-formtop span{background:#f0eef8;border-color:#dedaf0;color:#696188}
body.p4-auth .p4-auth-footnote{border-top-color:#e2deed}
body.p4-auth .p4-auth-light-logo{filter:drop-shadow(0 6px 13px rgba(240,226,255,.13))}

/* Desktop sidebar completely closes and content occupies full width. */
@media(min-width:851px){
 .layout.collapsed{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
 .layout.collapsed>.side{display:none!important}
 .layout.collapsed>.main{grid-column:1!important;width:100%!important;min-width:0!important}
 .layout.collapsed .content{max-width:1540px}
}
/* Coarse-pointer phones in landscape should use the mobile drawer, not a desktop rail. */
@media (min-width:851px) and (max-width:1100px) and (pointer:coarse){
 .layout,.layout.collapsed{display:block!important}
 .layout>.side,.layout.collapsed>.side{
  display:flex!important;position:fixed!important;right:-270px!important;top:0!important;
  width:255px!important;min-width:255px!important;max-width:255px!important;height:100dvh!important;
  z-index:25!important;padding:20px 12px 12px!important;overflow-y:auto!important;
  transition:right .22s ease!important
 }
 .layout.menuopen>.side,.layout.collapsed.menuopen>.side{right:0!important}
 .layout.menuopen>.overlay{display:block;position:fixed;inset:0;background:#10182ab0;z-index:20}
 .layout.collapsed .brand,.layout.collapsed .brand img{display:block!important}
 .layout.collapsed .brand{width:auto!important;max-width:none!important}
 .layout.collapsed .brand::before{display:none!important}
 .layout.collapsed .navlabel,.layout.collapsed .navgroup,.layout.collapsed .sidefoot{display:initial!important}
 .layout.collapsed #nav{display:block!important}
 .layout.collapsed .navitem{display:flex!important;width:100%!important;height:auto!important;min-height:43px!important;justify-content:flex-start!important;gap:12px!important;padding:9px 12px!important}
 .layout.collapsed>.main{width:100%}
 .mobileonly{display:inline-flex!important}
 .top{padding:10px 16px!important}
}
/* Native date picker indicators need opposite contrast in light and dark themes. */
body:not(.dark) input[type="date"]::-webkit-calendar-picker-indicator{
 opacity:1!important;filter:brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(1094%) hue-rotate(202deg)!important;
 cursor:pointer
}
body.dark input[type="date"]::-webkit-calendar-picker-indicator{
 opacity:1!important;filter:brightness(0) invert(1)!important;cursor:pointer
}
input[type="date"]{color-scheme:light}
body.dark input[type="date"]{color-scheme:dark}
input[type="date"]::-webkit-calendar-picker-indicator:hover{transform:scale(1.1)}

/* Invoice cards only on portrait phones; desktop and landscape retain sortable tables. */
.p41-invoice-cards{display:none}
.p41-invoice-table-desktop{min-width:0}
.p41-invoice-card{display:grid;gap:12px;padding:15px;border:1px solid var(--line);
 border-radius:15px;background:var(--card2);cursor:pointer;outline-offset:2px}
.p41-invoice-card:hover,.p41-invoice-card:focus-visible{border-color:var(--accent);box-shadow:0 3px 15px rgba(48,72,120,.12)}
.p41-card-head,.p41-card-middle,.p41-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.p41-card-head strong{display:flex;gap:5px;align-items:center;font-size:14px;line-height:1.55}
.p41-card-head .num{font-size:15px}
.p41-card-date{font-size:12px;color:var(--muted);line-height:1.5;direction:ltr;unicode-bidi:isolate;text-align:right}
.p41-card-middle{padding-block:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p41-card-middle>div{display:grid;gap:4px;min-width:0;align-items:start}
.p41-card-middle>div:last-child{text-align:left;justify-items:start}
.p41-card-middle small{font-size:10px;color:var(--muted)}
.p41-card-middle b{font-size:14px;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.p41-card-bottom{font-size:12px}
.p41-card-bottom>span:first-child{overflow-wrap:anywhere}
.p41-card-action{background:var(--soft);color:var(--accent);border-radius:10px;font-size:11px;font-weight:800;padding:7px 10px;white-space:nowrap}
.p41-invoice-cards{padding:13px;gap:10px;grid-template-columns:1fr}

/* Modal has one principal scroll area. No fixed heavy footer on phones. */
@media (max-width:750px){
 body.p4-auth .p4-auth-hero-content{min-height:145px!important;padding:12px 24px 16px}
 body.p4-auth .p4-auth-light-logo{height:58px;width:160px}
 body.p4-auth .p4-auth-hero-words h2{font-size:0!important;line-height:1.35;margin:0}
 body.p4-auth .p4-auth-hero-words h2::after{content:"صورة أوضح. قرارات أسرع.";font-size:20px}
 body.p4-auth .p4-auth-formside{padding-top:14px}
 body.p4-auth .p4-auth-formtop{min-height:24px;justify-content:center}
 body.p4-auth .p4-auth-formtop img{display:none!important}
 body.p4-auth .p4-auth-content{padding:20px 0 0}
 body.p4-auth .p4-auth-content h1{font-size:25px}
 body.p4-auth .p4-auth-lead{margin-bottom:18px}
 body.p4-auth .p4-auth-form>input{margin-bottom:14px}
 body.p4-auth .p4-auth-footnote{margin-top:17px}
 .top{padding:9px 14px!important;gap:8px}
 .top .topleft{gap:8px}
 .topright{gap:7px}
 .top .avatar{width:33px;height:33px}
 .v1-metrics{gap:9px!important}
 .v1-metrics .metric{min-height:99px!important;padding:11px 12px!important}
 .v1-metrics .micon{width:26px;height:26px;font-size:13px}
 .v1-metrics .metric .value{font-size:clamp(15px,3.7vw,21px)!important;white-space:normal!important;overflow-wrap:anywhere;line-height:1.5}
 .v1-metrics .metric .foot,.v1-metrics .metric .mtitle{font-size:10px;line-height:1.5}
 .v1-dashboard-grid .cardbody{padding:10px 12px 14px}
 .v1-chart{height:190px!important;gap:5px!important;scrollbar-width:thin}
 .v1-chart .chart-day{min-width:34px!important;flex:0 0 34px!important}
 .v1-chart .chart-col{min-width:17px!important;width:22px!important}
 .v1-chart .chart-number{font-size:9px}
 .v1-chart .chart-label{font-size:9px}
 .v1-chart .chart-label:not(:empty){opacity:.9}
 .v1-chart-caption{font-size:10px!important;line-height:1.7}
 .v1-filterbar{padding:12px;gap:9px}
 .v1-filterbar .p3-search-wrap{flex:1 1 100%;max-width:none;min-width:0}
 .v1-filterbar select.field{flex:1 1 calc(50% - 9px);width:calc(50% - 9px)!important;max-width:none!important;min-width:0!important;min-height:42px;font-size:12px}
 .v1-modal{padding:8px}
 .v1-modal .modal{width:100%!important;max-height:calc(100dvh - 16px)!important;border-radius:14px}
 .v1-modal .modalhead{padding:11px 14px!important;align-items:center;gap:10px}
 .v1-modal .modalhead h2{font-size:17px!important}
 .v1-modal .modalhead .btn{min-height:34px;padding:7px 9px;white-space:nowrap}
 .v1-modal .modalbody{flex:1 1 auto;overflow-y:auto;padding:12px!important}
 .v1-modal .modalfoot{display:none!important}
 .v1-modal .invoice-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .v1-modal .invoice-meta>div{padding:9px 10px}
 .v1-modal .invoice-meta dd{font-size:13px;line-height:1.65}
 .v1-modal .invoice-meta dt{font-size:11px}
 .v1-modal .invoice-block{margin-top:13px;min-width:0}
 .v1-modal .invoice-block h3{padding:10px 12px}
}
/* Card view shows existing invoice data with no horizontal scroll. */
@media (max-width:700px) and (orientation:portrait){
 .p41-invoice-cards{display:grid}
 .p41-invoice-table-desktop{display:none}
 .p41-mobile-product-table{min-width:0!important;width:100%!important}
 .p41-mobile-product-table thead{display:none}
 .p41-mobile-product-table tbody{display:grid;gap:10px}
 .p41-mobile-product-table tbody tr.p41-invoice-item-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;
  border:1px solid var(--line);border-radius:12px;padding:10px;
  background:var(--card2)
 }
 .p41-mobile-product-table tbody tr.p41-invoice-item-row td{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  border:0!important;padding:4px 0!important;min-width:0;
  overflow-wrap:anywhere;white-space:normal!important
 }
 .p41-mobile-product-table tbody tr.p41-invoice-item-row td:first-child{
  grid-column:1/-1;font-size:13px
 }
 .p41-mobile-product-table tbody tr.p41-invoice-item-row td::before{
  content:attr(data-mobile-label);font-size:10px;color:var(--muted);
  font-weight:600;display:block;margin-bottom:3px
 }
 .p3-invoice-modal .datawrap:has(.p41-mobile-product-table){overflow:visible!important}
}
@media (max-width:700px) and (orientation:landscape){
 .p41-invoice-cards{display:none}
}
/* Landscape phones: full-height invoice details, table date/time on separate lines. */
@media (orientation:landscape) and (max-height:570px) and (max-width:1150px){
 .v1-modal{padding:0!important;align-items:stretch!important}
 .v1-modal .modal{width:100vw!important;max-width:100vw!important;
  height:100dvh!important;max-height:100dvh!important;
  border-radius:0!important;display:flex;flex-direction:column}
 .v1-modal .modalhead{flex:0 0 auto!important;padding:6px 18px!important;min-height:50px!important}
 .v1-modal .modalhead h2{font-size:16px!important;line-height:1.4!important}
 .v1-modal .modalhead .sub{display:none!important}
 .v1-modal .modalhead .btn{padding:6px 10px;min-height:34px;font-size:12px}
 .v1-modal .modalbody{flex:1 1 auto!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden;padding:8px 16px 18px!important}
 .v1-modal .modalfoot{display:none!important}
 .v1-modal .invoice-meta{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:8px}
 .v1-modal .invoice-meta>div{padding:7px 10px!important}
 .v1-modal .invoice-meta dt{font-size:10px}
 .v1-modal .invoice-meta dd{font-size:12px}
 .v1-modal .invoice-block h3{font-size:12px!important;padding:7px 10px!important}
 .v1-modal .invoice-block{margin:7px 0!important}
 .v1-modal .invoice-block .datawrap{overflow-x:auto!important}
 .v1-modal .invoice-block .table{min-width:0!important;width:100%!important;table-layout:auto}
 .v1-modal .invoice-block .table th,.v1-modal .invoice-block .table td{
  font-size:11px!important;padding:5px 8px!important;line-height:1.4;
  vertical-align:top;overflow-wrap:anywhere
 }
 .v1-modal .invoice-block .table td:first-child{max-width:270px;min-width:150px;word-break:normal}
 .v1-modal .invoice-block .cellsub{display:block!important;white-space:normal!important;margin-top:3px;font-size:10px}
 .v1-modal .invoice-total{margin:8px 0!important}
 .p41-invoice-table-desktop td:nth-child(2) .cellsub{display:block!important;clear:both;margin-top:4px}
 .top{min-height:56px!important}
}

/* V4.2 desktop alignment: unlabeled dropdowns should share the input baseline
   with search fields that have a caption above them. Keep mobile wrapping as-is. */
@media (min-width:851px) {
  .v1-filterbar:has(> .p3-search-wrap),
  .v1-filterbar:has(> .p3-select-wrap) {
    align-items:flex-end;
  }
}