:root{
  --teal:#0d5c75;
  --blue:#29abe2;
  --blue-attach:#2ab0e8;
  --blue-line:#4fb8e6;
  --green:#3f8f4f;
  --purple:#5b3fb0;
  --ink:#333;
  --muted:#888;
  --red:#d81f1f;
  --border:#d9d9d9;
  --panel-border:#3f8f4f;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);}

/* ================= LOGIN ================= */
#loginScreen {
  position: fixed;
  inset: 0;
  z-index: 500;
  
  /* REPLACED THE GRADIENT WITH YOUR IMAGE */
  background-image: url('../assets/images/clerio-dentix-BG.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card{background:#fff;border-radius:14px;padding:38px 34px;width:340px;box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:center;}
.login-card .logo{width:64px;height:64px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;margin:0 auto 14px;}
.login-card h1{font-size:19px;margin:0 0 4px;color:#0d5c75;}
.login-card p{font-size:12px;color:#999;margin:0 0 22px;}
.login-card label{display:block;text-align:left;font-size:12px;color:#666;margin:12px 0 4px;}
.login-card input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:7px;font-size:14px;}
.login-card input:focus{outline:none;border-color:var(--blue);}
.login-card button{width:100%;margin-top:20px;background:var(--blue);color:#fff;border:none;border-radius:7px;padding:11px;font-size:14px;font-weight:600;cursor:pointer;}
.login-card button:hover{filter:brightness(1.07);}
.login-err{color:var(--red);font-size:12px;margin-top:12px;min-height:16px;}

/* ================= APP SHELL ================= */
#app {
  display: none;
  min-height: 100vh;
  
  /* CHANGED: Added your background image here instead of the teal color */
  background-image: url('../assets/images/clerio-dentix-BG.png'); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Keeps the image still when scrolling */
}
.wrap{display:flex;min-height:100vh;}

/* SIDEBAR CONTAINER */
.sidebar{
  width:170px;
  flex:0 0 170px;
  background:linear-gradient(180deg,#1f2b8a,#141c5c);
  color:#cdd3f5;
  padding:14px 0;
  font-size:12px;
  display:flex;          
  flex-direction:column; 
}

/* THE LIGHT BLUE PROFILE BOX (Matches your screenshot) */
.profile-box{
  background: #29abe2; /* The exact light blue from your screenshot */
  border-radius:12px;
  margin:0 12px 10px 12px;
  padding:20px 10px;
  text-align:center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* LOGO STYLING (NOW BIGGER) */
.sidebar-logo {
  width: 100%;
  max-width: 160px;   /* Increased from 120px to make it larger */
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px auto; /* Added a small margin below the logo */
}

/* TEXT BELOW THE LOGO (NOW SMALLER) */
.brand-title {
  color: #ffffff;
  font-size: 12px;    /* Reduced from 15px to make it smaller */
  font-weight: 600;   /* Reduced from 700 for a thinner, cleaner look */
  letter-spacing: 0.5px;
}

/* LOGOUT BUTTON AT BOTTOM */
.sidebar .logout-btn {
  display: block;
  color: #cdd3f5;
  text-decoration: none;
  padding: 15px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: auto;      /* Pushes the button to the very bottom */
  width: 100%;
  transition: background 0.2s;
}

.sidebar .logout-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}

/* MAIN CONTENT AREA */
.main{flex:1;overflow:auto;}
.topbar{display:flex;justify-content:center;gap:14px;padding:12px;flex-wrap:wrap;}
.topbar button{border:none;border-radius:5px;padding:9px 20px;font-weight:600;font-size:12px;cursor:pointer;color:#fff;}
.btn-two{background:var(--green);}
.btn-three{background:#6c7a86;}
.btn-clearchart{background:#c0392b;}
.topbar button:hover{filter:brightness(1.08);}

/* ================= PAGE SHEET ================= */
.page {
  background-image: url('../assets/images/new_a4_BG.png');
  background-size: 100% 100%; /* Forces image to stretch fully */
  background-position: center;
  background-repeat: no-repeat;
  
  max-width: 1000px;
  margin: 0 auto 24px;
  padding: 26px 24px 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

.case-input-wrap {
  text-align: center;
  margin-bottom: 14px;
}
.case-input-wrap input {
  width: 320px;
  text-align: center;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.doc-header .patient { font-size: 15px; }
.doc-header .meta { text-align: right; font-size: 14px; line-height: 1.7; }
.editable { cursor: pointer; border-bottom: 1px dashed transparent; font-weight: 700; }
.editable:hover { border-bottom: 1px dashed var(--blue); }
.overview-title { text-align: center; font-size: 20px; margin: 6px 0 4px; font-weight: 400; }
.overview-title b { font-weight: 700; }
.hr { border: none; border-top: 1px solid #999; margin: 6px 0 30px; }

/* ================= CHART ================= */
.chart {
  margin: 10px 0 8px;
  padding-top: 120px; /* Increased to give labels vertical room */
}

.jaw {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  gap: 2px; /* Added small gap between teeth */
}

.quadrant {
  display: flex;
  gap: 2px; /* Added small gap between teeth */
}

.center-divider {
  width: 2px; /* Made slightly thicker for visibility */
  background: var(--blue-line);
  align-self: stretch;
  margin: 0 4px; /* Added space around midline */
}

.tooth {
  position: relative;
  width: 34px; /* WIDER: Increased from 29px */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.crown {
  position: relative;
  width: 32px; /* WIDER: Increased from 27px */
  height: 38px; /* TALLER: Increased from 36px */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crown img.toothimg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.crown:hover {
  filter: drop-shadow(0 0 3px var(--blue));
}

.num {
  font-size: 11px;
  color: #555;
  margin: 4px 0; /* Slightly more space around numbers */
  font-weight: 600;
}

/* ------- EXTRACTION LINE ------- */
.ext-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 45px; /* TALLER: Increased from 40px */
  background: #e0e0e0;
  cursor: pointer;
  z-index: 2;
}
.ext-line:hover { background: var(--blue); }
.ext-line.active { background: var(--red); width: 2px; }
.upper .ext-line { top: -45px; }
.lower .ext-line { bottom: -45px; }

/* ------- EXTRACTION LABEL ------- */
.ext-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--red);
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  z-index: 3;
  line-height: 1.1;
}
.upper .ext-label { top: -62px; } /* Moved higher */
.lower .ext-label { bottom: -62px; } /* Moved higher */

/* ------- PRESSURE POINT LINE ------- */
.press-line {
  position: absolute;
  left: calc(50% + 7px); /* Moved further right to avoid overlap */
  width: 3px;
  height: 32px; /* TALLER: Increased from 28px */
  cursor: pointer;
  z-index: 2;
  background: repeating-linear-gradient(to bottom, #ddd 0 3px, transparent 3px 6px);
  display: none;
}
.tooth.has-press-slot .press-line { display: block; }
.press-line:hover { background: repeating-linear-gradient(to bottom, var(--blue) 0 3px, transparent 3px 6px); }
.press-line.active { background: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 6px); }
.upper .press-line { top: -32px; }
.lower .press-line { bottom: -32px; }

/* ------- PRESSURE POINT LABEL ------- */
.press-label {
  position: absolute;
  left: calc(50% + 7px); /* Moved further right to avoid overlap */
  font-size: 8px;
  color: #000;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  z-index: 3;
  line-height: 1.1;
}
.upper .press-label { top: -48px; } /* Moved higher */
.lower .press-label { bottom: -48px; } /* Moved higher */

/* ------- CROWN INNER MARKS ------- */
.crown .in-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mk-attach { width: 8px; height: 8px; background: var(--blue-attach); border-radius: 1px; margin-top: 14%; }
.mk-cutout { width: 15px; margin-top: 1px; }
.mk-cutout img { width: 100%; display: block; }
.mk-missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: 18px; font-weight: 700; }
.mk-generic { margin-top: 16%; }
.mk-generic img { max-width: 16px; max-height: 14px; display: block; }
.mk-tad { width: 6px; height: 6px; border-radius: 50%; background: #000; margin-top: 22%; }
.mk-hook { position: absolute; top: 50%; transform: translateY(-50%); }
.mk-hook img { max-height: 16px; max-width: 10px; display: block; }
.mk-hook-left { left: 1px; }
.mk-hook-right { right: 1px; }

/* ------- IPR GAP & LINE ------- */
.ipr-gap {
  position: absolute;
  width: 14px; /* Wider click area */
  height: 48px;
  cursor: pointer;
  z-index: 6;
}
.ipr-line {
  position: absolute;
  width: 2px;
  background: var(--red);
  z-index: 4;
  pointer-events: none;
}
.ipr-label {
  position: absolute;
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
  transform: translateX(-50%);
}

/* ------- MIDLINE ------- */
.midline {
  position: relative;
  height: 2px;
  background: var(--blue-line);
  margin: 5px 0;
}
.midline .lbl {
  position: absolute;
  top: -7px;
  font-size: 10px;
  color: var(--blue);
  font-weight: 600;
  letter-spacing: 1px;
}
.midline .lbl.right { left: 2px; }
.midline .lbl.left { right: 2px; }

/* ================= LOWER SECTION ================= */
.lower-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;margin-top:64px;align-items:start;}
.stats .row{display:flex;margin-bottom:14px;font-size:14px;}
.stats .row .label{width:150px;}
.stats .row .value .sub{display:block;}
.stats .row .value b{font-weight:700;}
.clk{cursor:pointer;border-bottom:1px dashed var(--blue);}
.stats .note{font-size:13px;margin-top:10px;}
.panels{display:flex;flex-direction:column;gap:14px;}
.panel{border:1px solid var(--panel-border);border-radius:4px;padding:10px 12px;font-size:12px;}
.elastic-panel{cursor:pointer;}
.elastic-panel .line{margin:2px 0;color:#666;}
.elastic-panel .line b{color:#222;font-size:14px;margin-left:4px;}
.legend-panel .leg{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12px;}
.legend-panel .leg .sym{width:34px;display:flex;justify-content:center;align-items:center;}
.legend-panel .leg .sym img{max-width:30px;max-height:16px;}
.legend-panel .leg .sq{width:16px;height:10px;background:var(--blue);border-radius:2px;}
.legend-panel .leg .x{color:var(--blue);font-weight:700;font-size:16px;}
.legend-panel .leg .ipr{color:var(--red);font-weight:700;font-size:11px;}
.legend-panel .leg .tad{width:9px;height:9px;border-radius:50%;background:#000;}
.legend-panel .leg .pp{width:12px;height:12px;border-radius:50%;border:3px solid #000;}

/* ================= SMILE ================= */
.smile {
  background-image: url('../assets/images/new_a4_BG.png');
  background-size: 100% 100%; /* Forces image to stretch fully */
  background-position: center;
  background-repeat: no-repeat;
  
  max-width: 1000px;
  margin: 0 auto 24px;
  padding: 22px 40px 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.smile .doc-header { margin-bottom: 6px; }
.smile .hr { margin: 6px 0 18px; }
.smile h2 { text-align: center; color: #111; font-weight: 700; letter-spacing: 1px; margin: 6px 0 22px; }
.smile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.smile-cell { display: flex; flex-direction: column; align-items: center; }
.smile-slot {
  width: 100%;
  border: 1px dashed #bbb;
  border-radius: 8px;
  min-height: 210px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: #f0f0f0;
}
.smile-slot .ph { color: #999; font-size: 13px; }
.smile-slot img { width: 100%; height: 100%; object-fit: contain; }
.smile-slot .rm { position: absolute; top: 6px; right: 8px; background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; display: none; font-size: 12px; line-height: 1; }
.smile-slot.filled .rm { display: block; }
.smile-cell .slot-label { margin-top: 8px; font-size: 11px; color: #333; font-weight: 700; letter-spacing: 1px; }
.gen-wrap { text-align: center; margin: 28px 0 6px; }
.gen-wrap button { background: var(--purple); color: #fff; border: none; border-radius: 6px; padding: 12px 30px; font-weight: 600; cursor: pointer; font-size: 14px; }
.gen-wrap button:hover { filter: brightness(1.1); }
.gen-wrap button:disabled { opacity: .6; cursor: default; }

/* --- NEW CSS ADDED FOR THE 7TH BOX --- */
.full-width-cell {
  grid-column: 1 / -1; /* Makes the cell span across both columns */
}
.full-width-cell .smile-slot {
  min-height: 180px; /* Adjusts the height of the wide box */
}

/* ================= MODALS ================= */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:200;}
.overlay.show{display:flex;}
.modal{background:#fff;border-radius:8px;min-width:300px;max-width:360px;padding:20px 22px;box-shadow:0 12px 40px rgba(0,0,0,.3);position:relative;}
.modal h3{text-align:center;margin:0 0 16px;font-size:15px;font-weight:600;}
.modal .close{position:absolute;top:10px;right:12px;border:none;background:none;font-size:16px;cursor:pointer;color:#666;}
.modal label{display:block;font-size:11px;color:#888;margin:8px 0 3px;}
.modal input[type=text],.modal input[type=number]{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:5px;font-size:13px;}
.modal .actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px;}
.modal .btn{border:none;border-radius:5px;padding:8px 20px;font-weight:600;cursor:pointer;font-size:12px;}
.modal .btn-primary{background:var(--blue);color:#fff;}
.modal .btn-clear{background:#fff;color:#333;border:1px solid var(--border);}
.checklist{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow:auto;}
.checklist label{display:flex;align-items:center;gap:8px;font-size:12px;color:#333;margin:0;padding:6px 4px;cursor:pointer;border-radius:4px;}
.checklist label:hover{background:#f2f7fb;}
.checklist input{accent-color:var(--blue);width:15px;height:15px;}

.pdf-capture{box-shadow:none!important;margin:0!important;}
body.printing .gen-wrap{visibility:hidden;}
/* ================= NEW LOGIN STYLES ================= */

/* Style the new 3D Logo */
.login-logo {
  width: 110px;         /* You can adjust this size if needed */
  height: 110px;        /* Added: Same height as width to ensure it's a perfect circle */
  object-fit: cover;    /* Added: This will crop the image to fit perfectly inside the circle */
  border-radius: 50%;   /* Added: This is what turns the square into a circle */
  margin: 0 auto 12px auto;
  display: block;
}

/* Style "Clerio Dentix" text (Bigger, Bold, Teal color) */
.login-brand-name {
  font-size: 20px;
  font-weight: 700;
  color: #0d5c75;       /* Matches the teal color of your original text */
  margin: 0;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Style "Treatment Chart" text (Smaller, Grey) */
.login-subtitle {
  font-size: 13px;
  color: #999;
  margin: 2px 0 20px 0;  /* Small gap between text and the Username label */
  font-weight: 400;
}
/* ================= LEGEND IMAGE STYLES ================= */
.legend-img {
  width: 100%;          /* Forces the image to fill the width of the panel */
  max-width: 220px;     /* Stops it from getting too big on large screens */
  height: auto;         /* Keeps the image proportions correct */
  display: block;
  margin: 0 auto;       /* Centers the image inside the panel */
}
/* Force Pressure Point dotted lines to be solid black in PDF */
body.printing .press-line.active {
  background-image: none !important;
  background: #000 !important;
  display: block !important;
  opacity: 1 !important;
  height: 28px !important;
}
/* ================= HEADER WITH LOGO IN LEFT CORNER ================= */
.doc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  margin: 0;
}

.header-left {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

.header-logo {
  height: 100px; /* INCREASED from 80px to 100px */
  width: auto;
  object-fit: contain;
  display: block;
  margin: -10px 0 -10px 0; /* Moves logo upward by pulling it out of flow */
}

.header-right {
  text-align: right;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 2px;
}

.meta-line {
  white-space: nowrap;
}

.meta-line b {
  font-weight: 700;
}