/*
  ManoStock design system.
  One shared stylesheet, used by every page, so the product reads as one
  coherent thing instead of forty independently-styled pages. Component
  classes are prefixed `ms-` to avoid colliding with page-specific styles
  during the transition.
*/

:root {
  /* ---- Neutrals ---- */
  --ms-bg: #F6F7F9;
  --ms-surface: #FFFFFF;
  --ms-surface-alt: #FAFBFC;
  --ms-border: #E6E8EC;
  --ms-border-strong: #D8DBE1;

  --ms-text: #171B21;
  --ms-text-secondary: #666D78;
  --ms-text-tertiary: #9AA1AC;
  --ms-text-on-brand: #FFFFFF;

  /* ---- Brand ---- */
  --ms-brand: #E8590C;
  --ms-brand-hover: #CB4A08;
  --ms-brand-active: #B34107;
  --ms-brand-tint: #FFF1E8;
  --ms-brand-tint-strong: #FFE2D0;

  /* ---- Semantic ---- */
  --ms-success: #12875B;
  --ms-success-hover: #0E6E4A;
  --ms-success-tint: #E8F8F1;
  --ms-danger: #DC2828;
  --ms-danger-hover: #C11F1F;
  --ms-danger-tint: #FDEBEB;
  --ms-warning: #B5750A;
  --ms-warning-tint: #FFF6E5;
  --ms-info: #2464D1;
  --ms-info-tint: #EAF1FD;

  /* ---- Elevation ---- */
  --ms-shadow-sm: 0 1px 2px rgba(23, 27, 33, 0.04), 0 1px 1px rgba(23, 27, 33, 0.03);
  --ms-shadow-md: 0 4px 10px rgba(23, 27, 33, 0.06), 0 2px 4px rgba(23, 27, 33, 0.04);
  --ms-shadow-lg: 0 16px 40px rgba(23, 27, 33, 0.14);

  /* ---- Radius ---- */
  --ms-radius-sm: 8px;
  --ms-radius-md: 12px;
  --ms-radius-lg: 18px;
  --ms-radius-full: 999px;

  /* ---- Type ---- */
  --ms-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- Motion ---- */
  --ms-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------------------------------------------------------------------- */
/* Reset / base                                                           */
/* ---------------------------------------------------------------------- */

.ms-root, .ms-root * , .ms-root *::before, .ms-root *::after {
  box-sizing: border-box;
}

.ms-root {
  font-family: var(--ms-font);
  background: var(--ms-bg);
  color: var(--ms-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

.ms-root h1, .ms-root h2, .ms-root h3, .ms-root h4 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ms-text);
}

.ms-root p { margin: 0; }

.ms-root a { color: inherit; text-decoration: none; }

.ms-root button { font-family: inherit; }

.ms-root ::selection { background: var(--ms-brand-tint-strong); }

/* ---------------------------------------------------------------------- */
/* Layout shell                                                           */
/* ---------------------------------------------------------------------- */

.ms-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: var(--ms-surface);
  border-bottom: 1px solid var(--ms-border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.ms-brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ms-text);
}

.ms-logo-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ms-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.ms-topbar-sub {
  font-size: 13px;
  color: var(--ms-text-tertiary);
  font-weight: 500;
}

.ms-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ms-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.ms-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.ms-page-header h1 {
  font-size: 22px;
}

.ms-page-header .ms-subtitle {
  color: var(--ms-text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--ms-radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ms-ease), border-color 0.15s var(--ms-ease), transform 0.1s var(--ms-ease), box-shadow 0.15s var(--ms-ease);
  white-space: nowrap;
  line-height: 1;
}

.ms-btn:active { transform: translateY(1px); }
.ms-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.ms-btn-primary { background: var(--ms-brand); color: var(--ms-text-on-brand); }
.ms-btn-primary:hover:not(:disabled) { background: var(--ms-brand-hover); }
.ms-btn-primary:active:not(:disabled) { background: var(--ms-brand-active); }

.ms-btn-success { background: var(--ms-success); color: white; }
.ms-btn-success:hover:not(:disabled) { background: var(--ms-success-hover); }

.ms-btn-danger-outline { background: transparent; color: var(--ms-danger); border-color: var(--ms-danger-tint); }
.ms-btn-danger-outline:hover:not(:disabled) { background: var(--ms-danger-tint); }

.ms-btn-secondary { background: var(--ms-surface); color: var(--ms-text); border-color: var(--ms-border-strong); }
.ms-btn-secondary:hover:not(:disabled) { background: var(--ms-surface-alt); border-color: var(--ms-text-tertiary); }

.ms-btn-ghost { background: transparent; color: var(--ms-text-secondary); }
.ms-btn-ghost:hover:not(:disabled) { background: var(--ms-surface-alt); color: var(--ms-text); }

.ms-btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 7px; }
.ms-btn-lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 10px; }
.ms-btn-block { width: 100%; }
.ms-btn-icon { width: 40px; padding: 0; flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Cards / surfaces                                                       */
/* ---------------------------------------------------------------------- */

.ms-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  box-shadow: var(--ms-shadow-sm);
}

.ms-card-pad { padding: 20px; }

.ms-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ms-border);
  font-weight: 650;
  font-size: 14px;
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                  */
/* ---------------------------------------------------------------------- */

.ms-field { margin-bottom: 16px; }

.ms-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ms-text-secondary);
  margin-bottom: 6px;
}

.ms-root input[type="text"],
.ms-root input[type="number"],
.ms-root input[type="email"],
.ms-root input[type="password"],
.ms-root input[type="search"],
.ms-root input[type="tel"],
.ms-root input[type="date"],
.ms-root select,
.ms-root textarea,
.ms-input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ms-text);
  background: var(--ms-surface);
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-radius-sm);
  transition: border-color 0.15s var(--ms-ease), box-shadow 0.15s var(--ms-ease);
}

.ms-root textarea { height: auto; padding: 10px 13px; min-height: 90px; resize: vertical; }

.ms-root input:focus,
.ms-root select:focus,
.ms-root textarea:focus {
  outline: none;
  border-color: var(--ms-brand);
  box-shadow: 0 0 0 3px var(--ms-brand-tint);
}

.ms-root input::placeholder,
.ms-root textarea::placeholder { color: var(--ms-text-tertiary); }

.ms-help { font-size: 12.5px; color: var(--ms-text-tertiary); margin-top: 5px; }
.ms-error-text { font-size: 12.5px; color: var(--ms-danger); margin-top: 5px; }

.ms-root ul.errorlist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--ms-danger);
}

.ms-row { display: flex; gap: 12px; }
.ms-row > .ms-field { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------------- */
/* Tables                                                                 */
/* ---------------------------------------------------------------------- */

.ms-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  background: var(--ms-surface);
}

.ms-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.ms-table th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 650;
  color: var(--ms-text-tertiary);
  padding: 12px 16px;
  border-bottom: 1px solid var(--ms-border);
  white-space: nowrap;
}

.ms-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--ms-border);
  color: var(--ms-text);
  vertical-align: middle;
}

.ms-table tr:last-child td { border-bottom: none; }
.ms-table tbody tr { transition: background 0.1s var(--ms-ease); }
.ms-table tbody tr:hover { background: var(--ms-surface-alt); }

/* ---------------------------------------------------------------------- */
/* Badges / pills                                                         */
/* ---------------------------------------------------------------------- */

.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--ms-radius-full);
  font-size: 12px;
  font-weight: 650;
}

.ms-badge-success { background: var(--ms-success-tint); color: var(--ms-success); }
.ms-badge-danger { background: var(--ms-danger-tint); color: var(--ms-danger); }
.ms-badge-warning { background: var(--ms-warning-tint); color: var(--ms-warning); }
.ms-badge-info { background: var(--ms-info-tint); color: var(--ms-info); }
.ms-badge-neutral { background: var(--ms-surface-alt); color: var(--ms-text-secondary); border: 1px solid var(--ms-border); }

/* ---------------------------------------------------------------------- */
/* Empty states                                                           */
/* ---------------------------------------------------------------------- */

.ms-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--ms-text-tertiary);
}

.ms-empty svg { opacity: 0.5; margin-bottom: 14px; }
.ms-empty-title { font-size: 15px; font-weight: 600; color: var(--ms-text-secondary); margin-bottom: 4px; }
.ms-empty-sub { font-size: 13.5px; }

/* ---------------------------------------------------------------------- */
/* Dashboard grid / nav cards                                             */
/* ---------------------------------------------------------------------- */

.ms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.ms-nav-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  padding: 20px;
  cursor: pointer;
  transition: transform 0.15s var(--ms-ease), box-shadow 0.15s var(--ms-ease), border-color 0.15s var(--ms-ease);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ms-nav-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ms-shadow-md);
  border-color: var(--ms-border-strong);
}

.ms-nav-card .ms-nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ms-brand-tint);
  color: var(--ms-brand);
}

.ms-nav-card h3 { font-size: 15px; }
.ms-nav-card p { font-size: 13px; color: var(--ms-text-secondary); line-height: 1.4; }

/* ---------------------------------------------------------------------- */
/* Sidebar + content shell (stock, clients, etc.)                         */
/* ---------------------------------------------------------------------- */

.ms-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 860px) {
  .ms-shell { grid-template-columns: 1fr; }
}

.ms-sidebar {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  padding: 16px;
  position: sticky;
  top: 84px;
}

.ms-sidebar h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ms-text-tertiary);
  padding: 0 8px 10px;
}

.ms-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.ms-sidebar-list li {
  padding: 10px 12px;
  border-radius: var(--ms-radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ms-text);
  transition: background 0.1s var(--ms-ease);
}

.ms-sidebar-list li:hover { background: var(--ms-surface-alt); }
.ms-sidebar-list li.ms-active { background: var(--ms-brand-tint); color: var(--ms-brand-hover); }

/* ---------------------------------------------------------------------- */
/* Auth (login/signup)                                                    */
/* ---------------------------------------------------------------------- */

.ms-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 8%, rgba(232, 89, 12, 0.08), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(36, 100, 209, 0.06), transparent 40%),
    var(--ms-bg);
}

.ms-auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
  padding: 36px 32px;
}

.ms-auth-card.ms-wide { max-width: 460px; }

.ms-auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-weight: 700;
  font-size: 17px;
}

/* ---------------------------------------------------------------------- */
/* Utilities                                                              */
/* ---------------------------------------------------------------------- */

.ms-flex { display: flex; }
.ms-items-center { align-items: center; }
.ms-justify-between { justify-content: space-between; }
.ms-gap-8 { gap: 8px; }
.ms-gap-12 { gap: 12px; }
.ms-mt-8 { margin-top: 8px; }
.ms-mt-16 { margin-top: 16px; }
.ms-mt-24 { margin-top: 24px; }
.ms-text-secondary { color: var(--ms-text-secondary); }
.ms-text-sm { font-size: 13px; }
.ms-w-full { width: 100%; }

.ms-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ms-radius-sm);
  border: 1px solid var(--ms-border-strong);
  background: var(--ms-surface);
  color: var(--ms-text-secondary);
  cursor: pointer;
  transition: background 0.15s var(--ms-ease), color 0.15s var(--ms-ease);
}
.ms-icon-btn:hover { background: var(--ms-surface-alt); color: var(--ms-text); }

/* Fade/slide-in used sparingly for state changes (never for routine polling updates) */
@keyframes ms-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ms-enter { animation: ms-fade-in 0.18s var(--ms-ease); }