<?php
include('config/db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HospiEasy v2.0 | Shivshree Hospital</title>
<link rel="icon" type="image/x-icon" href="images/shivshree_favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
:root{--navy:#082e65;--blue:#1554cf;--cyan:#04b7c1;--ink:#102c55}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:'Segoe UI',Arial,sans-serif;color:var(--ink);background:#e7f3fb}
.page{min-height:100vh;min-height:100dvh;position:relative;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.page::before{content:"";position:absolute;inset:0;z-index:-2;background:url('images/shivshree_reception_concept.jpg') center 52% / cover no-repeat}
.page::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,38,87,.78) 0%,rgba(7,52,105,.39) 44%,rgba(10,62,115,.12) 68%,rgba(4,36,85,.25) 100%)}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px clamp(18px,3.3vw,55px);color:white;background:linear-gradient(180deg,rgba(0,34,84,.42),transparent)}
.brand{display:flex;align-items:center;gap:14px}.brand img{width:64px;height:64px;object-fit:contain;background:rgba(255,255,255,.92);border-radius:12px;padding:4px}.brand h1{font-size:clamp(21px,2.3vw,34px);font-weight:800;line-height:1.05;margin:0}.brand p{font-size:clamp(12px,1vw,15px);margin:5px 0 0;color:#e6f6ff}.top-clock{font-weight:600;white-space:nowrap;font-size:clamp(12px,1vw,15px);background:rgba(4,37,90,.36);border:1px solid #ffffff33;border-radius:13px;padding:12px 17px}
.main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,450px);align-items:center;gap:clamp(20px,3vw,55px);padding:10px clamp(18px,3.3vw,55px) 18px}
.intro{color:white;max-width:660px;align-self:center;text-shadow:0 2px 16px #001a3866}.product{font-size:clamp(46px,5vw,86px);font-weight:850;letter-spacing:-3px;line-height:1}.product span{color:#2ee5f1}.product small{font-size:.35em;letter-spacing:0;color:#e8f7ff}.intro .description{font-size:clamp(16px,1.5vw,23px);font-weight:500;margin:10px 0 17px}.certs{display:flex;flex-wrap:wrap;gap:10px}.cert{padding:9px 15px;border:1px solid #ffffff65;border-radius:12px;background:linear-gradient(120deg,#078f68,#0aa774);box-shadow:0 8px 22px #06204e4d;font-weight:750;font-size:14px}.cert.blue{background:linear-gradient(120deg,#0752de,#1687fa)}.cert .tick{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:white;color:#0b8f71;margin-right:7px}.cert.blue .tick{color:#0752de}.benefits{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:13px 20px}.benefit{display:flex;align-items:center;gap:11px;font-weight:650;font-size:14px}.benefit-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:rgba(0,184,205,.23);border:1px solid #5ce9f6;color:#fff;font-size:20px}
.login-box{width:100%;max-width:450px;justify-self:end;padding:clamp(19px,2vw,29px);border:1px solid rgba(255,255,255,.85);border-radius:25px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(229,243,255,.95));box-shadow:0 20px 55px #001c4d70;text-align:center;color:var(--ink)}
.logo{width:clamp(55px,6vh,75px);height:clamp(55px,6vh,75px);object-fit:contain;display:block;margin:0 auto 6px}.hospital-title{font-size:clamp(22px,2vw,28px);font-weight:800;line-height:1.1}.sub-title{font-size:12px;color:#45628b;margin:5px 0 10px}.divider{width:105px;height:3px;border-radius:5px;background:linear-gradient(90deg,#165ae6,#00c4b4);margin:0 auto 12px}.photo-wrap{width:clamp(76px,9vh,98px);height:clamp(76px,9vh,98px);border-radius:50%;padding:4px;background:linear-gradient(130deg,#2d94f7,#00bdab);margin:0 auto 7px;box-shadow:0 5px 16px #087ac73a}.user-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid white;background:#e5f4ff}.welcome{font-size:18px;font-weight:800;margin:0}.selected-user-name{font-size:12px;color:#627c9b;margin:3px 0 14px;min-height:17px}
.login-box form{display:grid;gap:10px}.field{position:relative}.field .field-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:19px;pointer-events:none;color:#1686cc;z-index:1}.form-select,.form-control{height:48px;border:1px solid #c9dbef;border-radius:12px;background-color:#fff;color:#19385e;font-size:14px;padding-left:45px;box-shadow:0 2px 7px #2055a00b}.form-select{padding-right:30px}.form-select:focus,.form-control:focus{border-color:#159be3;box-shadow:0 0 0 3px #38bdf82b}.password-field{display:flex}.password-field .form-control{width:100%;padding-right:55px}.password-toggle{position:absolute;right:5px;top:4px;height:40px;width:43px;background:transparent;border:0;color:#41618b;border-radius:10px;font-size:19px}.btn-login{height:49px;border:0;border-radius:12px;background:linear-gradient(100deg,#1548ed,#02bdb9);color:white;font-size:17px;font-weight:800;box-shadow:0 8px 17px #087fc044;transition:transform .15s,filter .15s}.btn-login:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn-login:focus-visible{outline:3px solid #68dcf0;outline-offset:3px}.version{border-top:1px solid #b6cde8;margin-top:16px;padding-top:10px;font-size:11px;line-height:1.5;color:#3a5b85}.version strong{color:#173965}.version .edition{font-weight:750;margin-bottom:7px}
.bottom{padding:0 clamp(18px,3.3vw,55px) 14px}.modules{display:flex;gap:8px;flex-wrap:wrap;max-width:840px}.module{min-width:94px;flex:1 1 94px;max-width:128px;text-align:center;padding:9px 5px;background:rgba(249,253,255,.94);border:1px solid #fff;border-radius:12px;box-shadow:0 6px 18px #04284c3b;color:#153a6b;font-size:11px;font-weight:700;line-height:1.2}.module b{display:block;font-size:24px;margin-bottom:3px}.footer{display:flex;justify-content:space-between;gap:15px;align-items:center;background:rgba(1,34,80,.88);color:#eaf9ff;font-size:11px;padding:10px clamp(18px,3.3vw,55px)}
@media(max-height:800px) and (min-width:900px){.top{padding-top:9px;padding-bottom:8px}.brand img{height:48px;width:48px}.main{padding-top:3px;padding-bottom:7px}.login-box{padding:14px 20px}.logo{width:50px;height:50px}.photo-wrap{width:68px;height:68px}.selected-user-name{margin-bottom:7px}.login-box form{gap:7px}.form-select,.form-control{height:42px}.password-toggle{height:34px}.btn-login{height:42px}.version{margin-top:9px;padding-top:7px}.bottom{padding-bottom:8px}.module{padding:6px 4px}.module b{font-size:20px}.benefits{margin-top:15px}}
@media(max-width:900px){.main{grid-template-columns:1fr;gap:18px;justify-items:center;padding-top:10px}.intro{max-width:650px;text-align:center}.benefits{display:none}.certs{justify-content:center}.login-box{justify-self:center}.top-clock{display:none}.modules{justify-content:center;margin:auto}.bottom{padding-top:14px}.footer{flex-wrap:wrap;justify-content:center;text-align:center}.page::after{background:linear-gradient(90deg,#052b61bd,#052b61a1)}}
@media(max-width:520px){.top{padding:12px 14px}.brand img{width:48px;height:48px}.brand h1{font-size:20px}.brand p{font-size:11px}.main{padding:6px 12px}.intro .product{font-size:43px}.intro .description{font-size:13px}.cert{font-size:11px;padding:7px}.login-box{padding:18px 15px;border-radius:19px}.modules{gap:5px}.module{min-width:70px;flex-basis:75px;font-size:10px}.footer{padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.btn-login{transition:none}}

/* Final visual refinement: only styling; original form, IDs, PHP and AJAX preserved. */
html,body{min-height:100%;overflow-x:hidden}
.page{height:100dvh;min-height:610px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
/* Preserve the hospital's natural aspect ratio; never stretch the photograph. */
.page::before{background-image:url('images/shivshree_reception_concept.jpg');background-size:cover;background-position:center 48%;filter:saturate(1.06)}
.page::after{background:linear-gradient(90deg,rgba(2,27,68,.86) 0%,rgba(4,39,84,.61) 28%,rgba(3,48,93,.13) 59%,rgba(3,35,79,.24) 100%)}
.top{padding:clamp(9px,1.5vh,16px) clamp(20px,3.25vw,56px) 4px;background:none;position:relative;z-index:1}
.brand{gap:12px;padding:6px 20px 7px 7px;border-radius:13px;background:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.86) 83%,rgba(255,255,255,.13));color:#0b356c;box-shadow:0 7px 25px #06295535;text-shadow:none}
.brand img{width:clamp(48px,6.5vh,69px);height:clamp(48px,6.5vh,69px);background:transparent;border-radius:0;padding:0}
.brand h1{color:#0a316a;font-size:clamp(23px,2.3vw,35px)}.brand p{color:#087f94;font-weight:700;font-size:clamp(10px,.9vw,13px)}
.top-clock{background:rgba(7,54,111,.64);border:1px solid #a4dfff66;box-shadow:0 4px 18px #00255036}
.main{grid-template-columns:minmax(0,1fr) minmax(355px, min(30vw,480px));gap:clamp(18px,3vw,54px);align-items:center;padding:2px clamp(20px,3.25vw,56px) 5px}
.intro{max-width:640px;align-self:center;transform:translateY(-2%)}
.product{font-size:clamp(54px,5.2vw,88px);letter-spacing:-2.5px;line-height:1.04;text-shadow:0 4px 22px #001b4b55}
.intro .description{font-size:clamp(16px,1.35vw,22px);margin:7px 0 15px}
.cert{padding:9px 14px;font-size:14px;border-radius:11px}.certs{gap:10px}
.benefits{grid-template-columns:repeat(2,minmax(0,245px));gap:13px 16px;margin-top:clamp(16px,3vh,27px)}
.benefit{font-size:clamp(12px,.96vw,15px);gap:10px;text-shadow:0 1px 5px #001a48}
.benefit-icon{width:clamp(35px,4.5vh,46px);height:clamp(35px,4.5vh,46px);border-radius:50%;background:linear-gradient(135deg,#117af4,#00c4bf);border:2px solid #a4faff;box-shadow:0 4px 15px #001b5270;font-size:21px}
.login-box{width:100%;max-width:480px;justify-self:end;padding:clamp(14px,2vh,25px) clamp(17px,1.7vw,28px);border-radius:26px;border:1px solid rgba(255,255,255,.9);background:linear-gradient(140deg,rgba(255,255,255,.97),rgba(228,242,255,.95));box-shadow:0 24px 62px #001d4b7a;backdrop-filter:blur(13px)}
.logo{width:clamp(49px,7vh,76px);height:clamp(49px,7vh,76px)}.hospital-title{font-size:clamp(23px,1.9vw,30px)}
.sub-title{margin:4px 0 8px}.divider{margin-bottom:9px}
.photo-wrap{width:clamp(64px,9vh,96px);height:clamp(64px,9vh,96px)}
.welcome{font-size:19px}.selected-user-name{margin:3px 0 10px}
.login-box form{gap:clamp(7px,1vh,11px)}.form-select,.form-control{height:clamp(41px,5.5vh,49px)}
.btn-login{height:clamp(42px,5.8vh,51px)}.version{margin-top:11px;padding-top:8px}
.bottom{padding:0 clamp(20px,3.25vw,56px) 8px}.modules{max-width:1030px;flex-wrap:nowrap;gap:8px}
.module{min-width:0;max-width:115px;flex:1 1 0;min-height:clamp(54px,7.7vh,74px);padding:7px 3px 5px;background:rgba(249,253,255,.95);border-radius:13px;box-shadow:0 7px 22px #001e4a4d;transition:transform .15s,box-shadow .15s}
.module b{font-size:clamp(21px,3vh,28px);color:#087cd5;line-height:1.1}.module:hover{transform:translateY(-2px);box-shadow:0 10px 26px #001e4a66}
.footer{padding:7px clamp(20px,3.25vw,56px);background:linear-gradient(90deg,rgba(2,28,73,.97),rgba(1,75,128,.95))}
@media(min-width:901px) and (max-height:800px){
 .top{padding-top:7px;padding-bottom:1px}.brand img{width:48px;height:48px}.brand h1{font-size:26px}.brand p{font-size:11px}
 .main{padding-top:0;padding-bottom:1px}.intro{transform:none}.product{font-size:clamp(49px,4.9vw,76px)}
 .benefits{margin-top:12px;gap:8px 12px}.benefit-icon{width:36px;height:36px;font-size:18px}
 .login-box{padding:10px 18px}.logo{width:42px;height:42px}.hospital-title{font-size:23px}.sub-title{margin:3px 0 5px}.divider{margin-bottom:6px}
 .photo-wrap{width:58px;height:58px;margin-bottom:3px}.welcome{font-size:17px}.selected-user-name{margin:1px 0 6px}
 .login-box form{gap:6px}.form-select,.form-control{height:39px}.password-toggle{height:31px}.btn-login{height:40px}
 .version{margin-top:7px;padding-top:5px;font-size:10px}.bottom{padding-bottom:5px}.module{min-height:53px;padding:5px 3px}.module b{font-size:21px}
 .footer{padding-top:5px;padding-bottom:5px}
}
@media(min-width:901px) and (max-height:690px){
 .page{min-height:610px}.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.benefit{font-size:12px}
 .login-box{padding:8px 15px}.logo{width:35px;height:35px}.photo-wrap{width:49px;height:49px}.form-select,.form-control{height:36px}.btn-login{height:37px}
}
@media(max-width:900px){
 .page{height:auto;min-height:100dvh;display:flex}.page::before{background-size:cover;background-position:center center}
 .page::after{background:linear-gradient(90deg,rgba(3,36,83,.82),rgba(3,41,87,.62))}
 .top{padding:12px 16px}.brand{padding:5px 10px}.brand img{width:47px;height:47px}.top-clock{display:none}
 .main{grid-template-columns:1fr;gap:18px;padding:16px}.intro{transform:none;max-width:650px;text-align:center}
 .product{font-size:clamp(42px,7vw,65px)}.certs{justify-content:center}.benefits{display:none}
 .login-box{justify-self:center;max-width:480px}.modules{flex-wrap:wrap;justify-content:center;margin:auto}.module{flex:0 1 100px}
 .bottom{padding:12px 16px}.footer{flex-wrap:wrap;justify-content:center;text-align:center}
}
@media(max-width:520px){.brand h1{font-size:20px}.brand p{font-size:10px}.intro .description{font-size:13px}.cert{font-size:11px;padding:7px 9px}.login-box{padding:17px 15px;border-radius:19px}.module{flex-basis:73px}}
@media(prefers-reduced-motion:reduce){.module{transition:none}}

/* Hospital photograph: show the complete building, roof and entrance without cropping.
   A gradient fills any unused space on wide or tall monitors. */
.page{background:linear-gradient(115deg,#082c58 0%,#14518a 48%,#397fb5 100%)}
.page::before{background-image:url('images/shivshree_reception_concept.jpg');background-size:contain;background-position:center center;background-repeat:no-repeat;filter:saturate(1.05)}
.page::after{background:linear-gradient(90deg,rgba(3,28,68,.82) 0%,rgba(3,38,83,.61) 29%,rgba(3,48,93,.13) 59%,rgba(3,35,79,.27) 100%)}
@media(max-width:900px){.page::before{background-size:contain;background-position:center center}}

/* 2026-10-14: presentation-only premium refinement. Original PHP, form and AJAX unchanged. */
.page{background:#0b315d;min-height:100dvh;height:100dvh;grid-template-rows:auto minmax(0,1fr) auto auto}
/* A softly blurred edge-to-edge photograph fills any letterbox; the crisp foreground
   photograph retains its full natural aspect ratio, with no stretched building. */
.page::before{background:url('images/shivshree_reception_concept.jpg') center center / cover no-repeat;filter:blur(15px) saturate(1.15);transform:scale(1.045);inset:-3%}
.page::after{background:linear-gradient(90deg,rgba(1,24,61,.76),rgba(4,40,88,.32) 39%,rgba(3,30,68,.13) 67%,rgba(2,26,66,.27));z-index:-1}
.photo-background{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('images/shivshree_reception_concept.jpg') center center / contain no-repeat}
.top{padding-top:clamp(9px,1.3vh,17px)}
.main{grid-template-columns:minmax(0,1fr) minmax(355px, min(31vw,485px));gap:clamp(18px,2.6vw,48px)}
.intro{transform:translateY(-3%);max-width:590px}
.product{font-size:clamp(52px,4.8vw,86px)}
.benefits{grid-template-columns:1fr;gap:clamp(8px,1.35vh,15px);margin-top:clamp(16px,2.4vh,25px)}
.benefit{font-size:clamp(12px,.98vw,15px);max-width:340px}
.benefit-icon{width:clamp(36px,4.9vh,47px);height:clamp(36px,4.9vh,47px);font-size:20px;box-shadow:0 5px 15px #001c4c80}
.benefit:nth-child(2) .benefit-icon{background:linear-gradient(135deg,#7042d9,#3067e6)}
.benefit:nth-child(3) .benefit-icon{background:linear-gradient(135deg,#0c70e4,#02b6dc)}
.benefit:nth-child(4) .benefit-icon{background:linear-gradient(135deg,#f64b56,#df2866)}
.benefit:nth-child(5) .benefit-icon{background:linear-gradient(135deg,#00aa87,#0ac4b4)}
.login-box{max-width:485px;padding:clamp(14px,2.1vh,26px) clamp(18px,1.65vw,28px);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(229,243,255,.96));box-shadow:0 22px 65px #00163685}
.photo-wrap{width:clamp(68px,9vh,102px);height:clamp(68px,9vh,102px)}
.login-box form{gap:clamp(7px,1.1vh,12px)}
.form-select,.form-control{height:clamp(42px,5.5vh,51px)}
.btn-login{height:clamp(44px,5.7vh,52px)}
.modules{max-width:1060px;gap:8px}
.module{max-width:116px;min-height:clamp(58px,8.4vh,78px);padding:7px 4px 6px}
.module b{font-size:clamp(23px,3vh,30px)}
.module .module-caption{display:block;font-size:9px;font-weight:500;color:#476487;line-height:1.15;margin-top:2px}
.module:nth-child(1) b{color:#00aab8}.module:nth-child(2) b{color:#225ef1}.module:nth-child(3) b{color:#e34b62}.module:nth-child(4) b{color:#00a8d7}.module:nth-child(5) b{color:#6b4cda}.module:nth-child(6) b{color:#00a7cf}.module:nth-child(7) b{color:#2586e8}.module:nth-child(8) b{color:#11aa67}.module:nth-child(9) b{color:#1777d4}
@media(min-width:901px) and (max-height:800px){
 .intro{transform:none}.benefits{gap:6px;margin-top:12px}.benefit-icon{height:33px;width:33px;font-size:17px}
 .login-box{padding:9px 18px}.logo{height:43px;width:43px}.photo-wrap{height:58px;width:58px}
 .module{min-height:57px;padding:4px 3px}.module b{font-size:21px}.module .module-caption{font-size:8px}
}
@media(max-width:900px){.page{height:auto;min-height:100dvh}.photo-background{background-size:cover;opacity:.65}.intro{transform:none}.benefits{display:none}.main{grid-template-columns:1fr}.module{max-width:115px}}
@media(max-width:520px){.photo-background{background-position:center}.module .module-caption{display:none}}


/* Refined module shortcuts — consistent icon size, alignment and spacing. */
.bottom{width:100%;padding-bottom:9px}
.modules{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));width:min(100%,1100px);max-width:none;gap:8px;align-items:stretch;margin:0}
.module{--module-color:#1875da;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-width:0;max-width:none;min-height:76px;padding:8px 4px 6px;border:1px solid rgba(255,255,255,.95);border-radius:14px;background:linear-gradient(165deg,rgba(255,255,255,.98),rgba(232,246,255,.94));box-shadow:0 7px 18px rgba(0,26,70,.25);text-align:center;color:#103765;line-height:1.12}
.module-art{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;color:var(--module-color);background:color-mix(in srgb,var(--module-color) 11%,white);border:1px solid color-mix(in srgb,var(--module-color) 22%,white)}
.module-art svg{width:25px;height:25px;display:block}
.module-name{display:block;font-size:11px;font-weight:800;letter-spacing:.12px;white-space:nowrap}
.module .module-caption{display:block;margin:0;font-size:9px;font-weight:600;line-height:1.15;color:#486687;white-space:nowrap}
.module-teal{--module-color:#00a6a7}.module-blue{--module-color:#2367e8}.module-rose{--module-color:#e04e72}.module-cyan{--module-color:#009bc5}.module-purple{--module-color:#7c50da}.module-sky{--module-color:#079fd3}.module-indigo{--module-color:#377de0}.module-green{--module-color:#0ba76a}.module-royal{--module-color:#1176c9}
@media(min-width:901px) and (max-height:800px){.module{min-height:64px;padding:5px 3px 4px;gap:1px}.module-art{width:29px;height:29px;border-radius:8px}.module-art svg{width:22px;height:22px}.module-name{font-size:10px}.module .module-caption{font-size:8px}}
@media(max-width:1100px){.modules{grid-template-columns:repeat(5,minmax(0,1fr));max-width:670px}.module{min-height:69px}}
@media(max-width:600px){.modules{grid-template-columns:repeat(3,minmax(0,1fr))}.module .module-caption{display:block;font-size:8px}}

/* Premium shortcut cards — updated without changing login logic. */
.bottom{padding:0 clamp(16px,2.4vw,42px) 9px;position:relative;z-index:2}
.modules{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:9px;width:min(100%,1370px);max-width:none;margin:0;align-items:stretch}
.module{--accent:#00a8b3;--light:#d9fbfa;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;max-width:none;min-height:96px;padding:9px 4px 8px;border:1px solid rgba(255,255,255,.96);border-radius:15px;background:linear-gradient(155deg,#fff 0%,#eaf5ff 100%);box-shadow:0 8px 24px #001b4c55;color:#103566;text-align:center;line-height:1.13;transition:transform .16s,box-shadow .16s}
.module::after{content:'';position:absolute;bottom:6px;left:29%;right:29%;height:3px;border-radius:5px;background:var(--accent)}
.module-art{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;color:var(--accent);background:linear-gradient(145deg,#fff,var(--light));border:1px solid color-mix(in srgb,var(--accent) 25%,white);box-shadow:inset 0 1px 0 white,0 3px 8px #11336620}
.module-art svg{display:block;width:30px;height:30px;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;fill:none}
.module-name{font-size:clamp(11px,.9vw,14px);font-weight:850;letter-spacing:.1px;white-space:normal;color:#0a2f65}
.module .module-caption{display:block;font-size:clamp(10px,.78vw,12px);font-weight:650;line-height:1.1;color:#49688b;white-space:normal;margin:0 0 4px}
.module:hover{transform:translateY(-3px);box-shadow:0 12px 28px #001b4c70}
.module-teal{--accent:#00a8b3;--light:#dcfbf7}.module-blue{--accent:#4654f3;--light:#e8e8ff}.module-rose{--accent:#ed3f73;--light:#ffe5ed}.module-cyan{--accent:#00a3cf;--light:#e0f7ff}.module-purple{--accent:#ff8317;--light:#fff0dd}.module-sky{--accent:#1189ef;--light:#e3f2ff}.module-indigo{--accent:#bd35dd;--light:#f9e6ff}.module-green{--accent:#12ae63;--light:#e0ffe9}.module-royal{--accent:#6932dc;--light:#eee6ff}
@media(min-width:1101px) and (max-height:800px){.module{min-height:78px;padding:5px 3px 7px;gap:2px}.module-art{width:32px;height:32px;border-radius:9px}.module-art svg{width:24px;height:24px}.module-name{font-size:11px}.module .module-caption{font-size:9px}.module::after{bottom:3px;height:2px}}
@media(min-width:901px) and (max-width:1100px){.modules{grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}.module{min-height:79px;padding:5px 2px}.module-art{width:31px;height:31px}.module-art svg{width:23px;height:23px}.module-name{font-size:10px}.module .module-caption{font-size:9px}}
@media(max-width:900px){.modules{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,560px);margin:auto}.module{min-height:88px}.bottom{padding:12px 14px}}
@media(max-width:430px){.modules{gap:6px}.module{min-height:84px}.module-art{width:34px;height:34px}.module-art svg{width:25px;height:25px}.module-name{font-size:11px}.module .module-caption{font-size:9px}}

/* Welcome Back login panel: PowerPoint-style slide down on page open.
   Animation only: no changes to the panel's final position or login logic. */
@keyframes welcomePanelSlideDown {
  from { opacity:0; transform:translate3d(0,-95px,0); }
  to   { opacity:1; transform:translate3d(0,0,0); }
}
.login-box {
  animation:welcomePanelSlideDown 850ms cubic-bezier(.22,1,.36,1) both;
}
@media (prefers-reduced-motion:reduce) {
  .login-box { animation:none; }
}

/* 2026-10-14: premium visual treatment, isolated from existing login logic. */
:root{--premium-navy:#09275c;--premium-cyan:#08c9da}
.page{background:#082958}
.page::before{filter:blur(19px) saturate(1.22);transform:scale(1.055)}
.page::after{background:linear-gradient(90deg,rgba(1,23,58,.78) 0%,rgba(4,35,78,.50) 28%,rgba(4,40,79,.09) 61%,rgba(1,27,67,.30) 100%)}
.photo-background{background-size:contain;filter:saturate(1.17) contrast(1.045) brightness(1.04)}
.top{padding:clamp(11px,1.6vh,20px) clamp(22px,3.1vw,58px) 3px}
.brand{padding:7px 20px 7px 10px;border:1px solid rgba(255,255,255,.78);border-radius:18px;background:linear-gradient(115deg,rgba(255,255,255,.97),rgba(240,250,255,.90) 80%,rgba(255,255,255,.44));box-shadow:0 9px 35px rgba(0,21,59,.25),inset 0 1px 0 white}
.brand img{width:clamp(51px,7vh,76px);height:clamp(51px,7vh,76px)}
.brand h1{font-size:clamp(23px,2.4vw,37px);letter-spacing:-.7px}
.brand p{font-size:clamp(10px,.92vw,14px);color:#058d9b}
.top-clock{padding:13px 20px;background:linear-gradient(110deg,rgba(15,99,188,.82),rgba(3,40,105,.73));border:1px solid rgba(173,227,255,.65);border-radius:16px;box-shadow:0 7px 26px rgba(0,20,60,.28);font-weight:750;letter-spacing:.2px}
.main{grid-template-columns:minmax(0,1fr) minmax(360px,min(31vw,495px));padding-left:clamp(24px,3.1vw,58px);padding-right:clamp(24px,3.1vw,58px)}
.intro{max-width:690px;transform:translateY(-3%)}
.product{font-size:clamp(57px,5.3vw,94px);font-weight:900;letter-spacing:-3.7px;line-height:1.03;text-shadow:0 7px 25px rgba(0,20,57,.52)}
.product span{color:#2ce7f2;text-shadow:0 4px 21px rgba(1,180,234,.22)}
.intro .description{font-size:clamp(17px,1.48vw,24px);font-weight:600;margin:8px 0 17px}
.certs{gap:12px}
.cert{display:flex;align-items:center;padding:10px 15px;border:1px solid rgba(154,255,246,.65);border-radius:13px;background:linear-gradient(115deg,#008e6e,#00c49d);box-shadow:0 8px 20px rgba(0,23,69,.36),inset 0 1px 0 #ffffff60;font-size:clamp(12px,.95vw,15px)}
.cert.blue{border-color:#9acfff;background:linear-gradient(110deg,#0b4ddd,#168eff)}
.cert .tick{width:25px;height:25px;font-size:17px;font-weight:900}
.benefits{gap:clamp(9px,1.5vh,17px);margin-top:clamp(18px,2.7vh,32px)}
.benefit{display:flex;gap:14px;font-size:clamp(12px,1vw,16px);line-height:1.25;max-width:410px;font-weight:730}
.benefit-icon{width:clamp(39px,5.3vh,52px);height:clamp(39px,5.3vh,52px);border:2px solid rgba(255,255,255,.8);background:linear-gradient(135deg,#0f79fb,#01b8e9);box-shadow:0 0 0 3px rgba(65,209,255,.13),0 7px 22px rgba(0,22,75,.4);flex:none}
.benefit-icon svg{width:55%;height:55%;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 2px #00295455)}
.benefit:nth-child(2) .benefit-icon{background:linear-gradient(135deg,#6b3af2,#9c4cf0)}
.benefit:nth-child(3) .benefit-icon{background:linear-gradient(135deg,#1162ec,#00c5e9)}
.benefit:nth-child(4) .benefit-icon{background:linear-gradient(135deg,#f22e52,#ff783d)}
.benefit:nth-child(5) .benefit-icon{background:linear-gradient(135deg,#04a87f,#08dfad)}
.login-box{max-width:495px;padding:clamp(14px,2.1vh,29px) clamp(20px,2vw,33px);border:1px solid rgba(255,255,255,.94);border-radius:31px;background:linear-gradient(143deg,rgba(255,255,255,.96),rgba(235,247,255,.95) 58%,rgba(219,239,255,.96));box-shadow:0 0 0 5px rgba(130,206,255,.11),0 25px 68px rgba(0,18,57,.55),inset 0 2px 0 #fff;backdrop-filter:blur(18px)}
.logo{width:clamp(52px,7.6vh,81px);height:clamp(52px,7.6vh,81px);margin-bottom:5px;filter:drop-shadow(0 4px 8px #187fc333)}
.hospital-title{font-size:clamp(24px,2.08vw,34px);letter-spacing:-.65px;color:#0b3069}
.sub-title{font-size:clamp(11px,.84vw,14px);margin:4px 0 9px}
.divider{width:130px;height:4px;margin-bottom:12px}
.photo-wrap{width:clamp(68px,9.4vh,105px);height:clamp(68px,9.4vh,105px);border-radius:50%;padding:5px;box-shadow:0 6px 19px #0079ce44,0 0 0 5px #d8f2ff}
.welcome{font-size:clamp(19px,1.35vw,23px);margin-top:8px;color:#0b2f68}
.selected-user-name{font-size:13px;margin:3px 0 12px}
.login-box form{gap:clamp(8px,1.1vh,12px)}
.form-select,.form-control{height:clamp(42px,5.6vh,53px);border-radius:13px;border-color:#c1d9f2;background-color:rgba(255,255,255,.96);font-size:14px;box-shadow:0 3px 9px #0d5caa0d}
.form-select:hover,.form-control:hover{border-color:#7ebfea}
.field .field-icon{font-size:20px;color:#117be0}
.btn-login{height:clamp(44px,5.9vh,54px);font-size:19px;letter-spacing:.35px;border-radius:13px;background:linear-gradient(105deg,#1746f4 0%,#1273f0 45%,#02c5b9 100%);box-shadow:0 9px 22px rgba(0,98,212,.32)}
.version{font-size:clamp(10px,.73vw,12px);margin-top:13px;padding-top:10px}
.bottom{padding:0 clamp(20px,3.1vw,58px) 11px}
.modules{width:100%;max-width:1510px;gap:clamp(7px,.65vw,12px)}
.module{min-height:clamp(83px,11vh,116px);padding:10px 4px 11px;gap:3px;border-radius:18px;background:linear-gradient(155deg,#fff 0%,#f2f9ff 55%,#e1f2ff 100%);border:1px solid rgba(255,255,255,.98);box-shadow:0 8px 27px #00183f66, inset 0 2px 0 #fff;overflow:hidden}
.module::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.8}
.module::after{bottom:5px;left:19%;right:19%;height:3px;box-shadow:0 0 9px var(--accent)}
.module-art{width:clamp(37px,5vh,50px);height:clamp(37px,5vh,50px);border-radius:15px;background:radial-gradient(circle at 27% 18%,#fff 0%,var(--light) 54%,color-mix(in srgb,var(--accent) 27%,white) 100%);border:1px solid color-mix(in srgb,var(--accent) 32%,white);box-shadow:0 4px 11px color-mix(in srgb,var(--accent) 20%,transparent),inset 0 1px 2px white}
.module-art svg{width:clamp(26px,3.7vh,36px);height:clamp(26px,3.7vh,36px);stroke-width:2.35;filter:drop-shadow(0 2px 1px color-mix(in srgb,var(--accent) 30%,transparent))}
.module-name{font-size:clamp(12px,1.02vw,16px);font-weight:900;letter-spacing:.2px}
.module .module-caption{font-size:clamp(10px,.79vw,12px);font-weight:650;margin-bottom:4px}
.module:hover{transform:translateY(-5px);box-shadow:0 15px 32px #00183f7d}
.module-teal{--accent:#00afc6;--light:#d7faff}.module-blue{--accent:#4852f3;--light:#e6e6ff}.module-rose{--accent:#f04b3f;--light:#ffe9e2}.module-cyan{--accent:#00b57e;--light:#dcfff0}.module-purple{--accent:#a434e6;--light:#f6e4ff}.module-sky{--accent:#078cef;--light:#def2ff}.module-indigo{--accent:#f02d72;--light:#ffe4f0}.module-green{--accent:#0ac967;--light:#e0ffe7}.module-royal{--accent:#8b3bf1;--light:#f0e6ff}
.footer{padding:9px clamp(20px,3.1vw,58px);font-size:clamp(10px,.77vw,12px);background:linear-gradient(90deg,rgba(1,29,79,.98),rgba(2,71,132,.96),rgba(1,31,79,.98));border-top:1px solid rgba(63,185,241,.55)}
@media(min-width:1101px) and (max-height:800px){
 .top{padding-top:8px}.brand img{width:49px;height:49px}.brand h1{font-size:26px}.brand p{font-size:10px}
 .product{font-size:clamp(50px,4.7vw,78px)}.intro .description{font-size:18px}.benefits{margin-top:13px;gap:7px}.benefit-icon{width:35px;height:35px}.benefit{font-size:13px}
 .login-box{padding:10px 18px}.logo{width:43px;height:43px}.hospital-title{font-size:23px}.sub-title{font-size:11px;margin:2px 0 5px}.divider{margin-bottom:7px}.photo-wrap{width:58px;height:58px;padding:3px}.welcome{font-size:18px;margin-top:4px}.selected-user-name{margin-bottom:7px}.login-box form{gap:6px}.form-select,.form-control{height:39px}.btn-login{height:41px;font-size:17px}.version{margin-top:8px;padding-top:6px;font-size:10px}
 .module{min-height:73px;padding:5px 3px 8px;gap:1px}.module-art{width:29px;height:29px;border-radius:9px}.module-art svg{width:22px;height:22px}.module-name{font-size:11px}.module .module-caption{font-size:9px;margin-bottom:2px}.bottom{padding-bottom:6px}.footer{padding-top:6px;padding-bottom:6px}
}
@media(min-width:901px) and (max-width:1100px){.modules{grid-template-columns:repeat(9,minmax(0,1fr))}.module{min-height:75px;padding:6px 2px}.module-art{width:29px;height:29px}.module-art svg{width:22px;height:22px}.module-name{font-size:10px}.module .module-caption{font-size:8px}}
@media(max-width:900px){.page{height:auto;min-height:100dvh}.top{padding:12px 16px}.main{grid-template-columns:1fr}.intro{transform:none}.login-box{justify-self:center}.modules{grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px;margin:auto}.module{min-height:93px}.bottom{padding:12px 14px}.brand{padding:5px 9px}.brand img{width:45px;height:45px}}
@media(max-width:520px){.product{font-size:44px;letter-spacing:-2px}.module{min-height:84px}.module-art{width:34px;height:34px}.module-art svg{width:25px;height:25px}.module-name{font-size:11px}.module .module-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.module{transition:none}}


/* Reference-match adjustments: premium image, centred date, complete footer. */
.page::before{background-image:url('images/shivshree_reception_concept.jpg')!important;background-position:center center!important;background-size:cover!important;filter:blur(11px) saturate(1.15)!important}
.photo-background{background-image:url('images/shivshree_reception_concept.jpg')!important;background-size:contain!important;background-position:center center!important;opacity:1}
.page::after{background:linear-gradient(90deg,rgba(0,29,76,.75),rgba(1,38,89,.28) 43%,rgba(2,33,73,.12) 69%,rgba(2,32,76,.2))!important}
.login-box{background:linear-gradient(143deg,rgba(255,255,255,.96),rgba(225,241,255,.91) 65%,rgba(218,239,255,.95));border:2px solid #ffffffed;box-shadow:0 0 0 5px #80cfff29,0 20px 55px #001a4a80,0 0 28px #56bfff42,inset 0 2px 0 white}
.login-clock{display:flex!important;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:100%;margin:2px auto 13px;padding:9px 13px;border-radius:11px;font-size:clamp(11px,.9vw,14px);background:linear-gradient(110deg,#2486e8,#0c4b9c);color:white;box-shadow:0 5px 16px #0864bb50;white-space:nowrap}
.login-clock::before{content:'▦';font-size:18px;line-height:1}
.premium-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px clamp(18px,3.1vw,58px);font-size:clamp(9px,.72vw,12px);line-height:1.3}
.footer-left,.footer-right{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.footer-right{flex-wrap:nowrap;gap:clamp(10px,1.3vw,23px);white-space:nowrap}.footer-right>span{display:inline-flex;align-items:center;gap:5px;font-weight:650}.footer-right svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}.footer-sep{opacity:.65}.footer-symbol{font-size:18px}
@media(max-width:1450px){.premium-footer{font-size:10px}.footer-left{gap:6px}.footer-right{gap:10px}.footer-extra{display:none!important}}
@media(max-width:1050px){.premium-footer{flex-wrap:wrap;justify-content:center;text-align:center}.footer-left,.footer-right{justify-content:center}}
@media(min-width:901px) and (max-height:800px){.login-clock{margin:1px auto 7px;padding:5px 10px;font-size:11px}.login-clock::before{font-size:15px}.premium-footer{padding-top:5px;padding-bottom:5px}}
@media(max-width:900px){.login-clock{display:flex!important;margin:4px auto 10px}.photo-background{background-size:cover!important;opacity:.85}}


/* Final requested refinements, preserving all login PHP/JS and field IDs */
.product .version-red{color:#ff3848!important;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.footer-hospital-logo{width:25px;height:25px;object-fit:contain;background:#fff;border-radius:5px;padding:2px;vertical-align:middle;margin-right:5px}
.premium-footer{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.footer-left{justify-content:center!important;gap:clamp(8px,1.1vw,22px)!important;text-align:center}
.footer-right{justify-content:flex-end}
/* Clock floats directly above login panel, aligned with its centre. */
.login-box{position:relative;overflow:visible}
.login-clock{position:absolute!important;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);margin:0!important;padding:10px 16px!important;border:1px solid #a2dbff!important;border-radius:13px!important;box-shadow:0 8px 22px #00265777!important;z-index:3}
@media(min-width:901px) and (max-height:800px){.login-clock{bottom:calc(100% + 8px);padding:7px 12px!important}}
@media(max-width:1100px){.premium-footer{grid-template-columns:1fr}.footer-right{justify-content:center;flex-wrap:wrap}.footer-extra{display:inline-flex!important}}
@media(max-width:900px){.login-clock{position:static!important;transform:none;margin:0 auto 9px!important}.premium-footer{display:flex!important;flex-direction:column}.footer-left{flex-wrap:wrap}}
@media(max-height:680px) and (min-width:901px){.page{min-height:620px;height:auto}}
@media(prefers-reduced-motion:no-preference){.login-box{animation:sainathWelcomeDown .85s cubic-bezier(.2,.85,.22,1) both}@keyframes sainathWelcomeDown{from{opacity:0;transform:translateY(-90px)}to{opacity:1;transform:translateY(0)}}}


/* Reference image 14-Oct: final look; login handlers and selectors unchanged. */
@media (min-width:901px){
 .page{grid-template-rows:auto minmax(0,1fr) auto auto;min-height:690px}
 .main{grid-template-columns:minmax(0,1fr) minmax(370px, min(30vw,485px))}
 .login-box{align-self:center}
 .login-clock{position:static!important;left:auto!important;bottom:auto!important;transform:none!important;margin:8px auto 14px!important;padding:9px 14px!important}
 .modules{max-width:none;width:100%}
}
.page::before{background-image:url('images/shivshree_reception_concept.jpg')!important}
.photo-background{background-image:url('images/shivshree_reception_concept.jpg')!important;background-size:cover!important;background-position:center 48%!important}
.page::after{background:linear-gradient(90deg,rgba(0,27,68,.55),rgba(0,30,71,.13) 48%,rgba(0,28,72,.06) 70%,rgba(0,28,72,.13))!important}
.login-box{background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(223,241,255,.94));}
.benefit-copy{display:flex;flex-direction:column;gap:2px}
.benefit-copy small{display:block;font-size:clamp(10px,.82vw,13px);font-weight:450;color:#eaf7ff;line-height:1.2}
.certs .cert{gap:7px}.cert-copy{display:flex;flex-direction:column;gap:2px}.cert-copy small{font-size:10px;font-weight:450;line-height:1.2}
.version .edition{font-size:12px}
.footer-part{display:inline-flex;align-items:center}
@media (min-width:901px) and (max-height:800px){
 .page{min-height:610px}.login-clock{margin:5px auto 8px!important;padding:6px 11px!important}
 .benefit-copy small{font-size:10px}.cert-copy small{font-size:9px}
}
@media (max-width:900px){.photo-background{background-size:cover!important}.login-clock{position:static!important;transform:none!important;margin:7px auto 11px!important}}


/* 14 Oct: Correct hospital photo cropping without altering login or module functionality.
   Foreground photo always fits completely; blurred backdrop fills spare side space. */
.photo-background{
  background-image:url('images/shivshree_reception_concept.jpg')!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.page::before{
  background-image:url('images/shivshree_reception_concept.jpg')!important;
  background-size:cover!important;
  background-position:center center!important;
}
/* Prevent a desktop layout from being squeezed into a viewport shorter than its content. */
@media(min-width:901px){
  .page{height:auto;min-height:100dvh;grid-template-rows:auto minmax(0,1fr) auto auto}
}
@media(max-width:900px){
  .photo-background{background-size:contain!important;background-position:center center!important}
}


/* Requested adjustment: shift only the hospital photograph slightly left on desktop.
   The login panel, content, cards and footer retain their existing positions. */
@media (min-width:901px) {
  .photo-background { background-position:calc(50% - 35px) center!important; }
}

/* Requested adjustment: move only the login panel slightly to the right. */
@media (min-width:901px) {
  .login-box { position:relative; left:16px; }
}
/* 14 Oct: Lift only the Welcome Back panel to separate it from bottom module cards.
   Position offset preserves slide-down animation, all form fields and other layout. */
@media (min-width:901px) and (min-height:801px) {
  .login-box { top:-72px; }
}
@media (min-width:901px) and (max-height:800px) {
  .login-box { top:-38px; }
}
</style>
<link rel="stylesheet" href="assets/css/shivshree_responsive.css?v=1" media="screen">
<link rel="stylesheet" href="assets/css/shivshree_login_premium.css?v=20261022" media="screen">
<link rel="stylesheet" href="assets/css/atlandis_login_branding.css?v=20261022" media="screen">
<link rel="stylesheet" href="assets/css/shivshree_login_screen_fit.css?v=20261022-recovery" media="screen">

<!-- Targeted login screen repair: override older conflicting visual rules only. -->
<style id="shivshree-login-repair-20261022">
/* Preserve the complete reception image at its natural proportions. */
.page { background:#092e57 !important; }
.page::before {
  inset:-3% !important; transform:scale(1.04) !important;
  filter:blur(15px) saturate(1.08) !important;
  background:url('images/shivshree_reception_concept.jpg') center center / cover no-repeat !important;
}
.photo-background {
  display:block !important;
  background-image:url('images/shivshree_reception_concept.jpg') !important;
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  filter:none !important;
  opacity:1 !important;
}
.page::after {
  background:linear-gradient(90deg,rgba(2,25,60,.64) 0%,rgba(3,36,75,.22) 32%,
    rgba(3,35,75,0) 65%,rgba(3,27,65,.10) 100%) !important;
}
/* Keep the HospiEasy wordmark clean; no red block behind v2.0. */
.intro .product { display:flex !important; align-items:baseline !important; flex-wrap:nowrap !important; white-space:nowrap !important; }
.intro .product .version-red {
  background:none !important; box-shadow:none !important; border:0 !important;
  padding:0 !important; margin-left:8px !important; flex:none !important;
  color:#ff5269 !important; font-size:.34em !important; letter-spacing:0 !important;
}
/* Preserve the existing ATS branding, but give it readable typography and tight spacing. */
.login-box .ats-company-name { font-size:clamp(15px,1.07vw,18px) !important; line-height:1.12 !important; }
.login-box .ats-developed { font-size:clamp(12px,.94vw,15px) !important; }
.login-box .ats-contact { gap:0 !important; margin-top:1px !important; }
.login-box .ats-contact a { font-size:clamp(11px,.83vw,13px) !important; line-height:1.13 !important; }
.login-box .ats-company-logo { margin:0 auto 2px !important; }
/* Desktop: avoid pushing the login card into the shortcuts; preserve all nine shortcuts. */
@media (min-width:901px) {
  html,body { height:100% !important; overflow:hidden !important; }
  .page {
    display:grid !important; grid-template-rows:auto minmax(0,1fr) auto auto !important;
    height:100dvh !important; min-height:0 !important; max-height:100dvh !important;
    overflow:hidden !important;
  }
  .top { padding-top:5px !important; padding-bottom:2px !important; }
  .main { min-height:0 !important; padding-top:0 !important; padding-bottom:4px !important; }
  .login-box { position:relative !important; left:0 !important; top:0 !important; max-height:none !important; padding:8px 17px !important; }
  .login-box .logo { width:39px !important; height:39px !important; }
  .login-box .hospital-title { font-size:23px !important; }
  .login-box .sub-title { margin:2px 0 4px !important; }
  .login-box .divider { margin-bottom:4px !important; }
  .login-box .login-clock { margin:3px auto 5px !important; padding:5px 10px !important; }
  .login-box .photo-wrap { width:48px !important; height:48px !important; margin-bottom:2px !important; }
  .login-box .welcome { margin:2px 0 !important; font-size:17px !important; }
  .login-box .selected-user-name { margin:1px 0 5px !important; }
  .login-box form { gap:5px !important; }
  .login-box .form-select,.login-box .form-control { height:38px !important; }
  .login-box .btn-login { height:40px !important; }
  .login-box .version.ats-branding { margin-top:5px !important; padding-top:5px !important; }
  .login-box .ats-company-logo { width:42px !important; height:42px !important; }
  .bottom { padding-top:0 !important; padding-bottom:5px !important; }
  .modules { grid-template-columns:repeat(9,minmax(0,1fr)) !important; }
  .bottom .module { min-height:65px !important; padding:4px 3px 5px !important; gap:1px !important; }
  .bottom .module-art { width:29px !important; height:29px !important; }
  .bottom .module-art svg { width:22px !important; height:22px !important; }
  .footer { padding-top:5px !important; padding-bottom:5px !important; }
}
@media (min-width:901px) and (max-height:740px) {
  .brand img { width:42px !important; height:42px !important; }
  .intro .product { font-size:clamp(43px,4.4vw,70px) !important; }
  .benefits { gap:5px !important; margin-top:8px !important; }
  .benefit-icon { width:30px !important; height:30px !important; }
  .login-box { padding:5px 15px !important; }
  .login-box .logo { width:31px !important; height:31px !important; }
  .login-box .photo-wrap { width:37px !important; height:37px !important; }
  .login-box .form-select,.login-box .form-control { height:34px !important; }
  .login-box .btn-login { height:36px !important; }
  .login-box .ats-company-logo { width:34px !important; height:34px !important; }
  .bottom .module { min-height:53px !important; }
}
/* On narrow screens prioritize usable form and readable content over forced clipping. */
@media (max-width:900px) {
  html,body { overflow-x:hidden !important; overflow-y:auto !important; }
  .page { height:auto !important; min-height:100dvh !important; max-height:none !important; overflow:visible !important; }
  .login-box { left:auto !important; top:auto !important; }
  .intro .product { justify-content:center !important; }
}
</style>
<style id="ats-company-profile-only-20261022">
/* Only the company profile contact line is adjusted. */
.login-box .ats-branding .ats-company-name{display:block;color:#0a3268;font-weight:850;letter-spacing:.1px;font-size:clamp(15px,1.07vw,18px)!important;line-height:1.15}
.login-box .ats-branding .ats-contact{display:block!important;width:100%!important;margin-top:5px!important;text-align:center!important;white-space:normal!important;line-height:1.5!important;letter-spacing:0!important}
.login-box .ats-branding .ats-contact a{display:inline!important;flex:none!important;font-size:clamp(12px,.9vw,14px)!important;line-height:1.5!important;text-decoration:none!important;color:#245b91!important;white-space:normal!important;overflow-wrap:anywhere!important;letter-spacing:0!important}
.login-box .ats-branding .ats-contact a:hover{text-decoration:underline!important}
.login-box .ats-branding .ats-contact a+a::before{content:" | "!important;color:#8ca4bf!important;margin:0 2px!important}
@media(max-width:520px){.login-box .ats-branding .ats-contact{white-space:normal!important}.login-box .ats-branding .ats-contact a{font-size:12px!important;white-space:normal!important}}
/* Company logo breathing room after removing the edition line. */
.login-box .version.ats-branding .ats-company-logo{display:block!important;margin:8px auto 7px!important;object-fit:contain!important}
</style>
<style id="ats-minimal-logo-effect-20261022">
/* ATS branding only: restrained logo glow and subtle 3% breathing zoom. */
.login-box .version.ats-branding .ats-company-logo {
  width:clamp(56px,5.5vw,80px) !important;
  height:clamp(56px,5.5vw,80px) !important;
  max-width:100% !important;
  object-fit:contain !important;
  margin:7px auto 6px !important;
  transform-origin:center center;
  animation:atsGentleBreath 5s ease-in-out infinite;
  filter:drop-shadow(0 0 5px rgba(0,168,166,.22));
}
.login-box .version.ats-branding .ats-company-name {
  color:#078c91 !important;
  font-weight:850 !important;
}
@keyframes atsGentleBreath {
  0%,100% { transform:scale(1); filter:drop-shadow(0 0 4px rgba(0,168,166,.18)); }
  50% { transform:scale(1.03); filter:drop-shadow(0 0 7px rgba(0,168,166,.28)); }
}
@media (min-width:901px) and (max-height:800px) {
  .login-box .version.ats-branding .ats-company-logo {
    width:56px !important; height:56px !important; margin:3px auto 3px !important;
  }
}
@media (min-width:901px) and (max-height:740px) {
  .login-box .version.ats-branding .ats-company-logo {
    width:44px !important; height:44px !important; margin:2px auto !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  .login-box .version.ats-branding .ats-company-logo { animation:none !important; }
}
</style>
<style id="department-module-visibility">
/* Department-specific module preview; existing login and routing untouched. */
.modules.dept-restricted .module:not(:nth-child(-n+2)) {
  filter:grayscale(1); opacity:.38; box-shadow:none;
}
.modules.dept-restricted .module:not(:nth-child(-n+2))::before {
  content:'🔒'; position:absolute; top:3px; right:6px; left:auto;
  width:auto; height:auto; background:none; opacity:1; font-size:12px;
}
.modules.dept-restricted .module:not(:nth-child(-n+2)):hover {transform:none;box-shadow:none}
.modules.dept-restricted .module:nth-child(-n+2) {
  border:2px solid #20d9e8; background:linear-gradient(155deg,#fff,#d9f9ff);
  box-shadow:0 0 0 3px rgba(32,217,232,.23),0 8px 25px rgba(0,30,75,.5);
}
</style>
<style id="shivshree-viewport-fit-20261103">
/* Login-only viewport repair: overrides older conflicting screen-height rules. */
@media screen and (min-width:650px) {
 html,body{height:100%!important;overflow:hidden!important}
 .page{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto auto!important;height:100vh!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important}
 .top{padding:4px 2.2vw 2px!important;min-height:0!important}
 .brand{padding:3px 10px 3px 5px!important;border-radius:13px!important}
 .brand img{width:clamp(32px,5.5vh,49px)!important;height:clamp(32px,5.5vh,49px)!important}
 .brand h1{font-size:clamp(17px,2vw,26px)!important}.brand p{font-size:clamp(9px,.85vw,11px)!important;margin:1px 0 0!important}
 .main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0, min(42vw,455px))!important;gap:12px!important;min-height:0!important;padding:0 2.2vw 2px!important;align-items:center!important}
 .intro{min-width:0!important;max-width:100%!important;transform:none!important;text-align:left!important}
 .intro .product{font-size:clamp(34px,4.4vw,68px)!important;letter-spacing:-2px!important}
 .intro .product .version-red{font-size:.32em!important;margin-left:5px!important}
 .intro .description{font-size:clamp(12px,1.2vw,17px)!important;margin:3px 0 8px!important}
 .certs{gap:5px!important;justify-content:flex-start!important}.cert{padding:5px 8px!important;font-size:clamp(10px,.9vw,13px)!important}.cert .tick{width:19px!important;height:19px!important}
 .benefits{margin-top:9px!important;gap:5px!important;grid-template-columns:1fr!important}.benefit{font-size:clamp(10px,.9vw,13px)!important;gap:7px!important}.benefit-icon{width:29px!important;height:29px!important;font-size:15px!important}.benefit-copy small{font-size:10px!important}
 .login-box{width:100%!important;max-width:455px!important;min-width:0!important;max-height:100%!important;overflow:hidden!important;position:relative!important;top:auto!important;left:auto!important;align-self:center!important;justify-self:end!important;padding:clamp(5px,1vh,10px) 14px!important;border-radius:20px!important}
 .login-box .logo{width:clamp(26px,4.5vh,40px)!important;height:clamp(26px,4.5vh,40px)!important;margin:0 auto 1px!important}
 .login-box .hospital-title{font-size:clamp(17px,1.7vw,23px)!important;line-height:1.05!important}
 .login-box .sub-title{font-size:10px!important;margin:1px 0 3px!important}.login-box .divider{margin-bottom:3px!important;height:2px!important}
 .login-box .login-clock{position:static!important;transform:none!important;margin:2px auto 4px!important;padding:4px 8px!important;font-size:10px!important}
 .login-box .photo-wrap{width:clamp(31px,5vh,47px)!important;height:clamp(31px,5vh,47px)!important;margin:0 auto 2px!important;padding:2px!important}
 .login-box .welcome{font-size:15px!important;margin:1px 0!important}.login-box .selected-user-name{font-size:10px!important;margin:0 0 3px!important;min-height:12px!important}
 .login-box form{gap:4px!important}.login-box .form-select,.login-box .form-control{height:clamp(30px,4.6vh,39px)!important;min-height:0!important;font-size:12px!important;border-radius:9px!important}
 .login-box .btn-login{height:clamp(31px,4.7vh,40px)!important;font-size:14px!important;border-radius:9px!important}
 .login-box .password-toggle{height:30px!important;top:1px!important}
 .login-box .version.ats-branding{margin-top:3px!important;padding-top:3px!important;gap:0!important;line-height:1.05!important}
 .login-box .ats-company-logo{width:clamp(25px,4vh,39px)!important;height:clamp(25px,4vh,39px)!important;margin:1px auto!important}
 .login-box .ats-developed{font-size:10px!important}.login-box .ats-company-name{font-size:clamp(11px,1vw,15px)!important;line-height:1.05!important}
 .login-box .ats-contact{gap:0!important;margin:0!important}.login-box .ats-contact a{font-size:clamp(9px,.8vw,11px)!important;line-height:1.1!important}
 .bottom{padding:0 2.2vw 3px!important;min-height:0!important}.modules{display:grid!important;grid-template-columns:repeat(9,minmax(0,1fr))!important;width:100%!important;max-width:none!important;gap:5px!important;margin:0!important}
 .bottom .module{height:clamp(47px,8vh,68px)!important;min-height:0!important;max-height:68px!important;padding:3px 2px!important;gap:1px!important;border-radius:9px!important}
 .bottom .module-art{width:clamp(20px,3.6vh,28px)!important;height:clamp(20px,3.6vh,28px)!important;border-radius:6px!important}.bottom .module-art svg{width:75%!important;height:75%!important}
 .bottom .module-name{font-size:clamp(9px,.8vw,11px)!important;line-height:1!important}.bottom .module-caption{font-size:clamp(7px,.67vw,9px)!important;line-height:1!important;margin:0!important}
 .footer.premium-footer{display:flex!important;flex-wrap:nowrap!important;justify-content:space-between!important;gap:6px!important;padding:3px 2.2vw!important;font-size:clamp(8px,.7vw,10px)!important;min-height:0!important}
 .footer-left{gap:5px!important;justify-content:flex-start!important}.footer-right{gap:7px!important;flex-wrap:nowrap!important}.footer-extra{display:none!important}.footer-hospital-logo{width:18px!important;height:18px!important}
}
@media screen and (min-width:650px) and (max-height:650px){
 .benefits{display:none!important}.intro .description{margin-bottom:5px!important}
 .login-box .logo{width:26px!important;height:26px!important}.login-box .photo-wrap{width:30px!important;height:30px!important}
 .login-box .ats-company-logo{width:24px!important;height:24px!important}.login-box .login-clock{padding:2px 7px!important;margin:1px auto 2px!important}
 .login-box form{gap:3px!important}.login-box .form-select,.login-box .form-control{height:29px!important}.login-box .btn-login{height:30px!important}
 .bottom .module{height:46px!important}.footer-right{display:none!important}
}
@media screen and (min-width:650px) and (max-width:950px){
 .main{grid-template-columns:minmax(0,1fr) minmax(0,46%)!important}.cert-copy small{display:none!important}
 .footer-left .footer-sep,.footer-left .footer-extra{display:none!important}
}
</style>
</head>
<body>
<div class="page">
  <div class="photo-background" aria-hidden="true"></div>
  <header class="top">
    <div class="brand"><img src="images/shivshree_logo.png" alt="Shivshree Hospital logo"><div><h1>Shivshree Hospital</h1><p>Integrated Hospital Operations &amp; Management</p></div></div>

  </header>
  <main class="main">
    <section class="intro" aria-label="HospiEasy information">
      <div class="product">Hospi<span>Easy</span> <small class="version-red">v2.0</small></div>
      <p class="description">Hospital Management Information System</p>
      <div class="certs"><div class="cert"><span class="tick">✓</span><span class="cert-copy">ABDM Enabled<small>Ayushman Bharat Digital Mission</small></span></div><div class="cert blue"><span class="tick">✓</span><span class="cert-copy">NABH Compliant<small>Quality &amp; Patient Safety</small></span></div></div>
      <div class="benefits"><div class="benefit"><span class="benefit-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="9" cy="8" r="3"/><path d="M3 20v-2a6 6 0 0 1 12 0v2M17 11a3 3 0 1 0-1-6M17 15a5 5 0 0 1 4 5"/></svg></span><span class="benefit-copy">Patient-Centric Care<small>Better Care, Healthier Lives</small></span></div><div class="benefit"><span class="benefit-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 2 20 6v6c0 5-3 8-8 10-5-2-8-5-8-10V6zM9 12l2 2 4-4"/></svg></span><span class="benefit-copy">Safe &amp; Secure Data Management<small>Your Data, Our Responsibility</small></span></div><div class="benefit"><span class="benefit-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 20V12M9 20V8M14 20V4M19 20V10"/></svg></span><span class="benefit-copy">Real-Time Hospital Operations<small>Smarter Decisions, Faster Care</small></span></div><div class="benefit"><span class="benefit-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg></span><span class="benefit-copy">Efficient Workflow<small>Integrated | Streamlined | Productive</small></span></div><div class="benefit"><span class="benefit-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M20.8 8.6c0 5-8.8 11.4-8.8 11.4S3.2 13.6 3.2 8.6A4.6 4.6 0 0 1 12 6.8a4.6 4.6 0 0 1 8.8 1.8Z"/></svg></span><span class="benefit-copy">Better Healthcare Outcomes<small>Advanced Technology, Trusted Care</small></span></div></div>
    </section>
    <section class="login-box" aria-label="Secure hospital login">
      <img src="images/shivshree_logo.png" class="logo" alt="Shivshree Hospital">
      <div class="hospital-title">Shivshree Hospital</div>
      <div class="sub-title">Hospital Management Information System</div>
      <div class="divider"></div>
      <div class="top-clock login-clock" id="clock" aria-label="Current date and time"></div>
      <div class="photo-wrap"><img src="userphotos/default.png" id="userPhoto" class="user-photo" alt="Selected user photo" onerror="this.onerror=null;this.src='userphotos/default.png';"></div>
      <p class="welcome">Welcome Back</p>
      <div class="selected-user-name" id="selectedUserName">Select department and user</div>
      <form method="post" action="login_process.php" autocomplete="off">
        <div class="field"><span class="field-icon" aria-hidden="true">▦</span><select name="department" id="department" class="form-select" aria-label="Department" required><option value="">Select Department</option><option value="ADMIN">ADMIN</option><option value="ACCOUNTS">ACCOUNTS</option><option value="BILLING">BILLING</option><option value="DOCTOR">DOCTOR</option><option value="RECEPTION">RECEPTION</option></select></div>
        <div class="field"><span class="field-icon" aria-hidden="true">●</span><select name="usercode" id="usercode" class="form-select" aria-label="User" required><option value="">Select User</option></select></div>
        <div class="field password-field"><span class="field-icon" aria-hidden="true">♙</span><input type="password" id="password" name="password" class="form-control" placeholder="Enter Password" aria-label="Password" required><button class="password-toggle" type="button" onclick="togglePassword()" aria-label="Show or hide password">◉</button></div>
        <button type="submit" class="btn-login">⇥ &nbsp; LOGIN</button>
      </form>
      <div class="version ats-branding">
        <img class="ats-company-logo" src="images/ats_company_logo.jpg" alt="Atlandis Technology Solutions logo">
        <div class="ats-developed">Designed &amp; Developed by</div>
        <strong class="ats-company-name">ATLANDIS TECHNOLOGY SOLUTIONS</strong>
        <div class="ats-contact">
          <a href="https://www.atlandistechnology.com/" target="_blank" rel="noopener noreferrer">www.atlandistechnology.com</a>
          <a href="mailto:info@atlandistechnologysolutions.com">info@atlandistechnologysolutions.com</a>
          <a href="tel:+919890071609">+91 9890071609</a>
        </div>
      </div>
    </section>
  </main>
  <div class="bottom"><div class="modules" aria-label="HospiEasy modules overview"><div class="module module-teal"><span class="module-art" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 3v6a4 4 0 0 0 8 0V3M5 3h4m4 0h4M11 13v3a5 5 0 0 0 10 0v-2"/><circle cx="21" cy="12" r="2"/></svg></span><span class="module-name">OPD</span><span class="module-caption">OutPatient Care</span></div><div class="module module-blue"><span class="module-art" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M3 5v15M3 17h18v3M5 11h16v6H5zM6 11V8h6v3M16 11V7h3a2 2 0 0 1 2 2v2"/></svg></span><span class="module-name">IPD</span><span class="module-caption">InPatient Care</span></div><div class="module module-rose"><span class="module-art" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><path d="M7 21v-6a5 5 0 0 1 10 0v6M7 11l5 3 5-3M4 9l3-2m10 0 3 2M9 18h6"/></svg></span><span class="module-name">OT</span><span class="module-caption">Operation Theatre</span></div><div class="module module-cyan"><span class="module-art" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M9 2h6M10 2v8L5 19a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-5-9V2M7 16h10"/><circle cx="12" cy="19" r="1"/></svg></span><span class="module-name">LAB</span><span class="module-caption">Laboratory</span></div><div class="module module-purple"><span class="module-art" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="11" rx="5.5" transform="rotate(-30 12 12.5)"/><path d="m8 8 8 9"/></svg></span><span class="module-name">PHARMACY</span><span class="module-caption">Medicines</span></div><div class="module module-sky"><span class="module-art" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M9 7h6M9 11h6M9 18v-3m3 3v-5m3 5v-7"/></svg></span><span class="module-name">REPORTS</span><span class="module-caption">MIS & Analytics</span></div><div class="module module-indigo"><span class="module-art" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="19" rx="2"/><path d="M9 3V2h6v1M7 12h3l2-3 2 6 2-3h2M8 18h8"/></svg></span><span class="module-name">EMR</span><span class="module-caption">Medical Records</span></div><div class="module module-green"><span class="module-art" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 2h14v20l-3-2-4 2-4-2-3 2zM9 7h7M9 11h7M9 15h6"/><path d="M12 6v10"/></svg></span><span class="module-name">BILLING</span><span class="module-caption">Billing & Accounts</span></div><div class="module module-royal"><span class="module-art" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg></span><span class="module-name">MORE</span><span class="module-caption">30+ Modules</span></div></div></div>
  <footer class="footer premium-footer">
  <div class="footer-left"><span class="footer-part"><img class="footer-hospital-logo" src="images/shivshree_logo.png" alt="Shivshree Hospital logo"> Shivshree Hospital, Pune</span><span class="footer-sep">|</span><span>Integrated Hospital Management</span><span class="footer-sep">|</span><span class="footer-extra">Centre of Excellence in Trauma and Multispeciality Surgery</span><span class="footer-sep footer-extra">|</span><span class="footer-extra">An ISO 9001:2015 Certified Organisation</span></div>
  <div class="footer-right"><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 3 6v6c0 6 4 9 9 10 5-1 9-4 9-10V6z"/><path d="m8 12 3 3 5-6"/></svg>Secure</span><span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1m-8.6 8.6-2.1 2.1"/><circle cx="12" cy="12" r="5"/></svg>Reliable</span><span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="8" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M2 21v-3a6 6 0 0 1 12 0v3m1-8a5 5 0 0 1 7 5v3"/></svg>Patient Centric</span><span class="footer-extra"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M1 12h5l3-7 4 14 3-7h7"/></svg>Always with You</span></div>
</footer>
</div>
<script>
const defaultPhoto = 'userphotos/default.png';

$(document).ready(function(){
    $('#department').change(function(){
        const dept = $(this).val();
        $('.modules').toggleClass('dept-restricted', dept === 'RECEPTION' || dept === 'BILLING');

        $('#usercode').html('<option value="">Loading users...</option>');
        $('#userPhoto').attr('src', defaultPhoto);
        $('#selectedUserName').text('Select user');
        $('#password').val('');

        if(!dept){
            $('#usercode').html('<option value="">Select User</option>');
            $('#selectedUserName').text('Select department and user');
            return;
        }

        $.ajax({
            url:'ajax/get_users.php',
            type:'POST',
            data:{dept:dept},
            success:function(data){
                $('#usercode').html(data);
            },
            error:function(){
                $('#usercode').html('<option value="">Unable to load users</option>');
            }
        });
    });

    $('#usercode').change(function(){
        const selected = $(this).find('option:selected');
        const usercode = $(this).val();
        const username = selected.data('name') || '';
        const userkid = selected.data('kid') || '';

        $('#password').val('');
        $('#selectedUserName').text(username ? username : 'Select user');

        if(!usercode){
            $('#userPhoto').attr('src', defaultPhoto);
            return;
        }

        $.ajax({
            url:'ajax/get_user_photo.php',
            type:'POST',
            data:{
                usercode:usercode,
                userkid:userkid
            },
            dataType:'json',
            success:function(res){
                $('#userPhoto').attr('src', res.photo || defaultPhoto);
                if(res.name){
                    $('#selectedUserName').text(res.name);
                }
            },
            error:function(){
                $('#userPhoto').attr('src', defaultPhoto);
            }
        });
    });
});

function togglePassword()
{
    const x = document.getElementById("password");
    x.type = x.type === "password" ? "text" : "password";
}

function updateClock()
{
    const now = new Date();
    const day = String(now.getDate()).padStart(2,'0');
    const month = String(now.getMonth()+1).padStart(2,'0');
    const year = now.getFullYear();
    let hours = now.getHours();
    const minutes = String(now.getMinutes()).padStart(2,'0');
    const seconds = String(now.getSeconds()).padStart(2,'0');
    const ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12 || 12;
    hours = String(hours).padStart(2,'0');

    document.getElementById("clock").innerHTML =
        day + "/" + month + "/" + year + " " +
        hours + ":" + minutes + ":" + seconds + " " + ampm + " IST";
}

setInterval(updateClock,1000);
updateClock();
</script>

</body>
</html>
