body{
font-family:Arial, sans-serif;
margin:0;
padding:0;
background:#f3f6f8;
color:#222;
line-height:1.6;
}

.page{
width:816px;
min-height:1056px;
background:white;
margin:30px auto;
padding:40px 60px;
box-shadow:0 5px 18px rgba(0,0,0,.12);
box-sizing: border-box;
}

/* ===== HEADER ===== */

.header{
text-align:center;
margin-bottom:30px;
}

.logo img{
max-height:70px;
}

.address{
font-size:12px;
margin-top:6px;
}

/* ===== TITLES ===== */

.dosage-header{
text-align:center;
margin-top:20px;
margin-bottom:25px;
}

.dosage-title{
font-weight:700;
font-size:20px;
text-transform:uppercase;
}

.medicine-name{
font-weight:700;
font-size:16px;
margin-bottom:20px;
margin-top:30px;
}

/* ===== BODY ===== */

.body-text{
font-style:italic;
margin-bottom:15px;
font-size:14px;
}

.protocol{
font-weight:bold;
margin:8px 0;
font-size:14px;
}

.closing{
margin-top:20px;
font-style:italic;
font-size:14px;
}

/* ===== SIGNATURE GRID ===== */

.signature-section{
margin-top:60px;
}

.signature-row{
display:flex;
justify-content:space-between;
gap:30px;
margin-bottom:30px;
}

.sig-box{
flex:1;
display:flex;
flex-direction:column;
}

.sig-title{
font-weight:bold;
margin-bottom:8px;
font-size:14px;
}

.signature-pad{
border-bottom:2px solid black;
height:70px;
width:100%;
background:white;
position:relative;
}

canvas{
width:100%;
height:100%;
touch-action:none;
}

.clear-btn{
font-size:11px;
margin-top:4px;
cursor:pointer;
background:none;
border:none;
color:#0F4D7A;
padding:0;
text-decoration:underline;
}

.clear-btn:hover{
color:#083451;
}

.timestamp{
font-size:11px;
color:#666;
margin-top:4px;
}

.signature-date{
margin-top:10px;
font-weight:bold;
font-size:14px;
display:flex;
align-items:center;
gap:10px;
}

.signature-date input{
border:none;
border-bottom:2px solid black;
padding:4px;
font-size:14px;
font-family:Arial, sans-serif;
}

/* ===== PRINT TOOLBAR ===== */

.print-button {
position:fixed;
top:20px;
right:20px;
background:#4CAF50;
color:white;
border:none;
padding:12px 20px;
font-size:14px;
cursor:pointer;
border-radius:5px;
box-shadow:0 2px 5px rgba(0,0,0,0.2);
display:flex;
align-items:center;
gap:8px;
z-index:1000;
}

.print-button:hover {
background:#45a049;
}

/* Hide during print */

@media print{
.print-button{display:none;}
.clear-btn{display:none;}
body{background:white;}
.page{margin:0; box-shadow:none;}
}

/* SOP mobile overrides */
img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  body {
    padding: 0.5rem !important;
  }

  .packet {
    padding: 0.5rem 0 !important;
  }

  .page {
    width: 100% !important;
    min-height: auto !important;
    margin: 0 0 0.8rem !important;
    padding: 1rem !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
  }

  .container {
    max-width: 100% !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 560px) {
  .page {
    padding: 0.78rem !important;
  }

  .header-text h1,
  .title,
  .dosage-title {
    font-size: 1rem !important;
  }
}

@media print {
  .page {
    box-shadow: none !important;
  }
}