/* Outer box */
.sps-select-patient-box {
    max-width: 420px;
    padding: 20px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background: #ffffff;
}

/* "Select Patient" label */
.sps-select-patient-header {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 16px;
}

/* Row with input + Search button */
.sps-select-patient-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

/* Text input */
.sps-select-patient-box .sps-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
}

/* Buttons base style */
.sps-btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
}

/* Primary button (Search) */
.sps-btn-primary {
    background: #25b3a7;   /* match your teal */
    border-color: #25b3a7;
    color: #ffffff;
}

/* Secondary buttons (Import / Add New) */
.sps-btn-secondary {
    background: #ffffff;
    border-color: #25b3a7;
    color: #25b3a7;
}

/* Row for Import + Add New */
.sps-select-patient-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Layout container */
.sps-chart-container {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin: 20px 0;
    flex-wrap: wrap;
}

/* Main chart area */
.sps-chart-main {
    flex: 2 1 600px;
}

/* Rows of teeth */
.sps-tooth-row {
    display: grid;
    grid-template-columns: repeat(16, minmax(24px, 1fr));
    gap: 4px;
    margin-bottom: 16px;
}

.sps-arch-label {
    font-weight: 600;
    margin-bottom: 6px;
}

/* Individual tooth box */
.sps-tooth {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    text-align: center;
    padding: 6px 2px;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    font-size: 12px;
}

.sps-tooth-number {
    font-size: 11px;
    font-weight: 600;
}

/* Hover + selected */
.sps-tooth:hover {
    box-shadow: 0 0 0 2px #25b3a733;
}

.sps-tooth.selected {
    outline: 2px solid #25b3a7;
}

/* Sidebar */
.sps-chart-sidebar {
    flex: 1 1 260px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
    background: #fff;
}

.sps-selected-tooth {
    margin-bottom: 12px;
}

.sps-selected-label {
    font-size: 13px;
    color: #666;
}

.sps-selected-value {
    font-size: 20px;
    font-weight: 700;
    margin-top: 2px;
}

/* Status buttons */
.sps-status-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.sps-status-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.sps-status-btn {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #f4f4f4;
    cursor: pointer;
}

/* Legend */
.sps-chart-legend {
    border-top: 1px solid #eee;
    padding-top: 8px;
    margin-top: 4px;
}

.sps-legend-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.sps-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 2px;
}

.sps-legend-swatch {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
    border: 1px solid #3333;
}

/* Color mapping similar to your Eaglesoft screenshot */
.sps-legend-swatch.existing,
.sps-tooth.status-existing {
    background: #1f4fff; /* blue */
    color: #fff;
}

.sps-legend-swatch.defective,
.sps-tooth.status-defective {
    background: #d62aff; /* magenta/pink */
    color: #fff;
}

.sps-legend-swatch.condition,
.sps-tooth.status-condition {
    background: #666666; /* gray */
    color: #fff;
}

.sps-legend-swatch.proposed,
.sps-tooth.status-proposed {
    background: #e3342f; /* red */
    color: #fff;
}

.sps-legend-swatch.watch,
.sps-tooth.status-watch {
    background: #ffeb3b; /* yellow */
}

.sps-legend-swatch.referred,
.sps-tooth.status-referred {
    background: #000000; /* black */
    color: #fff;
}

.sps-legend-swatch.walkout,
.sps-tooth.status-walkout {
    background: #7e57c2; /* purple */
    color: #fff;
}

.sps-legend-swatch.rejected,
.sps-tooth.status-rejected {
    background: #111111; /* dark/black */
    color: #fff;
}

/* Show which status button is active for the selected tooth */
.sps-status-btn.active {
    background: #25b3a7;
    color: #ffffff;
    border-color: #25b3a7;
}

/* Status buttons: active (brush on) */
.sps-status-btn.active {
    background: #25b3a7;
    color: #ffffff;
    border-color: #25b3a7;
}

.sps-status-hint {
    font-size: 11px;
    color: #777;
    margin-top: 4px;
}

/* Quick code groups */
.sps-procedure-picker {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.sps-proc-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.sps-proc-groups {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 6px;
}

.sps-proc-group {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 4px;
    background: #fafafa;
}

.sps-proc-group-title {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
}

.sps-proc-group-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sps-proc-btn {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background: #ffffff;
    cursor: pointer;
}

.sps-proc-btn.active {
    background: #25b3a7;
    color: #fff;
    border-color: #25b3a7;
}

.sps-proc-note {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Summary table styles (if not already added) */
.sps-chart-summary {
    margin-top: 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    background: #fff;
}

.sps-summary-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.sps-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sps-summary-table th,
.sps-summary-table td {
    border: 1px solid #e0e0e0;
    padding: 4px 6px;
    text-align: left;
}

.sps-summary-table th {
    background: #f7f7f7;
}

/* Tooth tile holds surfaces */
.sps-tooth { position: relative; }

/* Show surfaces only when tooth is selected (less clutter) */
.sps-tooth .sps-tooth-surfaces { display: none; }
.sps-tooth.selected .sps-tooth-surfaces { display: grid; }

/* 3x3 grid to position B/M/O/D/L like a cross */
.sps-tooth-surfaces {
    position: absolute; inset: 2px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    align-items: center; justify-items: center;
    pointer-events: auto;
}

/* Circles */
.sps-surface {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid #999;
    background: #fff;
    font-size: 10px; line-height: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: 0;
}
/* Positions: B top-center, M mid-left, O center, D mid-right, L bottom-center */
.sps-surface[data-surface="B"] { grid-column: 2; grid-row: 1; }
.sps-surface[data-surface="M"] { grid-column: 1; grid-row: 2; }
.sps-surface[data-surface="O"] { grid-column: 2; grid-row: 2; }
.sps-surface[data-surface="D"] { grid-column: 3; grid-row: 2; }
.sps-surface[data-surface="L"] { grid-column: 2; grid-row: 3; }

/* When a surface is toggled on */
.sps-surface.on {
    background: #25b3a7;
    color: #fff;
    border-color: #25b3a7;
}

/* Small secondary button */
.sps-btn-minor {
    margin-top: 6px;
    font-size: 11px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}

/* Make teeth look like teeth */
/* Tooth tile */
.sps-tooth {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #fff;
    padding: 18px 6px 16px; /* room for icon + number */
    cursor: pointer;
    overflow: hidden;
}

/* Tooth icon – no SVG data URL, just gradients (saves on all hosts) */
.sps-tooth-icon {
    position: absolute;
    inset: 4px 6px 16px 6px;
    border: 1px solid #dcdcdc;
    border-radius: 14px 14px 10px 10px;
    background:
        radial-gradient(ellipse at 50% 28%, #ffffff 60%, #f3f3f3 61%) no-repeat,
        linear-gradient(#ffffff, #fafafa);
    opacity: 0.95;
}

/* Tooth number */
.sps-tooth-number {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #555;
}

/* Paintable surface marks (show after Save) */
.sps-surf-mark {
    position: absolute;
    width: 14px;
    height: 10px;
    border-radius: 3px;
    opacity: 0; /* hidden until toggled on */
    transition: opacity .15s ease;
}

/* Positions: B top-center, M left, O center, D right, L bottom-center */
.sps-surf-mark[data-surf="B"] { top: 4px; left: 50%; transform: translateX(-50%); }
.sps-surf-mark[data-surf="M"] { top: 50%; left: 3px; transform: translateY(-50%); }
.sps-surf-mark[data-surf="O"] { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.sps-surf-mark[data-surf="D"] { top: 50%; right: 3px; transform: translateY(-50%); }
.sps-surf-mark[data-surf="L"] { bottom: 14px; left: 50%; transform: translateX(-50%); }

.sps-surf-mark.on { opacity: .95; }

/* Color of marks follows tooth status */
.sps-tooth.status-existing  .sps-surf-mark.on { background: #1f4fff; }
.sps-tooth.status-defective .sps-surf-mark.on { background: #d62aff; }
.sps-tooth.status-condition .sps-surf-mark.on { background: #666666; }
.sps-tooth.status-proposed  .sps-surf-mark.on { background: #e3342f; }
.sps-tooth.status-watch     .sps-surf-mark.on { background: #ffeb3b; }
.sps-tooth.status-referred  .sps-surf-mark.on { background: #000000; }
.sps-tooth.status-walkout   .sps-surf-mark.on { background: #7e57c2; }
.sps-tooth.status-rejected  .sps-surf-mark.on { background: #111111; }

/* Modal actions row */
.sps-modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

/* Fallback if gap is not supported */
.sps-modal-actions > * + * { margin-left: 8px; }

/* Small secondary button */
.sps-btn-minor {
    font-size: 12px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}

/* default hotspot look (when you’re done aligning, you can hide borders) */
.hotspot {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 10px;
}

/* selected tooth: a clear box */
.hotspot.is-selected {
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 1px;
}

/* status tint classes */
.hotspot.status-existing { background: rgba(0,160,90,.22) !important; }
.hotspot.status-proposed { background: rgba(230,60,60,.22) !important; }
.hotspot.status-refer    { background: rgba(40,120,255,.22) !important; }
/* ===========================
   TOOTH CHART STATUS COLORS
   =========================== */

/* Selected tooth outline */
.hotspot.is-selected {
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 1px;
}

/* Status tint colors */
.hotspot.status-existing { background: rgba(30, 144, 255, 0.25) !important; }  /* Blue */
.hotspot.status-proposed { background: rgba(255, 20, 147, 0.25) !important; } /* Hot Pink */
.hotspot.status-refer    { background: rgba(50, 205, 50, 0.25) !important; }  /* Green */


/* ===========================
   STATUS BUTTON STYLING
   =========================== */

/* Default status button style */
.sps-status-btn {
  transition: all 0.15s ease;
  box-shadow: none;
  transform: translateY(0);
}

/* When active: elevated appearance */
.sps-status-btn.is-active {
  box-shadow: 0px 4px 10px rgba(0,0,0,0.25);
  transform: translateY(-3px);
  border: none !important;
}
.sps-status-btn.is-active{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  filter: brightness(1.05);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.hotspot.status-existing{ outline: 3px solid rgba(0,120,255,.65); }
.hotspot.status-proposed{ outline: 3px solid rgba(255,0,150,.65); }
.hotspot.status-refer{ outline: 3px solid rgba(0,170,90,.65); }

.hotspot{ outline-offset: -3px; } /* keeps it tight to the tooth box */