html {
	background-color: #EBEBEB;
	background-image: url(../images/background-gradient.jpg);
	background-repeat: repeat-x;
	background-position: top;
}
body, td, p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #333333;
}
p.menu1 {
	padding:3px 5px 3px 8px;
	margin:10px inherit inherit inherit;
}
body, body#login_page {
	margin-top:0;
	padding-top:0;
	background-image:url(../images/background-top.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
span.field-name{
	color:#000080;
	font-weight:bold;
}
a.download-link {
	border: 1px solid #36C;
	font: bold 1em Arial,Helvetica,sans-serif;
	font-weight:bold;
	padding: 2px 6px 2px 6px;
	cursor: default;
	background: #5a86b3;
	color: #DDD;
	text-decoration: none;
	-moz-box-shadow: #777777 1px 0px 5px;
	box-shadow: #777777 1px 0px 5px;
	-moz-border-radius: 5px;
  	-webkit-border-radius: 5px;
  	border-radius: 5px;
  	transition: all 0.5s ease;
}
a.download-link:hover {
	color: #FFF;
	-moz-box-shadow: #777777 1px 0px 0px;
	box-shadow: #777777 1px 0px 0px;
	cursor:pointer;
}
p.not-available {
	font-size:1em;
	font-weight:bold;
	color:red;
}
input[readonly="readonly"]
{
    background-color:#DDD;
}
p.doc-title {
	font-size: 1.3em;
	font-weight: 500;
	color: #222;
	text-shadow: 0px 0 2px rgba(0, 0, 0, 0.4);
}
/* Left Navigation */

.menu1 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
  margin-left: 10px;
  margin-right: 40px;
  padding-left: 10px;
  padding-bottom: 2px;
  padding-top: 2px;
  padding-right: 10px;
  background-color: #000;
}
.menu2 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 130%;
  color: #333333;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 20px;
  padding-left: 10px;
  
}
.menu1_highlight *,.menu1_nohighlight *{
	text-decoration:none;
}
.menu1_highlight,.menu1_nohighlight,.menu1_attrib {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	margin: 0 10px 0 10px; /* 0 40px 0 10px */
	/* padding: 0 10px 0 10px; 2017-09-11 */
	background-color: #CCCCCC;
}
.menu1_nohighlight,.menu1_attrib{
	background-color: #FFFFFF;
	color: #000;
}
.menu1_nohighlight:hover {
	background-color:#F4F4F4;
}
.menu1_attrib {
	font-weight:normal;
}
#client_mark{
}
#client_name{
	float:left;
	padding-top:25px;
}
#client_name h3{
	font-size:16px;
	color:#333;
}
#client_logo{
	float:right;
}
#category{
	text-align:left;
}
.text {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 130%;
  color: #333333;
  padding: 2px;
}

/* Thumbnails 2024-09-03 */
/***********************************/
div#thumbnail img, td#thumbnail img {
    width: 200px;
} 

/* Keep in sync with THUMB_PREVIEW_MAX_PX in includes/configure.php */
img.thumb-preview {
    max-width: 300px;
    max-height: 300px;
    width: auto !important;
    height: auto !important;
    display: inline-block;
}

/* Animated Logo 2024-09-03 */
/***********************************/
#header {
    overflow-clip-margin: content-box;
    overflow: clip;
}
/*
#anim-logo  {
    position: relative;
    top: 0px;
    left: -360px;
    height: inherit;
}
*/

/* Paging */
/***********************************/
a.but-left img,
a.but-right img {
	cursor:pointer;cursor:hand;
}
a.but-left img, a.but-right img,
img.but-left, img.but-right {
	border:none;
	vertical-align:bottom;
	margin: 0 5px;
}
a.but-left img:hover,
a.but-left img:active {
	background:url(/images/go-left-over.png);
}
a.but-right img:hover,
a.but-right img:active {
	background:url(/images/go-right-over.png);
}
div.pagenum {
	padding: 2px 5px;
	display:inline;
}
div.pagenum-wrap{
	vertical-align:top;
	padding:5px 0;
}
/***********************************/

a {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #333333;
  text-decoration: underline;
}
h3 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.error {
  color: #CC3300;
 }
.textsmall {
    font: 10px Arial, Helvetica, sans-serif;

  }
.rptgrp {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  border-bottom: solid 2px;
 /* display: block;*/
}

table.display {
	background-color: #fff;
	border: 1px solid #EEE;
	border-collapse: collapse;
	border-spacing: 3px;
}
tr#start td{
	border-top:none;
}
table.display td {
	padding: 4px;
	border: 1px solid #EEE;
	border-bottom-color: #BBB;
}

table.display th {
	padding: 4px;
	border: 1px solid #333;
	background-color: #333;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
  margin-top: 2px;
}

table.display td h4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
  margin-top: 2px;
  background-color: #333;
}

/* Login Form */
form#login {
	margin: 20px auto;
	padding: 16px 16px 16px 16px;
	font-weight: normal;
	-moz-border-radius: 16px;
	-khtml-border-radius: 16px;
	-webkit-border-radius: 16px;
	border-radius: 5px;
	background: #fff;
	border: 1px solid #e5e5e5;
	-moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;
	-webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
	-khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
	box-shadow: rgba(200,200,200,1) 0 4px 18px;
	width:300px;
}

#login td {
	text-align:left;
}

h1.loginTitle {
	color:#666;
	font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
	font-weight:normal;
	margin: 70px auto 0px auto;
	padding-right:210px;
}

.clear {
	clear:both;
}

#col1 {
	width:235px;
	float:left;
	text-align:left;
	padding: 0 3px;
}
#col2 {
	float:left;
	text-align:left;
	padding: 0 3px;
}

#header {
	padding:0; 
	text-align:center; 
	width: 900px; height: 113px; 
	margin-left:auto;
	margin-right:auto;
}
#contentWrap {
	padding:15px 0;
	min-height:400px;
	
	text-align:center; 
	width: 900px;
	margin-left:auto;
	margin-right:auto;
	background:#FFF;
}
/* Animated Logo 2024-09-03 */
/***********************************/
#header {
    overflow-clip-margin: content-box;
    overflow: clip;
    width: 900px !important;
    height: 115px !important;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 900px 115px;
}

/* Cart & Pending icons */
/* Utility: hidden by default */
.fm-hidden{ display:none !important; }

/* Cart & Pending icons (top-right corner, stays visible on scroll) */
.fm-float-actions{
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 99999;

  display: flex;
  gap: 10px;
}

.fm-float-btn{
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);

  text-decoration: none;
}

.fm-icon{
  font-size: 20px;
  line-height: 1;
}

.fm-badge{
  position: absolute;
  top: -6px;
  right: -6px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  border-radius: 999px;
  background: #d00;
  color: #fff;

  font-size: 12px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
}
/* END: Cart & Pending icons */

/* Modal base - Cart Message */
.fm-modal{
  position: fixed;
  inset: 0;              /* top/right/bottom/left:0 */
  z-index: 100000;       /* above your floating icons */
}

.fm-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* Centre panel */
.fm-modal__panel{
  position: relative;
  max-width: 620px;
  width: calc(100% - 40px);
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);

  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: 18px 18px 14px;
}

.fm-modal__title{
  margin: 0 34px 10px 0;
  font-size: 20px;
}

.fm-modal__text{
  margin: 0 0 10px 0;
  font-size: 14px;
  line-height: 1.45;
}

.fm-modal__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.1);
}

.fm-modal__sig{
  font-size: 13px;
  font-weight: 600;
  opacity: .85;
}

.fm-modal__btn{
  border: 1px solid rgba(0,0,0,.2);
  background: #f6f6f6;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

.fm-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 28px;
}
/* END: Modal base */

#anim-logo  {
    position: relative;
    top: 0px;
    left: -560px;
    height: 71px;
    border-bottom-left-radius: 20px; /* adjust value as needed */
}
#footer { 
	padding:0; 
	text-align:center; 
	width: 900px; height: 88px; 
/*
	background: url('/images/footer-bg.jpg'); background-repeat:no-repeat;
*/
  background: url('/images/footer-bg-red.jpg'); background-repeat:no-repeat;

	margin-left:auto;
	margin-right:auto;
	font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
	font-size:12px;
	color:#FFF;
}
#footer a:hover {
	color: #FFF;
  transform: translateY(-1px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	display:inline-block;
}
#footer-message {
	float:left;
	padding: 20px 20px 20px 100px;
	text-align:left;
	margin-left: 75px;
}
#poweredby {
	float:right;
	padding: 20px 20px 20px 20px;
	text-align:right;
}
#footer-message a:link, #footer-message a:visited, #footer-message a:active, 
#poweredby a:link, #footer a:visited, #footer a:active 
{
	color:#eee;
}
#poweredby a:hover, #footer-message a:hover {
	color:#fff;
}
	
/* Buttons */
input[type="submit"],input[type="button"] {
  -moz-border-radius: 5px;
  -moz-box-shadow: #777777 1px 0px 6px;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-border-radius: 5px;
  -webkit-box-shadow: #777777 0 0 6px;
  -webkit-transition: all 0.5s ease;
  background-color: #eef3dd;
  background-image: -moz-linear-gradient(0deg, #B9C788, #EDFDFF);
  background-image: -ms-linear-gradient(0deg, #B9C788, #EDFDFF);
  background-image: -o-linear-gradient(0deg, #B9C788, #EDFDFF);
  background-image: -webkit-linear-gradient(0deg, #88B8C7, #EDFDFF);
  background-image: linear-gradient(0deg, #88B8C7, #EDFDFF);
  border-radius: 5px;
  border: 2px solid #606F8A;
  box-shadow: #777777 1px 0px 6px;
  color: #000;
  display: inline-block;
  font-size: 0.9em;
  margin: auto;
  padding: 2px 5px;
  text-decoration: none;
  text-shadow: #acaaaa 1px 1px 2px;
  transition: all 0.5s ease;
}
input[type="submit"]:hover, input[type="button"]:hover {
  -moz-box-shadow: #777777 0px 0px 1px;
  box-shadow: #777777 0px 0px 1px;
  color: #000;
  /* font-size: 1em; */
  padding: 2px 5px;
  text-decoration: none;
  text-shadow: #acaaaa 1px 1px 2px;
  cursor:pointer;
}
span.hidden-font{
	font-size:0.7em;
	font-weight:normal;
}

/* ===============================
   RESPONSIVE ORDERS PAGE (orders.php)
   =============================== */

/* Make header/content fluid on the orders page only */
body#orders #header,
body#orders #contentWrap {
	width: 100%;
	max-width: 900px;
	box-sizing: border-box;
}

/* Use flex layout instead of floats (orders page only) */
body#orders #contentWrap {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	padding-left: 12px;
	padding-right: 12px;
}

body#orders #col1,
body#orders #col2 {
	float: none;
	padding: 0;
	box-sizing: border-box;
}

/* Left control panel */
body#orders #col1 {
	flex: 0 0 235px;
	max-width: 235px;
	width: 235px;
}

/* Main orders area */
body#orders #col2 {
	flex: 1 1 auto;
	min-width: 0; /* allow content to shrink instead of overflowing */
}

/* Make images in orders scale down nicely */
body#orders img {
	max-width: 100%;
	height: auto;
}
div#form-wrapper {
    text-align: end;
}
/* wrap forms so they are in the same column - stackable
 used in orders.php and allOrders.php
*/
div#form-wrapper {
    text-align: right;
}

/* Mobile: stack into one column (control panel above orders) */


/* =========================================================
   Strong mobile width override (ensures full-width on phones)
   ========================================================= */
@media (max-width: 768px) {
  /* force the white content panel to use the full viewport width */
  #contentWrap{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* ensure columns don't constrain width */
  #col1, #col2{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }


  /* Mobile column balance: make Details wider, shrink Order image a bit */
  body#orders table.display,
  body#allOrders table.display{
    table-layout: fixed;
  }

  body#orders table.display th:nth-child(1),
  body#orders table.display td:nth-child(1),
  body#allOrders table.display th:nth-child(1),
  body#allOrders table.display td:nth-child(1){
    width: 170px; /* was 240px desktop */
  }

  body#orders table.display th:nth-child(3),
  body#orders table.display td:nth-child(3),
  body#allOrders table.display th:nth-child(3),
  body#allOrders table.display td:nth-child(3){
    width: 40px;
  }

  body#orders table.display th:nth-child(2),
  body#orders table.display td:nth-child(2),
  body#allOrders table.display th:nth-child(2),
  body#allOrders table.display td:nth-child(2){
    width: auto;
    overflow-wrap: anywhere;
  }

}


/* =========================================================
   J&J Vision header + JDC footer (match login.php look)
   Scoped to orders page to avoid impacting other pages.
   ========================================================= */

body#orders{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(#9f9f9f, #f4f4f4);
  min-height: 100vh;
  padding: 24px 14px;
  display: grid;
  place-items: center;
}

body#orders .app{
  width: min(980px, 100%);
  min-height: min(720px, calc(100vh - 48px));
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  overflow: hidden;
  display: grid;
  grid-template-rows: 96px 1fr 96px;
}

/* HEADER */
body#orders .topbar{ background: #e30000; }
body#orders .topbar-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 16px;
}
body#orders .brand-img{
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  max-width: 60%;
}
body#orders .brand-img-right{ margin-left: auto; }

/* MAIN */
body#orders .content{
  padding: 24px 16px;
  display: block; /* do NOT centre content like login */
}

/* FOOTER */
body#orders .footer{ background: #e30000; color: #fff; }
body#orders .footer-inner{
  height: 100%;
  display: grid;
  grid-template-columns: 160px 1fr 220px;
  align-items: center;
  gap: 10px;
}

/* blue block crop viewport */
body#orders .footer-left{
  height: 100%;
  background: #0b2b66;
  position: relative;
  overflow: hidden;
}

body#orders .footer-anim{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  display: block;
  transform: translate(-50%, -50%) scale(1.12);
  transform-origin: center;
}

body#orders .footer-mid{
  padding: 0 18px;
  font-size: 13px;
  line-height: 1.25;
}
body#orders .footer-right{
  padding: 0 18px 0 0;
  text-align: right;
  font-size: 13px;
  line-height: 1.25;
}
body#orders .footer-small{ font-size: 12px; opacity: .95; }
body#orders .sep{ padding: 0 6px; opacity: .9; }

body#orders .footer-link{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .95;
}
body#orders .footer-link:hover{ opacity: 1; }

/* Responsive header/footer like login */


/* Make sure existing contentWrap stretches inside the card */
body#orders #contentWrap{
  width: 100%;
  max-width: none;
  margin: 0;
}


/* =========================================================
   FIXES: show "| Vision" header + prevent right-side cutoff
   ========================================================= */

/* Header: ensure both brand images are visible on small widths */


/* Prevent content from being clipped on the right */
body#orders .content{
  overflow-x: auto;           /* allow horizontal scroll if needed */
  -webkit-overflow-scrolling: touch;
}

/* Tables/rows: keep within card width and wrap long text */
body#orders table.display{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;        /* prevents cells from forcing wider table */
}

body#orders table.display td,
body#orders table.display th{
  overflow: hidden;
}

body#orders td.details{
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

body#orders td.order img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* On small phones, allow the table to scroll instead of clipping */


/* ======= allOrders.php uses same header/footer/layout as orders.php ======= */
/* =========================================================
   J&J Vision header + JDC footer (match login.php look)
   Scoped to orders page to avoid impacting other pages.
   ========================================================= */

body#allOrders{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(#9f9f9f, #f4f4f4);
  min-height: 100vh;
  padding: 24px 14px;
  display: grid;
  place-items: center;
}

body#allOrders .app{
  width: min(980px, 100%);
  min-height: min(720px, calc(100vh - 48px));
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  overflow: hidden;
  display: grid;
  grid-template-rows: 96px 1fr 96px;
}

/* HEADER */
body#allOrders .topbar{ background: #e30000; }
body#allOrders .topbar-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 16px;
}
body#allOrders .brand-img{
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  max-width: 60%;
}
body#allOrders .brand-img-right{ margin-left: auto; }

/* MAIN */
body#allOrders .content{
  padding: 24px 16px;
  display: block; /* do NOT centre content like login */
}

/* FOOTER */
body#allOrders .footer{ background: #e30000; color: #fff; }
body#allOrders .footer-inner{
  height: 100%;
  display: grid;
  grid-template-columns: 160px 1fr 220px;
  align-items: center;
  gap: 10px;
}

/* blue block crop viewport */
body#allOrders .footer-left{
  height: 100%;
  background: #0b2b66;
  position: relative;
  overflow: hidden;
}

body#allOrders .footer-anim{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  display: block;
  transform: translate(-50%, -50%) scale(1.12);
  transform-origin: center;
}

body#allOrders .footer-mid{
  padding: 0 18px;
  font-size: 13px;
  line-height: 1.25;
}
body#allOrders .footer-right{
  padding: 0 18px 0 0;
  text-align: right;
  font-size: 13px;
  line-height: 1.25;
}
body#allOrders .footer-small{ font-size: 12px; opacity: .95; }
body#allOrders .sep{ padding: 0 6px; opacity: .9; }

body#allOrders .footer-link{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .95;
}
body#allOrders .footer-link:hover{ opacity: 1; }

/* Responsive header/footer like login */


/* Make sure existing contentWrap stretches inside the card */
body#allOrders #contentWrap{
  width: 100%;
  max-width: none;
  margin: 0;
}


/* =========================================================
   FIXES: show "| Vision" header + prevent right-side cutoff
   ========================================================= */

/* Header: ensure both brand images are visible on small widths */


/* Prevent content from being clipped on the right */
body#allOrders .content{
  overflow-x: auto;           /* allow horizontal scroll if needed */
  -webkit-overflow-scrolling: touch;
}

/* Tables/rows: keep within card width and wrap long text */
body#allOrders table.display{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;        /* prevents cells from forcing wider table */
}

body#allOrders table.display td,
body#allOrders table.display th{
  overflow: hidden;
}

body#allOrders td.details{
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

body#allOrders td.order img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* On small phones, allow the table to scroll instead of clipping */


/* =========================================================
   Desktop table column widths (orders.php + allOrders.php)
   - Make Qty column smaller
   ========================================================= */

/* apply to both pages (they share table.display) */
body#orders table.display,
body#allOrders table.display{
  table-layout: fixed;
  width: 100% !important;
}

/* Qty column should be narrow */
body#orders table.display td.qty,
body#orders table.display th.qty,
body#allOrders table.display td.qty,
body#allOrders table.display th.qty{
  width: 54px !important;
  text-align: right;
  white-space: nowrap;
}

/* Order image column: reasonable fixed width */
body#orders table.display td.order,
body#orders table.display th.order,
body#allOrders table.display td.order,
body#allOrders table.display th.order{
  width: 240px !important;
}

/* Details takes remaining space */
body#orders table.display td.details,
body#orders table.display th.details,
body#allOrders table.display td.details,
body#allOrders table.display th.details{
  width: auto !important;
}

/* If headings don't have class names, target by position */
body#orders table.display tr:first-child td:last-child,
body#allOrders table.display tr:first-child td:last-child{
  width: 54px !important;
}

/* Ensure text doesn't force overflow on desktop */
body#orders table.display td.details,
body#allOrders table.display td.details{
  overflow-wrap: anywhere;
}

/* =========================================================
   Table column widths to match legacy layout (Order | Details | Qty)
   Applies to orders.php + allOrders.php
   ========================================================= */

/* Make display tables fluid (override width="650px") */
body#orders table.display,
body#allOrders table.display{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed; /* honour column widths */
}

/* Order (image) column */
body#orders table.display th:nth-child(1),
body#orders table.display td:nth-child(1),
body#allOrders table.display th:nth-child(1),
body#allOrders table.display td:nth-child(1){
  width: 240px;
}

/* Qty column: narrow */
body#orders table.display th:nth-child(3),
body#orders table.display td:nth-child(3),
body#allOrders table.display th:nth-child(3),
body#allOrders table.display td:nth-child(3){
  width: 44px;
  text-align: right !important;
  white-space: nowrap;
}

/* Details column fills remaining space */
body#orders table.display th:nth-child(2),
body#orders table.display td:nth-child(2),
body#allOrders table.display th:nth-child(2),
body#allOrders table.display td:nth-child(2){
  width: auto;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* Prevent images from forcing wider column */
body#orders table.display td:nth-child(1) img,
body#allOrders table.display td:nth-child(1) img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* On small screens, keep mobile behaviour (stack/scroll already handled elsewhere) */


/* =========================================================
   allOrders.php: apply same card/header/footer + 2-column layout as orders.php
   ========================================================= */

body#allOrders{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(#9f9f9f, #f4f4f4);
  min-height: 100vh;
  padding: 24px 14px;
  display: grid;
  place-items: center;
}

body#allOrders .app{
  width: min(980px, 100%);
  min-height: min(720px, calc(100vh - 48px));
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  overflow: hidden;
  display: grid;
  grid-template-rows: 96px 1fr 96px;
}

/* HEADER */
body#allOrders .topbar{ background: #e30000; }
body#allOrders .topbar-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 16px;
}
body#allOrders .brand-img{
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  max-width: 60%;
}
body#allOrders .brand-img-right{ margin-left: auto; }

/* MAIN */
body#allOrders .content{ padding: 24px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* FOOTER */
body#allOrders .footer{ background: #e30000; color: #fff; }
body#allOrders .footer-inner{
  height: 100%;
  display: grid;
  grid-template-columns: 160px 1fr 220px;
  align-items: center;
  gap: 10px;
}
body#allOrders .footer-left{
  height: 100%;
  background: #0b2b66;
  position: relative;
  overflow: hidden;
}
body#allOrders .footer-anim{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  display: block;
  transform: translate(-50%, -50%) scale(1.12);
  transform-origin: center;
}
body#allOrders .footer-mid{ padding: 0 18px; font-size: 13px; line-height: 1.25; }
body#allOrders .footer-right{ padding: 0 18px 0 0; text-align: right; font-size: 13px; line-height: 1.25; }
body#allOrders .footer-small{ font-size: 12px; opacity: .95; }
body#allOrders .sep{ padding: 0 6px; opacity: .9; }
body#allOrders .footer-link{ color: #fff; text-decoration: underline; text-underline-offset: 2px; opacity: .95; }
body#allOrders .footer-link:hover{ opacity: 1; }

/* Desktop: force true 2-column layout (sidebar + main) */
body#allOrders #contentWrap{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  box-sizing: border-box;
}
body#allOrders #col1{
  flex: 0 0 260px;
  width: 260px;
}
body#allOrders #col2{
  flex: 1 1 auto;
  min-width: 0;
}

/* Mobile */


/* Header image squeeze fix for allOrders */


/* =========================================================
   Footer animated logo: CROP (OK) but NEVER distort (orders pages)
   - Keeps aspect ratio (width:auto)
   - Centres and crops left/right using overflow hidden
   ========================================================= */

body#orders .footer-left,
body#allOrders .footer-left{
  position: relative;
  overflow: hidden;
  display: block;
}

/* Centre the GIF and let it crop naturally */
body#orders .footer-anim,
body#allOrders .footer-anim{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 120%;      /* slight zoom for pleasing crop */
  width: auto;       /* preserves aspect ratio */
  max-width: none;   /* avoid squeezing */
  max-height: none;
  display: block;
}

/* =========================================================
   MOBILE PORTRAIT (<=520px)
   Consolidated: match login.php behaviour
   - Full-width card feel
   - Header keeps both logos visible (| Vision)
   - Footer hides animated logo block (footer-left)
   ========================================================= */


/* =========================================================
   TABLET / SMALL DESKTOP (<=720px)
   Consolidated: orders.php + allOrders.php
   - Adjust card rows for taller footer
   - Keep both header logos visible
   - Footer becomes 2-column with logo block on the left
   ========================================================= */


/* =========================================================
   MOBILE / TABLET (<=768px)
   Consolidated: orders.php + allOrders.php
   - Stack sidebar above main content (1 column)
   - Ensure content uses full card width
   - Tables: allow horizontal scroll if needed (no clipping)
   ========================================================= */

@media (max-width: 768px){

  /* layout: control panel above orders list */
  body#orders #contentWrap,
  body#allOrders #contentWrap{
    display: flex;
    flex-direction: column;
  }

  body#orders #col1,
  body#orders #col2,
  body#allOrders #col1,
  body#allOrders #col2{
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    box-sizing: border-box;
  }

  /* Let wide tables scroll on small screens instead of clipping */
  body#orders table.display,
  body#allOrders table.display{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep images responsive */
  body#orders table.display td:nth-child(1) img,
  body#allOrders table.display td:nth-child(1) img{
    max-width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 720px){

  body#orders .app,
  body#allOrders .app{
    grid-template-rows: 78px 1fr 140px;
    min-height: calc(100vh - 48px);
  }

  body#orders .topbar-inner,
  body#allOrders .topbar-inner{
    padding: 0 16px;
  }

  body#orders .brand-img,
  body#allOrders .brand-img{
    height: 32px;
    max-width: 70%;
  }

  /* Footer: keep the blue logo block wide enough so the GIF isn't cramped */
  body#orders .footer-inner,
  body#allOrders .footer-inner{
    grid-template-columns: 160px 1fr;
    grid-template-rows: 1fr 1fr;
  }

  body#orders .footer-left,
  body#allOrders .footer-left{
    grid-row: 1 / span 2;
  }

  body#orders .footer-right,
  body#allOrders .footer-right{
    text-align: left;
    padding: 0 18px;
  }
}

@media (max-width: 520px){

  /* tighter outer padding */
  body#orders,
  body#allOrders{
    padding: 12px;
  }

  /* card layout */
  body#orders .app,
  body#allOrders .app{
    border-radius: 12px;
    grid-template-rows: 88px 1fr auto;
  }

  /* header logo sizing + ensure both sides show */
  body#orders .topbar-inner,
  body#allOrders .topbar-inner{
    padding: 0 16px;
    justify-content: space-between;
    gap: 10px;
  }

  body#orders .brand-img,
  body#allOrders .brand-img{
    height: 40px;
    width: auto;
    max-width: 75%;
  }

  body#orders .brand-img-left,
  body#allOrders .brand-img-left{
    max-width: 70%;
  }

  body#orders .brand-img-right,
  body#allOrders .brand-img-right{
    max-width: 25%;
    height: 28px; /* helps the right image fit on iPhone SE */
  }

  /* Match login: hide animated logo on small phones */
  body#edit_doc .footer-left,
  body#editOrder .footer-left,
  body#offline .footer-left,
  body#addOrder .footer-left,
  body#viewRetire .footer-left,
  body#view .footer-left,
  body#orders .footer-left,
  body#allOrders .footer-left{
    display: none !important;
  }

  /* Footer becomes single column with auto height */
  body#orders .footer-inner,
  body#allOrders .footer-inner{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
    align-items: start;
    padding: 10px 0 12px;
    height: auto;
  }

  body#orders .footer-mid,
  body#allOrders .footer-mid{
    padding: 0 14px;
    font-size: 12px;
  }

  body#orders .footer-right,
  body#allOrders .footer-right{
    padding: 0 14px;
    text-align: left;
    font-size: 12px;
  }
}