/* assets/pa-unified-ui.css
   PA Support Unified UI — Dashboard Style
   ใช้ปรับ UI ทุกหน้าให้โทนเดียวกับ dashboard.php
*/
:root{
  --pa-primary:#0B3D91;
  --pa-primary-2:#155EEF;
  --pa-primary-3:#4F46E5;
  --pa-accent:#F97316;
  --pa-success:#10B981;
  --pa-warning:#F59E0B;
  --pa-danger:#EF4444;
  --pa-ink:#102033;
  --pa-muted:#64748B;
  --pa-line:#E2E8F0;
  --pa-soft:#F8FAFC;
  --pa-soft-blue:#EEF6FF;
  --pa-card:rgba(255,255,255,.94);
  --pa-shadow:0 18px 46px rgba(15,23,42,.10);
  --pa-shadow-sm:0 8px 22px rgba(15,23,42,.08);
  --pa-radius:24px;
}

html,body{
  min-height:100%;
  font-family:'Sarabun',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  color:var(--pa-ink);
  background:
    radial-gradient(circle at top left, rgba(21,94,239,.13), transparent 32%),
    radial-gradient(circle at 85% 10%, rgba(249,115,22,.10), transparent 28%),
    linear-gradient(180deg,#F4F8FF 0%,#F8FAFC 48%,#FFFFFF 100%)!important;
}

a{text-decoration:none}

.pa-unified-page .container,
.pa-unified-page .premium-shell{
  max-width:1240px;
}

.hero-section,
.pa-hero,
.hd.model-context-style-header,
.hd,
.hero.timeline-hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.18), transparent 22%),
    radial-gradient(circle at 88% 20%, rgba(249,115,22,.18), transparent 20%),
    linear-gradient(135deg,#061B4E 0%,#0B3D91 48%,#155EEF 100%)!important;
  box-shadow:0 18px 54px rgba(11,61,145,.22);
}

.hero-section::before,
.pa-hero::before,
.hd::before,
.hero.timeline-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.42;
  pointer-events:none;
}

.hero-section::after,
.pa-hero::after,
.hd::after,
.hero.timeline-hero::after{
  content:'';
  position:absolute;
  width:420px;
  height:420px;
  right:-150px;
  bottom:-230px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  filter:blur(2px);
  pointer-events:none;
}

.navbar-brand,
.brand{
  color:#fff!important;
  font-weight:900!important;
  letter-spacing:-.2px;
}

.brand-mark,
.brand-icon{
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.16)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20)!important;
}

.user-badge,
.nav-pill.glass,
.pa-glass-pill{
  background:rgba(255,255,255,.14)!important;
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}

.nav-pill.white,
.pa-white-pill{
  color:#111827!important;
  background:#fff!important;
  border-color:#fff!important;
}

.nav-pill.yellow,
.pa-yellow-pill{
  color:#111827!important;
  background:#FFC107!important;
  border-color:#FFC107!important;
}

.role-pill,
.hero-kicker,
.hd-kicker,
.kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border-radius:999px;
  background:rgba(255,255,255,.13)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:rgba(255,255,255,.94)!important;
  font-weight:900;
}

.card,
.cardx,
.panel,
.tool-card,
.dashboard-card,
.stat-card,
.stat,
.box,
.form-card,
.content-card{
  border:1px solid var(--pa-line)!important;
  border-radius:var(--pa-radius)!important;
  background:var(--pa-card)!important;
  box-shadow:var(--pa-shadow)!important;
}

.card-header,
.cardx-h,
.panel-header{
  border-bottom:1px solid rgba(226,232,240,.9)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,252,.90))!important;
  border-top-left-radius:var(--pa-radius)!important;
  border-top-right-radius:var(--pa-radius)!important;
}

.btn,
button,
.nav-pill,
.btn-video-guide{
  font-weight:900;
  border-radius:999px;
}

.btn-primary,
.primary,
button.primary,
.gen{
  background:linear-gradient(135deg,var(--pa-primary-2),var(--pa-primary-3))!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(21,94,239,.22);
}

.btn-success,
.success,
button.success,
.green{
  background:linear-gradient(135deg,#10B981,#059669)!important;
  border-color:transparent!important;
  color:#fff!important;
}

.btn-warning,
.warning,
button.warning,
.orange{
  background:linear-gradient(135deg,#FBBF24,#F59E0B)!important;
  border-color:transparent!important;
  color:#111827!important;
}

.btn-dark,
.dark,
button.dark{
  background:#111827!important;
  color:#fff!important;
  border-color:transparent!important;
}

input,
select,
textarea,
.form-control,
.form-select{
  border:1.6px solid #CBDCF3!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 8px 18px rgba(15,23,42,.03)!important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus{
  border-color:var(--pa-primary-2)!important;
  box-shadow:0 0 0 4px rgba(21,94,239,.13)!important;
  outline:0!important;
}

.badge,
.tag,
.pill{
  border-radius:999px!important;
}

.table{
  --bs-table-bg:transparent;
}
.table thead th{
  color:#0f3476;
  background:#F1F7FF!important;
  border-color:#DBEAFE!important;
  font-weight:900;
}
.table td{
  border-color:#E2E8F0!important;
}

.alert{
  border-radius:18px!important;
  font-weight:700;
}

/* Dashboard tool image support */
.tool-thumb{
  width:74px;
  height:74px;
  border-radius:22px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#eef6ff,#f8fbff);
  border:1px solid #dbeafe;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  flex:0 0 74px;
}
.tool-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tool-thumb-icon{
  font-size:2rem;
  line-height:1;
}
.tool-card.with-image,
.dashboard-tool-card.with-image{
  display:flex;
  gap:16px;
  align-items:center;
}
.tool-card-body{
  min-width:0;
  flex:1;
}
.tool-link-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border-radius:999px;
  padding:.25rem .55rem;
  font-size:.72rem;
  font-weight:900;
}
.tool-link-status.ok{color:#047857;background:#ecfdf5;border:1px solid #a7f3d0}
.tool-link-status.bad{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}
.tool-link-status.warn{color:#b45309;background:#fff7ed;border:1px solid #fed7aa}

/* Tool common floating toolbar — dashboard/model prompt style */
.tool-common-toolbar{
  position:fixed!important;
  right:26px!important;
  top:50%!important;
  bottom:auto!important;
  left:auto!important;
  transform:translateY(-50%)!important;
  z-index:9997!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
  width:178px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.tool-common-toolbar .tc-btn,
.tool-common-toolbar button{
  width:100%!important;
  min-height:52px!important;
  border:0!important;
  border-radius:999px!important;
  padding:12px 18px!important;
  font-family:'Sarabun',system-ui,sans-serif!important;
  font-size:1rem!important;
  line-height:1!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(15,23,42,.16)!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}
.tool-common-toolbar [data-tc-action="copy"]{background:linear-gradient(135deg,#6366f1,#6d28d9)!important}
.tool-common-toolbar [data-tc-action="txt"]{background:#10b981!important}
.tool-common-toolbar [data-tc-action="docx"]{background:#1f2937!important}
.tool-common-toolbar [data-tc-action="draft"]{background:#f59e0b!important}
.tool-common-toolbar [data-tc-action="video"]{background:linear-gradient(135deg,#ffc107,#f59e0b)!important;color:#111827!important}

/* spacing safety when right toolbar exists */
@media(min-width:1320px){
  body:has(.tool-common-toolbar) .wrap,
  body:has(.tool-common-toolbar) .container-fluid{
    padding-right:190px;
  }
}

@media(max-width:900px){
  .tool-common-toolbar{
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:10px!important;
    transform:none!important;
    width:auto!important;
    flex-direction:row!important;
    overflow-x:auto!important;
    gap:8px!important;
    padding:8px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.92)!important;
    border:1px solid #dbeafe!important;
    box-shadow:0 16px 42px rgba(15,23,42,.16)!important;
    backdrop-filter:blur(12px)!important;
  }
  .tool-common-toolbar .tc-btn,
  .tool-common-toolbar button{
    min-width:max-content!important;
    min-height:44px!important;
    padding:10px 14px!important;
    font-size:.9rem!important;
  }
  body{
    padding-bottom:76px;
  }
}

@media(max-width:720px){
  .tool-thumb{
    width:60px;
    height:60px;
    border-radius:18px;
  }
  .hero-section,
  .pa-hero,
  .hd,
  .hero.timeline-hero{
    border-bottom-left-radius:28px!important;
    border-bottom-right-radius:28px!important;
  }
}