/*
  Interface polish layer
  Direction: Editorial + Muji Minimal
  Ratio: 70% warm neutral / 20% softened structural tones / 10% muted umber-sage accent
*/
:root{
  --wc-paper:#f6f1e8;
  --wc-paper-2:#efe7da;
  --wc-panel:#fffaf2;
  --wc-panel-soft:#fbf5ea;
  --wc-ink:#28231e;
  --wc-ink-2:#3c352d;
  --wc-muted:#6d655b;
  --wc-faint:#8a8176;
  --wc-line:#e2d5c2;
  --wc-line-strong:#d2c0a8;
  --wc-umber:#6f5b3e;
  --wc-umber-2:#826b49;
  --wc-sage:#5f6e53;
  --wc-sage-2:#748464;
  --wc-rust:#954f43;
  --wc-gold:#a67c3d;
  --wc-focus:#8b6d42;
  --wc-shadow:0 18px 50px rgba(74,58,35,.10),0 5px 18px rgba(74,58,35,.07);
  --wc-shadow-soft:0 12px 34px rgba(74,58,35,.08),0 2px 10px rgba(74,58,35,.05);
  --wc-shadow-hover:0 22px 56px rgba(74,58,35,.13),0 7px 20px rgba(74,58,35,.08);
  color-scheme:light;
}

html{background:var(--wc-paper);}
body{
  color:var(--wc-ink)!important;
  background:
    radial-gradient(circle at 14% 8%,rgba(166,124,61,.11),transparent 28rem),
    radial-gradient(circle at 92% 0%,rgba(95,110,83,.10),transparent 24rem),
    linear-gradient(135deg,var(--wc-paper),#fbf8f1 48%,var(--wc-paper-2))!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

body::selection{background:#d9c39a;color:var(--wc-ink);}

h1,h2,#toolTitle,.text-2xl.font-bold,.text-xl.font-bold{
  font-family:ui-serif,Georgia,"Times New Roman","Noto Serif SC",serif!important;
  letter-spacing:-.025em;
  color:inherit;
}

p,.hint,label,.text-sm,.text-xs{letter-spacing:.005em;}

/* Radius discipline: 8px / 12px */
.rounded-2xl,.rounded-xl{border-radius:12px!important;}
.rounded-lg,.rounded-md{border-radius:8px!important;}

/* Warm, tactile surfaces */
.bg-white,.admin-card,.subcard,
.bg-gray-50.border,.bg-slate-50.border,
#authBootScreen>div,#loginScreen>div,
#purchaseCard,#paymentCard{
  background:linear-gradient(180deg,rgba(255,252,246,.98),rgba(253,247,238,.96))!important;
  border-color:var(--wc-line)!important;
  box-shadow:var(--wc-shadow-soft)!important;
}

.admin-card,.subcard,
#loginScreen>div,#authBootScreen>div,
.bg-white.border,.bg-gray-50.border,.bg-slate-50.border,
.drop-zone,#fileReadyArea,
[id$="Card"], [class*="card"]{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,filter .18s ease!important;
}

.admin-card:hover,.subcard:hover,
#loginScreen>div:hover,#authBootScreen>div:hover,
.bg-white.border:hover,.bg-gray-50.border:hover,.bg-slate-50.border:hover,
.drop-zone:hover,#fileReadyArea:hover,
[id$="Card"]:hover,[class*="card"]:hover{
  transform:translateY(-2px);
  box-shadow:var(--wc-shadow-hover)!important;
  border-color:var(--wc-line-strong)!important;
}

/* Re-map the generic SaaS blue/indigo palette into muted editorial tones. */
.bg-blue-600,.bg-blue-700,.bg-indigo-600,.bg-indigo-700,
.bg-teal-600,.bg-teal-700,.admin-tab-btn.active{
  background:linear-gradient(135deg,var(--wc-umber),var(--wc-umber-2))!important;
  color:#fffaf2!important;
  border-color:rgba(255,250,242,.18)!important;
}

.bg-emerald-600,.bg-emerald-700,.bg-green-600,.bg-green-700{
  background:linear-gradient(135deg,var(--wc-sage),var(--wc-sage-2))!important;
  color:#fffaf2!important;
}

.bg-red-500,.bg-red-600,.btn-red{
  background:linear-gradient(135deg,var(--wc-rust),#7c3f38)!important;
  color:#fffaf2!important;
}

.bg-slate-900,.bg-slate-800,.bg-slate-700,.btn-slate{
  background:linear-gradient(145deg,#2e2a24,#1f1c18)!important;
  color:#fffaf2!important;
}

.bg-blue-50,.bg-indigo-50,.bg-sky-50{
  background:linear-gradient(180deg,#fbf3e5,#f5ead8)!important;
  border-color:#e8d8bd!important;
}
.bg-blue-100,.bg-indigo-100{background:#efe3cd!important;}
.bg-emerald-50,.bg-green-50{background:#eef2e8!important;border-color:#d7dfcc!important;}
.bg-amber-50,.bg-yellow-50{background:#fbf0d8!important;border-color:#ead5aa!important;}
.bg-red-50{background:#f8e8e3!important;border-color:#e8c3bb!important;}
.bg-gray-100,.bg-slate-100{background:rgba(239,231,218,.72)!important;}
.bg-gray-200,.bg-slate-200{background:#e8ddcc!important;}

.border-blue-100,.border-blue-200,.border-indigo-100,.border-indigo-200{border-color:#e1cfb1!important;}
.border-emerald-100,.border-emerald-200,.border-green-100,.border-green-200{border-color:#d4ddca!important;}
.border-gray-100,.border-gray-200,.border-slate-200,.border-slate-300{border-color:var(--wc-line)!important;}

.text-gray-800,.text-slate-800,.text-gray-900,.text-slate-900,.text-blue-900,.text-indigo-900{color:var(--wc-ink)!important;}
.text-gray-700,.text-slate-700,.text-blue-800,.text-indigo-800{color:var(--wc-ink-2)!important;}
.text-gray-600,.text-slate-600,.text-blue-700,.text-blue-600,.text-indigo-700,.text-indigo-600{color:var(--wc-umber)!important;}
.text-gray-500,.text-slate-500,.text-gray-400,.text-slate-400{color:var(--wc-muted)!important;}
.text-blue-100,.text-blue-200,.text-slate-200,.text-slate-300{color:#eee4d2!important;}
.text-emerald-700,.text-green-700,.text-emerald-600,.text-green-600{color:#4d6547!important;}
.text-red-700,.text-red-600{color:#8b433a!important;}
.text-amber-900,.text-amber-800,.text-amber-700{color:#6d4a18!important;}

/* Buttons: complete hover / active / focus-visible / disabled states. */
button,.btn,.btn-sm,a[href],summary,[role="button"],label.cursor-pointer{
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease!important;
}

button,.btn,.btn-sm{
  border-radius:8px!important;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 8px 18px rgba(74,58,35,.08)!important;
}

button:hover:not(:disabled),.btn:hover:not(:disabled),.btn-sm:hover:not(:disabled),
a[href]:hover,summary:hover,[role="button"]:hover,label.cursor-pointer:hover{
  transform:translateY(-1px);
  filter:saturate(1.02);
}

button:active:not(:disabled),.btn:active:not(:disabled),.btn-sm:active:not(:disabled),
a[href]:active,summary:active,[role="button"]:active,label.cursor-pointer:active{
  transform:scale(.985);
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset,0 4px 12px rgba(74,58,35,.08)!important;
}

button:focus-visible,.btn:focus-visible,.btn-sm:focus-visible,
a[href]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--wc-focus)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 5px rgba(139,109,66,.18),0 8px 22px rgba(74,58,35,.10)!important;
}

button:disabled,.btn:disabled,.btn-sm:disabled,input:disabled,select:disabled,textarea:disabled,
.disabled,.disabled\:cursor-not-allowed:disabled{
  opacity:.58!important;
  cursor:not-allowed!important;
  transform:none!important;
  filter:grayscale(.12)!important;
  box-shadow:none!important;
}

.hover\:bg-blue-700:hover,.hover\:bg-blue-600:hover,.hover\:bg-indigo-700:hover,
.hover\:bg-emerald-700:hover,.hover\:bg-green-700:hover,
.hover\:bg-teal-700:hover,.hover\:bg-red-600:hover{
  background:linear-gradient(135deg,#5e4a31,#775f3e)!important;
  color:#fffaf2!important;
}
.hover\:bg-gray-50:hover,.hover\:bg-blue-50:hover,.hover\:bg-white\/10:hover,.hover\:bg-white\/15:hover{
  background:rgba(255,250,242,.13)!important;
}

.btn-outline,.btn-outline-blue,.btn-outline-red,
button[class*="border"],a[class*="border"]{
  border-color:var(--wc-line-strong)!important;
}
.btn-outline,.btn-outline-blue{
  color:var(--wc-umber)!important;
  background:rgba(255,250,242,.74)!important;
}
.btn-outline-red{color:var(--wc-rust)!important;background:rgba(255,250,242,.74)!important;}

/* Inputs */
input:not([type="checkbox"]):not([type="radio"]),select,textarea,.field{
  background:#fffaf3!important;
  border-color:var(--wc-line-strong)!important;
  color:var(--wc-ink)!important;
  border-radius:8px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important;
}
input::placeholder,textarea::placeholder{color:#918578!important;opacity:1;}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled),.field:hover:not(:disabled){border-color:#b99d72!important;}
input[type="checkbox"],input[type="radio"]{accent-color:var(--wc-umber);}

/* Sidebar and headers */
aside.bg-slate-900{
  border-right:1px solid rgba(255,250,242,.13)!important;
  box-shadow:18px 0 50px rgba(45,34,23,.16)!important;
}
header.bg-slate-900,.bg-blue-600.text-white,.bg-blue-600{
  position:relative;
  overflow:hidden;
}
header.bg-slate-900::after,.bg-blue-600.text-white::after{
  content:"";
  position:absolute;
  inset:auto -12% -40% auto;
  width:22rem;height:22rem;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,250,242,.18),transparent 68%);
  pointer-events:none;
}

nav button,nav a,#tabCheck,#tabTemplate,#tabTemplateGallery,#tabInvite,#formatAdjustLink,#adminPanelBtn{
  border:1px solid transparent!important;
}
nav button:hover,nav a:hover,#tabCheck:hover,#tabTemplate:hover,#tabTemplateGallery:hover,#tabInvite:hover,#formatAdjustLink:hover,#adminPanelBtn:hover{
  border-color:rgba(255,250,242,.14)!important;
  background:rgba(255,250,242,.10)!important;
}
#tabCheck,.admin-tab-btn.active{
  box-shadow:0 12px 30px rgba(25,20,15,.18)!important;
}

/* Upload zone and progress areas */
.drop-zone{
  background:repeating-linear-gradient(135deg,rgba(255,250,242,.85),rgba(255,250,242,.85) 14px,rgba(246,241,232,.75) 14px,rgba(246,241,232,.75) 28px)!important;
  border-color:#cdb992!important;
}
.drop-zone.dragover{
  background:#f1e6d4!important;
  border-color:var(--wc-umber)!important;
  box-shadow:0 0 0 5px rgba(139,109,66,.14),var(--wc-shadow-soft)!important;
}
svg.text-blue-400{color:#a17a43!important;}

/* M6 designer elements */
.m6-module-row{
  border-color:#dcc8aa!important;
  background:#fffaf3!important;
  box-shadow:0 8px 22px rgba(74,58,35,.05)!important;
}
.m6-drag-handle{color:var(--wc-umber)!important;}
.m6-module-type{
  color:#604a30!important;
  background:#efe2cc!important;
}
.m6-ui-toggle{
  border-color:#dcc8aa!important;
  background:#fffaf3!important;
  color:var(--wc-ink-2)!important;
}

/* Tables, lists, scroll */
table{border-color:var(--wc-line)!important;}
th{background:#f4ead9!important;color:var(--wc-ink)!important;}
tr:hover{background:rgba(166,124,61,.07)!important;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:rgba(226,213,194,.45);border-radius:999px;}
::-webkit-scrollbar-thumb{background:#c7b08e;border:2px solid rgba(246,241,232,.80);border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:#a98b5e;}

/* Message colors with adequate contrast */
[id$="Msg"],#statusMessage,#globalMsg,#msg,#loginMsg{
  border:1px solid transparent;
}
.text-emerald-700.bg-emerald-50,.bg-emerald-50.text-emerald-700{color:#365432!important;background:#eef2e8!important;border-color:#cbd8c1!important;}
.text-red-700.bg-red-50,.bg-red-50.text-red-700{color:#7c342d!important;background:#f8e8e3!important;border-color:#e4b9b1!important;}
.text-blue-700.bg-blue-50,.bg-blue-50.text-blue-700{color:#5a4328!important;background:#fbf0dd!important;border-color:#e5d0aa!important;}

/* Keep dark surfaces readable after color remap */
.bg-slate-900 .text-gray-500,.bg-slate-900 .text-slate-500{color:#bdb09d!important;}
.bg-slate-900 .text-slate-300,.bg-slate-900 .text-slate-200,.bg-slate-900 .text-blue-200{color:#eee4d2!important;}
.bg-slate-900 input{background:rgba(255,250,242,.94)!important;color:var(--wc-ink)!important;}
.bg-slate-900 .bg-white\/10,.bg-slate-900 .bg-white\/15{background:rgba(255,250,242,.10)!important;border:1px solid rgba(255,250,242,.10)!important;}
.bg-slate-900 .bg-slate-800,.bg-slate-900 .bg-slate-700{background:rgba(15,13,11,.42)!important;}

/* Links */
a[href]{text-decoration-thickness:1px;text-underline-offset:4px;}
a[href]:not([class*="bg-"]){color:var(--wc-umber)!important;}
a[href]:not([class*="bg-"]):hover{color:#4f3b25!important;text-decoration:underline;}

/* Dense mobile pages need calmer breathing room */
@media (max-width:768px){
  body{background:linear-gradient(180deg,#fbf8f1,var(--wc-paper))!important;}
  .p-6{padding:1.15rem!important;}
  .p-5{padding:1rem!important;}
  .gap-6{gap:1rem!important;}
  aside.w-64{width:15.5rem!important;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;}
}

/* Responsive collapsible sidebars: desktop keeps layout; mobile uses off-canvas so content is never squeezed. */
.wc-layout-shell{
  --wc-sidebar-width:16rem;
  flex-wrap:nowrap!important;
  position:relative;
}
.wc-app-sidebar{
  width:var(--wc-sidebar-width)!important;
  min-width:var(--wc-sidebar-width)!important;
  max-width:var(--wc-sidebar-width)!important;
  min-height:0;
  transition:width .22s ease,min-width .22s ease,max-width .22s ease,transform .22s ease,opacity .18s ease,box-shadow .18s ease,border-color .18s ease!important;
  will-change:width,transform;
}
.wc-app-main{
  min-width:0!important;
  transition:margin .22s ease,width .22s ease,padding .18s ease!important;
}
.wc-sidebar-nav{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.wc-app-sidebar > .border-t,
.wc-app-sidebar > div:last-child{
  flex:0 0 auto;
}
.wc-sidebar-toggle,
.wc-sidebar-mini-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  border:1px solid rgba(255,250,242,.18)!important;
  background:rgba(255,250,242,.13)!important;
  color:#fffaf2!important;
  white-space:nowrap;
  user-select:none;
}
.wc-sidebar-toggle{
  min-height:2.25rem;
  padding:.48rem .72rem;
  font-size:.78rem;
  font-weight:800;
  flex:0 0 auto;
}
.wc-sidebar-mini-toggle{
  min-height:1.75rem;
  padding:.28rem .55rem;
  border-radius:999px!important;
  font-size:.68rem;
  font-weight:800;
  box-shadow:none!important;
}
.wc-sidebar-toggle:hover,
.wc-sidebar-mini-toggle:hover{
  background:rgba(255,250,242,.20)!important;
  border-color:rgba(255,250,242,.32)!important;
}
.wc-sidebar-collapsed .wc-app-sidebar{
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  transform:translateX(-1rem);
  opacity:0;
  pointer-events:none;
  border-right:0!important;
  box-shadow:none!important;
}
.wc-sidebar-collapsed .wc-app-sidebar > *{
  visibility:hidden;
}
.wc-sidebar-backdrop{
  display:none;
}

/* Admin sidebar uses a grid column on desktop and an overlay drawer on smaller screens. */
.admin-layout{
  --admin-sidebar-width:240px;
  grid-template-columns:var(--admin-sidebar-width) minmax(0,1fr)!important;
  align-items:start;
  transition:grid-template-columns .22s ease,gap .22s ease!important;
}
.admin-sidebar{
  width:100%;
  max-height:calc(100dvh - 2rem);
  min-height:0;
  overflow:hidden;
  display:flex!important;
  flex-direction:column;
  transition:transform .22s ease,opacity .18s ease,box-shadow .18s ease,border-color .18s ease!important;
  will-change:transform;
}
.admin-sidebar-nav{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding-right:.18rem;
}
.admin-sidebar-collapsed{
  grid-template-columns:0 minmax(0,1fr)!important;
  gap:0!important;
}
.admin-sidebar-collapsed .admin-sidebar{
  transform:translateX(-.75rem);
  opacity:0;
  pointer-events:none;
  box-shadow:none!important;
}
.admin-sidebar-collapsed .admin-sidebar > *{
  visibility:hidden;
}
.admin-sidebar-backdrop{
  display:none;
}

@media (max-height:760px){
  .wc-app-sidebar .p-5{padding:.85rem!important;}
  .wc-sidebar-nav{padding-top:.85rem!important;padding-bottom:.85rem!important;}
  .wc-sidebar-nav .pt-4{padding-top:.65rem!important;}
  .wc-app-sidebar #recentRecordsList{max-height:6.5rem!important;}
  .admin-sidebar{max-height:calc(100dvh - 1rem);}
}

@media (max-width:768px){
  .wc-layout-shell{overflow:hidden!important;}
  .wc-app-sidebar{
    position:fixed!important;
    inset:0 auto 0 0;
    z-index:80;
    width:min(17rem,86vw)!important;
    min-width:min(17rem,86vw)!important;
    max-width:86vw!important;
    height:100dvh!important;
    transform:translateX(0);
    opacity:1;
  }
  .wc-app-main{
    width:100%!important;
    flex:1 1 100%!important;
  }
  .wc-sidebar-collapsed .wc-app-sidebar{
    width:min(17rem,86vw)!important;
    min-width:min(17rem,86vw)!important;
    max-width:86vw!important;
    transform:translateX(calc(-100% - 1rem));
    opacity:0;
  }
  .wc-sidebar-collapsed .wc-app-sidebar > *{
    visibility:visible;
  }
  .wc-sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:70;
    background:rgba(31,28,24,.34);
    backdrop-filter:blur(2px);
    opacity:1;
    pointer-events:auto;
    transition:opacity .18s ease!important;
  }
  .wc-sidebar-collapsed .wc-sidebar-backdrop{
    opacity:0;
    pointer-events:none;
  }
  .wc-sidebar-toggle{
    min-height:2.1rem;
    padding:.42rem .62rem;
  }
}

@media (max-width:1023px){
  .admin-layout{
    display:block!important;
    position:relative;
  }
  .admin-sidebar{
    position:fixed!important;
    top:.75rem!important;
    left:.75rem!important;
    bottom:.75rem!important;
    z-index:80;
    width:min(18rem,86vw)!important;
    max-width:86vw!important;
    max-height:none!important;
    transform:translateX(0);
    opacity:1;
  }
  .admin-sidebar-collapsed .admin-sidebar{
    transform:translateX(calc(-100% - 1.5rem));
    opacity:0;
  }
  .admin-sidebar-collapsed .admin-sidebar > *{
    visibility:visible;
  }
  .admin-sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:70;
    background:rgba(31,28,24,.34);
    backdrop-filter:blur(2px);
    opacity:1;
    pointer-events:auto;
    transition:opacity .18s ease!important;
  }
  .admin-sidebar-collapsed .admin-sidebar-backdrop{
    opacity:0;
    pointer-events:none;
  }
}