/* The base button/layout rules set display explicitly. Honor the native hidden state. */
#staff-sign-in[hidden], #staff-sign-out[hidden], #content-app[hidden] {
  display: none !important;
}

.naksha-account-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 72px) 5%;
}

.naksha-signin {
  display: grid;
  grid-template-columns: .9fr 1fr;
  overflow: hidden;
  border: 1px solid #e6d8d9;
  border-radius: 10px;
  box-shadow: 0 18px 50px #32171e12;
}

.naksha-signin-brand, .naksha-signin-card {
  padding: clamp(28px, 5vw, 70px);
}

.naksha-signin-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(ellipse at top right, #512930, #211a1d 70%);
  color: #fff;
}

.naksha-signin-brand .eyebrow { color: #f5bfc2; }
.naksha-signin-wordmark {
  margin: 20px 0;
  font: 400 clamp(32px, 5vw, 64px)/1.1 Georgia, serif;
  letter-spacing: .12em;
}

.naksha-signin-card { background: #fff; }
.naksha-signin-card h1 {
  margin: 10px 0;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.35;
}

#staff-sign-in {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
#staff-sign-in label { display: grid; gap: 7px; }
#staff-sign-in input { width: 100%; padding: 12px; }
#staff-sign-in .button { justify-content: center; min-height: 48px; }
#cloud-status { color: #8a2931; margin: 12px 0 0; }
#cloud-status:empty { display: none; }
.naksha-account-preview { margin-top: 26px; }
.naksha-account-preview > summary { color: #71373d; cursor: pointer; padding: 12px 0; }

.naksha-admin-page { background: #f8f6f6; }
.naksha-admin-page .content-header { justify-content: flex-start; }
.naksha-workspace-label { font-size: 14px; font-weight: 600; }
#staff-sign-out {
  border: 1px solid #d9c5c8;
  border-radius: 4px;
  background: #fff;
  color: #71373d;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.naksha-admin-status { max-width: 1400px; margin: 0 auto; padding: 0 5%; }
.naksha-admin-status a { color: #922f39; }
.naksha-workspace {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: start;
  gap: 26px;
}
.naksha-workspace-nav {
  padding: 20px;
  border: 1px solid #eadfe0;
  border-radius: 6px;
  background: #fff;
}
.naksha-workspace-nav nav { display: grid; gap: 8px; }
#content-app .naksha-workspace-nav nav button { text-align: left; }
.naksha-workspace-backup { margin-top: 24px; font-size: 13px; color: #71373d; }
.naksha-workspace-backup summary { cursor: pointer; padding-bottom: 9px; }
.naksha-workspace-backup label { display: block; margin-top: 10px; }
.naksha-workspace-backup input { width: 100%; }
.naksha-workspace-description { color: #695d62; margin: 8px 0 18px; }
.naksha-workspace-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.naksha-workspace-metrics > div {
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid #eadfe0;
  border-radius: 5px;
  background: #fff;
  color: #6e5159;
  font-size: 13px;
}
.naksha-workspace-metrics strong { color: #282025; font-size: 25px; }
#content-message:empty { display: none; }

@media (max-width: 820px) {
  .naksha-signin, .naksha-workspace { grid-template-columns: 1fr; }
  .naksha-signin-wordmark { margin: 12px 0; }
  .naksha-workspace-nav nav { display: flex; flex-wrap: wrap; }
  .naksha-workspace-backup { margin-top: 14px; }
}
@media (max-width: 600px) {
  .naksha-workspace-label { display: none; }
  .naksha-workspace-metrics { gap: 6px; }
  .naksha-workspace-metrics > div { padding: 10px; }
}
#staff-sign-in input {
  min-height: 46px;
  border: 1px solid #d4c3c7;
  border-radius: 5px;
  font: inherit;
  background: #fff;
}
#staff-sign-in .button { border-radius: 5px; }

@media (max-width:600px) {
 .naksha-account-page{padding:20px 4%}
 .naksha-signin-brand,.naksha-signin-card{padding:22px}
 .naksha-signin-brand .naksha-signin-wordmark{font-size:36px}
 .naksha-signin-card h1{font-size:28px}
 .naksha-workspace{gap:16px}
 .naksha-workspace-nav{padding:12px}
 .naksha-workspace-nav nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .naksha-workspace-nav button,#content-app .content-toolbar button{min-height:44px;white-space:normal}
 .naksha-workspace-content{min-width:0}
 #content-app{padding-inline:4%}
 #content-app .content-toolbar input{min-width:0;flex:1 1 160px}
}

.recovery-form[hidden] { display: none !important; }
.recovery-form { display: grid; gap: 16px; margin: 22px 0 14px; }
.recovery-form label { display: grid; gap: 7px; }
.recovery-form input { min-width: 0; min-height: 46px; padding: 12px; border: 1px solid #d4c3c7; border-radius: 5px; font: inherit; }
.recovery-form .button { justify-content: center; min-height: 46px; }
#recovery-message { color: #8a2931; }
#staff-sign-in .recovery-link { justify-self: start; color: #85323c; }

#customer-sign-up[hidden], #customer-session[hidden], #account-auth-switch[hidden], .naksha-account-preview[hidden] {
  display: none !important;
}
#customer-sign-up {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
#customer-sign-up label { display: grid; gap: 7px; }
#customer-sign-up input { width: 100%; padding: 12px; }
#customer-sign-up .button, #customer-session .button { min-height: 48px; justify-content: center; }
#customer-email { overflow-wrap: anywhere; }
.account-auth-switch {
  color: #862e38;
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 18px;
  min-height: 44px;
  text-align: start;
  cursor: pointer;
}

#content-app.naksha-business-wide { max-width: 1800px; padding-inline: clamp(14px, 2.4vw, 42px); }
.naksha-business-wide .naksha-workspace { grid-template-columns: 190px minmax(0, 1fr); gap: clamp(16px, 2vw, 30px); }
.naksha-business-wide .naksha-workspace-content { min-width: 0; }
.business-subnav, .finance-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 10px 15px; }
.business-subnav { padding-bottom: 14px; border-bottom: 1px solid #eadfe0; }
#content-app .business-subnav button, #content-app .finance-subnav button { min-height: 44px; }
#content-app .business-subnav button:focus-visible, #content-app .finance-subnav button:focus-visible { outline: 2px solid #762d35; outline-offset: 2px; }
.naksha-business-wide .ops-metrics { grid-template-columns: repeat(auto-fit, minmax(min(155px, 100%), 1fr)); }
.finance-ledger-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-block: 12px; }
#ops-ledger-pages { margin-top: 15px; }
@media (min-width: 1050px) {
  .naksha-business-wide .ops-ledger-entry { grid-template-columns: minmax(160px, 1fr) minmax(105px, .55fr) minmax(160px, 1.6fr) auto; align-items: center; column-gap: 18px; }
}
@media (max-width: 850px) {
  .naksha-business-wide .naksha-workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .finance-ledger-filters { grid-template-columns: minmax(0, 1fr); }
  .naksha-business-wide .ops-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Full-width staff dashboard and responsive workspace. */
#content-app.naksha-business-wide { max-width: none; padding: clamp(16px, 2vw, 32px) clamp(12px, 2vw, 34px) 64px; }
.workspace-nav-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 14px; }
.workspace-nav-head .eyebrow { margin: 0; }
#content-app #workspace-nav-toggle { padding: 5px 8px; min-height: 36px; }
@media (min-width: 851px) {
  .naksha-business-wide .naksha-workspace { grid-template-columns: minmax(0, 195px) minmax(0, 1fr); }
  .naksha-business-wide .naksha-workspace-nav { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding: 12px; }
  #content-app.naksha-nav-compact .naksha-workspace { grid-template-columns: minmax(0, 134px) minmax(0, 1fr); }
  #content-app.naksha-nav-compact .workspace-nav-head .eyebrow { display: none; }
  #content-app.naksha-nav-compact .naksha-workspace-nav nav button { padding: 8px; font-size: .8rem; }
}
@media (max-width: 850px) {
  .naksha-business-wide .naksha-workspace { grid-template-columns: minmax(0, 1fr); }
  #workspace-nav-toggle { display: none; }
}
.dash-metrics, .dash-charts, .dash-tasks { display: grid; gap: 14px; margin-bottom: 16px; }
.dash-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-metrics:empty { display: none; }
#content-app .dash-metrics button { display: grid; gap: 8px; text-align: start; padding: 15px; min-width: 0; background: #f7f0ff; border-color: #e3d4ee; }
#content-app .dash-metrics button:nth-child(2) { background: #fff2f1; border-color: #f1d9d8; }
#content-app .dash-metrics button:nth-child(3) { background: #fff6e8; border-color: #efdcc2; }
#content-app .dash-metrics button:nth-child(4) { background: #edf8f4; border-color: #cde7dc; }
.dash-metrics strong { font-size: clamp(1.125rem, 2vw, 1.65rem); overflow-wrap: anywhere; }
.dash-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0 0 16px; }
.dash-filters label { display: grid; gap: 4px; }
.dash-filters input, .dash-filters select { padding: 7px; border: 1px solid #d7c4c7; border-radius: 4px; background: white; }
.dash-filters [role="status"] { align-self: center; }
.dash-charts { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-panel { min-width: 0; padding: clamp(12px, 2vw, 24px); border: 1px solid #eadfe0; border-radius: 8px; background: #fff; }
#content-app .dash-panel h2 { margin: 0 0 8px; font-size: 1.2rem; }
.dash-panel h2 small { color: #805383; margin-inline-start: .35rem; }
.dash-panel p { color: #62545c; font-size: .9rem; }
.dash-chart-scroll { overflow-x: auto; }
.dash-bars { display: flex; padding: 0; margin: 16px 0 0; list-style: none; gap: 7px; }
.dash-bars li { position: relative; flex: 1 0 42px; min-width: 0; text-align: center; font-size: .72rem; }
.dash-bar-track { height: 155px; display: flex; align-items: end; justify-content: center; border-bottom: 1px solid #d9c7e2; margin-bottom: 5px; }
.dash-bar-track span { height: var(--bar-height); width: min(100%, 28px); background: #8844a8; border-radius: 4px 4px 0 0; }
.dash-ranking, .dash-work-list { list-style: none; padding: 0; margin: 12px 0; }
.dash-ranking li, .dash-work-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 7px; padding: 8px 0; border-bottom: 1px solid #eee5e7; }
.dash-ranking meter { width: 100%; accent-color: #8844a8; }
.dash-sr { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 1050px) {
  .dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-charts, .dash-tasks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .dash-metrics { grid-template-columns: minmax(0, 1fr); }
}

/* Compact working views for staff sections outside Products. */
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) {
  font-size: .875rem;
  line-height: 1.5;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) h1 {
  font-size: clamp(1.65rem, 2.5vw, 2rem);
  margin-block: 4px 10px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) h2 {
  font-size: 1.2rem;
  margin-block: 0 8px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) h3 {
  font-size: 1rem;
  margin-block: 0 7px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) button {
  padding: 6px 10px;
  min-height: 34px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) :is(.content-editor, .ops-card, .workroom-card, .dash-panel) {
  padding: 12px 14px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) :is(.content-editor, .ops-card, .workroom-card) {
  margin-block: 10px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) :is(.content-fields, .content-toolbar, .workroom-form, .ops-actions, .business-subnav, .finance-subnav) {
  gap: 8px 12px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) :is(.content-toolbar, .content-checks, .business-subnav, .finance-subnav, .ops-metrics, .workroom-form) {
  margin-block: 8px 12px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) :is(.content-fields label, .workroom label, .ops-card label) {
  font-size: .825rem;
  gap: 4px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  min-height: 34px;
  min-width: 0;
  padding: 5px 8px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) textarea { resize: vertical; }
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) :is(.ops-order, .ops-ledger-entry, .ops-balances li, .dash-work-list li) {
  padding-block: 7px;
}
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) .naksha-workspace-metrics > div { padding: 9px 12px; }
#content-app [data-workspace-tab]:not([data-workspace-tab="products"]) .naksha-workspace-metrics strong { font-size: 1.15rem; }
#content-app [data-workspace-tab="dashboard"] :is(.dash-metrics, .dash-charts, .dash-tasks) { gap: 10px; margin-bottom: 12px; }
#content-app [data-workspace-tab="dashboard"] .dash-metrics button { padding: 9px 12px; gap: 4px; }
#content-app [data-workspace-tab="dashboard"] .dash-bar-track { height: 130px; }
#content-app [data-workspace-tab="home"] :is(#h-photo, #section-photo) {
  display: block; width: min(100%, 190px); max-height: 125px; object-fit: contain;
}
@media (min-width: 1050px) {
  #content-app [data-workspace-tab] :is(.inventory-list, #contact-list, #ops-order-list:not(:has(.ops-order[open]))) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px;
  }
  #content-app [data-workspace-tab] :is(#contact-editor, #ops-guest-settings, #home-form .content-fields) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (pointer: coarse) {
  #content-app [data-workspace-tab]:not([data-workspace-tab="products"]) :is(button, select, input:not([type="checkbox"], [type="radio"])) { min-height: 44px; }
}

/* Shared Admin page heading with a slim catalogue summary. */
#content-app.naksha-business-wide { padding-top: clamp(12px, 1.2vw, 20px); }
.workspace-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid #eadfe0;
  border-inline-start: 3px solid #a73940;
  border-radius: 5px;
  background: #fff;
}
.workspace-section-title { min-width: 0; }
.workspace-section-title .eyebrow { margin: 0; font-size: .65rem; }
#content-app .workspace-section-title #workspace-title {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.25;
  margin: 2px 0 0;
}
.workspace-section-title .naksha-workspace-description { margin: 3px 0 0; font-size: .8rem; }
.workspace-catalogue-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.workspace-catalogue-summary > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid #eadfe0;
  border-radius: 4px;
  background: #faf6f6;
}
.workspace-catalogue-summary dt { color: #6e5159; font-size: .75rem; }
.workspace-catalogue-summary dd { margin: 0; font-size: .95rem; font-weight: 700; }
#content-app .dash-metrics button { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 8px; }
#content-app .dash-metrics strong { font-size: 1.1rem; }

/* Footer editor */
#home-footer-form {
  display: grid;
  gap: 16px;
}
#home-footer-form > :is(h2, p, .content-toolbar) {
  margin: 0;
}
#home-footer-form > .content-fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
  align-items: stretch;
}
#home-footer-form [data-footer-tile] {
  display: grid;
  align-content: start;
  gap: 10px;
  min-inline-size: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #e4d6d8;
  border-radius: 6px;
  background: #fff;
}
#home-footer-form [data-footer-tile] legend {
  padding-inline: 4px;
  font-weight: 600;
}
#home-footer-form [data-footer-preview] {
  display: block;
  width: min(100%, 200px);
  height: 108px;
  max-height: 108px;
  object-fit: cover;
  border-radius: 4px;
}
#home-footer-form [data-footer-tile] input {
  box-sizing: border-box;
  max-width: 100%;
}
#home-footer-form [data-footer-reset] {
  justify-self: start;
}
#home-footer-form > label {
  display: grid;
  gap: 6px;
  width: min(100%, 400px);
}
#home-footer-form [data-footer-product] {
  width: 100%;
}

#home-department-cards > .content-fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
}
#home-department-cards [data-department-card] {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #e4d6d8;
  border-radius: 6px;
  background: #fff;
}
#home-department-cards [data-department-preview]:not([hidden]) {
  display: block;
  width: min(100%, 190px);
  height: 96px;
  object-fit: cover;
  border-radius: 4px;
}
#home-department-cards [data-department-card] button { justify-self: start; }

.naksha-workspace-nav .workspace-nav-section {
  grid-column: 1 / -1;
  flex-basis: 100%;
  margin: 5px 0 0;
  padding: 5px 0 0;
  border-top: 1px solid #e4d6d8;
  color: #71373d;
  font-size: .78rem;
  font-weight: 600;
}

#home-footer-form .footer-link-editor summary {
  cursor: pointer;
  font-weight: 600;
  padding-block: 6px;
}
#home-footer-form .footer-link-editor label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}
#home-footer-form .footer-link-editor input[type="checkbox"] {
  width: auto;
  flex: none;
}