/* Built 2026-03-20 23:13:57 */
/* ─── Esia Health Design System ──────────────────────────────────────────── */
:root {
  --color-primary:        #059669;
  --color-primary-light:  #10b981;
  --color-primary-dark:   #047857;
  --color-primary-subtle: #d1fae5;
  --color-accent:         #d4a574;
  --color-bg:             #faf9f7;
  --color-bg-card:        #ffffff;
  --color-bg-elevated:    #f5f4f2;
  --color-text:           #1a1a1a;
  --color-text-secondary: #5a5a5a;
  --color-text-muted:     #8a8a8a;
  --color-border:         #e5e3df;
  --color-border-light:   #f0eeea;
  --color-success:        #059669;
  --color-warning:        #d97706;
  --color-error:          #dc2626;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 10px 25px rgba(0,0,0,.06),0 5px 10px rgba(0,0,0,.04);
  --ease:200ms ease;
  --sidebar-w:256px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.6;height: 100%;overflow: hidden;}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
img,svg{display:block}
[hidden]{display:none !important}

/* Layout */
.app-layout{display:flex;min-height:100vh}
.main-content{flex:1;margin-left:var(--sidebar-w);padding:var(--space-8);padding-right:var(--space-3);min-height:100vh;height: 100vh;overflow-y: auto;scrollbar-gutter: stable;}

/* Sidebar */
.sidebar{width:var(--sidebar-w);background:var(--color-bg-card);border-right:1px solid var(--color-border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;overflow-y:auto}
.sidebar-header{padding:var(--space-6);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-3)}
.logo-mark{width:36px;height:36px;background:linear-gradient(135deg,#059669,#10b981);border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 2px 8px rgba(5,150,105,.3);flex-shrink:0}
.logo-text{font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:-.4px}
.sidebar-nav{flex:1;padding:var(--space-4);display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-weight:500;font-size:.9rem;color:var(--color-text-secondary);transition:all var(--ease)}
.nav-item svg{flex-shrink:0}
.nav-item:hover{background:var(--color-bg-elevated);color:var(--color-text)}
.nav-item.active{background:var(--color-primary);color:white;box-shadow:0 2px 8px rgba(5,150,105,.25)}
.nav-item.active:hover{background:var(--color-primary-dark)}
.sidebar-footer{padding:var(--space-4);border-top:1px solid var(--color-border)}
.user-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);transition:background var(--ease)}
.user-card:hover{background:var(--color-bg-elevated)}
.user-avatar{width:36px;height:36px;background:var(--color-primary-subtle);color:var(--color-primary-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0}
.user-details{flex:1;min-width:0}
.user-name{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size:.72rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Mobile header */
.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:60px;background:var(--color-bg-card);border-bottom:1px solid var(--color-border);padding:0 var(--space-4);align-items:center;gap:var(--space-4);z-index:100}
.menu-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--color-text);border-radius:var(--radius-sm)}
.menu-btn:hover{background:var(--color-bg-elevated)}

/* Page header */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-8);gap:var(--space-4);flex-wrap:wrap}
.page-title{font-family:var(--font-display);font-size:1.75rem;font-weight:700;letter-spacing:-.4px;line-height:1.2}
.page-subtitle{margin-top:var(--space-1);font-size:.9rem;color:var(--color-text-muted)}

/* Cards */
.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border)}
.card-title{font-family:var(--font-display);font-size:1.05rem;font-weight:600}
.card-body{padding:var(--space-6)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);border-radius:var(--radius-md);font-family:var(--font-body);font-size:.875rem;font-weight:600;line-height:1.5;border:1px solid transparent;cursor:pointer;transition:all var(--ease);text-decoration:none;white-space:nowrap}
.is-invisible-preserve-space{visibility:hidden;pointer-events:none}
.btn-primary{background:var(--color-primary);color:white;border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:white}
.btn-ghost{background:transparent;color:var(--color-text-secondary);border-color:var(--color-border)}
.btn-ghost:hover{background:var(--color-bg-elevated);color:var(--color-text)}
.btn-disabled-link{opacity:.45;pointer-events:none;cursor:default}
.btn-danger{background:transparent;color:var(--color-error);border-color:var(--color-error)}
.btn-danger:hover{background:#fef2f2}
.btn-sm{padding:var(--space-1) var(--space-3);font-size:.8rem}
.btn-toolbar-sm.btn-sm{height:36px;box-sizing:border-box}
.btn-toolbar-sm--config-add.btn-toolbar-sm{width:135px;min-width:135px;flex-shrink:0;justify-content:center}
.btn-icon{padding:var(--space-2);border-radius:var(--radius-md)}

/* Fields */
.field{display:flex;flex-direction:column;gap:var(--space-1)}
.field-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);font-size:.65rem;}
.field-label{font-size:.78rem;font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em}
.field-required{color:var(--color-error);margin-left:2px}
.field-error-message{font-size:.72rem;font-weight:600;color:var(--color-error);text-transform:none;letter-spacing:normal}
.field-input{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-body);font-size:.9rem;color:var(--color-text);transition:border-color var(--ease),box-shadow var(--ease)}
.field-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(5,150,105,.12)}
.field-input-error,
.field-input[required]:invalid{border-color:#f87171;box-shadow:0 0 0 1px rgba(220,38,38,.12)}
.field-input-error:focus,
.field-input[required]:invalid:focus{border-color:var(--color-error);box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.field-input::placeholder{color:var(--color-text-muted)}
textarea.field-input{resize:vertical;min-height:80px}
select.field-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2rem}
.field-grid{display:grid;gap:var(--space-4)}
.field-grid-2{grid-template-columns:1fr 1fr}
.field-grid-3{grid-template-columns:1fr 1fr 1fr}
.form-section{margin-bottom:var(--space-8)}
.form-section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}
.radio-group{padding:.5rem .75rem;display:flex;flex-wrap:wrap;gap:var(--space-3);padding:.5rem .75rem;}
.radio-group-error{padding:.5rem .75rem;border:1px solid #fecaca;border-radius:var(--radius-md);background:#fff7f7}
.radio-option{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:.9rem}
.radio-option input{accent-color:var(--color-primary)}
.check-label{display:flex;align-items:center;gap:var(--space-2);font-size:.875rem;cursor:pointer}
.check-label input{accent-color:var(--color-primary);width:16px;height:16px}

/* Flash */
#flash{position:fixed;top:var(--space-6);left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:max-content;max-width:min(480px,calc(100vw - 2rem));pointer-events:none}
.flash__message{font-size:.875rem;font-weight:500;padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);animation:appear-then-fade 4s both;pointer-events:auto;box-shadow:var(--shadow-md);white-space:nowrap}
.flash__message--success{background:#1a1a1a;color:white}
.flash__message--error{background:#dc2626;color:white}
@keyframes appear-then-fade{0%,100%{opacity:0;transform:translateY(-8px) scale(.97)}8%,75%{opacity:1;transform:translateY(0) scale(1)}}
.flash-inline{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:.875rem}
.flash-inline.flash-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.flash-inline.flash-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d}

/* Data table */
.config-grid--services{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 6.25rem 14rem;gap:.5rem;align-items:center}
.config-grid--materials{display:grid;grid-template-columns:minmax(0,1fr) 5rem 6.875rem minmax(0,1fr) 14rem;gap:.5rem;align-items:center}
.config-grid__h1,.config-grid__h2,.config-grid__d1,.config-grid__d2{text-align:left;justify-self:stretch}
.config-grid__h3,.config-grid__p{text-align:right;justify-self:end}

.config-grid--materials .config-grid__h3,.config-grid--materials .config-grid__p{text-align:left;justify-self:stretch}
.config-grid--materials .config-grid__p .field-input{text-align:left}
.config-grid__p:has(.field-input){justify-self:stretch}
.config-grid__p .field-input{text-align:right;width:100%;min-width:0}
.config-grid__actions{justify-self:end}
.service-row,.material-row,.patient-row,.diagnosis-row{min-height:54px}
.config-mobile-label{display:none;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:2px}
.config-edit-row{background:#fff;animation:config-edit-row-bg .5s ease-out forwards}
@keyframes config-edit-row-bg{from{background:#fff}to{background:#f0fdf4}}
.config-edit-row .btn-ghost{background:#fff}
.config-edit-row .btn-ghost:hover{background:#f9fafb}
.data-table-container > #diagnoses > turbo-frame:last-child > .config-edit-row,
.data-table-container > #services > turbo-frame:last-child > form,
.data-table-container > #services > turbo-frame:last-child > form > .config-edit-row,
.data-table-container > #materials > turbo-frame:last-child > form,
.data-table-container > #materials > turbo-frame:last-child > form > .config-edit-row{
  border-bottom:none !important;
  border-bottom-left-radius:var(--radius-lg);
  border-bottom-right-radius:var(--radius-lg);
}

.data-table-container{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:visible;box-shadow:var(--shadow-sm)}
.data-table{width:100%;border-collapse:collapse;font-size:.875rem}
.data-table thead{background:var(--color-bg-elevated)}
.data-table th{padding:var(--space-3) var(--space-5);text-align:left;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);white-space:nowrap}
.data-table td{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border-light);vertical-align:middle}
.data-table tbody tr{transition:background var(--ease)}
.data-table tbody tr:hover{background:var(--color-bg-elevated)}
.data-table tbody tr:last-child td{border-bottom:none}
.table-actions{display:flex;align-items:center;gap:var(--space-2);justify-content:flex-end}

/* Search bar */
.search-bar{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}
.search-input-wrap{flex:1;min-width:0;position:relative}
.search-input-wrap svg{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.search-input{width:100%;padding:var(--space-2) var(--space-4) var(--space-2) calc(var(--space-3)*2 + 20px);background:var(--color-bg-elevated);border:1px solid transparent;border-radius:var(--radius-md);font-family:var(--font-body);font-size:.875rem;color:var(--color-text);transition:all var(--ease)}
.search-input:focus{outline:none;border-color:var(--color-primary);background:var(--color-bg-card);box-shadow:0 0 0 3px rgba(5,150,105,.1)}
.search-bar__action{flex-shrink:0}

/* Inline form (hotrails) */
.inline-form-row{background:var(--color-primary-subtle);border-radius:var(--radius-md);padding:var(--space-5);border:1px solid rgba(5,150,105,.2)}
.inline-form-reveal{display:grid;grid-template-rows:0fr;overflow:hidden}
.inline-form-reveal__inner{min-height:0}
.inline-form-reveal-open{grid-template-rows:1fr;opacity:1}
.inline-form-reveal-enter{animation:inline-form-reveal-open .3s ease-out forwards}
@keyframes inline-form-reveal-open{
  from{grid-template-rows:0fr;opacity:0}
  to{grid-template-rows:1fr;opacity:1}
}

/* Patient form — (white card, green accent) */
.patient-inline-card-form .field-input{font-size:.85rem}
.patient-inline-card-form .form-section{margin-bottom:1rem}
.patient-inline-card-form .form-section-title{color:#6b7280;border-bottom-color:#e5e7eb}
.patient-inline-card-form .field-label{color:#374151}
.patient-inline-card-form .radio-option{color:#374151}

/* Info grid */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4)}
.info-item__label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);margin-bottom:var(--space-1)}
.info-item__value{font-size:.9rem;font-weight:500}

/* Badge */
.badge{display:inline-flex;align-items:center;padding:2px var(--space-2);border-radius:var(--radius-full);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.badge-success{background:#d1fae5;color:#065f46}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-error{background:#fee2e2;color:#991b1b}
.badge-neutral{background:var(--color-bg-elevated);color:var(--color-text-secondary)}
.badge-primary{background:var(--color-primary-subtle);color:var(--color-primary-dark)}

/* Section divider */
.section-divider{display:flex;align-items:center;gap:var(--space-4);margin:var(--space-8) 0 var(--space-5)}
.section-divider-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;white-space:nowrap}
.section-divider-line{flex:1;height:1px;background:var(--color-border)}

/* Exam cards */
.exam-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--ease);margin-bottom:var(--space-4)}
.exam-card:hover{box-shadow:var(--shadow-md)}
.exam-card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);background:var(--color-bg-elevated);border-bottom:1px solid var(--color-border);flex-wrap:wrap;gap:var(--space-3)}
.exam-card-meta{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.exam-card-date{font-weight:700;font-size:.95rem}
.exam-card-price{color:var(--color-text-secondary);font-size:.9rem}
.exam-card-actions{display:flex;align-items:center;gap:var(--space-2)}
.tooth-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-3);padding:var(--space-4) var(--space-5)}
.tooth-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);font-size:.8rem}
.tooth-card-num{font-weight:700;font-size:.8rem;color:var(--color-primary);margin-bottom:var(--space-2);padding-bottom:var(--space-1);border-bottom:1px solid var(--color-border)}
.tooth-card-field{color:var(--color-text-secondary);line-height:1.5}
.tooth-card-field strong{color:var(--color-text-muted);text-transform:uppercase;font-size:.65rem;display:block;letter-spacing:.04em}

/* OPG */
.opg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}
.opg-card{position:relative;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:visible;transition:box-shadow var(--ease)}
.opg-card__img{overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.opg-card:hover{box-shadow:var(--shadow-md)}
.opg-card__body{padding:var(--space-3)}
.opg-card__title{font-weight:600;font-size:.875rem}
.opg-card__date{font-size:.72rem;color:var(--color-text-muted);margin-top:2px}
.opg-card__notes{font-size:.78rem;color:var(--color-text-secondary);margin-top:var(--space-2)}
.opg-card__actions{display:flex;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--color-border)}

.confirm-popover{position:relative}
.confirm-popover__form{position:relative;display:inline-flex}
.confirm-popover__panel{
  position:absolute;
  right:0;
  bottom:calc(100% + .55rem);
  width:min(236px,calc(100vw - 2rem));
  padding:.9rem;
  background:var(--color-bg-card);
  border:1px solid rgba(220,38,38,.2);
  border-radius:14px;
  box-shadow:0 18px 35px rgba(15,23,42,.3),0 6px 16px rgba(15,23,42,.2);
  z-index:50;
}
.confirm-popover__panel[hidden]{display:none}
.confirm-popover__panel--align-left{
  left:0;
  right:auto;
}
.confirm-popover__panel::before{
  content:"";
  position:absolute;
  right:16px;
  top:100%;
  border-width:8px 8px 0 8px;
  border-style:solid;
  border-color:rgba(220,38,38,.14) transparent transparent transparent;
}
.confirm-popover__panel::after{
  content:"";
  position:absolute;
  right:17px;
  top:100%;
  border-width:7px 7px 0 7px;
  border-style:solid;
  border-color:var(--color-bg-card) transparent transparent transparent;
}
.confirm-popover__panel--align-left::before{
  left:16px;
  right:auto;
}
.confirm-popover__panel--align-left::after{
  left:17px;
  right:auto;
}
.confirm-popover__icon{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#fef2f2;
  color:var(--color-error);
  margin-bottom:.55rem;
}
.confirm-popover__title{font-size:.9rem;font-weight:700;line-height:1.3}
.confirm-popover__text{margin-top:.2rem;font-size:.78rem;line-height:1.45;color:var(--color-text-secondary)}
.confirm-popover__actions{display:flex;justify-content:flex-end;gap:.45rem;margin-top:.8rem}

/* Tooth chart */
.teeth-grid{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
.tooth-img{width:100%;max-width:52px;cursor:pointer;border-radius:var(--radius-sm);border:2px solid transparent;transition:all var(--ease);padding:2px}
.tooth-img:hover{border-color:var(--color-border);background:var(--color-bg-elevated)}
.tooth-img.active{border-color:var(--color-error);background:#fef2f2}
.tooth-img.has-data{border-color:var(--color-success);background:var(--color-primary-subtle)}
.tooth-img.active.has-data{border-color:var(--color-error);background:#fef2f2}
.tooth-summary{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:.78rem;min-height:28px;transition:all var(--ease)}
.tooth-summary-label{font-weight:600;color:var(--color-text)}
.tooth-has-data-dot{color:var(--color-primary)}
.tooth-field{color:var(--color-text-secondary);line-height:1.4;margin-top:2px}
.tooth-field--prev{color:var(--color-text-muted);font-style:italic}
.tooth-field--prev::before{content:"(prev) ";font-size:.65rem;text-transform:uppercase}
.tooth-field--current{color:var(--color-primary-dark);font-weight:500}
.diagnosis-panel{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin-top:var(--space-4)}
.diagnosis-panel-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin-bottom:var(--space-5)}
.prev-visit-strip{background:var(--color-primary-subtle);border-left:3px solid var(--color-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:var(--space-3) var(--space-4);font-size:.82rem;color:var(--color-primary-dark);margin-bottom:var(--space-4)}
.position-checks{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.diagnosis-checks{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5)}

/* Stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4);margin-bottom:var(--space-8)}
.stat-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;align-items:center;gap:var(--space-4)}
.stat-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon.green{background:#d1fae5;color:#059669}
.stat-icon.blue{background:#dbeafe;color:#2563eb}
.stat-icon.purple{background:#ede9fe;color:#7c3aed}
.stat-icon.amber{background:#fef3c7;color:#d97706}
.stat-value{font-family:var(--font-display);font-size:1.8rem;font-weight:700;line-height:1}
.stat-label{font-size:.82rem;color:var(--color-text-muted);margin-top:var(--space-1)}

/* Auth */
.auth-layout{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-bg);padding:var(--space-8)}
.auth-card{width:100%;max-width:400px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10);box-shadow:var(--shadow-lg)}
.auth-logo{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-8)}
.auth-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:var(--space-2);text-align:center}
.auth-subtitle{font-size:.875rem;color:var(--color-text-muted);text-align:center;margin-bottom:var(--space-6)}

/* Medical */
.medical-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:.8rem;font-weight:500}

/* Utility */
.text-muted{color:var(--color-text-muted)}
.text-small{font-size:.8rem}
.text-danger{color:var(--color-error)}
.text-success{color:var(--color-success)}
.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}
.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}
.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}
.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-4)}
.empty-state{text-align:center;padding:var(--space-12) var(--space-8);color:var(--color-text-muted)}
.empty-state-icon{font-size:2.5rem;margin-bottom:var(--space-4)}
.empty-state-title{font-weight:600;margin-bottom:var(--space-2);color:var(--color-text-secondary)}
.no-print{display:block}
@media print{.no-print{display:none !important}}



/* ─── Patient list rows ───────────────────────────────────────────────────── */
.patient-list-header {
  display: flex;
  align-items: center;
  padding: .5rem 1.25rem;
  gap: var(--space-4);
  border-bottom: 1px solid #f3f4f6;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
}
.patient-list-header__num {
  width: 40px;
  flex-shrink: 0;
}
.patient-list-header__cell {
  min-width: 0;
}
.patient-list-header__cell--last-name,
.patient-row__cell--last-name {
  flex: 1.2;
}
.patient-list-header__cell--first-name,
.patient-row__cell--first-name {
  flex: 1.2;
}
.patient-list-header__cell--phone,
.patient-row__cell--phone {
  flex: 1.5;
}
.patient-list-header__cell--municipality,
.patient-row__cell--municipality {
  flex: 1;
}
.patient-list-header__actions {
  width: 296px;
  flex-shrink: 0;
  text-align: right;
}
.patient-row {
  display: flex;
  align-items: center;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  gap: var(--space-4);
  min-height: 54px;
}
.patient-row__num {
  width: 40px;
  flex-shrink: 0;
  font-size: .8rem;
  color: var(--color-text-muted);
}
.patient-row__cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .875rem;
}
.patient-row__label {
  display: none;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
}
.patient-row__value {
  min-width: 0;
  overflow-wrap: anywhere;
}
.patient-row__value--strong { font-weight: 600; }
.patient-row__muted { color: var(--color-text-secondary); font-size: .82rem; }
.patient-row__actions {
  width: 296px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
/* ─── Diagnosis list rows ─────────────────────────────────────────────────── */
.diagnosis-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  min-height: 54px;
}
.diagnosis-name { font-weight: 600; font-size: .9rem; }



















/* ─── Odontograph dental chart ───────────────────────────────────────────── */
.odontograph-svg {
  width: 100%;
  max-height: 480px;
  height: auto;
  display: block;
}
.odontograph-svg g path {
  filter: drop-shadow(0 .5px 1px rgba(0,0,0,.1));
  transition: all .12s ease;
}
.odontograph-svg g:hover path {
  stroke: var(--color-brand) !important;
  stroke-width: 2 !important;
  fill: #f0fdf4 !important;
}

/* Panel form */
.odonto-tooth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background:
    radial-gradient(circle at top right, rgb(209, 250, 229), rgba(245,244,242,.6) 55%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,244,242,.96));
  border-radius: 20px;
  border: 1px solid rgba(5,150,105,.24);
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  margin-bottom: var(--space-4);
  min-height: 112px;
  overflow: hidden;
}
.odonto-tooth-header__content {
  flex: 1;
  min-width: 0;
}
.odonto-tooth-title {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--color-text);
  letter-spacing: -.5px;
  line-height: 1.1;
}
.odonto-tooth-subtitle {
  margin-top: .35rem;
  color: var(--color-text-muted);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.odonto-tooth-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}
.odonto-tooth-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .4rem .7rem;
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.12);
  color: #334155;
  font-size: .78rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.odonto-tooth-image-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
  border: 1px solid rgba(15,23,42,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 10px 22px rgba(15,23,42,.3),
    0 2px 8px rgba(15,23,42,.2);
}
.odonto-tooth-img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 12px rgba(15,23,42,.16));
}

.odonto-panel-column--empty {
  justify-content: center;
  align-items: center;
}

.odonto-empty-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
}

.odonto-empty-hint p {
  margin: 0;
}









/* ─── Examination history log ────────────────────────────────────────────── */
.exam-history-log {
  padding: var(--space-4) var(--space-5);
  max-height: 360px;
  overflow-y: auto;
}
.exam-log-item {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.exam-log-item:last-child { padding-bottom: 0; }
.exam-log-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
}
.exam-log-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  border: 2px solid var(--color-bg-card);
  outline: 2px solid var(--color-border);
  flex-shrink: 0;
  margin-top: 4px;
}
.exam-log-dot--latest {
  background: var(--color-brand);
  outline-color: var(--color-brand);
}
.exam-log-line {
  width: 2px;
  flex: 1;
  min-height: 12px;
  background: var(--color-border-light);
  margin: 4px 0;
}
.exam-log-content {
  flex: 1;
  min-width: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}
.exam-log-item:last-child .exam-log-content { border-bottom: none; padding-bottom: 0; }
.exam-log-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.exam-log-date {
  font-weight: 600;
  font-size: .85rem;
  color: var(--color-text);
}
.exam-log-price {
  font-size: .8rem;
  color: var(--color-text-secondary);
}
.exam-log-teeth {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.exam-log-tooth {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  padding: .3rem .5rem;
  font-size: .78rem;
}
.exam-log-tooth-num {
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--color-brand);
  min-width: 24px;
  flex-shrink: 0;
}
.exam-log-tooth-detail {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  flex: 1;
}
.exam-log-field {
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.exam-log-field em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 3px;
}









/* Position pills — only 4, stay horizontal */

.odonto-pills--pos 


/* ─── Odontograph panel rows & pills ─────────────────────────────────────── */
.odonto-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .6rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--color-border-light);
}
.odonto-row:last-of-type {
  border-bottom: none;
  margin-bottom: .875rem;
}
.odonto-row-label {
  width: 80px;
  min-width: 80px;
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  padding-top: .25rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.odonto-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .25rem;
  flex: 1;
}
.odonto-pills--pos {
  display: flex;
  gap: .3rem;
  flex: 1;
}
.odonto-pill {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .5rem;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: .74rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  cursor: pointer;
  user-select: none;
  line-height: 1.3;
  transition: border-color .1s, background .1s, color .1s;
}
.odonto-pills--pos .odonto-pill {
  min-width: 38px;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
}
.odonto-pill input[type="checkbox"] {
  display: none;
}
.odonto-pill:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: #f0fdf4;
}
.odonto-pill.checked {
  border-color: var(--color-brand);
  background: #f0fdf4;
  color: var(--color-brand);
  font-weight: 600;
}

.odonto-save-button {
  width: 100%;
  margin-top: .75rem;
  padding: .6rem;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  background: #fff;
  color: #065f46;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.odonto-save-button:hover {
  background: #fff;
  border-color: var(--color-primary-dark);
  box-shadow: 0 6px 16px rgba(74, 222, 128, .2);
  transform: translateY(-0.5px);
}

.odonto-save-button:disabled {
  /* cursor: not-allowed; */
  opacity: .4;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transform: none;
}

.odonto-save-button:disabled:hover {
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transform: none;
}

.odonto-save-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .18), 0 8px 20px rgba(5, 150, 105, .14);
}

.odonto-save-button__icon {
  flex-shrink: 0;
  color: var(--color-primary);
  transform-origin: center;
}

.odonto-save-button[data-state="saved"] {
  background: #f0fdf4;
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  box-shadow: 0 10px 22px rgba(5, 150, 105, .16);
}

.odonto-save-button[data-state="saved"]:disabled {
  opacity: 1;
  box-shadow: 0 6px 14px rgba(5, 150, 105, .1);
}

.odonto-save-button[data-state="saved"]:hover {
  background: #ecfdf5;
  border-color: #047857;
}

.odonto-save-button[data-state="saved"]:disabled:hover {
  background: #f0fdf4;
  border-color: var(--color-primary-dark);
  box-shadow: 0 6px 14px rgba(5, 150, 105, .1);
}

.odonto-save-button[data-state="saved"] .odonto-save-button__icon {
  color: #059669;
}



trix-toolbar .trix-button-group:has(.trix-button--icon-attach),
trix-toolbar .trix-button-group:has(.trix-button--icon-undo) {
  display: none !important;
}

.odonto-notes-richtext trix-toolbar,
trix-toolbar#trix-toolbar-tooth_notes_editor_input {
  border: 1.5px solid #e5e7eb;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.odonto-notes-richtext trix-toolbar .trix-button-group,
trix-toolbar#trix-toolbar-tooth_notes_editor_input .trix-button-group {
  border-color: #e5e7eb;
}

.odonto-notes-richtext trix-toolbar .trix-button,
trix-toolbar#trix-toolbar-tooth_notes_editor_input .trix-button {
  background: #fff;
}

.odonto-notes-richtext trix-toolbar .trix-button.trix-active,
trix-toolbar#trix-toolbar-tooth_notes_editor_input .trix-button.trix-active {
  background: #f0fdf4;
  color: var(--color-primary);
}

trix-editor.odonto-trix-editor {
  min-height: 110px;
  border: 1.5px solid #e5e7eb !important;
  border-top: 0;
  border-radius: 8px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: #fff !important;
  color: #1a1a1a;
  font-size: .9rem;
  line-height: 1.5;
  padding-left:16px
}

trix-editor.odonto-trix-editor:focus {
  border-color: var(--color-primary);
  background: #f0fdf4 !important;

  box-shadow: 0 0 0 1px rgb(5, 150, 105);
}

@media (max-width:1024px){
  .mobile-header{display:flex}
  .sidebar{transform:translateX(-100%);transition:transform .3s ease}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:150;border:none}
  .main-content{margin-left:0;padding:var(--space-4);padding-top:calc(60px + var(--space-4))}
  .page-title{font-size:1.55rem}
}

@media (max-width:900px){
  .patients-page .search-bar{
    flex-wrap: wrap;
    align-items: stretch;
  }
  .patients-page .search-input-wrap{
    flex-basis: 100%;
  }
  .patients-page .patient-list-header{
    display: none;
  }
  .patients-page turbo-frame{
    display: block;
  }
  .patients-page #patients{
    padding: var(--space-3);
  }
  .patients-page .patient-row{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
  }
  .patients-page .patient-row:last-child{
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .patients-page .patient-row__num{
    grid-column: 1 / -1;
    width: auto;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }
  .patients-page .patient-row__label{
    display: block;
  }
  .patients-page .patient-row__actions{
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
  }
  .patients-page .confirm-popover__form{
    max-width: 100%;
  }

  .services-page .search-bar,
  .materials-page .search-bar,
  .diagnoses-page .search-bar{
    flex-wrap: wrap;
    align-items: stretch;
  }
  .services-page .services-list-header,
  .materials-page .materials-list-header,
  .diagnoses-page .diagnoses-list-header{
    display: none;
  }
  .services-page turbo-frame,
  .materials-page turbo-frame,
  .diagnoses-page turbo-frame{
    display: block;
  }
  .services-page #services,
  .materials-page #materials,
  .diagnoses-page #diagnoses{
    padding: var(--space-3);
  }
  .services-page .service-row,
  .materials-page .material-row,
  .diagnoses-page .diagnosis-row{
    align-items: start;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    padding: var(--space-4) !important;
    border: 1px solid var(--color-border) !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-sm);
  }
  .services-page .service-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .services-page .config-edit-row.config-grid--services,
  .materials-page .config-edit-row.config-grid--materials{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
  }
  .services-page .config-grid__p{
    text-align: left;
    justify-self: stretch;
  }
  .services-page .config-edit-row .config-grid__p .field-input,
  .materials-page .config-edit-row .config-grid__p .field-input{
    text-align: left;
  }
  .materials-page .material-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .diagnoses-page .diagnosis-row{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .services-page .config-mobile-label,
  .materials-page .config-mobile-label,
  .diagnoses-page .config-mobile-label{
    display: block;
  }
  .diagnosis-main{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .services-page .config-grid__actions,
  .materials-page .config-grid__actions,
  .services-page .config-edit-row .config-grid__actions,
  .materials-page .config-edit-row .config-grid__actions,
  .diagnoses-page .table-actions{
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start !important;
  }
  .services-page .confirm-popover__form,
  .materials-page .confirm-popover__form,
  .diagnoses-page .confirm-popover__form{
    max-width: 100%;
  }
}

@media (max-width:768px){
  .field-grid-2,.field-grid-3{grid-template-columns:1fr}
  .page-header{flex-direction:column;align-items:flex-start}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .odonto-tooth-header{padding:var(--space-3);border-radius:18px;align-items:flex-start}
  .odonto-tooth-title{font-size:1.3rem}
  .odonto-tooth-image-shell{width:78px;height:78px;border-radius:16px}
  .odonto-tooth-img{width:68px;height:68px}
}

@media (max-width:640px){
  .main-content{
    padding: var(--space-3);
    padding-top: calc(60px + var(--space-3));
  }
  .patients-page .data-table-container{
    border-radius: var(--radius-md);
  }
  .patients-page .search-bar{
    padding: var(--space-3);
  }
  .patients-page .search-bar__action{
    width: 100%;
  }
  .patients-page .search-bar__action.btn{
    width: 100%;
  }
  .services-page .data-table-container,
  .materials-page .data-table-container,
  .diagnoses-page .data-table-container{
    border-radius: var(--radius-md);
  }
  .data-table-container > #diagnoses > turbo-frame:last-child > .config-edit-row,
  .data-table-container > #services > turbo-frame:last-child > form,
  .data-table-container > #services > turbo-frame:last-child > form > .config-edit-row,
  .data-table-container > #materials > turbo-frame:last-child > form,
  .data-table-container > #materials > turbo-frame:last-child > form > .config-edit-row{
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .services-page .search-bar,
  .materials-page .search-bar,
  .diagnoses-page .search-bar{
    padding: var(--space-3);
  }
  .services-page .search-bar__action,
  .materials-page .search-bar__action,
  .diagnoses-page .search-bar__action,
  .services-page .search-bar__action.btn,
  .materials-page .search-bar__action.btn,
  .diagnoses-page .search-bar__action.btn{
    width: 100%;
  }
  .patients-page .patient-row{
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .services-page .service-row,
  .materials-page .material-row,
  .diagnoses-page .diagnosis-row{
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) !important;
  }
  .services-page .config-edit-row.config-grid--services,
  .materials-page .config-edit-row.config-grid--materials{
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) !important;
  }
  .patients-page #patients{
    padding: var(--space-2);
  }
  .services-page #services,
  .materials-page #materials,
  .diagnoses-page #diagnoses{
    padding: var(--space-2);
  }
  .patients-page .table-actions{
    gap: var(--space-2);
  }
  .services-page .config-grid__actions,
  .materials-page .config-grid__actions,
  .diagnoses-page .table-actions{
    gap: var(--space-2) !important;
  }
}