:root{--navy:#062a47;--blue:#0b5e8e;--gold:#f2b705;--green:#16803b;--light:#f5f8fb;--text:#183042}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.65}
.topbar{background:#041f35;color:#fff;text-align:center;padding:8px 16px;font-size:14px}
header{background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 14px #0002}
.nav{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}.logo{width:78px;height:58px;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;border-radius:6px}
.brand strong{font-size:20px}.brand small{display:block;font-size:12px}.links{display:flex;gap:18px;flex-wrap:wrap}.links a{text-decoration:none;color:var(--navy);font-weight:700}
.hero{min-height:70vh;background:linear-gradient(90deg,#031d35d9,#031d3560),url('../images/iti-nemmara-campus.jpg') center/cover;display:flex;align-items:center;color:#fff}
.hero-inner{max-width:1180px;margin:auto;padding:80px 24px}.tag{display:inline-block;background:var(--gold);color:#142a3a;padding:7px 14px;border-radius:999px;font-weight:800}
h1{font-size:clamp(38px,6vw,74px);line-height:1.03;margin:18px 0}.hero p{font-size:20px;max-width:760px}.btn{display:inline-block;padding:13px 22px;border-radius:8px;text-decoration:none;font-weight:800;margin:8px 8px 0 0;background:var(--gold);color:#102a43}.btn.alt{background:#fff;color:var(--navy)}
section{padding:70px 20px}.container{max-width:1180px;margin:auto}.section-title{text-align:center;margin-bottom:38px}.section-title h2{font-size:38px;margin:0;color:var(--navy)}.section-title p{max-width:760px;margin:10px auto}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px #0b35501a;border:1px solid #e4edf3}.card img{width:100%;height:230px;object-fit:cover}.card-body{padding:24px}.card h3{color:var(--navy);margin-top:0}.badge{display:inline-block;background:#e8f5ed;color:#126532;padding:5px 10px;border-radius:20px;font-size:13px;font-weight:bold}
.about{background:var(--light)}.two{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}.two img{width:100%;border-radius:18px;box-shadow:0 15px 35px #0002}
.location{background:linear-gradient(135deg,#062a47,#0b5e8e);color:#fff}.location h2{color:#fff}.location-box{background:#ffffff14;border:1px solid #ffffff35;padding:28px;border-radius:16px}.landmarks{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}.landmark{background:#fff;color:var(--navy);padding:18px;border-radius:12px;font-weight:700;text-align:center}
.page-hero{background:linear-gradient(90deg,#041f35ee,#0b5e8ecc);color:#fff;padding:70px 20px;text-align:center}.page-hero h1{font-size:48px}
.trade-detail{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.trade-detail img{width:100%;border-radius:16px}.list{padding-left:20px}.info{background:#eef7fb;border-left:5px solid var(--blue);padding:18px;border-radius:8px}
footer{background:#031827;color:#dceaf3;padding:45px 20px 20px}.footer-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}footer a{color:#fff}.copyright{text-align:center;border-top:1px solid #ffffff25;margin-top:30px;padding-top:20px}
@media(max-width:850px){.grid,.two,.trade-detail,.footer-grid,.landmarks{grid-template-columns:1fr}.links{display:none}.hero{min-height:62vh}.card img{height:auto}}

.logo img{width:100%;height:100%;object-fit:contain;display:block}


/* ===== ITI FOUR-COLOUR THEME ===== */
:root{
  --red:#d71920;
  --white:#ffffff;
  --royal-blue:#0756a3;
  --deep-blue:#052f5f;
  --yellow:#ffd21f;
  --navy:#052f5f;
  --blue:#0756a3;
  --gold:#ffd21f;
  --light:#f4f8ff;
  --text:#17324d;
}
body{background:var(--white)}
.topbar{background:var(--red);color:var(--white);border-bottom:4px solid var(--yellow)}
header{background:var(--white);border-bottom:5px solid var(--royal-blue)}
.links a{padding:8px 10px;border-radius:6px}
.links a:hover{background:var(--yellow);color:var(--deep-blue)}
.hero{background:linear-gradient(90deg,#052f5fe8,#0756a380),url('../images/iti-nemmara-campus.jpg') center/cover}
.tag,.yellow-label{display:inline-block;background:var(--yellow);color:var(--deep-blue);padding:7px 14px;border-radius:999px;font-weight:900}
.btn{background:var(--yellow);color:var(--deep-blue);border:2px solid var(--yellow)}
.btn:hover{background:var(--red);border-color:var(--red);color:var(--white)}
.page-hero{background:linear-gradient(120deg,var(--deep-blue),var(--royal-blue));border-bottom:8px solid var(--yellow)}
.page-hero h1{color:var(--white)}
.section-title h2{color:var(--deep-blue)}
.card{border-top:6px solid var(--red)}
.card:nth-child(2){border-top-color:var(--royal-blue)}
.card:nth-child(3){border-top-color:var(--yellow)}
footer{background:var(--deep-blue);border-top:8px solid var(--red)}
footer h3{color:var(--yellow)}
footer a{color:var(--white)}
.staff-hero{background:linear-gradient(120deg,var(--red) 0 24%,var(--white) 24% 28%,var(--royal-blue) 28% 100%);color:var(--white)}
.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.staff-card{background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px #052f5f20;border:1px solid #dbe7f4;border-top:7px solid var(--red)}
.staff-card:nth-child(2n){border-top-color:var(--royal-blue)}
.staff-card:nth-child(3n){border-top-color:var(--yellow)}
.staff-avatar{height:150px;display:grid;place-items:center;background:linear-gradient(135deg,#eef5ff,#fff8cf);font-size:70px}
.staff-info{padding:22px}
.staff-info h3{margin:0;color:var(--deep-blue)}
.designation{color:var(--red);font-weight:800}
.staff-note,.contact-highlight{margin-top:35px;padding:25px;border-radius:14px;background:var(--yellow);color:var(--deep-blue);border-left:8px solid var(--red)}
.contact-highlight a{color:var(--deep-blue);font-weight:800}
@media(max-width:900px){.staff-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.staff-grid{grid-template-columns:1fr}}

/* ===== ADMIN + DYNAMIC STAFF SYSTEM ===== */
.staff-page-section{background:#f4f8ff}.staff-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:35px;padding:25px;background:#fff;border-radius:16px;border-left:8px solid var(--red);box-shadow:0 8px 24px #052f5f12}.staff-toolbar h2{margin:0;color:var(--deep-blue)}.admin-actions{display:flex;gap:10px;flex-wrap:wrap}.add-staff-btn,.logout-btn{border:0;padding:14px 20px;border-radius:8px;font-weight:900;cursor:pointer}.add-staff-btn{background:var(--red);color:#fff}.logout-btn{background:var(--deep-blue);color:#fff}
.staff-block{background:#fff;margin-bottom:35px;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px #052f5f14;border:1px solid #dce8f4}.block-heading{display:flex;align-items:center;gap:16px;padding:20px 25px;color:#fff}.block-heading>span{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--deep-blue);font-weight:900}.block-heading h2{margin:0}.block-heading p{margin:2px 0 0}.admin-block .block-heading{background:var(--red)}.instructor-block .block-heading{background:var(--royal-blue)}.office-block .block-heading{background:var(--deep-blue)}
.staff-display-grid{display:grid;gap:22px;padding:28px}.admin-grid{grid-template-columns:repeat(2,1fr)}.instructor-grid,.office-grid{grid-template-columns:repeat(3,1fr)}.staff-person-card{text-align:center;background:#fff;border-radius:14px;border:1px solid #dce8f4;overflow:hidden;box-shadow:0 7px 20px #052f5f12}.staff-photo{height:240px;background:linear-gradient(135deg,#eef5ff,#fff8cf);display:flex;align-items:center;justify-content:center;overflow:hidden}.staff-photo img{width:100%;height:100%;object-fit:cover}.staff-placeholder{font-size:80px}.staff-person-content{padding:18px}.staff-person-content h3{margin:0;color:var(--deep-blue)}.staff-role{margin:5px 0;color:var(--red);font-weight:900}.staff-extra{color:#536879;white-space:pre-wrap}.delete-staff-btn{margin-top:12px;border:0;background:var(--red);color:#fff;padding:9px 17px;border-radius:7px;font-weight:800;cursor:pointer}.empty-staff-message{grid-column:1/-1;text-align:center;padding:28px;border:2px dashed #c7d8e8;border-radius:12px;color:#6c8091}
.admin-login-section{min-height:70vh;display:grid;place-items:center;padding:50px 20px;background:linear-gradient(135deg,var(--deep-blue),var(--royal-blue))}.login-card{width:min(450px,100%);background:#fff;padding:35px;border-radius:18px;border-top:9px solid var(--yellow);box-shadow:0 20px 60px #0005}.login-card h1{font-size:36px;color:var(--deep-blue)}.login-card form{display:flex;flex-direction:column;gap:10px}.login-card input{padding:13px;border:2px solid #cbdbea;border-radius:8px;font:inherit}.login-error{color:var(--red);font-weight:800}.admin-panel-hidden{display:none!important}
.staff-modal{position:fixed;inset:0;background:#031827cc;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}.staff-modal.show{display:flex}.staff-modal-card{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;padding:32px;border-top:9px solid var(--yellow)}.modal-close{position:absolute;right:16px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:var(--red);color:#fff;font-size:25px;cursor:pointer}.modal-title{text-align:center}.modal-title h2{color:var(--deep-blue)}#staffForm{display:flex;flex-direction:column;gap:10px}#staffForm label{font-weight:900;color:var(--deep-blue)}#staffForm input[type=text],#staffForm textarea{padding:13px;border:2px solid #cbdbea;border-radius:8px;font:inherit}.photo-upload-box{border:2px dashed var(--royal-blue);background:#eef6ff;padding:18px;text-align:center;border-radius:10px}.photo-upload-box span,.photo-upload-box small{display:block}.photo-upload-box input{margin-top:10px}.photo-preview-wrap{display:none;text-align:center}.photo-preview-wrap.show{display:block}.photo-preview-wrap img{width:130px;height:130px;object-fit:cover;border-radius:10px;border:4px solid var(--yellow)}.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-add-btn,.form-clear-btn{border:0;padding:13px;border-radius:8px;font-weight:900;cursor:pointer}.form-add-btn{background:var(--royal-blue);color:#fff}.form-clear-btn{background:var(--yellow);color:var(--deep-blue)}
@media(max-width:850px){.staff-toolbar{align-items:flex-start;flex-direction:column}.admin-grid,.instructor-grid,.office-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.admin-grid,.instructor-grid,.office-grid{grid-template-columns:1fr}}


/* ===== AUTOMATIC 3:4 STAFF PHOTO CROPPER ===== */
.crop-modal{position:fixed;inset:0;background:#031827e8;z-index:1200;display:none;align-items:center;justify-content:center;padding:18px}
.crop-modal.show{display:flex}
.crop-modal-card{position:relative;width:min(620px,100%);max-height:96vh;overflow:auto;background:#fff;border-radius:18px;padding:28px;border-top:9px solid var(--yellow);box-shadow:0 24px 70px #0008}
.crop-stage{position:relative;width:min(360px,82vw);aspect-ratio:3/4;margin:20px auto;background:#17202a;overflow:hidden;touch-action:none;cursor:grab;border:6px solid var(--royal-blue);border-radius:12px;user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-stage img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;transform-origin:center center;pointer-events:none;user-select:none}
.crop-guide{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 999px #00000010}
.crop-guide:before,.crop-guide:after{content:"";position:absolute;background:#ffffff88}
.crop-guide:before{left:33.333%;top:0;width:1px;height:100%;box-shadow:calc(33.333% * 1) 0 0 #ffffff88}
.crop-guide:after{left:0;top:33.333%;width:100%;height:1px;box-shadow:0 calc(33.333% * 1) 0 #ffffff88}
.crop-controls{max-width:500px;margin:auto}.crop-controls>label{font-weight:900;color:var(--deep-blue)}
.crop-controls input[type=range]{width:100%;accent-color:var(--royal-blue)}
.crop-help{text-align:center;color:#607586;font-size:14px}
.crop-action-grid{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:10px}
.crop-reset-btn,.crop-cancel-btn,.crop-use-btn{border:0;padding:12px 10px;border-radius:8px;font-weight:900;cursor:pointer}
.crop-reset-btn{background:var(--yellow);color:var(--deep-blue)}
.crop-cancel-btn{background:#e7edf3;color:var(--deep-blue)}
.crop-use-btn{background:var(--royal-blue);color:#fff}
@media(max-width:520px){.crop-action-grid{grid-template-columns:1fr}.crop-modal-card{padding:24px 14px}}


/* ===== SMALL PASSPORT-SIZE SQUARE PHOTOS ON PUBLIC STAFF PAGE ===== */
/* Applies only to the normal public Staff page, not the Admin management page */
body:has(script[src="assets/js/staff-public.js"]) .staff-person-card{
  padding-top:18px;
}
body:has(script[src="assets/js/staff-public.js"]) .staff-photo{
  width:150px;
  height:150px;
  aspect-ratio:1/1;
  margin:0 auto;
  border-radius:8px;
  border:4px solid var(--yellow);
  background:#eef5ff;
}
body:has(script[src="assets/js/staff-public.js"]) .staff-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
body:has(script[src="assets/js/staff-public.js"]) .staff-placeholder{
  font-size:58px;
}
body:has(script[src="assets/js/staff-public.js"]) .staff-person-content{
  padding-top:14px;
}
@media(max-width:560px){
  body:has(script[src="assets/js/staff-public.js"]) .staff-photo{
    width:130px;
    height:130px;
  }
}

/* Compatibility rules for public staff page */
.public-staff-page .staff-person-card{padding-top:18px}
.public-staff-page .staff-photo{width:150px;height:150px;aspect-ratio:1/1;margin:0 auto;border-radius:8px;border:4px solid var(--yellow);background:#eef5ff}
.public-staff-page .staff-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.public-staff-page .staff-placeholder{font-size:58px}
.public-staff-page .staff-person-content{padding-top:14px}
@media(max-width:560px){.public-staff-page .staff-photo{width:130px;height:130px}}

.zoom-control-row{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:12px;margin-top:8px}
.zoom-control-row input[type=range]{width:100%;margin:0}.zoom-step-btn{width:48px;height:44px;border:0;border-radius:9px;background:var(--royal-blue);color:#fff;font-size:26px;font-weight:900;cursor:pointer}.zoom-step-btn:hover{background:var(--red)}.zoom-value{text-align:center;margin-top:7px;color:var(--deep-blue);font-weight:900}

/* ===== FOOTER DESIGN CREDIT ===== */
.designer-credit{display:inline-block;margin-top:8px;color:var(--yellow);font-weight:900;letter-spacing:.4px}

/* ===== Mobile Responsive Improvements ===== */
html{-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
table{display:block;overflow-x:auto}
@media (max-width:768px){
.nav{display:flex;flex-direction:column;align-items:flex-start;padding:10px}
.links{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.links a{display:block;padding:10px 12px;font-size:15px}
.brand{width:100%;margin-bottom:10px}
.container{width:95%!important;padding:10px!important}
.hero,.page-hero{padding:40px 15px!important}
.hero h1,.page-hero h1{font-size:30px!important}
.hero p{font-size:16px!important}
.staff-display-grid,.admin-grid,.instructor-grid,.office-grid,.footer-grid{grid-template-columns:1fr!important}
.staff-toolbar{flex-direction:column!important;align-items:stretch!important}
.staff-photo{width:120px!important;height:120px!important}
.card,.staff-person-card{margin-bottom:15px}
input,textarea,select,button{font-size:16px}
}