/* 
 * StudioPrint.bg Client Portal - Custom CSS (simplified)
 * Single breakpoint @ 950px; conflicts & duplicates removed
 */

/* ========= Base: Variables & Resets ========= */
:root {
  /* Brand */
  --color-primary: #c92f36;
  --color-primary-dark: #a62228;
  --color-primary-light: #e34c53;
  --color-primary-rgb: 201, 47, 54;

  --color-secondary: #edc11c;
  --color-secondary-dark: #c9a116;
  --color-secondary-light: #f1d153;
  --color-secondary-rgb: 237, 193, 28;

  /* Neutral */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Status */
  --color-pending: #f59e0b;
  --color-in-progress: #3b82f6;
  --color-pending-review: #8b5cf6;
  --color-completed: #10b981;
  --color-canceled: #ef4444;

  /* Layout */
  --sidebar-width: 280px;
  --header-height: 70px;
  --content-max-width: 1200px;
  --border-radius: 8px;
  --button-radius: 8px;
  --card-radius: 12px;
  --card-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --chat-sidebar-width: 320px; /* chat: left column width */

  /* Typography */
  --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* Motion & Layers */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 350ms;
  --z-sidebar: 40;
  --z-header: 30;
  --z-overlay: 20;
  --z-modal: 50;
  --z-dropdown: 10;

  /* Theme (light) */
  --bg-main: var(--color-gray-50);
  --bg-card: var(--color-white);
  --bg-card-hover: #f7f7f7;
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --text-muted: var(--color-gray-500);
  --border-color: var(--color-gray-200);
  --sidebar-bg: var(--color-white);
  --input-bg: var(--color-white);
  --header-bg: var(--color-white);
  --hover-bg: var(--color-gray-100);
}

[data-theme="dark"] {
  --bg-main: #121212;
  --bg-card: #1e1e1e;
  --bg-card-hover: #151515;
  --input-bg: #262626;
  --header-bg: #181818;
  --sidebar-bg: #181818;
  --hover-bg: #151515;

  --text-primary: #ffffff;
  --text-secondary: #e5e7eb;
  --text-muted: #9ca3af;

  --border-color: rgba(255,255,255,.08);
  --card-shadow: 0 8px 24px rgba(0,0,0,.4);

  /* gray tuning for contrast */
  --color-gray-700: #e5e7eb;
  --color-gray-600: #d1d5db;
  --color-gray-500: #9ca3af;
  --color-gray-400: #6b7280;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-secondary);
  background-color: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

p { margin-bottom: 1rem; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast) ease-in-out;
}

a:hover { color: var(--color-primary-dark); }

.hidden { display: none !important; }

/* ========= Layout ========= */
.app-container {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  transition: transform var(--transition-normal) ease-in-out, background-color var(--transition-normal), border-color var(--transition-normal);
  box-shadow: 2px 0 5px rgba(0,0,0,.05);
}

.sidebar-header {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.logo {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.logo-image {
  display: flex;
  align-items: center;
}

.logo-image img {
  max-height: 40px;
  width: auto;
}

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-gray-600);
  cursor: pointer;
  padding: .5rem;
  border-radius: var(--border-radius);
}

.sidebar-toggle:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 0;
}

.user-info {
  padding: 0 1.5rem 1.5rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.avatar {
  width: 3rem;
  height: 3rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-lg);
  margin-right: .75rem;
}

.user-details { flex: 1; }
.user-name { font-weight: 600; color: var(--text-primary); margin-bottom: .25rem; }
.user-role { font-size: var(--font-size-sm); color: var(--text-muted); }

.sidebar-nav { padding: 1.5rem 0; }
.sidebar-nav ul { list-style: none; }
.sidebar-nav li { margin-bottom: .25rem; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  padding: .75rem 1.5rem;
  color: var(--text-secondary);
  font-weight: 500;
  border-radius: 8px;
  margin: 0 8px;
  transition: background-color var(--transition-fast) ease-in-out, color var(--transition-fast) ease-in-out;
}

.sidebar-nav a svg {
  margin-right: .75rem;
  flex-shrink: 0;
}

.sidebar-nav a:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}

.sidebar-nav li.active a {
  background-color: var(--color-primary);
  color: #fff;
}

.sidebar-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
}

.logout-btn {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-weight: 500;
}

.logout-btn svg { margin-right: .75rem; }
.logout-btn:hover { color: var(--color-canceled); }

/* Main */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background-color: var(--bg-main);
  position: relative;
  transition: background-color var(--transition-normal);
}

@media (min-width: 1000px) {
  .main-content {
    padding: 1.5rem 2rem 2rem;
  }
}


/* Mobile Header */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background-color: var(--header-bg);
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
  z-index: var(--z-header);
  align-items: center;
  justify-content: space-between;
}

.mobile-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  margin-left: 1rem;
  color: var(--text-secondary);
}

.mobile-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
}

/* Content wrapper */
.content-wrapper {
  padding: 1.75rem;
  margin: 0;
  width: 100%;
  max-width: none;
}

/* Header & body inside content */
.content-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.page-title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

.content-body {
  margin-bottom: 2rem;
}

/* ========= Components ========= */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast) ease-in-out;
}

.btn svg { margin-right: .5rem; }

.btn-primary { background-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background-color: var(--color-primary-dark); color: #fff; }

.btn-secondary { background-color: var(--color-secondary); color: #fff; }
.btn-secondary:hover { background-color: var(--color-secondary-dark); color: #fff; }

.btn-success { background-color: var(--color-completed); color: #fff; }
.btn-success:hover { background-color: #059669; color: #fff; }

.btn-danger { background-color: var(--color-canceled); color: #fff; }
.btn-danger:hover { background-color: #dc2626; color: #fff; }

.btn-warning { background-color: var(--color-pending); color: #fff; }
.btn-warning:hover { background-color: #d97706; color: #fff; }

.btn-outline {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--color-gray-300);
}
.btn-outline:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}

.btn-text {
  background-color: transparent;
  color: var(--color-primary);
  padding: .5rem;
}
.btn-text:hover { color: var(--color-primary-dark); }

.btn-sm { padding: .25rem .5rem; font-size: var(--font-size-sm); }
.btn-lg { padding: .75rem 1.5rem; font-size: var(--font-size-lg); }

/* Stripe payment */
#payment-element {
  margin-bottom: 1.5rem;
  border-radius: var(--border-radius);
  padding: .75rem;
  border: 1px solid var(--color-gray-300);
  background: var(--color-gray-50);
}

#payment-status {
  background-color: var(--color-canceled);
  color: #fff;
  padding: .75rem;
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
}

.spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
}

.spinner-icon {
  border: 3px solid var(--color-gray-300);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin-right: .5rem;
}

/* Social login */
.social-login {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.google-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  background-color: #fff;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-gray-800);
  transition: all .2s ease;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  text-decoration: none;
}

.google-login-btn:hover {
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

.google-login-btn img,
.google-login-btn svg {
  margin-right: .75rem;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-color);
}

.divider::before { margin-right: 1rem; }
.divider::after  { margin-left: 1rem; }

/* Loading overlay */
.loading-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255,255,255,.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  border-radius: var(--border-radius);
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.loading-pulse {
  width: 60px;
  height: 60px;
  background-color: var(--color-primary-light);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-pulse svg {
  width: 32px;
  height: 32px;
  color: #fff;
}

.loading-gradient {
  width: 100%;
  height: 4px;
  margin-top: 1rem;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
  background-size: 200% 200%;
  animation: gradientShift 2s ease infinite;
  border-radius: 2px;
}

.loading-text {
  font-weight: 500;
  color: var(--text-primary);
  margin: .5rem 0;
}

.loading-subtext {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  max-width: 250px;
  margin: 0;
}

/* Cards */
.greeting-card,
.order-card,
.details-card,
.image-preview-card,
.form-card,
.info-card,
.review-card,
.messages-card,
.debug-card,
.tool-card {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  padding: 2rem;
  margin-bottom: 2rem;
  transition: transform var(--transition-fast) ease-in-out, box-shadow var(--transition-fast) ease-in-out, background-color var(--transition-normal);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.order-card:hover,
.nav-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
}


/* Status Badges */
.status-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .25rem .5rem;
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}

.status-pending         { background-color: #fef3c7; color: #92400e; }
.status-in_progress     { background-color: #dbeafe; color: #1e40af; }
.status-pending_review  { background-color: #ede9fe; color: #5b21b6; }
.status-approved        { background-color: #e9d5ff; color: #6d28d9; }
.status-payment_pending { background-color: #fef9c3; color: #854d0e; }
.status-payment_paid    { background-color: #dcfce7; color: #14532d; }
.status-payment_failed  { background-color: #fee2e2; color: #b91c1c; }
.status-completed       { background-color: #d1fae5; color: #065f46; }
.status-canceled        { background-color: #fee2e2; color: #b91c1c; }
.status-cancelled       { background-color: #fee2e2; color: #b91c1c; } /* alias */

/* Alerts */
.alert {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.alert svg { margin-right: .75rem; flex-shrink: 0; }

.alert-success { background-color: #d1fae5; color: #065f46; }
.alert-warning { background-color: #fef3c7; color: #92400e; }
.alert-danger  { background-color: #fee2e2; color: #b91c1c; }
.alert-info    { background-color: #dbeafe; color: #1e40af; }

/* Forms */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: .75rem;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast) ease-in-out, background-color var(--transition-normal), color var(--transition-normal);
}

.form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .25);
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

/* Form actions */
.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

/* Select arrow */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

/* File Upload */
.file-upload { margin-bottom: 1.5rem; }

.file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--border-radius);
  background-color: var(--color-gray-50);
  cursor: pointer;
  transition: all var(--transition-fast) ease-in-out;
}

.file-upload-label:hover,
.file-upload-label.highlight {
  border-color: var(--color-primary);
  background-color: rgba(201,47,54,.05);
}

.file-upload-label svg { margin-bottom: 1rem; color: var(--color-gray-400); }

.file-input { display: none; }

.upload-icon { margin-bottom: 1rem; color: var(--color-gray-400); }

.upload-text { text-align: center; }

.primary-text {
  display: block;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: .5rem;
}

.secondary-text {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.image-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
}

.image-preview {
  /* width: 100%;
  max-height: 300px; */
  overflow: hidden;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

.image-preview img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Tables */
.orders-table {
  overflow-x: auto;
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  margin-bottom: 2rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: var(--color-gray-50);
}

th {
  padding: 1.25rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

td {
  padding: 1.25rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover { background-color: var(--hover-bg); }

.actions { display: flex; gap: .5rem; }
.order-id { font-weight: 600; color: var(--text-primary); }

/* Filter/Search */
.orders-filter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-box svg {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.search-box input { padding-left: 2.5rem; }

.filter-options {
  display: flex;
  gap: .75rem;
}

/* Navigation tiles */
.navigation-tiles .tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  gap: 1.5rem;
}

.nav-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  text-align: center;
  transition: all var(--transition-fast) ease-in-out;
  color: var(--text-primary);
}

.nav-tile .tile-icon {
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.nav-tile h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--text-primary);
}

.nav-tile p {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Notification Bar */
.notification-bar {
  position: relative;
  padding: 12px 20px;
  margin-bottom: 2rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  background-color: rgba(79,70,229,.08);
  border-left: 4px solid #4f46e5;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
  animation: slideIn .3s ease-out;
}

.notification-bar .icon {
  margin-right: 12px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
}

.notification-bar .content { flex: 1; }

.notification-bar .title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.notification-bar .message {
  color: var(--text-secondary);
  font-size: .875rem;
}

.notification-bar .close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  width: 24px;
  height: 24px;
  opacity: .5;
  border-radius: 50%;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-bar .close:hover {
  opacity: 1;
  background-color: rgba(0,0,0,.05);
}

.notification-bar .action {
  margin-left: 16px;
  font-size: .875rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: #4f46e5;
  color: #fff;
  text-decoration: none;
  transition: all .2s ease;
}

.notification-bar.warning  { background-color: rgba(245,158,11,.08); border-left-color: #f59e0b; }
.notification-bar.success  { background-color: rgba(16,185,129,.08); border-left-color: #10b981; }
.notification-bar.error    { background-color: rgba(239,68,68,.08); border-left-color: #ef4444; }
.notification-bar.warning .icon { color: #f59e0b; }
.notification-bar.success .icon { color: #10b981; }
.notification-bar.error   .icon { color: #ef4444; }
.notification-bar .action:hover { opacity: .9; transform: translateY(-1px); }

/* Toasts */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 350px;
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: thin;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  pointer-events: auto;
  position: relative;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,.1);
  width: 100%;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .5s ease, opacity .5s ease;
}

.toast.show { transform: translateX(0); opacity: 1; }
.toast::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; }

.toast .toast-icon {
  flex-shrink: 0;
  margin-right: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast .toast-content { flex: 1; }

.toast .toast-title {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 4px;
  display: block;
}

.toast .toast-message {
  font-size: .85rem;
  color: rgba(0,0,0,.7);
  margin-bottom: 0;
}

.toast .toast-close {
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  margin-left: 12px;
  opacity: .5;
  transition: opacity .2s;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.toast .toast-close:hover { opacity: 1; }

.toast.success { color: #0d6832; background-color: #ecfdf5; }
.toast.success::before { background-color: #10b981; }

.toast.error { color: #991b1b; background-color: #fef2f2; }
.toast.error::before { background-color: #ef4444; }

.toast.warning { color: #92400e; background-color: #fffbeb; }
.toast.warning::before { background-color: #f59e0b; }

.toast.info { color: #1e40af; background-color: #eff6ff; }
.toast.info::before { background-color: #3b82f6; }

[data-theme="dark"] .toast { background-color: #2a2a2a; box-shadow: 0 5px 15px rgba(0,0,0,.3); }
[data-theme="dark"] .toast.success { color: #d1fae5; background-color: rgba(16,185,129,.15); }
[data-theme="dark"] .toast.error   { color: #fee2e2; background-color: rgba(239,68,68,.15); }
[data-theme="dark"] .toast.warning { color: #fef3c7; background-color: rgba(245,158,11,.15); }
[data-theme="dark"] .toast.info    { color: #e0f2fe; background-color: rgba(59,130,246,.15); }
[data-theme="dark"] .toast .toast-message { color: rgba(255,255,255,.7); }

/* Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,.5);
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.modal-content {
  background-color: var(--bg-card);
  color: var(--text-secondary);
  border-radius: var(--border-radius);
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-body { padding: 1.5rem; }

/* ===== Chat (orders left, chat right) ===== */
.chat-page .chat-container{
  display: grid;
  grid-template-columns: var(--chat-sidebar-width) minmax(0,1fr);
  gap: 1.25rem;
  height: calc(100vh - var(--header-height) - 3rem);
}

.chat-page .chat-sidebar{
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.chat-page .chat-sidebar-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.chat-page .chat-search{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--input-bg);
}
.chat-page .chat-search input{
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border-color);
  border-radius: .5rem;
  background: var(--bg-card);
  color: var(--text-primary);
}

.chat-page .order-chat-list{
  flex: 1;
  overflow-y: auto;
}

.chat-page .order-chat-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: background-color var(--transition-fast);
}
.chat-page .order-chat-item:hover{ background: var(--bg-card-hover); }
.chat-page .order-chat-item.active{
  background: var(--hover-bg);
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}

.chat-page .chat-main{
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-page .chat-header{
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
}

.chat-page .chat-messages{
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0; /* allows scrolling */
}

.chat-page .chat-input{
  flex-shrink: 0;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  padding: .75rem 1rem;
}
.chat-page .message-input-container{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .5rem;
  align-items: center;
}
.chat-page .message-input-wrapper textarea{
  width: 100%;
  resize: none;
  max-height: 9rem;
  padding: .625rem .75rem;
  border: 1px solid var(--border-color);
  border-radius: .5rem;
  background: var(--input-bg);
  color: var(--text-primary);
}

/* ========= Animations ========= */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%   { transform: scale(.95); opacity: .7; }
  50%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(.95); opacity: .7; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes slideIn {
  0%   { transform: translateY(-10px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes slideInRight {
  0%   { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

@keyframes fadeOut {
  to { opacity: 0; }
}

/* ========= Responsive (single breakpoint) ========= */
@media (max-width: 950px) {
  :root {
    --sidebar-width: 260px;
  }

  .app-container {
    flex-direction: column;
  }

  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: block;
  }

  .main-content {
    margin-left: 0;
    padding-top: var(--header-height);
  }

  .mobile-header {
    display: flex;
  }

  .content-wrapper {
    padding: 1.5rem;
  }

  .orders-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    max-width: none;
  }

  .navigation-tiles .tile-grid,
  .order-cards,
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .orders-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .orders-table > table {
    width: max-content;
    min-width: 600px;
    table-layout: auto;
  }

  /* Chat mobile: stack sidebar over chat */
  .chat-page .chat-container{
    grid-template-columns: 1fr;
    gap: 1rem;
    height: auto;
  }

  .chat-page .chat-sidebar{
    position: relative;
    height: auto;
    border-radius: var(--border-radius);
  }

  .chat-page .chat-sidebar.active{
    display: block;
  }

  .chat-page .chat-main{
    height: auto;
  }

  .chat-page .chat-header{
    position: sticky;
    top: 0;
  }

  .form-row {
    flex-direction: column;
  }

  .form-row .form-group {
    margin-bottom: 1.5rem;
  }

  .form-row .form-group:last-child {
    margin-bottom: 0;
  }
}