/* доп. стили шаблона */

/* Import the Inter font for a cleaner modern look.  If the import fails,
   browsers will fall back to system fonts specified in --font below. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Watermark for archived (cancelled) documents */
.ticket { position: relative; }
.watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 76px;
  font-weight: 900;
  letter-spacing: 8px;
  transform: rotate(-20deg);
  opacity: 0.12;
  pointer-events: none;
  z-index: 30;
}


/* v2.0 polish */
:root{
  --radius-xl: 18px;
  --radius-lg: 14px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.20);
  --shadow-2: 0 12px 36px rgba(0,0,0,.28);
  --blur: 12px;
  --ease: cubic-bezier(.2,.8,.2,1);
  /* Prefer Inter first, then fall back to system fonts. */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
body{ font-family: var(--font); letter-spacing: .2px; }
.card{ border-radius: var(--radius-xl); box-shadow: var(--shadow-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.card:hover{ box-shadow: var(--shadow-2); transform: translateY(-1px); }
.btn, .input, .select{ border-radius: 14px; }
.table-wrap{ border-radius: var(--radius-xl); overflow:hidden; }
.table tbody tr{ transition: background .15s var(--ease); }
.table tbody tr:hover{ background: rgba(255,255,255,.04); }
[data-theme="light"] .table tbody tr:hover{ background: rgba(0,0,0,.03); }

/* Topbar subtle blur */
.topbar{ backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }

/* Glass effect for cards in glass theme */
[data-theme="glass"] .card {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: var(--card);
  border: 1px solid var(--border);
}

/* Smooth hover for glass cards */
[data-theme="glass"] .card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.22);
  transform: translateY(-2px);
}

/* Micro animations */
@keyframes pop { from{ transform: translateY(6px); opacity:0;} to{ transform: translateY(0); opacity:1;} }
.shell__content > .card{ animation: pop .35s var(--ease) both; }

/* Print toolbar */
.print-toolbar{ position: sticky; top: 10px; z-index: 50; padding: 10px; margin: 10px 0; background: rgba(20,20,24,.72); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); }
[data-theme="light"] .print-toolbar{ background: rgba(255,255,255,.82); border-color: rgba(0,0,0,.08); }

/* Search in topbar */
.topbar__search .input{ height: 34px; padding: 6px 10px; }

/* Reduce visual noise on mobile */
@media (max-width: 560px){
  .topbar__search{ display:none; }
}

/* Chat messaging styles */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}
.chat-message.sent {
  align-self: flex-end;
  text-align: right;
}
.chat-message.received {
  align-self: flex-start;
}
.chat-message__bubble {
  padding: 8px 12px;
  border-radius: 14px;
  word-break: break-word;
  background: var(--color-surface-muted, #f5f5f5);
  color: var(--color-text, #000);
}
[data-theme="dark"] .chat-message__bubble {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.chat-message.sent .chat-message__bubble {
  background: var(--accent, #2563eb);
  color: #fff;
}
.chat-message__meta {
  font-size: 0.75em;
  color: var(--color-text-muted, #666);
  margin-top: 2px;
}
.chat-message.sent .chat-message__meta {
  align-self: flex-end;
}

/* News feed styles */
.news-item.card {
  box-shadow: var(--shadow-1);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.news-item.card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.news-item__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted, #666);
  margin-bottom: 4px;
}
.news-item__content {
  white-space: pre-wrap;
}

/* Responsive adjustments for messages page */
@media (max-width: 700px) {
  .chat-message {
    max-width: 100%;
  }
}