/* ==========================================================================
   Planix UI – core styles (light theme)
   File: planix.css
   ========================================================================== */

/* -------- CSS Variables (brand) -------- */
:root{
  --plx-teal:        #00ACC1;
  --plx-teal-600:    #0097A7;
  --plx-navy:        #0B2A4A;
  --plx-yellow:      #FFCA28;

  --plx-text:        #0B2A4A;
  --plx-text-soft:   #5b6b7a;
  --plx-bg:          #f6f9fb;
  --plx-card:        #ffffff;
  --plx-border:      #e6edf3;

  --plx-radius:      16px;
  --plx-shadow:      0 8px 24px rgba(11,42,74,.08);
}

/* -------- Base -------- */
html,body{height:100%}
body{
  background:var(--plx-bg);
  color:var(--plx-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--plx-teal-600);text-decoration:none}
a:hover{color:var(--plx-teal)}

.container-xxl, .container-xl, .container-lg{max-width:1200px}

/* -------- Header / Topbar -------- */
.plx-topbar{
  background: #fff;
  border-bottom:1px solid var(--plx-border);
}
.plx-brand{
  display:flex;align-items:center;gap:.5rem;text-decoration:none
}
.plx-brand-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--plx-teal),var(--plx-teal-600));
  color:#fff;
}
.plx-brand-title{font-weight:800;color:#111}
.plx-brand-dot{color:var(--plx-yellow);font-weight:800}

/* -------- Cards -------- */
.plx-card{
  background:var(--plx-card);
  border:1px solid var(--plx-border);
  border-radius:var(--plx-radius);
  box-shadow:var(--plx-shadow);
}
.plx-card + .plx-card{margin-top:1rem}
.plx-card-header{
  padding:1rem 1.25rem;border-bottom:1px solid var(--plx-border);
  display:flex;align-items:center;justify-content:space-between
}
.plx-card-body{padding:1.25rem}

/* -------- Buttons -------- */
.btn-brand{
  background:var(--plx-teal-600);
  border-color:var(--plx-teal-600);
  color:#fff;
}
.btn-brand:hover{background:var(--plx-teal);border-color:var(--plx-teal)}
.btn-ghost{
  background:#fff;border:1px solid var(--plx-border);color:var(--plx-text);
}
.btn-ghost:hover{border-color:#cfd8df}
.btn-action{
  background:var(--plx-yellow);border-color:var(--plx-yellow);color:#1b1b1b
}
.btn-action:hover{filter:brightness(0.95)}

/* Uniform small buttons in tables */
.table .btn, .plx-actions .btn{padding:.35rem .6rem;font-size:.875rem}

/* -------- Badges / Pills -------- */
.badge-soft{
  background:rgba(0,172,193,.12);
  color:var(--plx-teal-600);
  border-radius:999px;padding:.35rem .6rem;font-weight:600
}
.badge-status{border-radius:999px;padding:.25rem .6rem;font-weight:600}
.badge-success{background:#e7f7ef;color:#1e8e3e}
.badge-warning{background:#fff5d6;color:#9a6b00}
.badge-danger{background:#ffe5e5;color:#c62828}
.badge-info{background:#e6f8fb;color:#006d7a}

/* -------- Tables -------- */
.table{
  border-color:var(--plx-border);
  --bs-table-bg:transparent;
}
.table thead th{
  font-size:.8rem;letter-spacing:.02em;text-transform:uppercase;
  color:#788693;border-bottom:1px solid var(--plx-border);
}
.table tbody td{vertical-align:middle;border-color:var(--plx-border)}
.table-hover tbody tr:hover{background:#fbfdfe}

/* -------- Forms -------- */
.form-label{color:var(--plx-text);font-weight:600}
.form-control, .form-select{
  border:1px solid var(--plx-border);
  border-radius:12px;padding:.65rem .9rem;background:#fff;color:var(--plx-text)
}
.form-control:focus, .form-select:focus{
  border-color:var(--plx-teal-600);
  box-shadow:0 0 0 .2rem rgba(0,151,167,.15)
}
.input-group .form-control{border-radius:12px}
.form-text{color:var(--plx-text-soft)}

/* Search input */
.plx-search{
  border-radius:12px;border:1px solid var(--plx-border);
  padding:.6rem .9rem;background:#fff
}

/* -------- Alerts -------- */
.alert-soft{
  background:#fff8e1;border:1px solid #ffe7a6;color:#6f4c00;
  border-radius:12px;padding:1rem 1.25rem
}

/* -------- Stats tiles -------- */
.plx-stat{display:grid;grid-template-columns:48px 1fr;gap:.75rem;align-items:center}
.plx-stat-icon{
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--plx-teal),var(--plx-teal-600));
  display:flex;align-items:center;justify-content:center;color:#fff
}
.plx-stat-title{font-size:.75rem;text-transform:uppercase;color:#7a8a99}
.plx-stat-value{font-size:1.25rem;font-weight:800;color:var(--plx-navy)}

/* -------- Pills tabs (заказ, конфигурации) -------- */
.plx-pills{display:flex;gap:.5rem;flex-wrap:wrap}
.plx-pill{
  padding:.55rem .9rem;border:1px solid var(--plx-border);
  border-radius:12px;background:#fff;color:var(--plx-text);font-weight:600
}
.plx-pill.is-active{background:#d9f6fa;border-color:#c5eef4;color:#055e66}

/* -------- Lists / list-group -------- */
.plx-list .plx-item{padding:1rem;border-bottom:1px solid var(--plx-border)}
.plx-list .plx-item:last-child{border-bottom:0}

/* -------- Tickets table helpers -------- */
.tickets .status-open{ @apply: none; } /* for Tailwind users, safe ignore */
.tickets .status-open{ background:#d8f7ff;color:#006d7a }
.tickets .status-closed{ background:#eef2f6;color:#6b7a88 }

/* -------- Order summary -------- */
.order-summary .row{--gutter-y:.35rem}
.order-summary .label{color:#6d7f8f}
.order-summary .value{font-weight:700;color:var(--plx-navy)}
.order-summary .total{font-size:1.15rem;font-weight:800}

/* -------- Pagination (простая) -------- */
.plx-pagination{display:flex;gap:.5rem;align-items:center}
.plx-page{
  min-width:36px;height:36px;border:1px solid var(--plx-border);
  display:flex;align-items:center;justify-content:center;border-radius:10px;
  color:var(--plx-text)
}
.plx-page.is-active{background:#eef6fa;border-color:#d6eaf1}

/* -------- Utilities -------- */
.plx-shadow{box-shadow:var(--plx-shadow)}
.plx-rounded{border-radius:var(--plx-radius)}
.plx-muted{color:var(--plx-text-soft)}
.plx-divider{height:1px;background:var(--plx-border);margin:1rem 0}
.plx-gap-6{gap:1.5rem}

/* -------- Login card specialization -------- */
.plx-auth{
  max-width:560px;margin:4rem auto;background:#fff;border:1px solid var(--plx-border);
  border-radius:20px;box-shadow:var(--plx-shadow);padding:2rem
}
.plx-auth .plx-title{font-weight:800;font-size:2rem;color:var(--plx-navy)}

/* -------- Tables in cards -------- */
.plx-table-card .table{margin-bottom:0}
.plx-table-card .table th, .plx-table-card .table td{padding:.9rem 1rem}

/* -------- Footer notice (верхняя жёлтая кнопка/баннер) -------- */
.plx-pay-cta{
  background:var(--plx-yellow);border-color:var(--plx-yellow);
  color:#1b1b1b;font-weight:700;border-radius:12px;padding:.7rem 1.1rem
}

/* ===== Chat look ===== */
.chat-wrap { display:flex; flex-direction:column; gap:16px; }
.chat-head { display:flex; justify-content:space-between; align-items:flex-start; }
.chat-meta { color:#6c757d; font-size:12px; }
.chat-box  { position:relative; border:1px solid #e9ecef; border-radius:16px; padding:12px; height:55vh; min-height:360px; overflow:auto; background:#fff; }
.msg      { display:flex; margin:10px 0; gap:10px; max-width:90%; }
.msg .ava { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#fff; flex:0 0 36px; }
.msg .bubble { padding:10px 12px; border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.msg .time   { color:#6c757d; font-size:11px; margin-top:6px; }
.msg.me      { margin-left:auto; flex-direction:row-reverse; }
.msg.me .bubble { background:#e7f1ff; }
.msg.me .ava    { background:#0d6efd; }
.msg.support .bubble { background:#f1f3f5; }
.msg.support .ava    { background:#6c757d; }
.msg .attachments { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.att { font-size:12px; padding:6px 10px; border-radius:999px; background:#fff; border:1px dashed #ced4da; display:inline-flex; align-items:center; gap:6px; }
.att .sz { color:#6c757d; }
.chat-composer { position:sticky; bottom:0; background:#fff; border:1px solid #e9ecef; border-radius:16px; padding:8px; display:flex; gap:8px; align-items:flex-end; }
.chat-composer textarea { resize:vertical; min-height:48px; max-height:180px; }
.chat-actions { display:flex; gap:8px; }
@media (max-width: 576px){
  .chat-box{ height:60vh; }
  .msg{ max-width:100%; }
}

/* -------- Responsive -------- */
@media (max-width: 991px){
  .plx-card-header{flex-direction:column;align-items:flex-start;gap:.75rem}
  .plx-stat{grid-template-columns:40px 1fr}
  .plx-stat-icon{width:40px;height:40px}
  .plx-auth{margin:2rem 1rem;padding:1.25rem}
}

/* ==========================================================================
   Optional dark theme (toggle by adding .plx-dark to <html> or <body>)
   ========================================================================== */
.plx-dark{
  --plx-bg: #0f1520;
  --plx-card:#0f1b2d;
  --plx-border:#17243a;
  --plx-text:#e6edf3;
  --plx-text-soft:#9db2c6;
}
.plx-dark .plx-topbar{background:#0f1b2d;border-color:var(--plx-border)}
.plx-dark a{color:#7ee7f5}
.plx-dark .btn-ghost{background:#0f1b2d;color:#e6edf3;border-color:var(--plx-border)}
.plx-dark .table thead th{color:#a9bbcc;border-color:var(--plx-border)}
.plx-dark .table tbody td{border-color:var(--plx-border)}
.plx-dark .form-control, .plx-dark .form-select{background:#0f1b2d;color:#e6edf3;border-color:var(--plx-border)}
.plx-dark .alert-soft{background:#3a2e00;color:#ffde7a;border-color:#6a5200}