:root
{
  color-scheme: light;
  --page: #f6f4ef;
  --surface: #ffffff;
  --surface-soft: #f0ede5;
  --ink: #302c25;
  --muted: #746d60;
  --line: #e8e2d6;
  --jade: #51483a;
  --jade-dark: #302a22;
  --jade-soft: #f8edcc;
  --coral: #e88168;
  --coral-soft: #fff0eb;
  --yellow: #d3a92f;
  --yellow-soft: #fff4d5;
  --paw-mark: rgba(48, 42, 34, .045);
  --paw-highlight: rgba(238, 195, 72, .16);
  --paw-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='%23302a22' fill-opacity='.045'%3E%3Cellipse cx='76' cy='72' rx='6' ry='9' transform='rotate(-25 76 72)'/%3E%3Cellipse cx='91' cy='64' rx='6' ry='9' transform='rotate(-8 91 64)'/%3E%3Cellipse cx='107' cy='64' rx='6' ry='9' transform='rotate(8 107 64)'/%3E%3Cellipse cx='122' cy='72' rx='6' ry='9' transform='rotate(25 122 72)'/%3E%3Cellipse cx='99' cy='96' rx='16' ry='12'/%3E%3C/g%3E%3C/svg%3E");
  --paw-pattern-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='%23eec348' fill-opacity='.075'%3E%3Cellipse cx='76' cy='72' rx='6' ry='9' transform='rotate(-25 76 72)'/%3E%3Cellipse cx='91' cy='64' rx='6' ry='9' transform='rotate(-8 91 64)'/%3E%3Cellipse cx='107' cy='64' rx='6' ry='9' transform='rotate(8 107 64)'/%3E%3Cellipse cx='122' cy='72' rx='6' ry='9' transform='rotate(25 122 72)'/%3E%3Cellipse cx='99' cy='96' rx='16' ry='12'/%3E%3C/g%3E%3C/svg%3E");
  --blue: #6385a5;
  --blue-soft: #eaf0f6;
  --shadow: 0 14px 38px rgba(48, 42, 34, .09);
  --font: 'DM Sans', sans-serif;
  --display: 'Manrope', sans-serif;
  --radius: 10px;
}
*, *::before, *::after
{
  box-sizing: border-box;
}
[hidden]
{
  display: none !important;
}
html
{
  min-width: 320px;
  background: var(--page);
  scroll-behavior: smooth;
}
body
{
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea
{
  font: inherit;
}
button
{
  color: inherit;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible
{
  outline: 3px solid rgba(211, 169, 47, .58);
  outline-offset: 2px;
}
button:disabled
{
  cursor: not-allowed;
  opacity: .48;
}
svg
{
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}
.app-shell
{
  min-height: 100vh;
}
.sidebar
{
  position: fixed;
  z-index: 10;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: 244px;
  padding: 29px 17px 17px;
  background: #fff;
  border-right: 1px solid var(--line);
}
.brand
{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 9px;
  color: inherit;
  text-decoration: none;
}
.brand-mark
{
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  color: #fff;
  background: var(--jade);
  border-radius: 13px 13px 13px 5px;
  transform: rotate(-3deg);
}
.brand-mark svg
{
  width: 22px;
  height: 22px;
  transform: rotate(3deg);
}
.brand-logo
{
  display: block;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 50%;
}
.auth-brand
{
  justify-content: center;
}
.auth-brand .brand-logo
{
  width: 122px;
  height: 122px;
  margin: -5px auto 0;
}
.brand-copy
{
  display: grid;
  line-height: 1.15;
}
.brand-copy strong
{
  font: 800 18px var(--display);
  letter-spacing: 0;
}
.brand-copy small
{
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .5px;
}
.nav-label
{
  margin: 48px 10px 12px;
  color: #a2aaa4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.25px;
}
.side-nav
{
  display: grid;
  gap: 5px;
}
.nav-item
{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 45px;
  padding: 0 11px;
  text-align: left;
  color: #758078;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.nav-item > svg
{
  width: 17px;
  height: 17px;
}
.nav-item span:nth-child(2)
{
  flex: 1;
  font-weight: 600;
}
.nav-item:hover
{
  color: var(--jade-dark);
  background: #f8f2e2;
}
.nav-item.active
{
  color: var(--jade-dark);
  background: var(--jade-soft);
}
.nav-item.active::before
{
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -17px;
  width: 3px;
  background: var(--jade);
  border-radius: 0 3px 3px 0;
  content: '';
}
.nav-count
{
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  color: var(--jade-dark);
  background: var(--yellow-soft);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
}
.nav-dot
{
  width: 8px;
  height: 8px;
  background: var(--coral);
  border-radius: 50%;
}
.sidebar-bottom
{
  margin-top: auto;
}
.sidebar-note
{
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 2px 18px;
  padding: 14px 12px;
  background: #f8f5ed;
  border-radius: 7px;
}
.note-icon
{
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #b8853e;
  background: #f2e8d5;
  border-radius: 8px;
}
.note-icon svg
{
  width: 17px;
  height: 17px;
}
.sidebar-note p
{
  margin: 0;
  color: #77766e;
  font-size: 11px;
  line-height: 1.55;
}
.sidebar-note strong
{
  color: #424940;
  font-weight: 700;
}
.profile-row
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 5px 2px;
  border-top: 1px solid var(--line);
}
.profile-avatar, .top-avatar
{
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--jade-dark);
  background: var(--yellow-soft);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.profile-row > div:nth-child(2)
{
  display: grid;
  flex: 1;
}
.profile-row strong
{
  font-size: 11px;
}
.profile-row small
{
  color: var(--muted);
  font-size: 10px;
}
.profile-row > svg
{
  width: 17px;
  color: #9aa39d;
}
.main-area
{
  min-height: 100vh;
  margin-left: 244px;
  background: #eeeae2;
}
.app-shell.sidebar-collapsed .sidebar
{
  width: 72px;
  padding-right: 10px;
  padding-left: 10px;
}
.app-shell.sidebar-collapsed .sidebar .brand
{
  justify-content: center;
  padding: 0;
}
.app-shell.sidebar-collapsed .sidebar .brand-copy, .app-shell.sidebar-collapsed .sidebar .nav-label,
.app-shell.sidebar-collapsed .sidebar .nav-item span, .app-shell.sidebar-collapsed .sidebar .sidebar-bottom
{
  display: none;
}
.app-shell.sidebar-collapsed .sidebar .side-nav
{
  margin-top: 48px;
}
.app-shell.sidebar-collapsed .sidebar .nav-item
{
  justify-content: center;
  padding: 0;
}
.app-shell.sidebar-collapsed .sidebar .nav-item.active::before
{
  left: -10px;
}
.app-shell.sidebar-collapsed .main-area
{
  margin-left: 72px;
}
.sidebar-toggle
{
  flex: 0 0 36px;
}
.topbar
{
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 clamp(22px, 4vw, 58px);
  background: rgba(246, 244, 239, .96);
  border-bottom: 1px solid rgba(229, 224, 213, .88);
  backdrop-filter: blur(14px);
}
.topbar-actions
{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.app-shell.employee-app .topbar-actions
{
  justify-content: flex-end;
}
.global-search
{
  display: flex;
  align-items: center;
  gap: 9px;
  width: 244px;
  height: 37px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.global-search > svg
{
  flex: 0 0 16px;
  width: 16px;
  color: #9aa39d;
}
.global-search input
{
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 11px;
}
.global-search input::placeholder
{
  color: #a1aaa3;
}
.global-search kbd
{
  padding: 1px 4px;
  color: #98a19a;
  background: #f5f6f2;
  border: 1px solid #edf0e9;
  border-radius: 3px;
  font: 10px var(--font);
  white-space: nowrap;
}
.icon-button
{
  display: inline-grid;
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #758078;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.icon-button:hover
{
  color: var(--jade-dark);
  border-color: var(--yellow);
}
.icon-button svg
{
  width: 17px;
  height: 17px;
}
.top-avatar
{
  flex-basis: 33px;
  width: 33px;
  height: 33px;
}
.page-wrap
{
  width: 100%;
  max-width: 1500px;
  min-height: calc(100vh - 70px);
  margin: 0 auto;
  padding: 35px clamp(22px, 4vw, 58px) 56px;
  background-image: var(--paw-pattern);
  background-attachment: fixed;
  background-repeat: repeat;
  background-size: 300px 300px;
}
.welcome-row
{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
  animation: enter .42s ease both;
}
.welcome-row > .button
{
  min-height: 37px;
  padding-right: 12px;
  padding-left: 12px;
  font-size: 10px;
}
.eyebrow
{
  color: var(--jade);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.35px;
}
.welcome-row h1, .page-heading h1
{
  margin: 5px 0 4px;
  font: 700 27px/1.25 var(--display);
  letter-spacing: 0;
}
.sun-mark
{
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-left: 3px;
  color: var(--coral);
  vertical-align: -1px;
}
.welcome-row p, .page-heading p
{
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.button
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 39px;
  padding: 0 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: transform .18s, background .18s, border-color .18s;
}
.button:hover
{
  transform: translateY(-1px);
  border-color: #cbd9cf;
}
.button svg
{
  width: 15px;
  height: 15px;
}
.button-primary
{
  color: #302a22;
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 4px 10px rgba(150, 112, 19, .18);
}
.button-primary:hover
{
  color: #211d17;
  background: #e0b842;
  border-color: #e0b842;
}
.button-quiet
{
  color: #6f7b73;
  background: transparent;
}
.button-small
{
  min-height: 31px;
  padding: 0 10px;
  font-size: 10px;
}
.button-text
{
  min-height: 30px;
  padding: 0 4px;
  color: var(--jade);
  background: transparent;
  border: 0;
  font-size: 11px;
}
.button-text:hover
{
  transform: none;
  color: var(--jade-dark);
}
.button-coral
{
  color: #b25c49;
  background: var(--coral-soft);
  border-color: #f7d7ce;
}
.stats-grid
{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 18px;
  animation: enter .48s .04s ease both;
}
.stat-card
{
  min-width: 0;
  padding: 17px 17px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(41, 61, 49, .02);
}
.stat-top
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.stat-icon
{
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: var(--jade-dark);
  background: var(--yellow-soft);
  border-radius: 7px;
}
.stat-icon svg
{
  width: 15px;
  height: 15px;
}
.stat-icon.coral
{
  color: var(--coral);
  background: var(--coral-soft);
}
.stat-icon.yellow
{
  color: var(--yellow);
  background: var(--yellow-soft);
}
.stat-icon.blue
{
  color: var(--blue);
  background: var(--blue-soft);
}
.stat-value
{
  margin-top: 11px;
  font: 700 25px/1.1 var(--display);
}
.stat-foot
{
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: #929b94;
  font-size: 10px;
}
.stat-foot svg
{
  width: 12px;
  height: 12px;
  color: var(--jade);
}
.stat-foot.attention svg
{
  color: var(--coral);
}
.dashboard-grid
{
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(265px, .9fr);
  gap: 16px;
  align-items: start;
}
.panel
{
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(41, 61, 49, .02);
}
.panel + .panel
{
  margin-top: 15px;
}
.panel-head
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid #eff1ec;
}
.panel-head h2, .panel-title
{
  margin: 0;
  font: 700 13px var(--display);
  letter-spacing: 0;
}
.panel-head p
{
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.panel-head-actions
{
  display: flex;
  align-items: center;
  gap: 7px;
}
.text-link
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--jade);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.text-link svg
{
  width: 13px;
  height: 13px;
}
.table-wrap
{
  width: 100%;
  overflow-x: auto;
}
table
{
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
}
.dashboard-grid .table-wrap table
{
  min-width: 0;
  table-layout: fixed;
}
.dashboard-grid .table-wrap th, .dashboard-grid .table-wrap td
{
  padding-right: 8px;
  padding-left: 8px;
}
.dashboard-grid .table-wrap th:first-child, .dashboard-grid .table-wrap td:first-child
{
  width: 39%;
  padding-left: 13px;
}
.dashboard-grid .table-wrap th:nth-child(2), .dashboard-grid .table-wrap td:nth-child(2)
{
  width: 14%;
}
.dashboard-grid .table-wrap th:nth-child(3), .dashboard-grid .table-wrap td:nth-child(3)
{
  width: 23%;
}
.dashboard-grid .table-wrap th:nth-child(4), .dashboard-grid .table-wrap td:nth-child(4)
{
  width: 17%;
}
.dashboard-grid .table-wrap th:last-child, .dashboard-grid .table-wrap td:last-child
{
  width: 7%;
  padding-right: 4px;
  padding-left: 4px;
}
.dashboard-grid .pet-cell > span:last-child
{
  min-width: 0;
  overflow: hidden;
}
.dashboard-grid .pet-cell small
{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-service
{
  display: none;
}
.dashboard-grid .service-cell
{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
th
{
  height: 37px;
  padding: 0 13px;
  color: #939d95;
  background: #fbfcfa;
  border-bottom: 1px solid #eff1ec;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .55px;
  text-transform: uppercase;
}
th:first-child, td:first-child
{
  padding-left: 15px;
}
td
{
  height: 57px;
  padding: 9px 13px;
  border-bottom: 1px solid #f0f2ed;
  font-size: 11px;
}
tbody tr:last-child td
{
  border-bottom: 0;
}
tbody tr:hover
{
  background: #fcfdfa;
}
.pet-cell
{
  display: flex;
  align-items: center;
  gap: 9px;
}
.pet-avatar
{
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  color: var(--jade-dark);
  background: var(--yellow-soft);
  border-radius: 9px;
  font: 700 11px var(--display);
}
.pet-avatar.coral
{
  color: #a85948;
  background: #fceae4;
}
.pet-avatar.yellow
{
  color: #9e753c;
  background: #f8efd9;
}
.pet-avatar.blue
{
  color: #58738c;
  background: #e8eef4;
}
.pet-cell strong, .client-cell strong
{
  display: block;
  color: #39473f;
  font-size: 11px;
  font-weight: 700;
}
.pet-cell small, .client-cell small
{
  display: block;
  margin-top: 2px;
  color: #96a098;
  font-size: 9px;
}
.time-cell
{
  color: #556159;
  font-weight: 700;
}
.service-cell
{
  color: #657168;
}
.status-pill
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
}
.status-pill::before
{
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  content: '';
}
.reminder-delivery-status
{
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.status-done
{
  color: #397657;
  background: #e9f4eb;
}
.status-progress
{
  color: #ad7727;
  background: #fff2d9;
}
.status-scheduled
{
  color: #667d95;
  background: #edf2f7;
}
.status-cancelled
{
  color: #a46b60;
  background: #fbefec;
}
.payment-pill
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
button.payment-pill
{
  cursor: pointer;
}
.payment-pill.paid
{
  color: #397657;
  background: #e9f4eb;
}
.payment-pill.pending
{
  color: #ad7727;
  background: #fff2d9;
}
.payment-pill.not-applicable
{
  color: #909b92;
  background: #f0f2ed;
}
button.payment-pill:hover
{
  border-color: currentColor;
}
.row-action
{
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: #849087;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}
.row-action:hover
{
  color: var(--jade-dark);
  background: var(--yellow-soft);
}
.row-action svg
{
  width: 15px;
  height: 15px;
}
.agenda-list
{
  padding: 5px 17px 10px;
}
.agenda-item
{
  position: relative;
  display: grid;
  grid-template-columns: 46px 15px 1fr;
  gap: 9px;
  min-height: 66px;
  padding: 12px 0 8px;
}
.agenda-item:not(:last-child)::after
{
  position: absolute;
  top: 31px;
  bottom: -6px;
  left: 60px;
  width: 1px;
  background: #e9ede7;
  content: '';
}
.agenda-time
{
  padding-top: 1px;
  color: #7f8b82;
  font-size: 10px;
  font-weight: 700;
}
.agenda-marker
{
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  background: #70a28a;
  border: 2px solid #e0ede4;
  border-radius: 50%;
}
.agenda-item.is-next .agenda-marker
{
  background: var(--coral);
  border-color: #f8e0d9;
}
.agenda-copy
{
  min-width: 0;
}
.agenda-copy strong
{
  display: block;
  color: #45524a;
  font-size: 10px;
}
.agenda-copy span
{
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #8a958c;
  font-size: 9px;
  text-overflow: ellipsis;
}
.agenda-empty
{
  padding: 22px 4px;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}
.stock-alert-list
{
  padding: 4px 16px;
}
.stock-alert
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #f0f2ed;
}
.stock-alert:last-child
{
  border: 0;
}
.stock-alert-name
{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.stock-alert-icon
{
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #bd765c;
  background: var(--coral-soft);
  border-radius: 7px;
}
.stock-alert-icon svg
{
  width: 15px;
  height: 15px;
}
.stock-alert-name strong
{
  display: block;
  max-width: 145px;
  overflow: hidden;
  color: #526057;
  font-size: 10px;
  text-overflow: ellipsis;
}
.stock-alert-name small
{
  display: block;
  color: #a2aaa3;
  font-size: 9px;
}
.stock-level
{
  flex: 0 0 auto;
  color: #c16f58;
  font-size: 10px;
  font-weight: 700;
}
.stock-empty
{
  padding: 14px 0;
  color: #7a8c7e;
  font-size: 10px;
}
.page-heading
{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  animation: enter .4s ease both;
}
.page-heading > .button,
.heading-actions > .button
{
  min-height: 37px;
  padding: 0 12px;
  font-size: 10px;
}
.heading-actions
{
  display: flex;
  align-items: center;
  gap: 8px;
}
.appointment-toolbar
{
  flex-wrap: nowrap;
  align-items: center;
}
.appointment-filter-controls
{
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.appointment-filter-controls .filter-search
{
  flex: 1 1 220px;
  width: auto;
  min-width: 160px;
}
.appointment-filter-controls .filter-select
{
  flex: 0 1 160px;
  min-width: 120px;
}
.appointment-heading-actions
{
  flex: 0 0 auto;
  align-self: center;
  gap: 4px;
}
.page-heading h1
{
  font-size: 25px;
}
.filter-bar
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
}
.list-toolbar
{
  flex-wrap: nowrap;
  gap: 10px;
}
.list-toolbar .filter-search
{
  flex: 1 1 auto;
  width: auto;
  min-width: 180px;
}
.filter-search
{
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(280px, 100%);
  height: 37px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.filter-search svg
{
  width: 15px;
  height: 15px;
  color: #99a39b;
}
.filter-search input
{
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  font-size: 11px;
}
.filter-select
{
  height: 37px;
  padding: 0 34px 0 10px;
  color: #68756c;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 10px;
}
select
{
  padding-right: 34px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2368756c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
select:hover
{
  border-color: #d3a92f;
}
select::-ms-expand
{
  display: none;
}
.full-table
{
  overflow: hidden;
}
.empty-state
{
  display: grid;
  grid-column: 1 / -1;
  align-content: center;
  justify-items: center;
  min-height: min(45vh, 360px);
  padding: 42px 18px;
  color: var(--muted);
  text-align: center;
}
.empty-state svg
{
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  color: #91af9b;
}
.empty-state strong
{
  display: block;
  color: #536057;
  font-size: 12px;
}
.empty-state p
{
  margin: 4px 0 0;
  font-size: 10px;
}
.client-grid
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.client-card
{
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.client-avatar
{
  display: grid;
  flex: 0 0 39px;
  place-items: center;
  width: 39px;
  height: 39px;
  color: #8c674b;
  background: #f2e9dd;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.client-card-main
{
  flex: 1;
  min-width: 0;
}
.client-card-main strong
{
  display: block;
  overflow: hidden;
  font: 700 12px var(--display);
  text-overflow: ellipsis;
}
.client-card-main > span
{
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.taxi-dog-note
{
  display: block;
  margin-top: 4px;
  color: var(--jade);
  font-size: 9px;
  font-weight: 700;
}
.pet-service-history
{
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.pet-service-history strong
{
  color: var(--muted);
  font-size: 9px;
}
.pet-service-history small
{
  color: var(--muted);
  font-size: 9px;
}
.client-pets
{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.pet-chip
{
  padding: 3px 7px;
  color: #55715e;
  background: #edf3ed;
  border-radius: 4px;
  font-size: 9px;
}
.pet-chip-button
{
  border: 0;
  cursor: pointer;
}
.pet-chip-button:hover
{
  color: var(--jade-dark);
  background: var(--yellow-soft);
}
.client-card
{
  align-items: flex-start;
}
.client-card-actions
{
  display: grid;
  justify-items: end;
  gap: 4px;
}
.pet-record-packages
{
  display: grid;
  gap: 6px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.pet-record-packages > strong
{
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pet-record-packages > span
{
  color: var(--muted);
  font-size: 9px;
}
.client-card-main:not(:has(.pet-record-packages)) .client-pets
{
  margin-bottom: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.client-card-main:not(:has(.pet-record-packages)):has(.taxi-dog-note) .client-pets
{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.client-card-main:not(:has(.pet-record-packages)) .taxi-dog-note
{
  margin: 9px 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.appointment-packages
{
  margin-top: 23px;
}
.appointment-packages-heading
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.appointment-packages-heading h2
{
  margin: 2px 0 0;
  font: 700 20px var(--display);
}
.appointment-packages-heading p
{
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.package-grid
{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 13px;
}
.package-card
{
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  justify-self: stretch;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.package-card-heading
{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.package-heading-actions
{
  display: flex;
  align-items: center;
  gap: 5px;
}
.package-card-heading h2
{
  margin: 3px 0 0;
  font: 700 16px var(--display);
}
.package-card-heading p
{
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.package-schedule
{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.package-schedule svg
{
  width: 13px;
  height: 13px;
  color: var(--jade);
}
.package-payment
{
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
}
.package-payment.paid
{
  color: #397657;
  background: #e9f4eb;
}
.package-payment.pending
{
  color: #ad7727;
  background: #fff2d9;
}
.package-card-prices
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 10px;
}
.package-card-prices > span
{
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 9px;
}
.package-card-prices strong
{
  color: var(--ink);
  font-size: 11px;
}
.package-observation
{
  margin: 10px 0;
  padding: 9px 10px;
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: 5px;
  font-size: 10px;
  white-space: pre-line;
}
.package-progress
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
}
.package-progress > strong
{
  color: var(--muted);
  font-size: 10px;
}
.package-renewal
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 9px;
}
.package-renewal button
{
  padding: 4px 0;
  color: var(--jade);
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.package-renewal button:hover
{
  text-decoration: underline;
}
.package-slots
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}
.timeclock-location, .timeclock-status
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 16px;
}
.timeclock-location strong, .timeclock-status strong
{
  display: block;
  color: var(--ink);
  font-size: 12px;
}
.timeclock-location p, .timeclock-status p
{
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.timeclock-status .eyebrow
{
  display: block;
  margin-bottom: 4px;
}
.timeclock-hint
{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -5px 0 16px;
  color: var(--muted);
  font-size: 10px;
}
.timeclock-hint svg
{
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: var(--jade);
}
.timeclock-records
{
  margin-top: 22px;
}
.timeclock-records h2
{
  margin: 0 0 10px;
  font: 700 17px var(--display);
}
.timeclock-records td small
{
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}
.time-entry-open
{
  color: var(--yellow);
  font-weight: 700;
}
.time-entry-correction
{
  color: var(--coral) !important;
}
.package-slot
{
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 9px;
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.package-slot:not(:disabled):hover
{
  border-color: var(--yellow);
}
.package-slot-number
{
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}
.package-slot strong
{
  overflow: hidden;
  color: var(--ink);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.package-slot small
{
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.package-slot.used
{
  color: #397657;
  background: #e9f4eb;
  border-color: #c6dfcc;
  cursor: default;
}
.package-slot.used strong
{
  color: #397657;
}
.client-phone
{
  color: var(--jade);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.client-phone:hover
{
  text-decoration: underline;
}
.service-price
{
  display: block;
  margin-top: 2px;
  color: #89968d;
  font-size: 9px;
}
.settings-panel
{
  margin-bottom: 14px;
  overflow: hidden;
}
.settings-panel .table-wrap
{
  padding: 5px 0;
}
.settings-panel table
{
  min-width: 570px;
}
.service-name-field input, .price-field input
{
  width: 100%;
  min-width: 70px;
  height: 33px;
  padding: 0 8px;
  color: var(--ink);
  background: #fcfdfa;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11px;
}
.service-name-field
{
  display: block;
  min-width: 180px;
}
.price-field
{
  display: block;
  width: 90px;
}
.settings-actions
{
  display: flex;
  justify-content: flex-end;
  padding: 14px 17px;
  border-top: 1px solid #eff1ec;
}
.custom-field-form
{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 18px 4px;
}
.custom-field-form .field
{
  flex: 1;
  margin: 0;
}
.service-presets
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px 16px;
}
.service-presets .button
{
  min-height: 34px;
  font-size: 10px;
}
.custom-field-list
{
  padding: 0 18px 12px;
}
.custom-field-row
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  border-top: 1px solid #f0f2ed;
  color: #56645a;
  font-size: 11px;
}
.settings-hint
{
  margin: 12px 0;
  color: var(--muted);
  font-size: 10px;
}
.completion-health-notes
{
  margin-bottom: 13px;
  padding: 11px 12px;
  color: #6f5510;
  background: #fff5d9;
  border: 1px solid #ead89e;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.55;
}
.appointment-attention
{
  max-width: 340px;
  color: #dbc363 !important;
  font-size: 9px !important;
  line-height: 1.4;
  white-space: pre-line;
}
.appointment-attention svg
{
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -2px;
}
.appointment-observation-list
{
  display: grid;
  gap: 5px;
  max-width: 360px;
  margin-top: 6px;
}
.appointment-observation-card
{
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.appointment-observation-card strong
{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.app-shell .appointment-observation-card strong
{
  color: inherit;
}
.appointment-observation-card svg
{
  width: 12px;
  height: 12px;
}
.appointment-observation-bath
{
  color: #f0d78b;
  background: rgba(224, 188, 69, .1);
  border-color: rgba(224, 188, 69, .3);
}
.appointment-observation-internal
{
  color: #c4d8ec;
  background: rgba(99, 133, 165, .14);
  border-color: rgba(121, 160, 197, .38);
}
.appointment-observation-allergies
{
  color: var(--ink);
  background: var(--coral-soft);
  border-color: var(--coral);
}
.appointment-observation-allergies strong
{
  color: var(--coral);
}
.dashboard-grid .pet-cell .appointment-attention
{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
}
.client-pet-list
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px;
}
.client-pet-detail
{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #fafbf8;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.client-pet-detail > div
{
  display: grid;
  gap: 3px;
  min-width: 0;
}
.client-pet-detail strong
{
  color: #39473f;
  font-size: 12px;
}
.client-pet-detail span, .client-pet-detail small
{
  color: var(--muted);
  font-size: 10px;
}
.client-pet-detail small
{
  overflow-wrap: anywhere;
}
.app-shell.client-app .main-area
{
  margin-left: 0;
}
.app-shell.client-app .topbar
{
  padding-left: clamp(22px, 4vw, 58px);
}
.app-shell.client-app .global-search, .app-shell.client-app .today-button
{
  display: none;
}
.app-shell.client-app .page-wrap
{
  max-width: 1160px;
  padding-top: 30px;
}
.client-portal
{
  display: grid;
  gap: 22px;
  max-width: 1040px;
  margin: 0 auto;
}
.client-welcome
{
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 218px;
  padding: 32px 38px;
  overflow: hidden;
  color: #fff;
  background-color: #292b2e;
  background-image: linear-gradient(90deg, rgba(25, 27, 30, .92), rgba(38, 40, 42, .76) 58%, rgba(39, 40, 41, .48)), url("../images/fundo.jpg");
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(211, 169, 47, .38);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(48, 42, 34, .14);
}
.client-welcome-logo
{
  display: block;
  width: 76px;
  height: 76px;
  padding: 4px;
  object-fit: contain;
  background: #fffefa;
  border: 2px solid rgba(211, 169, 47, .72);
  border-radius: 50%;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
}
.client-welcome-copy
{
  min-width: 0;
}
.client-kicker
{
  color: #e5c56c;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
}
.client-welcome h1
{
  margin: 6px 0 5px;
  color: #fffefa;
  font: 700 clamp(23px, 3vw, 32px)/1.18 var(--display);
}
.client-welcome-copy p
{
  max-width: 460px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
}
.client-book-button
{
  min-height: 43px;
  padding: 0 17px;
  white-space: nowrap;
}
.client-section
{
  padding: 19px;
  background: rgba(255, 254, 250, .94);
  border: 1px solid #e8e2d6;
  border-radius: 14px;
  box-shadow: 0 7px 20px rgba(48, 42, 34, .045);
}
.client-section-heading
{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.client-section-icon
{
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #8b6d20;
  background: var(--yellow-soft);
  border: 1px solid #f0dfad;
  border-radius: 12px;
}
.client-section-icon svg
{
  width: 19px;
  height: 19px;
}
.client-section-heading h2
{
  margin: 2px 0 1px;
  color: var(--ink);
  font: 700 18px var(--display);
}
.client-section-heading p
{
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.client-pet-list
{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 12px;
  padding: 0;
}
.client-pet-detail
{
  min-height: 88px;
  align-items: center;
  gap: 13px;
  padding: 14px;
  background: #fff;
  border-color: #eee8dc;
  border-radius: 11px;
  box-shadow: 0 3px 10px rgba(48, 42, 34, .035);
}
.client-pet-avatar
{
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #65532c;
  background: #f8edcc;
  border: 1px solid #f0dfad;
  border-radius: 13px;
}
.client-pet-avatar svg
{
  width: 22px;
  height: 22px;
}
.client-pet-detail > div
{
  gap: 4px;
}
.client-pet-detail strong
{
  color: var(--ink);
  font: 700 14px var(--display);
}
.client-pet-detail span
{
  color: #746d60;
  font-size: 10px;
}
.client-pet-detail small
{
  display: flex;
  align-items: flex-start;
  gap: 5px;
  color: #75664a;
  line-height: 1.45;
}
.client-pet-detail small svg
{
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  color: #a88530;
}
.client-appointment-list
{
  display: grid;
  gap: 9px;
}
.client-appointment-card
{
  display: grid;
  grid-template-columns: minmax(145px, .8fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid #eee8dc;
  border-radius: 10px;
}
.client-appointment-date
{
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 3px 7px;
  color: #65532c;
  font-size: 11px;
  font-weight: 600;
}
.client-appointment-date svg
{
  grid-row: span 2;
  width: 17px;
  height: 17px;
  color: #aa8424;
}
.client-appointment-date strong
{
  color: #817252;
  font-size: 10px;
  font-weight: 500;
}
.client-appointment-info
{
  display: grid;
  gap: 4px;
  min-width: 0;
}
.client-appointment-info > strong
{
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-appointment-info > span
{
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}
.client-appointment-info > span svg
{
  width: 13px;
  height: 13px;
  color: #a88530;
}
.client-appointment-meta
{
  display: grid;
  justify-items: end;
  gap: 5px;
}
.client-appointment-meta > strong
{
  color: var(--ink);
  font-size: 11px;
}
.client-request-response
{
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  color: #59665d;
  background: #f7f2e5;
  border-left: 3px solid var(--jade);
  border-radius: 5px;
  font-size: 11px;
  line-height: 1.45;
}
.client-request-response svg
{
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: #a88619;
}
.employee-home-actions
{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.employee-home-actions .button
{
  min-height: 48px;
}
.client-empty-appointments
{
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 21px 12px 9px;
  text-align: center;
}
.client-empty-appointments > strong
{
  color: var(--ink);
  font: 700 14px var(--display);
}
.client-empty-appointments > p, .client-unlinked p
{
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.client-empty-appointments .button
{
  margin-top: 5px;
}
.client-kind-note
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: -5px 0 3px;
  color: #85785c;
  font-size: 10px;
}
.client-kind-note svg
{
  width: 14px;
  height: 14px;
  color: #bb9130;
}
.client-unlinked
{
  display: flex;
  align-items: center;
  gap: 13px;
}
.client-unlinked h2
{
  margin: 0 0 3px;
  font: 700 15px var(--display);
}
.appointment-price
{
  margin: -3px 0 12px;
  color: var(--jade-dark);
  font-size: 12px;
  font-weight: 700;
}
.form-section-title
{
  margin: 7px 0 12px;
  color: #526057;
  font: 700 12px var(--display);
}
.auth-screen
{
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 20px;
  background-color: #292b2e;
  background-image: linear-gradient(135deg, rgba(19, 21, 24, .52), rgba(48, 51, 55, .40)), url("../images/fundo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.auth-card
{
  width: min(100%, 430px);
  padding: 32px;
  color: #302c25;
  background: #fffefa;
  border: 1px solid rgba(255, 224, 143, .55);
  border-radius: 12px;
  box-shadow: 0 24px 75px rgba(12, 10, 8, .35);
}
.auth-brand
{
  margin-bottom: 30px;
}
.auth-card h1
{
  margin: 8px 0;
  font: 700 24px var(--display);
}
.auth-card #authDescription
{
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 12px;
}
.auth-feedback
{
  display: block;
  margin: -9px 0 12px;
  color: #a85644;
  font-size: 11px;
}
.auth-feedback:empty
{
  display: none;
}
.setup-retry
{
  width: 100%;
  margin-top: 14px;
}
.auth-submit
{
  width: 100%;
  margin-top: 5px;
}
.password-control
{
  position: relative;
  display: flex;
  align-items: center;
}
.field .password-control input
{
  padding-right: 43px;
}
.password-toggle
{
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  padding: 0;
  color: #6f6553;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.password-toggle:hover
{
  color: #302a22;
  background: var(--yellow-soft);
}
.password-toggle svg
{
  width: 17px;
  height: 17px;
}
.auth-toggle
{
  display: block;
  margin: 14px auto 0;
}
.setup-message
{
  padding: 16px;
  color: #526057;
  background: #f7f9f5;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.7;
}
.client-phone
{
  color: #8a958c;
  font-size: 10px;
  white-space: nowrap;
}
.inventory-summary
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.inventory-summary .stat-card
{
  padding: 14px 16px;
}
.inventory-summary .stat-value
{
  margin-top: 8px;
  font-size: 21px;
}
.stock-product
{
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-icon
{
  display: grid;
  flex: 0 0 33px;
  place-items: center;
  width: 33px;
  height: 33px;
  color: #62836a;
  background: #edf3e9;
  border-radius: 8px;
}
.product-icon svg
{
  width: 16px;
  height: 16px;
}
.stock-product strong
{
  display: block;
  color: #3f4c43;
  font-size: 11px;
}
.stock-product small
{
  display: block;
  margin-top: 2px;
  color: #98a198;
  font-size: 9px;
}
.quantity-cell
{
  min-width: 130px;
}
.quantity-line
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.quantity-line strong
{
  font: 700 12px var(--display);
}
.quantity-line span
{
  color: #95a096;
  font-size: 9px;
}
.stock-track
{
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  background: #edf0eb;
  border-radius: 5px;
}
.stock-track span
{
  display: block;
  height: 100%;
  background: #74a488;
  border-radius: inherit;
}
.stock-track.low span
{
  background: #e78970;
}
.stock-status
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #548265;
  font-size: 10px;
  font-weight: 600;
}
.stock-status.low
{
  color: #be6d58;
}
.stock-status::before
{
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  content: '';
}
.mobile-stock-short
{
  display: none;
}
.row-actions
{
  display: flex;
  align-items: center;
  gap: 4px;
}
.movement-list
{
  padding: 2px 17px;
}
.movement-row
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f2ed;
}
.movement-row:last-child
{
  border: 0;
}
.movement-symbol
{
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--jade-dark);
  background: var(--yellow-soft);
  border-radius: 50%;
}
.movement-symbol.out
{
  color: #b96f59;
  background: var(--coral-soft);
}
.movement-symbol svg
{
  width: 13px;
  height: 13px;
}
.movement-detail
{
  flex: 1;
  min-width: 0;
}
.movement-detail strong
{
  display: block;
  color: #556159;
  font-size: 10px;
}
.movement-detail small
{
  display: block;
  margin-top: 2px;
  color: #9ba49d;
  font-size: 9px;
}
.movement-amount
{
  color: var(--jade);
  font-size: 10px;
  font-weight: 700;
}
.movement-amount.out
{
  color: #bf735d;
}
.modal
{
  --surface: #34383d;
  --surface-soft: #3d4146;
  --ink: #f2f0e9;
  --muted: #b9b5aa;
  --line: #4c5054;
  --jade: #e0bc45;
  --jade-dark: #f1cd5a;
  --yellow: #e0bc45;
  --yellow-soft: #49432f;
  color-scheme: dark;
  width: min(650px, calc(100% - 28px));
  max-height: min(90vh, 850px);
  padding: 23px;
  overflow-y: auto;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .48);
}
.modal::backdrop
{
  background: rgba(8, 9, 10, .72);
  backdrop-filter: blur(3px);
}
.modal-small
{
  width: min(480px, calc(100% - 28px));
}
.user-dialog
{
  width: min(680px, calc(100% - 28px));
}
.user-form-grid
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}
.user-form-grid .field
{
  margin-bottom: 8px;
}
.user-form-grid .cep-lookup-control
{
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}
.user-form-grid .cep-lookup-control .button
{
  padding-right: 10px;
  padding-left: 10px;
}
.appointment-details-dialog
{
  width: min(720px, calc(100% - 28px));
}
.appointment-details-grid
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.appointment-details-item
{
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.appointment-details-item > span
{
  color: var(--muted);
  font-size: 11px;
}
.appointment-details-item > strong
{
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.appointment-details-item .status-pill
{
  justify-self: start;
}
.appointment-details-notes
{
  display: grid;
  gap: 9px;
  margin-top: 20px;
}
.appointment-details-notes h3
{
  margin: 0 0 2px;
  color: var(--ink);
  font: 700 14px var(--display);
}
.appointment-detail-note
{
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.appointment-detail-note strong
{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
}
.appointment-detail-note strong svg
{
  width: 15px;
  height: 15px;
}
.appointment-detail-note p
{
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.appointment-details-empty
{
  margin: 0;
  padding: 14px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
}
.modal .eyebrow
{
  color: #e0bc45;
}
.modal .modal-subtitle, .modal .settings-hint
{
  color: #b9b5aa;
}
.modal .modal-actions
{
  border-color: #4c5054;
}
.modal .field
{
  color: #b9b5aa;
}
.user-dialog .settings-hint
{
  margin: 7px 0;
  line-height: 1.4;
}
.modal .field input, .modal .field select, .modal .field textarea
{
  color: #f2f0e9;
  background: #2e3236;
  border-color: #4c5054;
}
.app-shell select,
.modal select
{
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b9b5aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
}
.app-shell select:hover,
.modal select:hover
{
  border-color: var(--yellow);
  background-color: #35393d;
  box-shadow: 0 0 0 2px rgba(224, 188, 69, .14);
}
.modal .field input::placeholder, .modal .field textarea::placeholder
{
  color: #a6a397;
}
.modal .field input:focus, .modal .field select:focus, .modal .field textarea:focus
{
  border-color: #e0bc45;
  box-shadow: 0 0 0 3px rgba(224, 188, 69, .2);
}
.modal .button-quiet
{
  color: #f2f0e9;
  background: #3d4146;
  border-color: #4c5054;
}
.modal .button-quiet:hover
{
  background: #494d52;
  border-color: #e0bc45;
}
.modal .icon-button
{
  color: #f2f0e9;
  background: #3d4146;
  border-color: #4c5054;
}
.modal .form-section-title
{
  color: #e0bc45;
}
.modal .taxi-dog-toggle
{
  color: #f2f0e9;
  background: #2e3236;
  border-color: #4c5054;
}
.modal .taxi-dog-toggle-copy strong
{
  color: #f2f0e9;
}
.modal .taxi-dog-toggle-copy small
{
  color: #b9b5aa;
}
.modal .auth-feedback
{
  color: #f0a08a;
}
.site-confirm-dialog .modal-actions
{
  margin-top: 22px;
}
.modal-heading
{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 19px;
}
.modal-heading h2
{
  margin: 3px 0 0;
  font: 700 19px var(--display);
}
.modal-subtitle
{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.form-grid
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cep-lookup-control
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.cep-lookup-control .button
{
  min-height: 38px;
}
.field
{
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  color: #67746b;
  font-size: 10px;
  font-weight: 700;
}
.check-field
{
  align-content: center;
}
.check-field span
{
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 37px;
}
.check-field input
{
  width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--yellow);
}
.taxi-dog-toggle
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 54px;
  margin: 0 0 12px;
  padding: 9px 11px 9px 12px;
  color: #59665d;
  background: #fbfaf6;
  border: 1px solid #e8e3d7;
  border-radius: 7px;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.taxi-dog-toggle, .taxi-dog-toggle-copy, #packageTaxiDogPriceField > span
{
  user-select: none;
}
.taxi-dog-toggle:hover
{
  background: #fffdf7;
  border-color: #d9c77f;
}
.taxi-dog-toggle:has(input:checked)
{
  background: #fffaf0;
  border-color: #d8b53f;
  box-shadow: 0 0 0 2px rgba(216, 181, 63, .1);
}
.taxi-dog-toggle input
{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.taxi-dog-toggle input:focus-visible + .taxi-dog-toggle-copy
{
  outline: 2px solid #b88b18;
  outline-offset: 4px;
  border-radius: 2px;
}
.taxi-dog-toggle-copy
{
  display: grid;
  gap: 3px;
  min-width: 0;
}
.taxi-dog-toggle-copy strong
{
  color: #3c463f;
  font-size: 11px;
  font-weight: 700;
}
.taxi-dog-toggle-copy small
{
  color: #92978f;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.35;
}
.taxi-dog-switch
{
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 19px;
  background: #d8d9d4;
  border-radius: 20px;
  transition: background .18s;
}
.taxi-dog-switch::after
{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  content: '';
  transition: transform .18s;
}
.taxi-dog-toggle input:checked ~ .taxi-dog-switch
{
  background: #c9a52e;
}
.taxi-dog-toggle input:checked ~ .taxi-dog-switch::after
{
  transform: translateX(15px);
}
.taxi-week-label
{
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.taxi-route-summary
{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px 15px;
}
.taxi-route-summary > div
{
  flex: 1;
}
.taxi-route-summary strong
{
  color: var(--ink);
  font-size: 12px;
}
.taxi-route-summary p
{
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.taxi-route-summary > small
{
  color: var(--muted);
  font-size: 9px;
  text-align: right;
}
.taxi-week-grid
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.taxi-day
{
  min-width: 0;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.taxi-day-heading
{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  color: var(--jade);
  border-bottom: 1px solid #eff1ec;
  text-transform: capitalize;
}
.taxi-day-heading span
{
  font: 700 13px var(--display);
}
.taxi-day-heading strong
{
  color: var(--muted);
  font-size: 10px;
}
.taxi-period
{
  margin-top: 12px;
}
.taxi-period > header
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.taxi-period > header div
{
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.taxi-period h3
{
  margin: 0;
  color: var(--ink);
  font-size: 11px;
}
.taxi-period > header span
{
  color: var(--muted);
  font-size: 9px;
}
.taxi-stop-list
{
  display: grid;
  gap: 6px;
}
.taxi-stop
{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px;
  background: #fbfcfa;
  border: 1px solid #eef0eb;
  border-radius: 6px;
}
.taxi-stop-number
{
  display: grid;
  flex: 0 0 23px;
  place-items: center;
  width: 23px;
  height: 23px;
  color: var(--jade-dark);
  background: var(--yellow-soft);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}
.taxi-stop-info
{
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.taxi-stop-info strong
{
  color: var(--ink);
  font-size: 10px;
}
.taxi-stop-info strong small
{
  color: var(--jade);
  font-size: 9px;
}
.taxi-stop-info > span, .taxi-stop-address
{
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taxi-stop-address
{
  display: flex;
  align-items: center;
  gap: 4px;
}
.taxi-stop-address svg
{
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  color: var(--jade);
}
.taxi-stop-address.missing
{
  color: #b66a55;
}
.taxi-stop-phone
{
  display: grid;
  flex: 0 0 27px;
  place-items: center;
  width: 27px;
  height: 27px;
  color: var(--jade);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.taxi-stop-phone svg
{
  width: 13px;
  height: 13px;
}
.taxi-route-note
{
  margin: 6px 2px 0;
  color: var(--muted);
  font-size: 9px;
}
.taxi-period-empty
{
  padding: 11px 9px;
  color: #99a198;
  background: #fbfcfa;
  border-radius: 5px;
  font-size: 9px;
}
.field input, .field select, .field textarea
{
  width: 100%;
  min-height: 37px;
  padding: 8px 10px;
  color: #342f27;
  background: #fffefa;
  border: 1px solid #e6dfd0;
  border-radius: 5px;
  outline: 0;
  font-size: 11px;
  font-weight: 400;
}
.field textarea
{
  min-height: 62px;
  resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus
{
  border-color: #d3a92f;
  box-shadow: 0 0 0 3px rgba(211, 169, 47, .16);
}
.field input::placeholder, .field textarea::placeholder
{
  color: #a9b1aa;
}
.field textarea[name="completionNotes"]::placeholder
{
  color: #817a6d;
}
.field-hint
{
  display: block;
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}
#appointmentTutor
{
  min-height: 37px;
  padding: 9px 10px;
  color: #f2f0e9;
  background: #3b4045;
  border: 1px solid #565b60;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
}
#appointmentTutor.is-empty
{
  color: #c4c0b6;
  font-weight: 400;
}
#completionForm textarea[name="completionNotes"]
{
  min-height: 125px;
  font-size: 12px;
  line-height: 1.55;
}
.field-wide
{
  grid-column: 1 / -1;
}
.usage-field
{
  margin-top: 2px;
  padding: 13px 13px 4px;
  background: #f7f9f5;
  border: 1px solid #edf0e9;
  border-radius: 6px;
}
.usage-heading
{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.usage-heading > div
{
  display: grid;
}
.usage-heading > svg
{
  color: #81a18b;
}
.field-title
{
  color: #4f5f53;
  font-size: 10px;
  font-weight: 700;
}
.usage-heading small
{
  margin-top: 2px;
  color: #929d93;
  font-size: 9px;
}
.usage-grid
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 12px;
}
.usage-item
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 0;
  border-top: 1px solid #e9eee7;
}
.usage-item label
{
  min-width: 0;
  overflow: hidden;
  color: #667369;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-item input
{
  width: 58px;
  height: 29px;
  padding: 0 6px;
  color: #435348;
  background: #fff;
  border: 1px solid #e0e8df;
  border-radius: 4px;
  font-size: 10px;
}
.usage-empty
{
  grid-column: 1 / -1;
  padding: 9px 0;
  color: #89968b;
  font-size: 10px;
}
.modal-actions
{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 19px;
  padding-top: 14px;
  border-top: 1px solid #eff1ec;
}
.toast
{
  position: fixed;
  z-index: 30;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: min(560px, calc(100vw - 36px));
  padding: 12px 15px;
  color: #fff;
  background: #302a22;
  border: 0;
  border-radius: 9px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  font-size: 14px;
  line-height: 1.55;
  filter: none;
}
.modal > .toast
{
  z-index: 1001;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 36px));
}
.toast.show
{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.toast > span
{
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.toast svg
{
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-top: 1px;
}
.toast.error
{
  background: #8f3428;
}
.toast-dismiss
{
  flex: 0 0 auto;
  padding: 5px 8px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.toast-dismiss:hover, .toast-dismiss:focus-visible
{
  background: rgba(255,255,255,.16);
}
.toast-dismiss[hidden]
{
  display: none;
}
.mobile-nav
{
  display: none;
}
.sr-only
{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes enter
{
  from
  {
    opacity: 0;
    transform: translateY(7px);
  }
  to
  {
    opacity: 1;
    transform: translateY(0);
  }
}
.app-shell
{
  --page: #292c30;
  --surface: #34383d;
  --surface-soft: #3d4146;
  --ink: #f2f0e9;
  --muted: #b9b5aa;
  --line: #4c5054;
  --jade: #e0bc45;
  --jade-dark: #f1cd5a;
  --jade-soft: #49432f;
  --yellow: #e0bc45;
  --yellow-soft: #49432f;
  --coral-soft: #503b37;
  --blue-soft: #39434d;
  --paw-pattern: var(--paw-pattern-gold);
  color: var(--ink);
  background-color: var(--page);
}
.app-shell .sidebar,
.app-shell .panel,
.app-shell .stat-card,
.app-shell .client-card,
.app-shell .client-section,
.app-shell .client-pet-detail,
.app-shell .client-appointment-card,
.app-shell .modal,
.app-shell .global-search,
.app-shell .icon-button,
.app-shell .filter-search,
.app-shell .filter-select,
.app-shell .settings-panel,
.app-shell .sidebar-note,
.app-shell .mobile-nav
{
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--line);
}
.app-shell .main-area
{
  background: var(--page);
}
.app-shell .page-wrap
{
  background-color: transparent;
}
.app-shell .topbar
{
  background: rgba(41, 44, 48, .96);
  border-color: var(--line);
}
.app-shell .nav-label,
.app-shell .nav-item,
.app-shell .nav-item:not(.active),
.app-shell .global-search input,
.app-shell .filter-search input,
.app-shell .filter-select,
.app-shell .button-quiet,
.app-shell .row-action,
.app-shell .mobile-nav button,
.app-shell .field,
.app-shell .field-title,
.app-shell .client-pet-detail span,
.app-shell .client-pet-detail small,
.app-shell .client-appointment-info > span,
.app-shell .client-kind-note
{
  color: var(--muted);
}
.app-shell .nav-item:hover,
.app-shell .nav-item.active,
.app-shell .mobile-nav button.active,
.app-shell .usage-field,
.app-shell .sidebar-note
{
  background-color: var(--surface-soft);
}
.app-shell .nav-item.active,
.app-shell .mobile-nav button.active,
.app-shell .eyebrow,
.app-shell .text-link,
.app-shell .appointment-price,
.app-shell .client-phone,
.app-shell .movement-amount
{
  color: var(--jade);
}
.app-shell .nav-item.active::before,
.app-shell .button-primary,
.app-shell .stock-track span
{
  background-color: var(--yellow);
}
.app-shell .button-primary
{
  color: #282a2d;
  border-color: var(--yellow);
}
.app-shell .button-primary:hover
{
  color: #222427;
  background: #edcc5e;
  border-color: #edcc5e;
}
.app-shell .button:not(.button-primary)
{
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--line);
}
.app-shell .button:not(.button-primary):hover,
.app-shell .icon-button:hover,
.app-shell .row-action:hover
{
  color: var(--jade-dark);
  background-color: var(--surface-soft);
  border-color: var(--yellow);
}
.app-shell .nav-count,
.app-shell .profile-avatar,
.app-shell .top-avatar,
.app-shell .stat-icon,
.app-shell .client-section-icon,
.app-shell .client-pet-avatar,
.app-shell .movement-symbol
{
  color: var(--jade-dark);
  background-color: var(--jade-soft);
  border-color: var(--line);
}
.app-shell .panel-head,
.app-shell th,
.app-shell td,
.app-shell .custom-field-row,
.app-shell .movement-row,
.app-shell .profile-row,
.app-shell .settings-actions,
.app-shell .modal-actions,
.app-shell .usage-item
{
  border-color: var(--line);
}
.app-shell th,
.app-shell .service-name-field input,
.app-shell .price-field input,
.app-shell .field input,
.app-shell .field select,
.app-shell .field textarea,
.app-shell .usage-item input
{
  color: var(--ink);
  background-color: #2e3236;
  border-color: var(--line);
}
.app-shell .field input::placeholder,
.app-shell .field textarea::placeholder,
.app-shell .global-search input::placeholder,
.app-shell .filter-search input::placeholder
{
  color: #a6a397;
}
.app-shell .pet-cell strong,
.app-shell .client-cell strong,
.app-shell .agenda-copy strong,
.app-shell .stock-alert-name strong,
.app-shell .stock-product strong,
.app-shell .movement-detail strong,
.app-shell .client-card-main strong,
.app-shell .client-pet-detail strong,
.app-shell .client-appointment-info > strong,
.app-shell .client-empty-appointments > strong,
.app-shell .form-section-title,
.app-shell .field-title,
.app-shell .panel-head h2,
.app-shell .panel-title
{
  color: var(--ink);
}
.app-shell .sidebar-note p,
.app-shell .profile-row small,
.app-shell .profile-row > svg,
.app-shell .pet-cell small,
.app-shell .client-cell small,
.app-shell .agenda-time,
.app-shell .agenda-copy span,
.app-shell .stock-alert-name small,
.app-shell .stock-alert-icon,
.app-shell .movement-detail small,
.app-shell .stat-foot,
.app-shell .service-price,
.app-shell .empty-state,
.app-shell .empty-state strong,
.app-shell .client-kind-note
{
  color: var(--muted);
}
.app-shell .sidebar-note strong,
.app-shell .profile-row strong
{
  color: var(--ink);
}
.app-shell .field input,
.app-shell .field select,
.app-shell .field textarea,
.app-shell .filter-select,
.app-shell .usage-item input,
.app-shell .service-name-field input,
.app-shell .price-field input
{
  color-scheme: dark;
}
.app-shell tbody tr:hover
{
  background-color: #3c4044;
}
.app-shell .pet-avatar,
.app-shell .pet-chip
{
  color: var(--jade-dark);
  background-color: var(--jade-soft);
}
.app-shell .status-scheduled,
.app-shell .status-done,
.app-shell .status-progress,
.app-shell .status-cancelled
{
  color: #e9d78e;
  background-color: #49432f;
}
.app-shell .payment-pill.paid
{
  color: #9bd3ad;
  background-color: #30463a;
}
.app-shell .payment-pill.pending
{
  color: #f0cc83;
  background-color: #4b4335;
}
.app-shell .payment-pill.not-applicable
{
  color: var(--muted);
  background-color: var(--surface-soft);
}
.app-shell .package-payment.paid
{
  color: #9bd3ad;
  background-color: #30463a;
}
.app-shell .package-payment.pending
{
  color: #f0cc83;
  background-color: #4b4335;
}
.app-shell .package-slot.used
{
  color: #9bd3ad;
  background-color: #30463a;
  border-color: #496653;
}
.app-shell .package-slot.used strong
{
  color: #9bd3ad;
}
.app-shell .client-welcome
{
  background-color: #292c30;
  border-color: rgba(224, 188, 69, .48);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}
.app-shell .client-section
{
  background-color: var(--surface);
}
.app-shell .client-appointment-card,
.app-shell .client-pet-detail
{
  background-color: #3a3e43;
}
.app-shell .taxi-day
{
  background-color: var(--surface);
  border-color: var(--line);
}
.app-shell .taxi-day-heading
{
  border-color: var(--line);
}
.app-shell .taxi-stop,
.app-shell .taxi-period-empty
{
  color: var(--ink);
  background-color: #2e3236;
  border-color: var(--line);
}
.app-shell .taxi-stop-info strong
{
  color: var(--ink);
}
.app-shell .taxi-stop-info > span,
.app-shell .taxi-stop-address,
.app-shell .taxi-route-note,
.app-shell .taxi-period-empty
{
  color: var(--muted);
}
.app-shell .taxi-stop-address.missing
{
  color: #f0a08a;
}
.app-shell .taxi-stop-phone
{
  color: var(--jade);
  background-color: var(--surface-soft);
  border-color: var(--line);
}
.app-shell .taxi-dog-toggle
{
  color: var(--ink);
  background-color: #2e3236;
  border-color: var(--line);
}
.app-shell .taxi-dog-toggle:hover
{
  background-color: #383c40;
  border-color: var(--jade);
}
.app-shell .taxi-dog-toggle:has(input:checked)
{
  background-color: #403b2c;
  border-color: var(--jade);
}
.app-shell .taxi-dog-toggle-copy strong
{
  color: var(--ink);
}
.app-shell .taxi-dog-toggle-copy small
{
  color: var(--muted);
}
.modal .taxi-dog-toggle:hover,
.modal .taxi-dog-toggle:focus-within
{
  color: #f2f0e9;
  background: #383c40;
  border-color: #e0bc45;
  box-shadow: 0 0 0 2px rgba(224, 188, 69, .16);
}
.modal .taxi-dog-toggle:has(input:checked)
{
  background: #403b2c;
  border-color: #e0bc45;
}
.modal .taxi-dog-toggle:has(input:checked):hover
{
  background: #49432f;
}
.modal .taxi-dog-toggle:hover .taxi-dog-toggle-copy strong,
.modal .taxi-dog-toggle:focus-within .taxi-dog-toggle-copy strong
{
  color: #fff;
}
.modal .taxi-dog-toggle:hover .taxi-dog-toggle-copy small,
.modal .taxi-dog-toggle:focus-within .taxi-dog-toggle-copy small
{
  color: #d1cdc2;
}
#packageDialog ::selection
{
  color: var(--ink);
  background: rgba(224, 188, 69, .55);
}
.app-shell .modal::backdrop
{
  background: rgba(8, 9, 10, .72);
}
.app-shell .usage-item input:focus,
.app-shell .field input:focus,
.app-shell .field select:focus,
.app-shell .field textarea:focus,
.app-shell .service-name-field input:focus,
.app-shell .price-field input:focus
{
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(224, 188, 69, .2);
}
@media (max-width: 1100px)
{
  .sidebar
  {
    width: 215px;
  }
  .main-area
  {
    margin-left: 215px;
  }
  .stats-grid
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-grid
  {
    grid-template-columns: minmax(0, 1fr);
  }
  .client-grid
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-side
  {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .dashboard-side .panel + .panel
  {
    margin-top: 0;
  }
}
.appointment-mobile-list,
.people-mobile-list
{
  display: none;
}
.people-table
{
  width: 100%;
  table-layout: fixed;
}
.people-table th:nth-child(1), .people-table td:nth-child(1)
{
  width: 28%;
}
.people-table th:nth-child(2), .people-table td:nth-child(2)
{
  width: 26%;
}
.people-table th:nth-child(3), .people-table td:nth-child(3)
{
  width: 20%;
}
.people-table th:nth-child(4), .people-table td:nth-child(4)
{
  width: 16%;
}
.people-table th:last-child, .people-table td:last-child
{
  width: 10%;
  text-align: right;
  padding-right: 15px;
}
.people-table td:last-child .row-actions
{
  justify-content: flex-end;
}
@media (max-width: 760px)
{
  .app-shell.client-app .topbar
  {
    padding-right: 16px;
    padding-left: 16px;
  }
  .app-shell.client-app .page-wrap
  {
    padding: 20px 15px 35px;
  }
  .client-portal
  {
    gap: 15px;
  }
  .client-welcome
  {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 22px 18px;
    border-radius: 14px;
  }
  .client-welcome-logo
  {
    grid-row: 1;
    width: 54px;
    height: 54px;
  }
  .client-welcome-copy
  {
    grid-column: 2;
  }
  .client-welcome-copy .client-kicker
  {
    font-size: 8px;
    letter-spacing: .85px;
  }
  .client-welcome h1
  {
    font-size: 22px;
  }
  .client-welcome-copy p
  {
    font-size: 10px;
  }
  .client-book-button
  {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 38px;
  }
  .client-section
  {
    padding: 15px;
    border-radius: 12px;
  }
  .client-section-heading
  {
    gap: 10px;
    margin-bottom: 12px;
  }
  .client-section-heading h2
  {
    font-size: 16px;
  }
  .client-appointment-card
  {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }
  .client-appointment-date
  {
    grid-column: 1;
  }
  .client-appointment-info
  {
    grid-column: 1;
  }
  .client-appointment-meta
  {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .client-kind-note
  {
    font-size: 9px;
  }
  .sidebar-toggle
  {
    display: none;
  }
  .app-shell.sidebar-collapsed .sidebar
  {
    width: auto;
    padding: 0 18px;
  }
  .app-shell.sidebar-collapsed .sidebar .brand
  {
    justify-content: flex-start;
  }
  .app-shell.sidebar-collapsed .sidebar .brand-copy
  {
    display: grid;
  }
  .app-shell.sidebar-collapsed .main-area
  {
    margin-left: 0;
  }
  .sidebar
  {
    position: static;
    width: auto;
    height: 60px;
    padding: 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar .brand
  {
    height: 60px;
    padding: 0;
  }
  .brand-mark
  {
    width: 34px;
    height: 34px;
    border-radius: 10px 10px 10px 4px;
  }
  .brand-mark svg
  {
    width: 19px;
    height: 19px;
  }
  .brand-copy strong
  {
    font-size: 16px;
  }
  .brand-copy small
  {
    font-size: 9px;
  }
  .sidebar .nav-label, .sidebar .side-nav, .sidebar .sidebar-bottom
  {
    display: none;
  }
  .main-area
  {
    margin-left: 0;
    min-height: calc(100vh - 60px);
  }
  .topbar
  {
    height: 55px;
    padding: 0 17px;
  }
  .global-search
  {
    width: min(205px, 43vw);
    height: 34px;
  }
  .global-search kbd, .today-button
  {
    display: none;
  }
  .topbar-actions
  {
    gap: 9px;
  }
  .page-wrap
  {
    padding: 25px 17px 100px;
  }
  .welcome-row
  {
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
  }
  .welcome-row > div
  {
    flex: 1 1 200px;
    min-width: 0;
  }
  .welcome-row h1
  {
    font-size: 23px;
  }
  .welcome-row p
  {
    max-width: 250px;
    font-size: 11px;
  }
  .welcome-row .button
  {
    position: static;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 42px;
    margin-right: 0;
    padding: 8px 14px;
    overflow: visible;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .welcome-row .button svg
  {
    position: static;
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    transform: none;
  }
  .stats-grid
  {
    gap: 9px;
    margin-bottom: 12px;
  }
  .stat-card
  {
    padding: 13px 12px;
  }
  .stat-top
  {
    gap: 4px;
    font-size: 9px;
  }
  .stat-icon
  {
    width: 26px;
    height: 26px;
  }
  .stat-value
  {
    margin-top: 9px;
    font-size: 22px;
  }
  .stat-foot
  {
    font-size: 9px;
  }
  .dashboard-side
  {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .dashboard-grid .table-wrap th:nth-child(3), .dashboard-grid .table-wrap td:nth-child(3)
  {
    display: none;
  }
  .dashboard-grid .table-wrap th:first-child, .dashboard-grid .table-wrap td:first-child
  {
    width: 40%;
  }
  .dashboard-grid .table-wrap th:nth-child(2), .dashboard-grid .table-wrap td:nth-child(2)
  {
    width: 18%;
  }
  .dashboard-grid .table-wrap th:nth-child(4), .dashboard-grid .table-wrap td:nth-child(4)
  {
    width: 32%;
  }
  .dashboard-grid .table-wrap th:last-child, .dashboard-grid .table-wrap td:last-child
  {
    width: 10%;
    padding-right: 2px;
    padding-left: 2px;
  }
  .dashboard-service
  {
    display: block;
    margin-top: 1px;
    color: #819085;
    font-size: 9px;
    font-weight: 500;
  }
  .panel-head
  {
    padding: 14px 13px 12px;
  }
  .panel-head h2
  {
    font-size: 12px;
  }
  .panel-head p
  {
    font-size: 9px;
  }
  .table-wrap
  {
    scrollbar-width: thin;
  }
  th
  {
    padding: 0 10px;
  }
  td
  {
    padding: 8px 10px;
  }
  th:first-child, td:first-child
  {
    padding-left: 13px;
  }
  .page-heading
  {
    align-items: flex-start;
    margin-bottom: 18px;
  }
  .page-heading h1
  {
    font-size: 22px;
  }
  .page-heading p
  {
    max-width: 250px;
  }
  .appointment-packages-heading
  {
    align-items: flex-start;
  }
  .appointment-packages-heading > .button
  {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 10px;
  }
  .page-heading > .button
  {
    min-width: 36px;
    width: 36px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }
  .page-heading > .button svg
  {
    flex: 0 0 16px;
  }
  .heading-actions .button-primary:not(.mobile-action-button)
  {
    min-width: 36px;
    width: 36px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }
  .heading-actions .button-primary svg
  {
    flex: 0 0 16px;
  }
  .client-grid
  {
    grid-template-columns: minmax(0, 1fr);
  }
  .package-grid
  {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  .taxi-week-grid
  {
    grid-template-columns: minmax(0, 1fr);
  }
  .taxi-route-summary
  {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .taxi-route-summary > small
  {
    width: 100%;
    text-align: left;
  }
  .taxi-week-label
  {
    font-size: 9px;
  }
  .page-heading:has(.taxi-week-label)
  {
    align-items: stretch;
    flex-direction: column;
  }
  .page-heading:has(.taxi-week-label) .heading-actions
  {
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .taxi-period > header
  {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .taxi-period > header > .button
  {
    flex: 1 1 145px;
    justify-content: center;
  }
  .timeclock-location, .timeclock-status
  {
    align-items: flex-start;
    flex-direction: column;
  }
  .timeclock-records .table-wrap
  {
    overflow-x: auto;
  }
  .timeclock-records table
  {
    min-width: 600px;
  }
  .appointment-toolbar + .full-table
  {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .appointment-toolbar + .full-table .table-wrap
  {
    overflow: visible;
  }
  .appointment-toolbar + .full-table table
  {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .appointment-toolbar + .full-table thead
  {
    display: none;
  }
  .appointment-toolbar + .full-table tbody
  {
    display: grid;
    gap: 10px;
  }
  .appointment-toolbar + .full-table tbody tr
  {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .appointment-toolbar + .full-table tbody td
  {
    display: grid;
    align-content: start;
    gap: 3px;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .appointment-toolbar + .full-table tbody td::before
  {
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
  }
  .appointment-toolbar + .full-table tbody td:nth-child(1)
  {
    grid-column: 1 / -1;
  }
  .appointment-toolbar + .full-table tbody td:nth-child(2)::before
  {
    content: 'Data e hora';
  }
  .appointment-toolbar + .full-table tbody td:nth-child(3)::before
  {
    content: 'Serviço';
  }
  .appointment-toolbar + .full-table tbody td:nth-child(4)::before
  {
    content: 'Pagamento';
  }
  .appointment-toolbar + .full-table tbody td:nth-child(5)::before
  {
    content: 'Status';
  }
  .appointment-toolbar + .full-table tbody td:nth-child(6)
  {
    grid-column: 1 / -1;
    justify-items: end;
  }
  .appointment-toolbar + .full-table tbody td:nth-child(6)::before
  {
    content: 'Ações';
    justify-self: start;
  }
  .appointment-toolbar + .full-table .row-actions
  {
    gap: 8px;
  }
  .appointment-toolbar + .full-table .row-action
  {
    width: 38px;
    height: 38px;
  }
  .inventory-summary
  {
    gap: 8px;
  }
  .inventory-summary .stat-card
  {
    padding: 12px 10px;
  }
  .inventory-summary .stat-top
  {
    min-height: 25px;
    font-size: 8px;
  }
  .inventory-summary .stat-icon
  {
    display: none;
  }
  .inventory-summary .stat-value
  {
    font-size: 18px;
  }
  .filter-bar
  {
    gap: 6px;
  }
  .filter-search
  {
    width: 100%;
  }
  .filter-select
  {
    flex: 1;
    min-width: 120px;
  }
  .list-toolbar
  {
    flex-wrap: wrap;
  }
  .list-toolbar .filter-search
  {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
  .appointment-toolbar
  {
    flex-wrap: wrap;
  }
  .appointment-filter-controls
  {
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  .appointment-filter-controls .filter-search
  {
    flex: 1 1 100%;
    width: 100%;
  }
  .appointment-filter-controls .filter-select
  {
    flex: 1 1 calc(50% - 6px);
    min-width: 120px;
  }
  .appointment-heading-actions
  {
    width: 100%;
    justify-content: flex-end;
  }
  .mobile-nav
  {
    position: fixed;
    z-index: 12;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    gap: 2px;
    min-height: 62px;
    padding: 6px 5px calc(6px + env(safe-area-inset-bottom));
    overflow-x: auto;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(12px);
    scrollbar-width: none;
  }
  .mobile-nav::-webkit-scrollbar
  {
    display: none;
  }
  .mobile-nav button
  {
    display: grid;
    flex: 1 0 44px;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-width: 44px;
    color: #849087;
    background: transparent;
    border: 0;
    border-radius: 5px;
    font-size: 8px;
    cursor: pointer;
  }
  .mobile-nav button svg
  {
    width: 17px;
    height: 17px;
  }
  .mobile-nav button span
  {
    font-size: 7px;
  }
  .mobile-nav button.active
  {
    color: var(--jade-dark);
    background: var(--yellow-soft);
    font-weight: 700;
  }
  .modal
  {
    padding: 18px;
  }
  .custom-field-form
  {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .custom-field-form > .button
  {
    align-self: flex-start;
  }
  .client-pet-list
  {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }
}
/* Mobile-first refinements: merge the brand and account controls into one
   fixed header and use comfortable touch and reading sizes on phones. */
@media (max-width: 760px)
{
  html, body, .app-shell, .main-area
  {
    min-width: 320px;
    width: 100%;
    max-width: 100%;
  }
  body
  {
    font-size: 15px;
  }
  .app-shell
  {
    overflow-x: clip;
  }
  .app-shell .sidebar
  {
    position: fixed;
    z-index: 15;
    inset: 0 0 auto;
    display: block;
    width: 100%;
    height: 60px;
    padding: 0 12px;
    background: rgba(41, 44, 48, .98);
    border: 0;
    border-bottom: 1px solid var(--line);
  }
  .app-shell .sidebar-header
  {
    height: 60px;
  }
  .app-shell .sidebar-header .brand
  {
    flex: 0 1 auto;
    gap: 8px;
    height: 60px;
    padding: 0;
  }
  .app-shell .sidebar .brand-logo
  {
    width: 36px;
    height: 36px;
  }
  .app-shell .sidebar .brand-copy strong
  {
    font-size: 15px;
  }
  .app-shell .sidebar .brand-copy small
  {
    margin-top: 2px;
    font-size: 9px;
  }
  .app-shell .sidebar .sidebar-toggle,
    .app-shell .sidebar .nav-label,
    .app-shell .sidebar .side-nav,
    .app-shell .sidebar .sidebar-bottom
  {
    display: none !important;
  }
  .app-shell .main-area
  {
    min-height: 100vh;
    margin: 0;
    padding: 60px 0 0;
  }
  .app-shell .topbar
  {
    position: fixed;
    z-index: 16;
    inset: 0 0 auto 142px;
    display: flex;
    width: auto;
    height: 60px;
    margin: 0;
    padding: 0 10px 0 0;
    transform: none;
    background: transparent;
    border: 0;
    backdrop-filter: none;
  }
  .app-shell .topbar-actions
  {
    width: 100%;
    gap: 6px;
  }
  .app-shell .global-search
  {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 36px;
    padding: 0 8px;
  }
  .app-shell .global-search input
  {
    min-width: 0;
    font-size: 12px;
  }
  .app-shell .global-search kbd,
    .app-shell .today-button
  {
    display: none;
  }
  .app-shell .topbar .icon-button
  {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  .app-shell .top-avatar
  {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
  .app-shell .page-wrap
  {
    min-width: 0;
    padding: 20px 14px calc(96px + env(safe-area-inset-bottom));
  }
  .app-shell .page-heading
  {
    gap: 12px;
    margin-bottom: 16px;
  }
  .app-shell .page-heading h1
  {
    font-size: clamp(21px, 6vw, 26px);
    line-height: 1.2;
  }
  .app-shell .page-heading p
  {
    max-width: none;
    font-size: 13px;
    line-height: 1.45;
  }
  .app-shell .appointment-tabs
  {
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 10px;
  }
  .app-shell .appointment-tabs button
  {
    min-height: 42px;
    font-size: 13px;
  }
  .app-shell .appointment-toolbar
  {
    gap: 10px;
    padding: 12px;
  }
  .app-shell .appointment-filter-controls
  {
    gap: 8px;
  }
  .app-shell .appointment-filter-controls .filter-select
  {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    min-height: 42px;
    font-size: 13px;
  }
  .app-shell .appointment-filter-controls .filter-search
  {
    min-height: 42px;
  }
  .app-shell .appointment-filter-controls .filter-search input
  {
    font-size: 14px;
  }
  .app-shell .appointment-heading-actions
  {
    width: auto;
  }
  .app-shell .appointment-export
  {
    width: 42px;
    height: 42px;
  }
  .appointment-toolbar + .full-table tbody
  {
    gap: 12px;
  }
  .appointment-toolbar + .full-table tbody tr
  {
    gap: 14px 12px;
    padding: 16px;
    border-radius: 12px;
  }
  .appointment-toolbar + .full-table tbody td
  {
    gap: 5px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .appointment-toolbar + .full-table tbody td::before
  {
    font-size: 11px;
    letter-spacing: .02em;
  }
  .appointment-toolbar + .full-table tbody td:nth-child(1)
  {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .app-shell .appointment-toolbar + .full-table .pet-cell
  {
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  .app-shell .appointment-toolbar + .full-table .pet-cell > span:last-child
  {
    flex: 1 1 auto;
    min-width: 0;
  }
  .app-shell .appointment-toolbar + .full-table .pet-avatar
  {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
  .app-shell .appointment-toolbar + .full-table .pet-cell strong
  {
    font-size: 15px;
    line-height: 1.3;
  }
  .app-shell .appointment-toolbar + .full-table .pet-cell small
  {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .app-shell .appointment-toolbar + .full-table .pet-cell .taxi-dog-note
  {
    width: 100%;
    color: var(--jade);
    text-align: right;
  }
  .app-shell .appointment-toolbar + .full-table .pet-cell .appointment-attention
  {
    color: #f0b5a5;
  }
  .app-shell .appointment-toolbar + .full-table .service-price
  {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
  }
  .app-shell .appointment-toolbar + .full-table .status-pill,
    .app-shell .appointment-toolbar + .full-table .payment-pill
  {
    min-height: 32px;
    justify-content: center;
    padding: 6px 9px;
    font-size: 12px;
  }
  .app-shell .appointment-toolbar + .full-table .row-actions
  {
    justify-content: flex-end;
    gap: 8px;
  }
  .app-shell .appointment-toolbar + .full-table .row-action
  {
    width: 44px;
    height: 44px;
  }
  .app-shell .mobile-nav
  {
    min-height: 66px;
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  }
  .app-shell .mobile-nav button
  {
    flex: 1 0 52px;
    min-width: 52px;
    min-height: 48px;
    gap: 4px;
    font-size: 10px;
  }
  .app-shell .mobile-nav button svg
  {
    width: 20px;
    height: 20px;
  }
  .app-shell .mobile-nav button span
  {
    font-size: 10px;
  }
  .app-shell input,
    .app-shell select,
    .app-shell textarea
  {
    font-size: 16px;
  }
  .app-shell .field input,
    .app-shell .field select,
    .app-shell .field textarea
  {
    min-height: 44px;
  }
  .app-shell .filter-select
  {
    min-height: 42px;
  }
  .app-shell .timeclock-location,
    .app-shell .timeclock-status
  {
    gap: 12px;
    padding: 16px;
  }
  .app-shell .timeclock-location p,
    .app-shell .timeclock-status p,
    .app-shell .timeclock-hint
  {
    font-size: 13px;
    line-height: 1.45;
  }
  .app-shell .timeclock-location .button,
    .app-shell .timeclock-status .button
  {
    width: 100%;
    min-height: 44px;
  }
}
@media (min-width: 761px) and (max-width: 1024px)
{
  .app-shell .main-area
  {
    min-width: 0;
  }
  .app-shell .page-wrap
  {
    padding-right: clamp(18px, 3vw, 30px);
    padding-left: clamp(18px, 3vw, 30px);
  }
  .app-shell .topbar
  {
    padding-right: 22px;
    padding-left: 22px;
  }
  .app-shell .global-search
  {
    width: min(244px, 32vw);
  }
  .app-shell .stats-grid
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell .client-grid,
    .app-shell .package-grid,
    .app-shell .taxi-week-grid
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell .appointment-toolbar
  {
    flex-wrap: wrap;
  }
}
@media (min-width: 761px) and (max-width: 900px)
{
  .app-shell .package-grid
  {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}
@media (max-width: 360px)
{
  .app-shell .sidebar
  {
    padding-right: 8px;
    padding-left: 8px;
  }
  .app-shell .sidebar .brand
  {
    gap: 6px;
  }
  .app-shell .sidebar .brand-logo
  {
    width: 32px;
    height: 32px;
  }
  .app-shell .sidebar .brand-copy strong
  {
    font-size: 14px;
  }
  .app-shell .topbar
  {
    left: 126px;
    padding-right: 7px;
  }
  .app-shell .topbar-actions
  {
    gap: 5px;
  }
  .app-shell .global-search
  {
    padding: 0 6px;
  }
  .app-shell .topbar .icon-button
  {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
  .app-shell .top-avatar
  {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }
  .app-shell .page-wrap
  {
    padding-right: 10px;
    padding-left: 10px;
  }
  .appointment-toolbar + .full-table tbody tr
  {
    padding: 13px;
  }
}
@media (max-width: 760px)
{
  .app-shell .sidebar
  {
    box-sizing: border-box;
    border-bottom: 0;
  }
  .app-shell .sidebar-header
  {
    display: flex;
    align-items: center;
    height: 54px;
    min-height: 54px;
    padding: 0;
  }
  .app-shell .sidebar-header .brand
  {
    display: flex;
    align-items: center;
    height: 54px;
    min-height: 54px;
    margin: 0;
  }
  .app-shell .topbar
  {
    box-sizing: border-box;
    align-items: center;
    height: 54px;
    min-height: 54px;
    border: 0;
    box-shadow: none;
  }
  .app-shell .topbar-actions
  {
    display: flex;
    align-items: center;
    height: 54px;
    min-height: 54px;
  }
  .app-shell .sidebar .brand-logo,
    .app-shell .topbar .icon-button,
    .app-shell .top-avatar
  {
    align-self: center;
  }
  .app-shell .appointment-toolbar .appointment-heading-actions
  {
    flex: 1 0 100%;
    width: 100%;
    justify-content: flex-end;
    margin: 0;
  }
  .app-shell .appointment-toolbar .appointment-export
  {
    margin-left: auto;
  }
}
.app-shell .appointment-toolbar .appointment-heading-actions
{
  margin-left: auto;
}
@media (max-width: 760px)
{
  .app-shell .sidebar
  {
    top: 0;
    height: calc(54px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: #292c30;
  }
  .app-shell .sidebar-header,
    .app-shell .sidebar-header .brand
  {
    height: 54px;
  }
  .app-shell .topbar
  {
    top: env(safe-area-inset-top);
    height: 54px;
    background: #292c30 !important;
    box-shadow: 0 1px 0 var(--line);
  }
  .app-shell .main-area
  {
    padding-top: calc(54px + env(safe-area-inset-top));
  }
  .appointment-mobile-list,
    .people-mobile-list
  {
    display: grid;
    gap: 12px;
    min-width: 0;
  }
  .appointment-desktop-table,
    .people-desktop-table
  {
    display: none !important;
  }
  .appointment-card
  {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .12);
  }
  .appointment-card-heading
  {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
  }
  .appointment-card-heading .pet-avatar
  {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    font-size: 13px;
  }
  .appointment-card-identity
  {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding-top: 1px;
  }
  .appointment-card-identity strong
  {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .appointment-card-identity > span
  {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .appointment-card-taxi
  {
    display: flex;
    align-items: center;
    align-self: end;
    gap: 6px;
    margin: -5px 0 0 auto;
    color: var(--jade);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
  }
  .appointment-card-taxi svg
  {
    width: 15px;
    height: 15px;
  }
  .appointment-card-attention
  {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
    margin: -5px 0 0;
    padding: 9px 10px;
    color: #f0d78b;
    background: rgba(224, 188, 69, .1);
    border: 1px solid rgba(224, 188, 69, .25);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .appointment-card-attention svg
  {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin-top: 1px;
  }
  .appointment-card-details
  {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
  }
  .appointment-card-details > div
  {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 5px;
    min-width: 0;
  }
  .appointment-card-details > div > span:first-child
  {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
  }
  .appointment-card-details strong
  {
    max-width: 100%;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .appointment-card-details .service-price
  {
    margin-top: -2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
  }
  .appointment-card-details .payment-pill,
    .appointment-card-details .status-pill
  {
    min-height: 34px;
    font-size: 12px;
  }
  .appointment-card-actions
  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .appointment-card-actions > span
  {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
  }
  .appointment-card-actions .row-actions
  {
    justify-content: flex-end;
    gap: 8px;
  }
  .appointment-card-actions .row-action
  {
    width: 44px;
    height: 44px;
  }
  .appointment-card-actions .row-actions > small
  {
    color: var(--muted);
    font-size: 12px;
  }
  .appointment-details-grid
  {
    gap: 8px;
  }
  .appointment-details-item
  {
    padding: 10px;
  }
  .app-shell .page-wrap
  {
    scroll-padding-top: calc(70px + env(safe-area-inset-top));
  }
}
@media (max-width: 420px)
{
  .topbar
  {
    padding: 0 12px;
  }
  .global-search
  {
    width: 38vw;
    padding: 0 7px;
  }
  .top-avatar
  {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
  .page-wrap
  {
    padding-right: 12px;
    padding-left: 12px;
  }
  .welcome-row h1
  {
    font-size: 21px;
  }
  .form-grid
  {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .field-wide
  {
    grid-column: auto;
  }
  .usage-grid
  {
    grid-template-columns: minmax(0, 1fr);
  }
  .modal-actions .button
  {
    flex: 1;
    padding: 0 9px;
  }
}
@media (prefers-reduced-motion: reduce)
{
  *, *::before, *::after
  {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
.app-shell .main-area
{
  background-color: var(--page);
  background-image: linear-gradient(135deg, rgba(35, 38, 41, .9), rgba(41, 44, 48, .96) 58%, rgba(35, 38, 41, .9)), url("../images/fundo.jpg");
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
.app-shell .topbar
{
  background: rgba(41, 44, 48, .88);
}
.app-shell .sidebar-header
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.app-shell .sidebar-header .brand
{
  flex: 1;
  min-width: 0;
}
.app-shell .sidebar-header .sidebar-toggle
{
  color: var(--muted);
  background: var(--surface);
}
.app-shell.sidebar-collapsed .sidebar-header
{
  flex-direction: column;
}
.app-shell.sidebar-collapsed .sidebar-header .brand
{
  justify-content: center;
}
.app-shell.sidebar-collapsed .sidebar .side-nav
{
  margin-top: 22px;
}
.app-shell .global-search,
.app-shell .filter-search
{
  background: #303439;
  border-color: #565b60;
}
.app-shell .global-search > svg
{
  color: var(--muted);
}
.app-shell .global-search input,
.app-shell .filter-search input
{
  color: var(--ink);
  background: transparent;
}
.app-shell .global-search kbd
{
  color: var(--muted);
  background: #3b4045;
  border-color: #555a5f;
}
.directory-tabs
{
  display: flex;
  gap: 8px;
  margin: 0 0 25px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.app-shell .directory-tabs button
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  padding: 0 14px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.app-shell .directory-tabs button.active
{
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--yellow);
}
.app-shell .directory-tabs button svg
{
  width: 16px;
  height: 16px;
}
@media (max-width: 760px)
{
  .app-shell .sidebar-header
  {
    width: 100%;
  }
  .app-shell .sidebar-header .brand
  {
    height: 54px;
  }
  .app-shell.sidebar-collapsed .sidebar-header
  {
    flex-direction: row;
  }
  .app-shell.sidebar-collapsed .sidebar .side-nav
  {
    margin-top: 0;
  }
  .directory-tabs
  {
    margin-bottom: 19px;
  }
  .directory-tabs button
  {
    flex: 1;
    justify-content: center;
    padding: 0 8px;
    font-size: 11px;
  }
}
@media (max-width: 760px)
{
  .app-shell .sidebar
  {
    box-sizing: border-box;
    border-bottom: 0;
  }
  .app-shell .sidebar-header,
    .app-shell .sidebar-header .brand,
    .app-shell .topbar,
    .app-shell .topbar-actions
  {
    display: flex;
    align-items: center;
    height: 54px;
    min-height: 54px;
  }
  .app-shell .sidebar-header
  {
    padding: 0;
  }
  .app-shell .sidebar-header .brand
  {
    margin: 0;
  }
  .app-shell .topbar
  {
    box-sizing: border-box;
    border: 0;
    box-shadow: none;
  }
  .app-shell .topbar::after
  {
    position: fixed;
    z-index: 20;
    top: calc(env(safe-area-inset-top) + 54px);
    right: 0;
    left: 0;
    height: 1px;
    background: #50545a;
    content: '';
    pointer-events: none;
  }
  .app-shell .sidebar .brand-logo,
    .app-shell .topbar .icon-button,
    .app-shell .top-avatar
  {
    align-self: center;
  }
}
@media (max-width: 760px)
{
  .app-shell .page-heading .button.mobile-action-button
  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    max-width: min(46vw, 172px);
    min-width: 0;
    min-height: 42px;
    padding: 7px 11px;
    overflow: visible;
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
  }
  .app-shell .page-heading .button.mobile-action-button.tutor-action-button
  {
    min-width: 92px;
    max-width: min(42vw, 156px);
    min-height: 42px;
    padding: 7px 11px;
    font-size: 10px;
  }
  .app-shell .mobile-action-label
  {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .app-shell .page-heading .button.mobile-action-button[data-action="new-package"]
  {
    min-width: 86px;
    max-width: min(42vw, 156px);
    min-height: 42px;
    gap: 5px;
    padding: 6px;
    font-size: 10px;
  }
  .app-shell .page-heading .button.mobile-action-button svg
  {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
  }
  .app-shell .page-heading > .button[data-action="new-user"]
  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    max-width: min(46vw, 172px);
    min-width: 0;
    min-height: 42px;
    padding: 7px 11px;
    overflow: visible;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .app-shell .page-heading > .button[data-action="new-user"] svg
  {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }
  .app-shell .row-action
  {
    min-width: 40px;
    min-height: 40px;
  }
  .app-shell .modal-actions .button
  {
    min-height: 44px;
  }
}
.client-topbar-brand
{
  display: none;
}
.app-shell.client-app .topbar
{
  z-index: 16;
  justify-content: space-between;
}
.app-shell.client-app .client-topbar-brand
{
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
}
.app-shell.client-app .client-topbar-brand .brand-logo
{
  width: 42px;
  height: 42px;
}
.app-shell.client-app .client-topbar-brand .brand-copy
{
  line-height: 1.1;
}
.app-shell.client-app .client-topbar-brand .brand-copy strong
{
  font: 800 16px var(--display);
}
.app-shell.client-app .client-topbar-brand .brand-copy small
{
  color: var(--muted);
  font-size: 9px;
}
.app-shell.client-app .topbar-actions
{
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
}
.client-response-time
{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--yellow);
  border-radius: 9px;
}
.client-response-time > svg
{
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--yellow);
}
.client-response-time span
{
  display: grid;
  gap: 2px;
}
.client-response-time strong
{
  font-size: 12px;
}
.client-response-time small
{
  color: var(--muted);
  font-size: 10px;
}
.app-shell .directory-tabs .nav-count
{
  min-width: 20px;
  height: 20px;
  margin-left: 1px;
  color: #222427;
  background: var(--yellow);
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
}
.app-shell .request-total
{
  padding: 7px 10px;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.app-shell .requests-list
{
  display: grid;
  gap: 12px;
}
@media (max-width: 760px)
{
  .app-shell.employee-app .topbar
  {
    padding-right: max(4px, env(safe-area-inset-right));
  }
  .app-shell.client-app .topbar
  {
    inset: env(safe-area-inset-top) 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 max(4px, env(safe-area-inset-right)) 0 12px;
  }
  .app-shell.client-app .client-topbar-brand
  {
    gap: 7px;
  }
  .app-shell.client-app .client-topbar-brand .brand-logo
  {
    width: 36px;
    height: 36px;
  }
  .app-shell.client-app .client-topbar-brand .brand-copy strong
  {
    font-size: 14px;
  }
  .app-shell.client-app .client-topbar-brand .brand-copy small
  {
    font-size: 8px;
  }
  .app-shell.employee-app .topbar-actions,
    .app-shell.client-app .topbar-actions
  {
    position: fixed;
    z-index: 20;
    top: calc(env(safe-area-inset-top) + 10px);
    right: max(4px, env(safe-area-inset-right));
    left: auto;
    grid-column: auto;
    justify-self: auto;
    width: auto;
    justify-content: flex-end;
    gap: 7px;
    margin: 0;
    transform: none;
  }
  .app-shell.client-app .topbar .icon-button
  {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  .app-shell.client-app .top-avatar
  {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
  .app-shell.client-app .main-area
  {
    padding-top: calc(54px + env(safe-area-inset-top));
  }
  .app-shell.client-app .page-wrap
  {
    padding-top: 16px;
  }
  .client-response-time
  {
    padding: 11px 12px;
  }
  .client-response-time small
  {
    font-size: 11px;
  }
  .app-shell .timeclock-location,
    .app-shell .timeclock-status
  {
    align-items: stretch;
    flex-direction: column;
  }
  .app-shell .timeclock-location > div,
    .app-shell .timeclock-status > div
  {
    width: 100%;
    min-width: 0;
  }
  .app-shell .timeclock-location .button,
    .app-shell .timeclock-status .button
  {
    flex: 0 0 auto;
    width: 100%;
  }
}
.app-shell .requests-grid
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 410px), 1fr));
  align-items: stretch;
  gap: 16px;
}
.app-shell .request-card
{
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 55%), var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .13);
}
.app-shell .request-card-heading
{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.app-shell .request-card-heading > div
{
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.app-shell .request-card-heading > div > small
{
  color: var(--yellow);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.app-shell .request-card-heading > div strong
{
  color: var(--ink);
  font: 700 16px var(--display);
  overflow-wrap: anywhere;
}
.app-shell .request-card-heading > div > span
{
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.app-shell .request-status
{
  flex: 0 0 auto;
  padding: 5px 9px;
  color: #f0d78b;
  background: rgba(224,188,69,.12);
  border: 1px solid rgba(224,188,69,.24);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.app-shell .request-card-details
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.app-shell .request-card-details > div
{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  background: var(--surface-soft);
  border-radius: 8px;
}
.app-shell .request-card-details > div > svg
{
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--yellow);
}
.app-shell .request-card-details > div > span
{
  display: grid;
  gap: 3px;
  min-width: 0;
}
.app-shell .request-card-details small
{
  color: var(--muted);
  font-size: 10px;
}
.app-shell .request-card-details strong
{
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.app-shell .request-card-notes
{
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.app-shell .request-card-notes strong
{
  color: var(--ink);
  font-size: 10px;
}
.app-shell .request-card-actions
{
  display: flex;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.app-shell .request-card-actions .button
{
  min-height: 42px;
  font-size: 12px;
}
.app-shell .request-reject-button
{
  flex: 0 0 38%;
  color: #f1a293 !important;
  border-color: rgba(221,113,95,.35) !important;
}
.app-shell .request-reject-button:hover
{
  background: rgba(221,113,95,.1) !important;
  border-color: #dd715f !important;
}
.app-shell .request-confirm-button
{
  flex: 1;
}
.app-shell .request-card-actions svg
{
  width: 16px;
  height: 16px;
}
@media (min-width: 761px)
{
  .app-shell .requests-grid
  {
    max-width: 1440px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 18px;
  }
  .app-shell .request-card
  {
    position: relative;
    min-height: 270px;
    padding: 22px;
    overflow: hidden;
    background: linear-gradient(145deg, #3b4045, #32363a 72%);
    border: 1px solid #62676c;
    border-radius: 13px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .23), inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .app-shell .request-card::before
  {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--yellow), rgba(224,188,69,.14));
    content: '';
  }
  .app-shell .request-card:hover
  {
    transform: translateY(-3px);
    border-color: rgba(224,188,69,.72);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .31), 0 0 0 1px rgba(224,188,69,.08);
  }
  .app-shell .request-card-heading
  {
    padding-bottom: 17px;
  }
  .app-shell .request-card-heading .pet-avatar
  {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(224,188,69,.24);
  }
  .app-shell .request-card-details
  {
    gap: 12px;
  }
  .app-shell .request-card-details > div
  {
    min-height: 66px;
    align-items: center;
    padding: 12px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
  }
  .app-shell .request-card-actions
  {
    margin-top: auto;
    padding-top: 15px;
  }
}
@media (max-width: 420px)
{
  .app-shell .requests-grid
  {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }
  .app-shell .request-card
  {
    gap: 13px;
    padding: 14px;
  }
  .app-shell .request-card-details
  {
    gap: 8px;
  }
  .app-shell .request-card-details > div
  {
    gap: 6px;
    padding: 9px;
  }
  .app-shell .request-card-details strong
  {
    font-size: 11px;
  }
  .app-shell .request-card-actions
  {
    gap: 8px;
  }
  .app-shell .request-card-actions .button
  {
    min-height: 50px;
    padding: 0 9px;
    font-size: 11px;
  }
}
/* Mobile header rebuilt as one full-width responsive row. */
@media (max-width: 760px)
{
  .app-shell
  {
    width: 100%;
    min-width: 320px;
    max-width: none;
    overflow-x: clip;
  }
  .app-shell .sidebar
  {
    display: none !important;
  }
  .app-shell .main-area,
    .app-shell.client-app .main-area
  {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: calc(58px + env(safe-area-inset-top)) 0 0;
  }
  .app-shell .topbar,
    .app-shell.client-app .topbar
  {
    position: fixed;
    z-index: 30;
    inset: env(safe-area-inset-top) 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: 58px;
    min-height: 58px;
    margin: 0;
    padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    box-sizing: border-box;
    background: #292c30 !important;
    border: 0;
    border-bottom: 1px solid #4c5054;
    box-shadow: none;
    transform: none;
    backdrop-filter: none;
  }
  .app-shell .topbar::after
  {
    display: none;
    content: none;
  }
  .app-shell .client-topbar-brand,
    .app-shell.client-app .client-topbar-brand
  {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
  }
  .app-shell .client-topbar-brand .brand-logo
  {
    width: 36px;
    height: 36px;
  }
  .app-shell .client-topbar-brand .brand-copy
  {
    line-height: 1.1;
  }
  .app-shell .client-topbar-brand .brand-copy strong
  {
    font: 800 14px var(--display);
  }
  .app-shell .client-topbar-brand .brand-copy small
  {
    color: var(--muted);
    font-size: 8px;
  }
  .app-shell .topbar-actions,
    .app-shell.client-app .topbar-actions
  {
    position: static;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0 0 0 auto;
    transform: none;
  }
  .app-shell .global-search
  {
    flex: 1 1 120px;
    width: auto;
    min-width: 48px;
    max-width: 240px;
    height: 36px;
    padding: 0 8px;
  }
  .app-shell .global-search input
  {
    min-width: 0;
    font-size: 12px;
  }
  .app-shell .global-search kbd,
    .app-shell .today-button
  {
    display: none !important;
  }
  .app-shell .topbar .icon-button
  {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
  }
  .app-shell .top-avatar
  {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
  .app-shell .page-wrap,
    .app-shell.client-app .page-wrap
  {
    width: 100%;
    min-width: 0;
    padding: 16px 12px calc(92px + env(safe-area-inset-bottom));
  }
  .app-shell .mobile-nav
  {
    justify-content: space-around;
    gap: 1px;
  }
  .app-shell .mobile-nav button
  {
    flex: 1 1 0;
    min-width: 36px;
    padding: 3px 1px;
  }
  .app-shell .mobile-nav button span
  {
    font-size: 8px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .app-shell #signOutButton
  {
    order: 1;
  }
  .app-shell #topAvatar
  {
    order: 2;
  }
}
@media (max-width: 900px)
{
  .app-shell .inventory-summary .stat-icon
  {
    display: grid;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
  }
  .app-shell .inventory-summary .stat-icon svg
  {
    display: block;
    width: 15px;
    height: 15px;
  }
  .app-shell .inventory-table .product-icon
  {
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
  }
  .app-shell .inventory-table .product-icon svg
  {
    display: block;
    width: 19px;
    height: 19px;
  }
  .app-shell .movement-symbol
  {
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    width: 32px;
    height: 32px;
  }
  .app-shell .movement-symbol svg
  {
    display: block;
    width: 15px;
    height: 15px;
  }
  .app-shell .table-wrap:has(.mobile-card-table)
  {
    overflow: visible;
  }
  .app-shell .mobile-card-table,
    .app-shell .mobile-card-table tbody
  {
    display: grid;
    width: 100%;
    min-width: 0;
  }
  .app-shell .mobile-card-table thead
  {
    display: none;
  }
  .app-shell .mobile-card-table tbody
  {
    gap: 10px;
  }
  .app-shell .mobile-card-table tbody tr
  {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    min-width: 0;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .app-shell .mobile-card-table tbody td
  {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .app-shell .mobile-card-table tbody td::before
  {
    color: var(--muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
  }
  .app-shell .people-table tbody td:nth-child(1)::before
  {
    content: "Nome";
  }
  .app-shell .people-table tbody td:nth-child(2)::before
  {
    content: "E-mail";
  }
  .app-shell .people-table tbody td:nth-child(3)::before
  {
    content: "WhatsApp";
  }
  .app-shell .people-table tbody td:nth-child(4)::before
  {
    content: "Vínculo";
  }
  .app-shell .people-table tbody td:nth-child(5)::before
  {
    content: "Ações";
  }
  .app-shell .mobile-card-table tbody td:first-child
  {
    grid-column: 1 / -1;
  }
  .app-shell .mobile-card-table tbody td:last-child
  {
    justify-self: end;
  }
  .app-shell .mobile-card-table .row-actions
  {
    justify-content: flex-end;
  }
  .app-shell .mobile-card-table .service-name-field,
    .app-shell .mobile-card-table .price-field
  {
    width: 100%;
    min-width: 0;
  }
  .app-shell .mobile-card-table input
  {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }
  .app-shell .people-table tbody td
  {
    grid-column: 1 / -1;
  }
  .app-shell .people-table tbody td:last-child
  {
    justify-self: stretch;
  }
  .app-shell .people-table tbody td:last-child .row-actions
  {
    justify-content: flex-start;
  }
  .app-shell .service-price-table tbody tr
  {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .app-shell .service-price-table tbody td:first-child
  {
    grid-column: 1 / -1;
  }
  .app-shell .settings-price-table tbody tr
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell .settings-price-table tbody td:first-child,
    .app-shell .settings-price-table tbody td:last-child
  {
    grid-column: 1 / -1;
  }
  .app-shell .settings-price-table tbody td:last-child
  {
    justify-self: start;
  }
  .app-shell .inventory-table tbody td:nth-child(2)
  {
    grid-column: 1 / -1;
  }
  .app-shell .inventory-table tbody td:last-child
  {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .app-shell .inventory-table .stock-track
  {
    max-width: 180px;
  }
}
/* Mobile stock cards: make quantity, stock health, and the main action easy to scan. */
.app-shell .inventory-move-label
{
  display: none;
}
@media (max-width: 760px)
{
  .app-shell .inventory-summary
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 16px;
  }
  .app-shell .inventory-summary .stat-card
  {
    min-height: 82px;
    padding: 11px 12px;
    border-radius: 12px;
  }
  .app-shell .inventory-summary .stat-card:last-child
  {
    grid-column: 1 / -1;
  }
  .app-shell .inventory-summary .stat-top
  {
    min-height: 25px;
    gap: 6px;
    font-size: 10px;
    line-height: 1.25;
  }
  .app-shell .inventory-summary .stat-icon
  {
    display: grid;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
  }
  .app-shell .inventory-summary .stat-value
  {
    margin-top: 5px;
    font-size: 21px;
  }
  .app-shell .inventory-table tbody
  {
    gap: 12px;
  }
  .app-shell .inventory-table tbody tr
  {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 10px;
    padding: 14px;
    border-radius: 13px;
    box-shadow: 0 4px 13px rgba(0, 0, 0, .18);
  }
  .app-shell .inventory-table tbody td:first-child
  {
    grid-column: 1 / -1;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .app-shell .inventory-table tbody td:first-child::before
  {
    display: none;
  }
  .app-shell .inventory-table .stock-product
  {
    gap: 11px;
  }
  .app-shell .inventory-table .product-icon
  {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }
  .app-shell .inventory-table .product-icon svg
  {
    width: 19px;
    height: 19px;
  }
  .app-shell .inventory-table .stock-product strong
  {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.3;
  }
  .app-shell .inventory-table .stock-product small
  {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
  }
  .app-shell .inventory-table tbody td.quantity-cell
  {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    gap: 5px;
  }
  .app-shell .inventory-table .quantity-line
  {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .app-shell .inventory-table .quantity-line strong
  {
    color: var(--ink);
    font-size: 16px;
  }
  .app-shell .inventory-table .quantity-line span
  {
    color: var(--muted);
    font-size: 10px;
  }
  .app-shell .inventory-table .stock-track
  {
    width: 100%;
    max-width: none;
    height: 6px;
    margin-top: 3px;
    background: var(--surface-soft);
  }
  .app-shell .inventory-table tbody td:nth-child(3)
  {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    text-align: right;
  }
  .app-shell .inventory-table tbody td:nth-child(3)::before
  {
    margin-bottom: 7px;
  }
  .app-shell .inventory-table .stock-status
  {
    padding: 6px 9px;
    background: rgba(116, 164, 136, .13);
    border-radius: 999px;
    white-space: nowrap;
  }
  .app-shell .inventory-table .stock-status.low
  {
    background: rgba(231, 137, 112, .15);
  }
  .app-shell .inventory-table tbody td:last-child
  {
    grid-column: 1 / -1;
    justify-self: stretch;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .app-shell .inventory-table tbody td:last-child::before
  {
    align-self: center;
  }
  .app-shell .inventory-table .row-actions
  {
    width: 100%;
  }
  .app-shell .inventory-table .inventory-move-button
  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    color: #292b2e;
    background: var(--yellow);
    border: 1px solid var(--yellow);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
  }
  .app-shell .inventory-table .inventory-move-button svg
  {
    width: 17px;
    height: 17px;
  }
  .app-shell .inventory-move-label
  {
    display: inline;
  }
}
/* Refine spacing and alignment inside mobile inventory cards. */
@media (max-width: 900px)
{
  .app-shell .inventory-table tbody tr
  {
    grid-template-columns: minmax(0, 1.35fr) minmax(92px, .65fr);
    gap: 10px;
  }
  .app-shell .inventory-table tbody td.quantity-cell,
    .app-shell .inventory-table tbody td:nth-child(3)
  {
    box-sizing: border-box;
    min-height: 92px;
    padding: 11px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .app-shell .inventory-table tbody td.quantity-cell
  {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .app-shell .inventory-table tbody td:nth-child(3)
  {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    align-content: space-between;
    justify-self: stretch;
    align-self: stretch;
    gap: 7px;
    text-align: left;
  }
  .app-shell .inventory-table tbody td.quantity-cell::before,
    .app-shell .inventory-table tbody td:nth-child(3)::before
  {
    margin: 0;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .app-shell .inventory-table .quantity-line
  {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .app-shell .inventory-table .quantity-line strong
  {
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: -.02em;
  }
  .app-shell .inventory-table .quantity-line span
  {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.2;
  }
  .app-shell .inventory-table .stock-track
  {
    height: 8px;
    margin-top: 8px;
  }
  .app-shell .inventory-table tbody td:nth-child(3)
  {
    align-content: space-between;
    justify-items: start;
  }
  .app-shell .inventory-table .mobile-stock-short
  {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .app-shell .inventory-table tbody td:nth-child(3) > .stock-status:not(.mobile-stock-short)
  {
    display: none;
  }
  .app-shell .inventory-table tbody td:last-child
  {
    grid-column: 1 / -1;
    justify-self: stretch;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .app-shell .inventory-table tbody td:last-child::before
  {
    display: none;
  }
  .app-shell .inventory-table .row-actions
  {
    width: 100%;
  }
  .app-shell .inventory-table .inventory-move-button
  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 8px 12px;
    color: #292b2e;
    background: var(--yellow);
    border: 1px solid var(--yellow);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
  }
  .app-shell #appContent > .panel.full-table .panel-head
  {
    padding-bottom: 13px;
  }
  .app-shell #appContent > .panel.full-table + .panel .panel-head
  {
    padding-bottom: 13px;
  }
  .app-shell .movement-list
  {
    padding: 4px 14px 12px;
  }
  .app-shell .movement-row
  {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 12px 0;
  }
  .app-shell .movement-symbol
  {
    width: 32px;
    height: 32px;
  }
  .app-shell .movement-detail strong
  {
    color: var(--ink);
    font-size: 12px;
    line-height: 1.3;
  }
  .app-shell .movement-detail small
  {
    font-size: 10px;
    line-height: 1.35;
  }
  .app-shell .movement-amount
  {
    align-self: center;
    padding: 6px 8px;
    background: var(--yellow-soft);
    border-radius: 8px;
    white-space: nowrap;
  }
  .app-shell .movement-amount.out
  {
    background: var(--coral-soft);
  }
  .app-shell .inventory-move-label
  {
    display: inline;
  }
}
@media (max-width: 420px)
{
  .app-shell .inventory-summary
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell .appointment-tabs
  {
    gap: 5px;
  }
  .app-shell .appointment-tabs button
  {
    flex: 1 1 0;
    min-width: 0;
    gap: 5px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 10px;
  }
  .app-shell .appointment-tabs button svg
  {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
  }
}
@media (max-width: 360px)
{
  .app-shell .page-heading:has([data-action="new-appointment"])
  {
    flex-wrap: wrap;
  }
  .app-shell .page-heading:has([data-action="new-appointment"]) > div
  {
    flex: 1 1 180px;
    min-width: 0;
  }
  .app-shell .page-heading > .button.mobile-action-button[data-action="new-appointment"]
  {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 7px 11px;
    overflow: visible;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }
  .app-shell .appointment-tabs
  {
    flex-wrap: wrap;
  }
  .app-shell .appointment-tabs button
  {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
  .app-shell .appointment-tabs button:last-child
  {
    flex-basis: 100%;
  }
}
/* On phone and tablet, keep each service/price item as its own card. */
@media (max-width: 900px)
{
  .app-shell #appContent > .settings-panel
  {
    margin: 0 0 16px !important;
  }
  .app-shell #appContent > .settings-panel + .settings-panel
  {
    margin-top: 16px !important;
  }
  .app-shell #appContent > .panel.full-table:has(table.service-price-table),
    .app-shell #appContent > .settings-panel:has(table.settings-price-table)
  {
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .app-shell #appContent > .panel.full-table:has(table.service-price-table) .table-wrap,
    .app-shell #appContent > .settings-panel:has(table.settings-price-table) .table-wrap
  {
    overflow: visible;
    padding: 0;
    background: transparent;
  }
  .app-shell #appContent > .settings-panel:has(table.settings-price-table) > .panel-head
  {
    margin-bottom: 10px;
    padding: 0 2px 8px;
    background: transparent;
    border-bottom: 1px solid var(--line);
  }
  .app-shell #appContent .settings-price-table tbody,
    .app-shell #appContent .service-price-table tbody
  {
    display: grid !important;
    row-gap: 14px !important;
    padding: 0 !important;
  }
  .app-shell #appContent .settings-price-table tbody tr,
    .app-shell #appContent .service-price-table tbody tr
  {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
  }
  .app-shell #appContent > .settings-panel:has(table.settings-price-table) .settings-actions
  {
    padding: 12px 0 0;
    border-top: 0;
  }
  /* CARD DE SERVIÇOS E PREÇOS NO MOBILE */
  .app-shell #appContent .service-price-table tbody tr
  {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 16px 14px !important;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
  }
  .app-shell #appContent .service-price-table tbody td.service-cell
  {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px 0;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--line);
  }
  .app-shell #appContent .service-price-table tbody td.service-cell::before
  {
    display: none !important;
  }
  .app-shell #appContent .service-price-table tbody td.service-cell strong
  {
    font: 700 15px/1.3 var(--display);
    color: var(--ink);
    letter-spacing: -0.2px;
  }
  .app-shell #appContent .service-price-table tbody td:not(.service-cell)
  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    padding: 10px 6px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    min-width: 0;
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
  }
  .app-shell #appContent .service-price-table tbody td:not(.service-cell)::before
  {
    content: attr(data-label);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
    line-height: 1;
  }
  /* CARD DE AJUSTES (TABELA DE PREÇOS) NO MOBILE */
  .app-shell #appContent .settings-price-table tbody tr
  {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 16px 14px !important;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Serviço"]
  {
    grid-column: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 8px;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Serviço"]::before
  {
    content: "Serviço";
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Serviço"] input
  {
    height: 38px;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--ink);
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Ações"]
  {
    grid-column: 3 / span 1;
    justify-self: end;
    align-self: end;
    display: flex;
    align-items: center;
    padding-bottom: 8px;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Ações"]::before
  {
    display: none !important;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Ações"] .row-action
  {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--coral-soft);
    color: var(--coral);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .app-shell #appContent .settings-price-table tbody td:not([data-label="Serviço"]):not([data-label="Ações"])
  {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 6px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    min-width: 0;
  }
  .app-shell #appContent .settings-price-table tbody td:not([data-label="Serviço"]):not([data-label="Ações"])::before
  {
    content: attr(data-label);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    text-align: center;
    line-height: 1;
  }
  .app-shell #appContent .settings-price-table tbody input[type="number"]
  {
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    padding: 4px 6px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
  }
  /* CARD ADICIONAR SERVIÇO E CAMPOS EXTRAS NO MOBILE */
  .app-shell .custom-field-form
  {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0 6px;
  }
  .app-shell .custom-field-form .field
  {
    width: 100%;
    margin: 0;
  }
  .app-shell .custom-field-form > .button
  {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
  .app-shell .service-presets
  {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }
  .app-shell .service-presets .button
  {
    flex: 1 1 calc(50% - 4px);
    min-height: 42px;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    justify-content: center;
    text-align: center;
  }
  .app-shell .custom-field-list
  {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 4px;
  }
  .app-shell .custom-field-row
  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
  }
  .app-shell .custom-field-row .row-action
  {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
}
/* Shared front-end control baseline for desktop and mobile. */
.app-shell .button,
.app-shell .icon-button,
.app-shell .row-action,
.app-shell .directory-tabs button,
.app-shell .appointment-tabs button,
.app-shell .text-link,
.app-shell .button-text,
.app-shell .payment-pill,
.app-shell .password-toggle,
.app-shell .toast-dismiss,
.app-shell .package-renewal button,
.app-shell .service-presets .button,
.app-shell .settings-actions .button
{
  box-sizing: border-box;
  font-family: inherit;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.app-shell .button
{
  min-height: 42px;
  border-radius: 8px;
}
.app-shell button svg,
.auth-screen button svg,
.modal button svg
{
  display: block;
  flex: 0 0 auto;
}
.app-shell .button-small
{
  min-height: 38px;
}
.app-shell .row-action
{
  min-width: 36px;
  min-height: 36px;
  border-radius: 8px;
}
.app-shell .icon-button
{
  border-radius: 8px;
}
.app-shell .directory-tabs button,
.app-shell .appointment-tabs button
{
  min-height: 42px;
  border-radius: 8px;
}
.app-shell .text-link,
.app-shell .button-text,
.app-shell .package-renewal button
{
  min-height: 38px;
  padding: 6px 9px;
  border-radius: 7px;
}
.app-shell .payment-pill
{
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 7px;
}
.app-shell .package-slot
{
  min-height: 68px;
  border-radius: 8px;
}
.app-shell .button:focus-visible,
.app-shell .icon-button:focus-visible,
.app-shell .row-action:focus-visible,
.app-shell .directory-tabs button:focus-visible,
.app-shell .appointment-tabs button:focus-visible,
.app-shell .text-link:focus-visible,
.app-shell .button-text:focus-visible,
.app-shell .payment-pill:focus-visible,
.app-shell .password-toggle:focus-visible,
.app-shell .toast-dismiss:focus-visible,
.app-shell .package-slot:focus-visible,
.app-shell .package-renewal button:focus-visible,
.app-shell .mobile-nav button:focus-visible
{
  outline: 3px solid rgba(224,188,69,.55);
  outline-offset: 2px;
}
/* Unified mobile controls across every screen and dialog. */
@media (max-width: 760px)
{
  .app-shell .button
  {
    min-height: 44px;
    border-radius: 8px;
  }
  .app-shell .button-small
  {
    min-height: 40px;
    padding-right: 11px;
    padding-left: 11px;
    font-size: 11px;
  }
  .app-shell .icon-button
  {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
  }
  .app-shell .topbar .icon-button
  {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
  .app-shell .welcome-row .button
  {
    min-height: 44px;
  }
  .app-shell .row-action
  {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 8px;
  }
  .app-shell .page-heading .button.mobile-action-button,
    .app-shell .page-heading > .button[data-action="new-user"]
  {
    min-height: 44px;
  }
  .app-shell .appointment-tabs button,
    .app-shell .directory-tabs button
  {
    min-height: 44px;
    border-radius: 8px;
  }
  .app-shell .page-heading .button.mobile-action-button[data-action="new-appointment"]
  {
    flex: 0 1 auto;
    width: auto;
    max-width: min(46vw, 172px);
    min-height: 44px;
    padding: 7px 11px;
    overflow: visible;
    font-size: 10px;
  }
  .app-shell .page-heading .button.mobile-action-button,
    .app-shell .page-heading > .button[data-action="new-user"]
  {
    min-width: 88px;
    min-height: 44px;
    border-radius: 8px;
  }
  .app-shell .page-heading .button.mobile-action-button.tutor-action-button,
    .app-shell .page-heading .button.mobile-action-button[data-action="new-package"]
  {
    min-width: 88px;
    max-width: min(46vw, 172px);
    min-height: 44px;
    padding: 7px 11px;
  }
  .app-shell .text-link,
    .app-shell .button-text,
    .app-shell .package-renewal button
  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 6px 8px;
  }
  .app-shell .package-slot
  {
    min-height: 68px;
    padding: 11px;
    border-radius: 8px;
  }
  .app-shell .package-slot strong
  {
    font-size: 10px;
    white-space: normal;
  }
  .app-shell button.payment-pill
  {
    min-width: 74px;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
  }
  .password-toggle
  {
    right: 2px;
    width: 40px;
    height: 40px;
  }
  .field .password-control input
  {
    padding-right: 49px;
  }
  .toast-dismiss
  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 6px 11px;
  }
  .app-shell .modal .icon-button
  {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
  .app-shell .custom-field-form > .button
  {
    align-self: stretch;
    width: 100%;
  }
  .app-shell .service-presets .button
  {
    flex: 1 1 145px;
    min-height: 44px;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .app-shell .settings-actions .button
  {
    width: 100%;
    min-height: 44px;
  }
  .app-shell .text-link,
    .app-shell .button-text,
    .app-shell .package-renewal button
  {
    min-height: 42px;
    padding: 7px 10px;
  }
  .app-shell .payment-pill
  {
    min-width: 76px;
    min-height: 40px;
    padding: 7px 10px;
    font-size: 11px;
  }
  .app-shell .password-toggle
  {
    width: 42px;
    height: 42px;
  }
  .app-shell .toast-dismiss
  {
    min-height: 42px;
    padding: 7px 11px;
  }
  .app-shell .package-slot
  {
    min-height: 68px;
    padding: 11px;
  }
  .app-shell .page-heading .button.mobile-action-button,
    .app-shell .page-heading > .button[data-action="new-user"]
  {
    min-height: 44px;
  }
  .app-shell .page-heading > .button:not(.mobile-action-button)
  {
    width: auto;
    min-width: 88px;
    max-width: min(48vw, 180px);
    min-height: 44px;
    padding: 7px 11px;
    overflow: visible;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
  }
  .app-shell .page-heading > .button:not(.mobile-action-button) svg
  {
    flex: 0 0 16px;
  }
}
@media (max-width: 360px)
{
  .app-shell .page-heading > .button.mobile-action-button[data-action="new-appointment"]
  {
    flex: 0 1 auto;
    width: auto;
    max-width: min(48vw, 170px);
    min-height: 44px;
    padding: 7px 10px;
    overflow: visible;
    font-size: 10px;
  }
}
/* Mobile inventory: rebuild the current balance as the primary, easy-to-scan metric. */
@media (max-width: 900px)
{
  .app-shell .inventory-table tbody td.quantity-cell
  {
    min-height: 92px;
    padding: 13px 14px;
    background: linear-gradient(145deg, var(--surface-soft), var(--surface));
    border-color: var(--line);
  }
  .app-shell .inventory-table tbody td.quantity-cell::before
  {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .055em;
  }
  .app-shell .inventory-table .quantity-line
  {
    align-items: baseline;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
  }
  .app-shell .inventory-table .quantity-line strong
  {
    color: var(--ink);
    font-size: clamp(21px, 5vw, 27px);
    line-height: 1.05;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
  }
  .app-shell .inventory-table .quantity-line span
  {
    flex: 0 0 auto;
    padding: 4px 7px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
  }
  .app-shell .inventory-table .stock-track
  {
    height: 8px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
  }
  .app-shell .inventory-table .stock-track > span
  {
    border-radius: inherit;
  }
}
@media (max-width: 420px)
{
  .app-shell .inventory-table tbody tr
  {
    grid-template-columns: minmax(0, 1fr) minmax(82px, .72fr);
  }
  .app-shell .inventory-table tbody td.quantity-cell
  {
    min-height: 92px;
    padding: 11px;
  }
  .app-shell .inventory-table .quantity-line
  {
    align-items: baseline;
    flex-direction: row;
    gap: 5px;
  }
  .app-shell .inventory-table .quantity-line strong
  {
    font-size: 20px;
  }
  .app-shell .inventory-table .quantity-line span
  {
    padding: 3px 5px;
    font-size: 9px;
  }
  .app-shell .inventory-table .stock-track
  {
    margin-top: 5px;
  }
}
/* Stilo Lumi — refinamentos de mobile e ações com texto completo (2026-10-22). */
@media (max-width: 900px)
{
  .app-shell #appContent > .page-heading
  {
    align-items: flex-start;
    gap: 12px;
  }
  .app-shell #appContent > .page-heading > div:first-child
  {
    flex: 1 1 100%;
    min-width: 0;
  }
  .app-shell #appContent .page-heading .heading-actions,
    .app-shell #appContent .page-heading > .heading-actions
  {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .app-shell #appContent .page-heading .button.mobile-action-button,
    .app-shell #appContent .page-heading .button[data-action="new-user"],
    .app-shell #appContent .page-heading .button[data-action="new-client"],
    .app-shell #appContent .page-heading .button[data-action="new-appointment"]
  {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: visible;
  }
  .app-shell #appContent .page-heading .button.mobile-action-button svg
  {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
  }
  .app-shell #appContent > .settings-panel
  {
    padding: 16px;
    border-radius: 14px;
  }
  .app-shell #appContent > .settings-panel .panel-head
  {
    align-items: flex-start;
    gap: 8px;
    padding: 0 0 12px;
  }
  .app-shell #appContent > .settings-panel .panel-head h2
  {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
  }
  .app-shell #appContent > .settings-panel .panel-head p
  {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.5;
  }
  .app-shell #appContent .settings-price-table tbody tr
  {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
    padding: 14px !important;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Serviço"]
  {
    grid-column: 1 / span 2;
    min-width: 0;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Ações"]
  {
    grid-column: 3;
    justify-self: end;
  }
  .app-shell #appContent .settings-price-table tbody td:not([data-label="Serviço"]):not([data-label="Ações"])
  {
    padding: 10px 7px;
  }
  .app-shell #appContent .service-price-table tbody tr
  {
    gap: 8px !important;
    padding: 14px !important;
  }
  .app-shell #appContent .service-price-table tbody td:not(.service-cell)
  {
    padding: 10px 4px;
    font-size: 12px;
  }
  .app-shell #appContent .custom-field-form > .button,
    .app-shell #appContent .settings-actions .button
  {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 380px)
{
  .app-shell #appContent .page-heading .button.mobile-action-button,
    .app-shell #appContent .page-heading .button[data-action="new-user"],
    .app-shell #appContent .page-heading .button[data-action="new-client"],
    .app-shell #appContent .page-heading .button[data-action="new-appointment"]
  {
    padding: 9px 10px;
    gap: 6px;
    font-size: 11px;
  }
}
@media (max-width: 900px)
{
  .app-shell #appContent .welcome-row
  {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
  }
  .app-shell #appContent .welcome-row > div
  {
    flex: 1 1 100%;
    min-width: 0;
  }
  .app-shell #appContent .welcome-row > .button[data-action="new-appointment"]
  {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 12px;
  }
}
/* ==========================================================================
   Botões de ação do cabeçalho de página — celular e tablet
   Padrão: "Cadastrar pet". Posição: canto superior direito, ao lado do título,
   como "Novo atendimento" em Atendimentos. Vale para Pets, Pessoas, Pacotes,
   Estoque e Serviços e preços (Editar preços), além de Atendimentos.
   Fica no fim do arquivo para prevalecer sobre os ajustes anteriores.
   ========================================================================== */
@media (max-width: 900px)
{
  .app-shell #appContent > .page-heading
  {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .app-shell #appContent > .page-heading > div:first-child
  {
    flex: 1 1 150px;
    min-width: 0;
  }
  .app-shell #appContent > .page-heading > .button.mobile-action-button,
    .app-shell #appContent > .page-heading > .heading-actions:has(> .mobile-action-button)
  {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    margin-left: auto;
  }
  .app-shell #appContent > .page-heading > .heading-actions:has(> .mobile-action-button)
  {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
  }
  .app-shell #appContent .page-heading .button.mobile-action-button
  {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    overflow: visible;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
  }
  .app-shell #appContent .page-heading .button.mobile-action-button svg
  {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin: 0;
  }
}
@media (max-width: 380px)
{
  .app-shell #appContent .page-heading .button.mobile-action-button
  {
    gap: 6px;
    padding: 9px 11px;
    font-size: 11px;
  }
  .app-shell #appContent .page-heading .button.mobile-action-button svg
  {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 340px)
{
  .app-shell #appContent > .page-heading > div:first-child
  {
    flex-basis: 100%;
  }
}
/* ==========================================================================
   Início, Serviços e preços e Personalização — celular e tablet
   - Início: "Novo atendimento" igual aos demais botões, no canto superior direito.
   - Serviços e preços: Pequeno / Médio / Grande em três colunas iguais.
   - Personalização: nome do serviço + lixeira na 1ª linha; os três valores na 2ª,
     cada um com um único campo (sem caixa dentro de caixa).
   ========================================================================== */
@media (max-width: 900px)
{
  /* ---------- Início ----------
       Rótulo em linha inteira; saudação e botão lado a lado; data embaixo. */
  .app-shell #appContent .welcome-row
  {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
  }
  .app-shell #appContent .welcome-row > div
  {
    display: contents;
  }
  .app-shell #appContent .welcome-row .eyebrow
  {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .app-shell #appContent .welcome-row h1
  {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
  .app-shell #appContent .welcome-row p
  {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
  }
  .app-shell #appContent .welcome-row > .button[data-action="new-appointment"]
  {
    display: inline-flex;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    min-height: 44px;
    margin: 9px 0 0;
    padding: 10px 14px;
    overflow: visible;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
  }
  .app-shell #appContent .welcome-row > .button[data-action="new-appointment"] svg
  {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin: 0;
  }
  /* ---------- Serviços e preços ---------- */
  .app-shell #appContent .service-price-table tbody td:not(.service-cell)
  {
    justify-self: stretch;
    width: 100%;
    box-sizing: border-box;
  }
  /* ---------- Personalização: tabela de preços ---------- */
  .app-shell #appContent .settings-price-table tbody tr
  {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row;
    align-items: end;
    gap: 14px 8px !important;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Serviço"]
  {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-rows: 14px 44px;
    gap: 6px;
    align-content: end;
    min-height: 64px;
    padding: 0 52px 0 0;
    /* reserva 44px da lixeira + 8px de respiro */
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Serviço"] .service-name-field
  {
    display: flex;
    min-width: 0;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Serviço"] .service-name-field input
  {
    display: block;
    flex: 1 1 auto;
    margin: 0;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Serviço"]::before
  {
    font-size: 10px;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Serviço"] input
  {
    height: 44px;
    font-size: 14px;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Ações"]
  {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    display: flex;
    align-items: flex-end;
    height: 44px;
    min-height: 44px;
    padding: 0;
    line-height: 0;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Ações"] .row-action
  {
    width: 44px;
    height: 44px;
  }
  .app-shell #appContent .settings-price-table tbody td:not([data-label="Serviço"]):not([data-label="Ações"])
  {
    grid-row: 2;
    display: grid;
    grid-template-rows: 14px 44px;
    align-items: stretch;
    gap: 6px;
    min-height: 64px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Pequeno"]:not([data-label="Serviço"]):not([data-label="Ações"])
  {
    grid-column: 1;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Médio"]:not([data-label="Serviço"]):not([data-label="Ações"])
  {
    grid-column: 2;
  }
  .app-shell #appContent .settings-price-table tbody td[data-label="Grande"]:not([data-label="Serviço"]):not([data-label="Ações"])
  {
    grid-column: 3;
  }
  .app-shell #appContent .settings-price-table tbody td:not([data-label="Serviço"]):not([data-label="Ações"])::before
  {
    font-size: 10px;
    text-align: left;
  }
  .app-shell #appContent .settings-price-table tbody input[type="number"]
  {
    height: 44px;
    padding: 0 8px;
    font-size: 14px;
    border-radius: 8px;
    background: var(--surface-soft);
  }
}
@media (max-width: 340px)
{
  .app-shell #appContent .welcome-row
  {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-shell #appContent .welcome-row > .button[data-action="new-appointment"]
  {
    grid-column: 1;
    grid-row: 4;
    justify-self: end;
    margin-top: 12px;
  }
}
/* Cabeçalhos de página com botão: mesma estrutura e mesmo respiro superior do Início.
   Rótulo em linha inteira; título e botão lado a lado; descrição embaixo. */
@media (max-width: 900px)
{
  .app-shell #appContent > .page-heading:has(> .button.mobile-action-button),
    .app-shell #appContent > .page-heading:has(> .heading-actions > .mobile-action-button)
  {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 12px;
  }
  .app-shell #appContent > .page-heading:has(> .button.mobile-action-button) > div:first-child,
    .app-shell #appContent > .page-heading:has(> .heading-actions > .mobile-action-button) > div:first-child
  {
    display: contents;
  }
  .app-shell #appContent > .page-heading:has(> .button.mobile-action-button) .eyebrow,
    .app-shell #appContent > .page-heading:has(> .heading-actions > .mobile-action-button) .eyebrow
  {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .app-shell #appContent > .page-heading:has(> .button.mobile-action-button) h1,
    .app-shell #appContent > .page-heading:has(> .heading-actions > .mobile-action-button) h1
  {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
  .app-shell #appContent > .page-heading:has(> .button.mobile-action-button) > div:first-child > p,
    .app-shell #appContent > .page-heading:has(> .heading-actions > .mobile-action-button) > div:first-child > p
  {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
  }
  .app-shell #appContent > .page-heading > .button.mobile-action-button,
    .app-shell #appContent > .page-heading > .heading-actions:has(> .mobile-action-button)
  {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 9px 0 0;
  }
}
@media (max-width: 420px)
{
  .app-shell #appContent > .page-heading:has(> .heading-actions > .tutor-action-button) > .heading-actions
  {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: end;
  }
}
@media (max-width: 340px)
{
  .app-shell #appContent > .page-heading > .button.mobile-action-button,
    .app-shell #appContent > .page-heading > .heading-actions:has(> .mobile-action-button)
  {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: end;
    margin-top: 12px;
  }
  .app-shell #appContent > .page-heading:has(> .button.mobile-action-button),
    .app-shell #appContent > .page-heading:has(> .heading-actions > .mobile-action-button)
  {
    grid-template-columns: minmax(0, 1fr);
  }
}
.app-shell #appContent .page-heading .heading-export-button
{
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-height: 42px;
  align-self: stretch;
}
@media (max-width: 900px)
{
  .app-shell #appContent .page-heading .heading-export-button
  {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
}
/* Tabelas roláveis: o texto .sr-only (position:absolute) dentro delas precisava ficar contido
   no contêiner; antes ele escapava e esticava a página inteira em larguras de tablet. */
.table-wrap
{
  position: relative;
}
/* ==========================================================================
   Contraste de texto (WCAG AA, 4,5:1) no tema escuro.
   Estas regras ainda usavam cores do tema claro (verdes e corais escuros)
   e ficavam quase ilegíveis sobre os painéis escuros.
   ========================================================================== */
.app-shell .time-cell
{
  color: var(--ink);
}
.app-shell .service-cell
{
  color: var(--muted);
}
.app-shell .service-price-table .service-cell strong
{
  color: var(--ink);
}
.app-shell .stock-status
{
  color: #9bd3ad;
}
.app-shell .stock-status.low,
.app-shell .stock-level
{
  color: #f6b3a2;
}
.app-shell .stock-product small,
.app-shell .quantity-line span
{
  color: var(--muted);
}
.app-shell .client-avatar
{
  color: #7a5233;
}
.app-shell .stock-track
{
  background: rgba(255, 255, 255, .12);
}
/* ==========================================================================
   Tablets e notebooks pequenos (761–1200 px): as tabelas de Atendimentos, da
   Agenda de hoje (Início) e de Pessoas escondiam colunas — inclusive "Ações" —
   atrás de uma rolagem interna. Aqui o texto passa a quebrar linha e o
   espaçamento é compactado para tudo caber na tela.
   ========================================================================== */
@media (min-width: 761px) and (max-width: 1200px)
{
  .app-shell .appointment-desktop-table table,
    .app-shell .dashboard-grid table,
    .app-shell .people-desktop-table table
  {
    white-space: normal;
  }
  .app-shell .appointment-desktop-table th,
    .app-shell .appointment-desktop-table td,
    .app-shell .dashboard-grid th,
    .app-shell .dashboard-grid td
  {
    padding-right: 9px;
    padding-left: 9px;
  }
  .app-shell .appointment-desktop-table .row-actions,
    .app-shell .dashboard-grid .row-actions,
    .app-shell .people-table .row-actions
  {
    flex-wrap: wrap;
    gap: 4px;
  }
  .app-shell .dashboard-grid .table-wrap td,
    .app-shell .people-table td
  {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .app-shell .dashboard-grid .table-wrap th:last-child
  {
    width: 58px;
  }
  .app-shell .people-table th:last-child,
    .app-shell .people-table td:last-child
  {
    width: 15%;
    padding-right: 10px;
  }
}
@media (min-width: 761px) and (max-width: 1200px)
{
  .app-shell .dashboard-grid .table-wrap td .status-pill,
    .app-shell .appointment-desktop-table td .status-pill
  {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}
/* Início: a lista pode quebrar linha em telas largas também (nomes longos de pets/tutores) */
.app-shell .dashboard-grid .table-wrap td
{
  white-space: normal;
  overflow-wrap: anywhere;
}
.app-shell .dashboard-grid .table-wrap td .status-pill
{
  white-space: nowrap;
  overflow-wrap: normal;
}
.app-shell .dashboard-grid .table-wrap th:last-child,
.app-shell .dashboard-grid .table-wrap td:last-child
{
  width: 58px;
  padding-right: 9px;
  padding-left: 9px;
}
.app-shell .dashboard-grid .row-actions
{
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
/* ==========================================================================
   Histórico do ponto: filtros de período, funcionário e horas trabalhadas
   ========================================================================== */
.app-shell .timeclock-filters
{
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px;
}
.app-shell .tc-row
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
.app-shell .tc-hours-row
{
  grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr);
}
.app-shell .tc-chips
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.app-shell .tc-chip
{
  min-height: 40px;
  padding: 8px 14px;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.app-shell .tc-chip:hover
{
  border-color: var(--yellow);
}
.app-shell .tc-chip.active
{
  color: #1d1a10;
  background: var(--yellow);
  border-color: var(--yellow);
}
.app-shell .tc-hint
{
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.app-shell .tc-footer
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.app-shell .tc-footer strong
{
  font-size: 13px;
}
.app-shell .tc-actions
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.app-shell .timeclock-records td small
{
  display: block;
  margin-top: 2px;
  color: var(--muted);
}
@media (max-width: 760px)
{
  .app-shell .tc-hours-row
  {
    grid-template-columns: 1fr;
  }
  .app-shell .tc-chip
  {
    min-height: 44px;
  }
  .app-shell .tc-actions
  {
    width: 100%;
  }
  .app-shell .tc-actions .button
  {
    flex: 1 1 140px;
    min-height: 44px;
    justify-content: center;
  }
}

@media (max-width: 760px)
{
  .app-shell .timeclock-table tbody tr,
  .app-shell .timeclock-table tbody td,
  .app-shell .timeclock-table tbody td[data-label="Ações"] .button
  {
    box-sizing: border-box;
    min-width: 0;
  }
  .app-shell .timeclock-table tbody tr
  {
    width: 100%;
    overflow: hidden;
  }
  .app-shell .timeclock-table tbody td[data-label="Ações"]
  {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .app-shell .timeclock-table tbody td[data-label="Ações"] .button
  {
    display: flex;
    width: 100%;
    min-height: 44px;
    justify-content: center;
    white-space: nowrap;
  }
}
@media (max-width: 900px)
{
  .app-shell .timeclock-records > .full-table
  {
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .app-shell .timeclock-table tbody
  {
    gap: 14px;
  }
  .app-shell .timeclock-table tbody tr
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--yellow) 24%, var(--line));
    border-radius: 14px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, var(--yellow)), var(--surface));
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
  }
  .app-shell .timeclock-table tbody td
  {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
    padding: 11px 13px;
    background: transparent;
    font-size: 13px;
    line-height: 1.4;
  }
  .app-shell .timeclock-table tbody td::before
  {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .045em;
    line-height: 1.25;
    text-transform: uppercase;
  }
  .app-shell .timeclock-table tbody td:first-child
  {
    grid-column: 1 / -1;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 64%, transparent);
  }
  .app-shell .timeclock-table tbody td:first-child strong
  {
    color: var(--ink);
    font: 700 15px/1.3 var(--display);
  }
  .app-shell .timeclock-table tbody td:first-child small
  {
    margin: 0;
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  .app-shell .timeclock-table tbody td[data-label="Entrada"],
  .app-shell .timeclock-table tbody td[data-label="Saída"]
  {
    min-width: 0;
    padding-top: 13px;
    padding-bottom: 12px;
  }
  .app-shell .timeclock-table tbody td[data-label="Duração"],
  .app-shell .timeclock-table tbody td[data-label="Registro"],
  .app-shell .timeclock-table tbody td[data-label="Registro / auditoria"]
  {
    grid-column: 1 / -1;
    border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  }
  .app-shell .timeclock-table tbody td[data-label="Duração"]
  {
    background: color-mix(in srgb, var(--surface-soft) 42%, transparent);
  }
  .app-shell .timeclock-table tbody td[data-label="Ações"]
  {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: auto;
    margin: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--line);
  }
  .app-shell .timeclock-table tbody td[data-label="Ações"] .button
  {
    display: flex;
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
  .app-shell .timeclock-table tbody td small
  {
    margin: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .app-shell .timeclock-table tbody td .timeclock-value
  {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .app-shell .timeclock-table tbody td .tc-photos
  {
    margin-top: 3px;
  }
  .app-shell .timeclock-table tbody td .tc-alert
  {
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, #f6b3a2 35%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #f6b3a2 10%, transparent);
  }
  .app-shell .timeclock-table tbody td[data-label="Registro"]::before,
  .app-shell .timeclock-table tbody td[data-label="Registro / auditoria"]::before,
  .app-shell .timeclock-table tbody td[data-label="Duração"]::before
  {
    margin-bottom: 1px;
  }
}
@media (max-width: 900px)
{
  .app-shell .timeclock-table tbody td[data-label="Registro"],
  .app-shell .timeclock-table tbody td[data-label="Registro / auditoria"]
  {
    overflow-wrap: anywhere;
  }
}
/* ==========================================================================
   Personalização: folgas e férias
   ========================================================================== */
.app-shell .closure-form
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 16px;
}
.app-shell .closure-form .closure-reason
{
  grid-column: span 2;
}
.app-shell .closure-form .closure-notify
{
  grid-column: 1 / -1;
}
.app-shell .closure-preview
{
  grid-column: 1 / -1;
  min-height: 18px;
  margin: 0;
  color: var(--yellow);
  font-size: 12px;
  font-weight: 600;
}
.app-shell .closure-form .button
{
  justify-self: start;
}
.app-shell .closure-list
{
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}
.app-shell .closure-card
{
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.app-shell .closure-card.closure-closed
{
  opacity: .72;
}
.app-shell .closure-card header
{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.app-shell .closure-card header small
{
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.app-shell .closure-resume
{
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.app-shell .closure-card summary
{
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.app-shell .closure-notices
{
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.app-shell .closure-notice
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.app-shell .closure-notice small
{
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.app-shell .closure-notice .closure-error
{
  color: #f6b3a2;
}
.app-shell .closure-notice-actions
{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.app-shell .closure-notice-actions:empty
{
  display: none;
}
.app-shell .closure-card-actions
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 760px)
{
  .app-shell .closure-form .closure-reason
  {
    grid-column: 1 / -1;
  }
  .app-shell .closure-form .button
  {
    justify-self: stretch;
    min-height: 44px;
    justify-content: center;
  }
  .app-shell .closure-notice-actions .button, .app-shell .closure-card-actions .button
  {
    flex: 1 1 140px;
    min-height: 44px;
    justify-content: center;
  }
}
.app-shell .time-entry-correction
{
  color: #f6b3a2 !important;
}
/* Cartões de pacote: Preço, Adicional, Taxi-dog mensal e Total mensal sempre na mesma linha */
.app-shell .package-card-prices
{
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 12px 0 8px;
}
.app-shell .package-card-prices > span
{
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.app-shell .package-card-prices > span:first-child
{
  padding-left: 0;
  border-left: 0;
}
.app-shell .package-card-prices > span:last-child strong
{
  color: var(--yellow);
}
@media (max-width: 420px)
{
  .app-shell .package-card-prices
  {
    gap: 6px;
  }
  .app-shell .package-card-prices > span
  {
    padding-left: 6px;
    font-size: 8.5px;
  }
  .app-shell .package-card-prices strong
  {
    font-size: 10.5px;
  }
}
/* Folgas e férias: mesmo padrão do cartão "Adicionar serviço" (sem recuo extra, botão em largura total) */
.app-shell .closure-preview:empty
{
  display: none;
}
@media (max-width: 900px)
{
  .app-shell .closure-form
  {
    gap: 12px;
    padding: 10px 0 6px;
  }
  .app-shell .closure-list
  {
    padding: 4px 0 8px;
  }
  .app-shell .closure-form > .button
  {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}
/* ==========================================================================
   Formulários (pop-ups): sem barras de rolagem aparentes
   - o recuo vira uma variável, para o rodapé fixo nunca passar da caixa
     (antes, margens fixas de 23px causavam 5px de excesso e barras desnecessárias);
   - se o conteúdo for maior que a tela, a rolagem continua funcionando
     (mouse, dedo, teclado), mas sem a barra; Cancelar/Salvar ficam sempre visíveis.
   ========================================================================== */
.modal
{
  --modal-pad: 23px;
  padding: var(--modal-pad);
  max-height: min(94vh, 900px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@supports (height: 100dvh)
{
  .modal
  {
    max-height: min(94dvh, 900px);
  }
}
.modal::-webkit-scrollbar
{
  display: none;
  width: 0;
  height: 0;
}
@media (max-width: 760px)
{
  .modal
  {
    --modal-pad: 18px;
  }
}
.modal:not(.site-confirm-dialog) .modal-actions
{
  position: sticky;
  bottom: calc(var(--modal-pad) * -1);
  z-index: 2;
  margin: 19px calc(var(--modal-pad) * -1) calc(var(--modal-pad) * -1);
  padding: 14px var(--modal-pad) calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, .55);
}
/* Botão "Avisar os clientes" (folgas): mesmo estilo do "Incluir Taxi-dog" */
.app-shell .closure-form .closure-notify
{
  grid-column: 1 / -1;
  margin: 0;
}
/* Celular: formulários um pouco mais compactos para caberem sem rolar em telas de ~844 px de altura */
@media (max-width: 760px)
{
  .modal textarea
  {
    min-height: 64px;
  }
  .modal .modal-actions
  {
    margin-top: 12px;
    padding-top: 12px;
  }
  .modal .modal-heading
  {
    margin-bottom: 10px;
  }
}
@media (max-width: 760px)
{
  .modal
  {
    max-height: calc(100vh - 20px);
  }
  @supports (height: 100dvh)
  {
    .modal
    {
      max-height: calc(100dvh - 20px);
    }
  }
}
/* Folgas e férias no celular/tablet: Primeiro dia e Último dia lado a lado (50% cada) e Motivo na largura toda */
@media (max-width: 900px)
{
  .app-shell .closure-form
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell .closure-form .closure-reason
  {
    grid-column: 1 / -1;
  }
  .app-shell .closure-form input[type="date"]
  {
    min-width: 0;
  }
}
@media (max-width: 340px)
{
  .app-shell .closure-form
  {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ==========================================================================
   Tablet do salão (quiosque de ponto): tela cheia, botões grandes para o toque
   ========================================================================== */
.app-shell.kiosk-app .topbar
{
  display: none;
}
.app-shell.kiosk-app .main-area
{
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.app-shell.kiosk-app .page-wrap
{
  max-width: none;
  padding: 0 !important;
}
.kiosk
{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: max(18px, env(safe-area-inset-top)) clamp(18px, 4vw, 56px) max(24px, env(safe-area-inset-bottom));
  color: var(--ink);
  background: radial-gradient(circle at 20% 0%, #33373c 0, #25282c 55%);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.kiosk button
{
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.kiosk-top
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
}
.kiosk-brand
{
  display: flex;
  align-items: center;
  gap: 12px;
}
.kiosk-brand .brand-logo
{
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.kiosk-brand strong
{
  display: block;
  font-size: 20px;
}
.kiosk-brand small
{
  color: var(--muted);
  font-size: 13px;
}
.kiosk-clock
{
  display: grid;
  justify-items: center;
  line-height: 1.1;
}
.kiosk-clock strong
{
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 800;
  letter-spacing: .02em;
}
.kiosk-clock span
{
  color: var(--muted);
  font-size: clamp(13px, 1.8vw, 18px);
  text-transform: capitalize;
}
.app-shell .kiosk .kiosk-fullscreen,
.app-shell .kiosk .kiosk-return
{
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  flex: 0 0 auto;
  padding-top: 0;
  padding-bottom: 0;
}
.app-shell .kiosk .kiosk-fullscreen
{
  width: 48px;
  flex-basis: 48px;
}
.kiosk .kiosk-fullscreen[aria-pressed="true"]
{
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--line);
}
.kiosk .kiosk-fullscreen[aria-pressed="true"]:hover
{
  color: var(--jade-dark);
  background: var(--surface);
  border-color: var(--yellow);
}
.kiosk-top-actions
{
  display: flex;
  align-items: center;
  gap: 10px;
}
.kiosk-return
{
  min-height: 48px;
  white-space: nowrap;
}
.kiosk-main
{
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  width: min(1100px, 100%);
  margin: 0 auto;
}
.kiosk-center
{
  align-items: center;
  justify-content: center;
  text-align: center;
}
.kiosk h1
{
  margin: 0;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.15;
}
.kiosk-main > p
{
  margin: 0 0 8px;
  color: var(--muted);
  font-size: clamp(15px, 2vw, 20px);
}
.kiosk-grid
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.kiosk-person
{
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 168px;
  padding: 18px 14px;
  text-align: center;
  background: var(--surface, #34383d);
  border: 2px solid var(--line, #4c5054);
  border-radius: 18px;
  transition: transform .12s, border-color .12s;
}
.kiosk-person:not(:disabled):active
{
  transform: scale(.97);
}
.kiosk-person:not(:disabled):hover
{
  border-color: var(--yellow, #e0bc45);
}
.kiosk-person:disabled
{
  cursor: not-allowed;
  opacity: .6;
}
.kiosk-person strong
{
  font-size: clamp(18px, 2.4vw, 24px);
  overflow-wrap: anywhere;
}
.kiosk-avatar
{
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: #1d1a10;
  font-size: 24px;
  font-weight: 800;
  background: var(--yellow, #e0bc45);
  border-radius: 50%;
}
.kiosk-avatar-large
{
  width: 92px;
  height: 92px;
  font-size: 34px;
}
.kiosk-status
{
  padding: 5px 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, .07);
  border-radius: 999px;
}
.kiosk-in
{
  border-color: #4f8a67;
}
.kiosk-in .kiosk-status
{
  color: #9bd3ad;
  background: rgba(79, 138, 103, .25);
}
.kiosk-lunch
{
  border-color: #a88530;
}
.kiosk-lunch .kiosk-status
{
  color: #f0d78b;
  background: rgba(224, 188, 69, .18);
}
.kiosk-back
{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  margin-bottom: 8px;
  padding: 0 18px;
  background: transparent;
  border: 2px solid var(--line, #4c5054);
  border-radius: 999px;
  font-weight: 700;
}
.kiosk-options
{
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  margin-top: 12px;
}
.kiosk-option, .kiosk-confirm
{
  min-height: clamp(64px, 10vh, 92px);
  padding: 0 24px;
  color: #1d1a10;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  background: var(--yellow, #e0bc45);
  border: 0;
  border-radius: 18px;
}
.kiosk-option-lunch_out, .kiosk-option-lunch_in
{
  color: var(--ink);
  background: var(--surface-soft, #3d4146);
  border: 2px solid var(--yellow, #e0bc45);
}
.kiosk-option:active, .kiosk-confirm:active
{
  transform: scale(.98);
}
.kiosk-confirm
{
  width: min(420px, 100%);
  margin-top: 6px;
}
.kiosk-confirm:disabled
{
  color: var(--muted);
  background: var(--surface-soft, #3d4146);
  cursor: not-allowed;
}
.kiosk-dots
{
  display: flex;
  gap: 14px;
  margin: 6px 0;
}
.kiosk-dot
{
  width: 20px;
  height: 20px;
  border: 2px solid var(--muted);
  border-radius: 50%;
}
.kiosk-dot.filled
{
  background: var(--yellow, #e0bc45);
  border-color: var(--yellow, #e0bc45);
}
.kiosk-keypad
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: min(420px, 100%);
}
.kiosk-key
{
  min-height: clamp(58px, 9.5vh, 86px);
  font-size: clamp(26px, 4.4vh, 38px);
  font-weight: 700;
  background: var(--surface, #34383d);
  border: 2px solid var(--line, #4c5054);
  border-radius: 13px;
}
.kiosk-key:active
{
  background: var(--yellow-soft, #49432f);
}
.kiosk-key-action
{
  color: var(--muted);
  font-size: clamp(16px, 2.4vh, 20px);
}
.kiosk-alert
{
  margin: 0;
  padding: 10px 16px;
  color: #f6b3a2;
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 600;
  background: rgba(231, 137, 112, .14);
  border-radius: 12px;
}
.kiosk-hint
{
  color: var(--muted);
}
.kiosk-preview
{
  position: relative;
  width: min(420px, 80vw, 50vh);
  aspect-ratio: 1;
  overflow: hidden;
  background: #111;
  border: 3px solid var(--yellow, #e0bc45);
  border-radius: 28px;
}
.kiosk-preview video
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.kiosk-oval
{
  position: absolute;
  inset: 12% 22%;
  border: 3px dashed rgba(255, 255, 255, .55);
  border-radius: 50%;
  pointer-events: none;
}
.kiosk-count
{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(64px, 14vw, 120px);
  font-weight: 800;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.kiosk-done
{
  gap: 12px;
}
.kiosk-check
{
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  color: #fff;
  background: #3f8f63;
  border-radius: 50%;
}
.kiosk-check svg
{
  width: 64px;
  height: 64px;
}
.kiosk-result
{
  color: var(--ink);
  font-size: clamp(18px, 2.8vw, 26px);
}
.kiosk-photo
{
  width: 110px;
  height: 110px;
  object-fit: cover;
  border: 3px solid var(--yellow, #e0bc45);
  border-radius: 50%;
}
.kiosk-progress
{
  width: min(320px, 70%);
  height: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
}
.kiosk-progress span
{
  display: block;
  height: 100%;
  background: var(--yellow, #e0bc45);
  animation: kiosk-countdown 5s linear forwards;
}
@keyframes kiosk-countdown
{
  from
  {
    width: 100%;
  }
  to
  {
    width: 0;
  }
}
@media (max-height: 560px)
{
  .kiosk-top
  {
    padding-bottom: 6px;
  }
  .kiosk-avatar-large
  {
    display: none;
  }
}
/* Cadastro de funcionário: campo de PIN */
.app-shell .pin-control, .modal .pin-control
{
  display: flex;
  gap: 8px;
}
.modal .pin-control input
{
  flex: 1;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.modal .pin-control input::placeholder
{
  letter-spacing: .015em;
  opacity: .85;
}
.modal .pin-control .button
{
  flex: 0 0 auto;
}
/* Ponto: regras e fotos */
.app-shell .timeclock-rules
{
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px;
}
.app-shell .timeclock-rules-head p
{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.app-shell .timeclock-rules-switches
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.app-shell .timeclock-rules-switches .taxi-dog-toggle
{
  margin: 0;
}
.app-shell .tc-photos
{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.app-shell .tc-photo-button
{
  gap: 5px;
}
.app-shell .time-photo-figure
{
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
}
.app-shell .time-photo-figure img, .modal .time-photo-figure img
{
  width: min(240px, 100%);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--yellow);
  border-radius: 18px;
}
.modal .time-photo-figure
{
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
}
/* Tablet do salão: ajustes para telas baixas (tablet deitado, notebook) e celulares */
.kiosk-person
{
  min-height: clamp(118px, 17vh, 168px);
  padding: clamp(10px, 2vh, 18px) 14px;
}
.kiosk-key
{
  min-height: clamp(50px, 8.4vh, 86px);
}
.kiosk-option, .kiosk-confirm
{
  min-height: clamp(56px, 8.6vh, 92px);
}
@media (max-height: 800px)
{
  .kiosk-avatar
  {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .kiosk-top
  {
    padding-bottom: 6px;
  }
  .kiosk-main > p
  {
    margin-bottom: 2px;
  }
  .kiosk-dots
  {
    margin: 2px 0;
  }
  .kiosk-keypad
  {
    gap: 9px;
  }
  .kiosk-back
  {
    min-height: 46px;
    margin-bottom: 2px;
  }
}
@media (max-height: 700px)
{
  .kiosk h1
  {
    font-size: 26px;
  }
  .kiosk-clock strong
  {
    font-size: 30px;
  }
  .kiosk-brand .brand-logo
  {
    width: 40px;
    height: 40px;
  }
  .kiosk-preview
  {
    width: min(340px, 70vw, 44vh);
  }
}
@media (max-width: 600px)
{
  .kiosk-top
  {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }
  .kiosk-brand
  {
    grid-column: 1;
    grid-row: 1;
    gap: 7px;
    min-width: 0;
  }
  .kiosk-brand .brand-logo
  {
    width: 38px;
    height: 38px;
  }
  .kiosk-brand strong
  {
    font-size: 15px;
  }
  .kiosk-clock
  {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    align-items: baseline;
    justify-items: initial;
    gap: 8px;
    min-width: 0;
  }
  .kiosk-clock strong
  {
    flex: 0 0 auto;
    font-size: 25px;
  }
  .kiosk-clock span
  {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kiosk-top-actions
  {
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: 6px;
  }
  .app-shell .kiosk .kiosk-return
  {
    width: auto;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 0 10px;
    font-size: 11px;
  }
  .kiosk-return svg
  {
    width: 16px;
    height: 16px;
  }
  .app-shell .kiosk .kiosk-fullscreen
  {
    width: 40px;
    height: 40px;
    min-height: 40px;
    flex: 0 0 40px;
  }
  .kiosk-grid
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .kiosk-person
  {
    min-height: 118px;
  }
  .kiosk-brand small
  {
    display: none;
  }
}
.kiosk-person
{
  min-height: clamp(112px, 16vh, 168px);
}
.kiosk-grid
{
  gap: 12px;
}
@media (max-width: 600px)
{
  .kiosk-person
  {
    min-height: 112px;
  }
}
.kiosk-clock span
{
  text-transform: none;
}
/* Tablet: cores dos botões (a regra geral ".kiosk button" é mais forte que as classes soltas) */
.kiosk .kiosk-option, .kiosk .kiosk-confirm
{
  color: #1d1a10;
}
.kiosk .kiosk-option-lunch_out, .kiosk .kiosk-option-lunch_in
{
  color: var(--ink);
}
.kiosk .kiosk-confirm:disabled
{
  color: var(--muted);
}
.kiosk .kiosk-key-action
{
  color: var(--muted);
}
.kiosk .kiosk-person:disabled
{
  color: var(--muted);
}
/* Folgas e férias: ação alinhada ao padrão dos botões principais e descrição equilibrada. */
.app-shell #closuresPanel > .panel-head > div
{
  width: 100%;
  min-width: 0;
}
.app-shell #closuresPanel > .panel-head p
{
  max-width: 70ch;
  line-height: 1.5;
}
.app-shell #closuresPanel .closure-form > .button
{
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 165px;
  min-height: 39px;
}
.app-shell #closuresPanel .closure-list > .settings-hint
{
  margin: 12px 16px;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 900px)
{
  .app-shell #closuresPanel .closure-form > .button
  {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }
}
/* Folgas e férias: campos e recuos alinhados como os demais cartões de configurações. */
.app-shell #closuresPanel > .panel-head
{
  padding: 16px 18px 14px;
}
.app-shell #closuresPanel .closure-form
{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}
.app-shell #closuresPanel .closure-form .closure-reason
{
  grid-column: 1 / -1;
}
.app-shell #closuresPanel .closure-form .closure-notify,
.app-shell #closuresPanel .closure-form .closure-preview
{
  grid-column: 1 / -1;
}
.app-shell #closuresPanel .closure-list
{
  padding: 0 16px 16px;
}
.app-shell #closuresPanel .closure-list > .settings-hint
{
  margin: 0;
  padding: 14px 0 2px;
}
@media (max-width: 900px)
{
  .app-shell #closuresPanel > .panel-head
  {
    padding: 0 0 12px;
  }
  .app-shell #closuresPanel .closure-form
  {
    padding: 0;
  }
  .app-shell #closuresPanel .closure-list
  {
    padding: 12px 0 0;
  }
}

/* Experiência simplificada do ponto para Gerência e Funcionários */
.manager-clock-hero
{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  margin-bottom: 14px;
  padding: clamp(20px, 3vw, 34px);
  border-color: var(--line);
  background: linear-gradient(135deg, var(--surface), var(--surface-soft));
}
.manager-clock-main
{
  max-width: 560px;
}
.manager-clock-icon,
.employee-clock-icon
{
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--yellow);
  background: var(--surface-soft);
}
.manager-clock-icon svg,
.employee-clock-icon svg
{
  width: 22px;
  height: 22px;
}
.manager-clock-main h2,
.employee-clock-heading h2
{
  margin: 6px 0;
  color: var(--ink);
  font: 700 clamp(18px, 2vw, 24px) var(--display);
}
.manager-clock-main p,
.employee-clock-heading p
{
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.manager-clock-open
{
  width: 100%;
  min-height: 44px;
  margin-top: 18px;
  padding-inline: 16px;
  justify-content: center;
}
.manager-clock-steps
{
  display: grid;
  gap: 10px;
}
.manager-clock-steps > div
{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.manager-clock-steps > div > span,
.employee-clock-steps b
{
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--yellow-soft);
  font-weight: 800;
}
.manager-clock-steps strong,
.manager-clock-steps small
{
  display: block;
}
.manager-clock-steps strong
{
  color: var(--ink);
  font-size: 12px;
}
.manager-clock-steps small
{
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.manager-clock-note
{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.manager-clock-note svg
{
  width: 16px;
  color: var(--yellow);
}
.employee-clock-card
{
  margin-bottom: 14px;
  padding: clamp(16px, 3vw, 24px);
}
.employee-clock-heading
{
  display: flex;
  align-items: center;
  gap: 14px;
}
.employee-clock-heading .employee-clock-icon
{
  flex: 0 0 48px;
  margin: 0;
}
.employee-clock-heading > div
{
  flex: 1 1 auto;
  min-width: 0;
}
.employee-clock-heading .eyebrow
{
  color: var(--yellow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.employee-clock-heading .status-pill
{
  flex: 0 0 auto;
}
.employee-clock-action
{
  min-height: 48px;
  margin: 20px 0 8px 62px;
}
.employee-clock-actions
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.employee-clock-actions:has(.employee-clock-action:only-child)
{
  grid-template-columns: minmax(0, 1fr);
}
.employee-clock-actions .employee-clock-action
{
  width: 100%;
  min-width: 0;
  margin: 16px 0 0;
  justify-content: center;
}
.timeclock-phone-policy
{
  cursor: default;
}
.timeclock-phone-policy:hover
{
  border-color: var(--line);
  background-color: #2e3236;
}
.timeclock-phone-policy .status-pill
{
  flex: 0 0 auto;
}
.employee-clock-method
{
  margin: 4px 0 0 62px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.employee-clock-steps
{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0 62px;
}
.employee-clock-steps > span
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface-soft);
  font-size: 11px;
}
.employee-clock-steps b
{
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  font-size: 11px;
}
@media (max-width: 760px)
{
  .manager-clock-hero
  {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 18px;
  }
  .manager-clock-main
  {
    max-width: none;
  }
  .manager-clock-open
  {
    width: 100%;
    max-width: none;
  }
  .employee-clock-heading
  {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }
  .employee-clock-heading > div
  {
    flex: 1 1 calc(100% - 62px);
  }
  .employee-clock-heading > .status-pill
  {
    margin-left: 58px;
  }
  .employee-clock-action,
  .employee-clock-method,
  .employee-clock-steps
  {
    margin-left: 0;
  }
  .employee-clock-actions
  {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .employee-clock-action
  {
    width: 100%;
    margin-top: 12px;
  }
  .employee-clock-steps
  {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .employee-clock-steps > span
  {
    border-radius: 12px;
  }
}

.employee-home-actions [data-view="timeclock"]
{
  flex: 1 1 100%;
  width: 100%;
  justify-content: center;
}

/* Ponto: painel desktop organizado e comparação da carga semanal. */
.app-shell .timeclock-filters
{
  gap: 18px;
  padding: clamp(18px, 2vw, 26px);
  border-color: color-mix(in srgb, var(--line) 78%, var(--yellow));
  background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-soft) 72%, var(--surface)));
}
.app-shell .tc-panel-heading
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
}
.app-shell .tc-panel-heading h2
{
  margin: 5px 0 3px;
  color: var(--ink);
  font: 700 20px var(--display);
}
.app-shell .tc-panel-heading p,
.app-shell .tc-analysis-heading p
{
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.app-shell .tc-panel-icon,
.app-shell .tc-analysis-icon
{
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--line));
  border-radius: 12px;
  color: var(--yellow);
  background: var(--yellow-soft);
}
.app-shell .tc-panel-icon svg,
.app-shell .tc-analysis-icon svg
{
  width: 19px;
  height: 19px;
}
.app-shell .tc-filter-grid
{
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) repeat(2, minmax(150px, .9fr)) minmax(190px, 1.1fr);
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.app-shell .tc-period-toolbar
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.app-shell .tc-period-toolbar > strong
{
  color: var(--ink);
  font-size: 12px;
}
.app-shell .tc-analysis-grid
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.app-shell .tc-analysis-card
{
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.app-shell .tc-analysis-card.tc-weekly-card
{
  border-color: color-mix(in srgb, var(--yellow) 38%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--yellow-soft) 44%, var(--surface)), var(--surface));
}
.app-shell .tc-analysis-heading
{
  display: flex;
  align-items: center;
  gap: 11px;
}
.app-shell .tc-analysis-heading h3
{
  margin: 0 0 3px;
  color: var(--ink);
  font: 700 14px var(--display);
}
.app-shell .tc-analysis-icon
{
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.app-shell .tc-analysis-icon svg
{
  width: 17px;
  height: 17px;
}
.app-shell .tc-analysis-card > .field
{
  max-width: 300px;
}
.app-shell .tc-weekly-controls
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.app-shell .tc-weekly-summary
{
  display: grid;
  gap: 9px;
  min-width: 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.app-shell .tc-weekly-summary-head,
.app-shell .tc-week-person
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app-shell .tc-weekly-summary-head
{
  color: var(--ink);
  font-size: 11px;
}
.app-shell .tc-weekly-summary-head span
{
  color: var(--muted);
  font-weight: 500;
}
.app-shell .tc-week-people
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 170px;
  overflow: auto;
}
.app-shell .tc-week-person
{
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 11px;
}
.app-shell .tc-week-person span
{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell .tc-week-person strong
{
  flex: 0 0 auto;
  color: var(--yellow);
  font-size: 12px;
}
.app-shell .tc-week-empty
{
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
@media (max-width: 1050px)
{
  .app-shell .tc-filter-grid
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px)
{
  .app-shell .tc-analysis-grid,
  .app-shell .tc-filter-grid,
  .app-shell .tc-weekly-controls,
  .app-shell .tc-week-people
  {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-shell .tc-analysis-card > .field
  {
    max-width: none;
  }
  .app-shell .tc-period-toolbar
  {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Pausa de almoço: avisos no histórico do ponto */
.app-shell .tc-alert, .app-shell .timeclock-table small.tc-alert { color: #f6b3a2; font-weight: 600; }

@media (max-width: 900px)
{
  .app-shell .timeclock-records > .full-table
  {
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .app-shell .timeclock-table,
  .app-shell .timeclock-table tbody
  {
    display: grid;
    width: 100%;
    min-width: 0;
  }
  .app-shell .timeclock-table thead
  {
    display: none;
  }
  .app-shell .timeclock-table tbody
  {
    gap: 12px;
  }
  .app-shell .timeclock-table tbody tr
  {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--yellow) 28%, var(--line));
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  }
  .app-shell .timeclock-table tbody td
  {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 11px 13px;
    border: 0;
    color: var(--ink);
    background: transparent;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .app-shell .timeclock-table tbody td::before
  {
    display: block;
    color: var(--muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.25;
    text-transform: uppercase;
  }
  .app-shell .timeclock-table tbody td.tc-cell-employee
  {
    padding: 12px 15px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 75%, var(--surface));
  }
  .app-shell .timeclock-table tbody td.tc-cell-employee strong
  {
    color: var(--ink);
    font: 700 15px/1.3 var(--display);
  }
  .app-shell .timeclock-table tbody td.tc-cell-employee small
  {
    color: var(--muted);
    font-size: 11px;
  }
  .app-shell .timeclock-table tbody td.tc-cell-start,
  .app-shell .timeclock-table tbody td.tc-cell-end
  {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .app-shell .timeclock-table tbody td.tc-cell-end
  {
    border-top: 1px solid var(--line);
  }
  .app-shell .timeclock-table tbody td.tc-cell-start
  {
    padding-left: 15px;
  }
  .app-shell .timeclock-table tbody td.tc-cell-end
  {
    padding-right: 15px;
  }
  .app-shell .timeclock-table tbody td.tc-cell-duration,
  .app-shell .timeclock-table tbody td.tc-cell-record,
  .app-shell .timeclock-table tbody td.tc-cell-actions
  {
    border-top: 1px solid var(--line);
  }
  .app-shell .timeclock-table tbody td.tc-cell-duration
  {
    padding: 10px 15px;
    background: color-mix(in srgb, var(--surface-soft) 45%, var(--surface));
  }
  .app-shell .timeclock-table tbody td .timeclock-value
  {
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
  }
  .app-shell .timeclock-table tbody td.tc-cell-start .timeclock-value,
  .app-shell .timeclock-table tbody td.tc-cell-end .timeclock-value
  {
    font-size: 12px;
    white-space: nowrap;
  }
  .app-shell .timeclock-table tbody td small
  {
    display: block;
    max-width: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .app-shell .timeclock-table tbody td .timeclock-day-note
  {
    padding-top: 3px;
  }
  .app-shell .timeclock-table tbody td .tc-alert
  {
    margin-top: 2px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, #f6b3a2 40%, var(--line));
    border-radius: 9px;
    background: color-mix(in srgb, #f6b3a2 12%, var(--surface));
  }
  .app-shell .timeclock-table tbody td .tc-photos
  {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
  }
  .app-shell .timeclock-table tbody td .tc-photo-button
  {
    min-height: 38px;
    justify-content: center;
  }
  .app-shell .timeclock-table tbody td.tc-cell-actions
  {
    justify-self: stretch;
    width: auto;
    padding: 9px 11px 11px;
  }
  .app-shell .timeclock-table tbody td.tc-cell-actions .button
  {
    display: flex;
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }
}

.cash-summary
{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.cash-summary .stat-card
{
  padding: 14px 16px;
}
.cash-summary .stat-value
{
  margin-top: 8px;
  font-size: 21px;
}
.cash-toolbar
{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
}
.cash-date-filters
{
  display: flex;
  align-items: end;
  gap: 12px;
}
.cash-date-filters .field
{
  min-width: 150px;
  margin: 0;
}
.cash-toolbar > .button
{
  min-height: 40px;
}
.cash-count,
.cash-source,
.cash-automatic
{
  color: var(--muted);
  font-size: 11px;
}
.cash-source
{
  display: block;
  margin-top: 3px;
}
.cash-type
{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.cash-type.income,
.cash-amount.income
{
  color: var(--jade);
}
.cash-type.income
{
  background: var(--jade-soft);
}
.cash-type.expense,
.cash-amount.expense,
.cash-negative
{
  color: var(--coral);
}
.cash-type.expense
{
  background: var(--coral-soft);
}
.cash-amount
{
  font-weight: 700;
  white-space: nowrap;
}
.cash-automatic
{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.cash-automatic svg
{
  width: 13px;
  height: 13px;
}
.cash-table td:nth-child(2)
{
  min-width: 180px;
}
.cash-table td:last-child
{
  white-space: nowrap;
}
@media (max-width: 760px)
{
  .cash-summary
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .cash-summary .stat-card
  {
    min-height: 82px;
    padding: 11px 12px;
    border-radius: 12px;
  }
  .cash-summary .stat-card:last-child
  {
    grid-column: 1 / -1;
  }
  .cash-summary .stat-top
  {
    min-height: 25px;
    gap: 6px;
    font-size: 10px;
    line-height: 1.25;
  }
  .cash-summary .stat-value
  {
    margin-top: 5px;
    font-size: 21px;
  }
  .cash-toolbar
  {
    align-items: stretch;
    flex-direction: column;
    padding: 13px;
  }
  .cash-date-filters
  {
    gap: 8px;
  }
  .cash-date-filters .field
  {
    flex: 1;
    min-width: 0;
  }
  .cash-toolbar > .button
  {
    justify-content: center;
    width: 100%;
  }
  .cash-table tbody tr
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cash-table tbody td:nth-child(2)
  {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px)
{
  .user-form-grid
  {
    grid-template-columns: minmax(0, 1fr);
  }
}
#clientDialog select,
#tutorDialog select,
#userDialog select
{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b9b5aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
}
#clientDialog select:hover,
#tutorDialog select:hover,
#userDialog select:hover
{
  border-color: #e0bc45;
  background-color: #35393d;
}
@media (max-width: 480px)
{
  .app-shell .cash-date-filters
  {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .app-shell .cash-date-filters .field,
  .app-shell .cash-date-filters input[type="date"]
  {
    width: 100%;
    min-width: 0;
  }
  .app-shell #closuresPanel .closure-form
  {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-shell #closuresPanel .closure-form > .field
  {
    min-width: 0;
  }
}
@media (max-width: 380px)
{
  .app-shell .mobile-nav button
  {
    min-width: 0;
  }
  .app-shell .mobile-nav button span
  {
    font-size: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}
@media (max-width: 760px)
{
  .app-shell,
  .app-shell .main-area,
  .app-shell .page-wrap,
  .app-shell #appContent,
  .app-shell #appContent > *
  {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .app-shell .page-wrap,
  .app-shell.client-app .page-wrap
  {
    padding-right: clamp(10px, 4vw, 18px);
    padding-left: clamp(10px, 4vw, 18px);
  }
  .app-shell #appContent > .page-heading,
  .app-shell #appContent > .welcome-row
  {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(12px, 3.5vw, 18px);
    width: 100%;
    margin-bottom: clamp(16px, 4vw, 22px);
  }
  .app-shell #appContent .appointment-toolbar
  {
    padding-right: 0;
    padding-left: 0;
  }
  .app-shell #appContent > .page-heading > div:first-child,
  .app-shell #appContent > .welcome-row > div
  {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .app-shell #appContent > .page-heading > div:first-child > p,
  .app-shell #appContent > .welcome-row > div > p
  {
    max-width: 100%;
    margin-top: 6px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .app-shell #appContent > .page-heading > .button.mobile-action-button,
  .app-shell #appContent > .page-heading > .heading-actions,
  .app-shell #appContent > .welcome-row > .button
  {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }
  .app-shell #appContent > .page-heading > .button.mobile-action-button,
  .app-shell #appContent > .welcome-row > .button,
  .app-shell #appContent .heading-actions .mobile-action-button
  {
    min-height: 46px;
    padding: 10px clamp(12px, 4vw, 18px);
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .app-shell #appContent > .page-heading > .heading-actions
  {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(8px, 2.5vw, 12px);
  }
  .app-shell #appContent > .page-heading > .heading-actions > .mobile-action-button
  {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
  .app-shell #appContent > .page-heading > .heading-actions > .heading-export-button
  {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
  }
  .app-shell #appContent .panel,
  .app-shell #appContent .panel-head,
  .app-shell #appContent .panel-head > div,
  .app-shell #appContent .field,
  .app-shell #appContent .cash-date-filters,
  .app-shell #appContent .cash-date-filters .field
  {
    min-width: 0;
    max-width: 100%;
  }
  .app-shell #appContent .field input,
  .app-shell #appContent .field select,
  .app-shell #appContent .field textarea
  {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .app-shell #appContent .panel-head
  {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .app-shell #appContent .panel-head > div
  {
    flex: 1 1 100%;
    width: 100%;
  }
  .app-shell #appContent .panel-head p
  {
    margin-top: 5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .app-shell #appContent .button
  {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .app-shell #appContent .cash-toolbar
  {
    display: block;
    width: 100%;
    padding: clamp(12px, 4vw, 16px);
  }
  .app-shell #appContent .cash-date-filters
  {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
  }
  .app-shell #appContent .cash-date-filters .field
  {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin: 0;
  }
  .app-shell #appContent .cash-date-filters input[type="date"]
  {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-right: 8px;
    padding-left: 8px;
    font-size: clamp(12px, 3.7vw, 16px);
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
  }
  .app-shell #appContent .closure-form
  {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-shell #appContent .closure-form > *
  {
    grid-column: 1 / -1;
    min-width: 0;
    max-width: 100%;
  }
}
@media (max-width: 420px)
{
  .app-shell #appContent > .page-heading h1,
  .app-shell #appContent > .welcome-row h1
  {
    font-size: clamp(21px, 6vw, 25px);
  }
  .app-shell #appContent > .page-heading > .heading-actions > .mobile-action-button
  {
    padding-right: 8px;
    padding-left: 8px;
    font-size: clamp(11px, 3.4vw, 13px);
  }
  .app-shell #appContent .cash-summary
  {
    gap: 8px;
  }
  .app-shell #appContent .cash-summary .stat-card
  {
    min-width: 0;
    padding: clamp(9px, 3vw, 12px);
  }
  .app-shell .mobile-nav
  {
    width: 100%;
    max-width: 100%;
    padding-right: max(4px, env(safe-area-inset-right));
    padding-left: max(4px, env(safe-area-inset-left));
  }
  .app-shell .mobile-nav button
  {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    padding-right: 1px;
    padding-left: 1px;
  }
  .app-shell .mobile-nav button span
  {
    max-width: 100%;
    font-size: clamp(7px, 2.2vw, 9px);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}
@media (max-width: 760px)
{
  .app-shell #appContent > .page-heading:has(.taxi-week-label) .heading-actions
  {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px minmax(96px, auto);
    align-items: center;
    justify-items: stretch;
    gap: 0;
    width: 100%;
  }
  .app-shell #appContent > .page-heading:has(.taxi-week-label) .taxi-week-label
  {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(9px, 2.4vw, 10px);
  }
  .app-shell #appContent > .page-heading:has(.taxi-week-label) .heading-actions > .icon-button
  {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
  }
  .app-shell #appContent > .page-heading:has(.taxi-week-label) .heading-actions > .button
  {
    grid-column: auto;
    justify-self: start;
    width: auto;
    min-width: 96px;
    min-height: 42px;
    padding: 8px clamp(9px, 2.8vw, 13px);
    font-size: clamp(10px, 2.8vw, 12px);
    white-space: nowrap;
    margin: 0 0 0 35px;
  }
  .app-shell #appContent .taxi-route-summary > div
  {
    min-width: 0;
  }
  .app-shell #appContent .taxi-route-summary p
  {
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .app-shell #appContent .taxi-week-grid
  {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .app-shell #appContent .taxi-day
  {
    padding: clamp(12px, 4vw, 16px);
  }
  .app-shell #appContent .taxi-day-heading span
  {
    font-size: 14px;
  }
  .app-shell #appContent .taxi-day-heading strong
  {
    font-size: 11px;
  }
  .app-shell #appContent .taxi-period
  {
    margin-top: 14px;
  }
  .app-shell #appContent .taxi-period > header div
  {
    gap: 8px;
  }
  .app-shell #appContent .taxi-period h3
  {
    font-size: 12px;
  }
  .app-shell #appContent .taxi-period > header span
  {
    font-size: 10px;
  }
  .app-shell #appContent .taxi-period > header > .button
  {
    flex: 1 1 100%;
    width: 100%;
    min-height: 44px;
  }
  .app-shell #appContent .taxi-period-empty
  {
    padding: 12px;
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .app-shell #appContent .taxi-stop
  {
    align-items: flex-start;
    padding: 10px;
  }
  .app-shell #appContent .taxi-stop-info > span,
  .app-shell #appContent .taxi-stop-address
  {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .app-shell #appContent > .page-heading:has(> .button.mobile-action-button),
  .app-shell #appContent > .page-heading:has(> .heading-actions > .mobile-action-button)
  {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
  }
  .app-shell #appContent > .page-heading:has(> .button.mobile-action-button) > div:first-child,
  .app-shell #appContent > .page-heading:has(> .heading-actions > .mobile-action-button) > div:first-child
  {
    display: block;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
  }
  .app-shell #appContent > .page-heading:has(> .button.mobile-action-button) h1,
  .app-shell #appContent > .page-heading:has(> .heading-actions > .mobile-action-button) h1,
  .app-shell #appContent > .page-heading:has(> .button.mobile-action-button) > div:first-child > p,
  .app-shell #appContent > .page-heading:has(> .heading-actions > .mobile-action-button) > div:first-child > p
  {
    grid-column: 1;
    grid-row: auto;
  }
  .app-shell #appContent > .page-heading > .button.mobile-action-button,
  .app-shell #appContent > .page-heading > .heading-actions:has(> .mobile-action-button)
  {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }
  .app-shell #appContent > .page-heading > .heading-actions:has(> .mobile-action-button)
  {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
  }
  .app-shell #appContent > .welcome-row
  {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .app-shell #appContent > .welcome-row > div
  {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .app-shell #appContent > .welcome-row > .button
  {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}
@media (max-width: 360px)
{
  .app-shell #appContent > .page-heading:has(.taxi-week-label) .heading-actions
  {
    grid-template-columns: 42px minmax(0, 1fr) 42px minmax(96px, auto);
    gap: 0;
  }
  .app-shell #appContent > .page-heading:has(.taxi-week-label) .heading-actions > .icon-button
  {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
  }
  .app-shell #appContent > .page-heading:has(.taxi-week-label) .taxi-week-label
  {
    font-size: 6.5px;
  }
  .app-shell #appContent > .page-heading:has(.taxi-week-label) .heading-actions > .button
  {
    min-width: 96px;
    margin-left: 35px;
    padding-right: 7px;
    padding-left: 7px;
    font-size: 10px;
  }
}
@media (max-width: 900px)
{
  .app-shell #appContent .panel.full-table:has(.cash-table) .table-wrap
  {
    box-sizing: border-box;
    padding: 12px;
  }
  .app-shell #appContent .panel.full-table:has(.cash-table) .cash-table tbody
  {
    gap: 12px;
  }
  .app-shell #appContent .panel.full-table:has(.cash-table) .cash-table tbody tr
  {
    gap: 10px 14px;
    padding: 15px;
    border-radius: 12px;
  }
  .app-shell #appContent .panel.full-table:has(.cash-table) .cash-table tbody td
  {
    gap: 6px;
    line-height: 1.5;
  }
  .app-shell #appContent #closuresPanel
  {
    box-sizing: border-box;
    padding: clamp(14px, 4vw, 18px);
  }
  .app-shell #appContent #closuresPanel > .panel-head
  {
    gap: 8px;
    padding: 0 0 14px;
  }
  .app-shell #appContent #closuresPanel .closure-form
  {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0 4px;
  }
  .app-shell #appContent #closuresPanel .closure-form > *
  {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }
  .app-shell #appContent #closuresPanel .closure-form .field
  {
    gap: 6px;
  }
  .app-shell #appContent #closuresPanel .closure-form input[type="date"],
  .app-shell #appContent #closuresPanel .closure-form input[name="reason"]
  {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .app-shell #appContent #closuresPanel .closure-form input[type="date"]
  {
    -webkit-appearance: none;
    appearance: none;
  }
  .app-shell #appContent #closuresPanel .closure-form .closure-notify
  {
    align-items: center;
    gap: 12px;
    padding: 12px;
  }
  .app-shell #appContent #closuresPanel .closure-notify-copy,
  .app-shell #appContent #closuresPanel .taxi-dog-toggle-copy
  {
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .app-shell #appContent #closuresPanel .taxi-dog-toggle-copy strong,
  .app-shell #appContent #closuresPanel .taxi-dog-toggle-copy small
  {
    line-height: 1.45;
  }
  .app-shell #appContent #closuresPanel .closure-form > .button
  {
    justify-self: stretch;
    min-height: 46px;
  }
  .app-shell #appContent #closuresPanel .closure-list
  {
    gap: 12px;
    padding: 14px 0 0;
  }
  .app-shell #appContent #closuresPanel .closure-card
  {
    gap: 12px;
    padding: 14px;
  }
}
@media (max-width: 380px)
{
  .app-shell #appContent .panel.full-table:has(.cash-table) .table-wrap
  {
    padding: 10px;
  }
  .app-shell #appContent .panel.full-table:has(.cash-table) .cash-table tbody tr
  {
    gap: 10px;
    padding: 12px;
  }
  .app-shell #appContent #closuresPanel .closure-form .closure-notify
  {
    padding: 10px;
  }
  .app-shell #appContent #closuresPanel .taxi-dog-toggle-copy strong
  {
    font-size: 11px;
  }
  .app-shell #appContent #closuresPanel .taxi-dog-toggle-copy small
  {
    font-size: 10px;
  }
}