/* =========================================
   Desktop Publisher UI (No Tailwind)
   ========================================= */
:root {
    --pub-primary: var(--primary, #FF6B00);
    --pub-primary-hover: var(--primary-hover, #e04f05);
    --pub-bg: var(--background-light, #F9F5F1);
    --pub-card-bg: #ffffff;
    --pub-border: rgba(102, 102, 102, 0.22);
    --pub-text-dark: var(--text-main, #1F2937);
    --pub-text-muted: var(--text-muted, #6B7280);
    --pub-green: var(--primary, #FF6B00);
    --pub-green-light: var(--secondary, #FFF4E6);
}

/* Finance theme alignment: color-only overrides, layout preserved. */
.pub-badge-status,
.btn-pub-back,
.smart-chip,
.badge,
.tag,
.status-pill {
    background-color: var(--secondary, #FFF4E6) !important;
    color: var(--pub-primary) !important;
    border-color: rgba(252, 91, 8, 0.24) !important;
}

.ai-card,
.service-card,
.package-card,
.bt-card,
.summary-card,
.insight-card {
    background-color: var(--pub-card-bg) !important;
    color: var(--pub-text-dark) !important;
    border-color: var(--pub-border) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

.desktop-publisher-wrapper {
    width: 100%;
    background-color: transparent;
    font-family: 'Anuphan', sans-serif;
}

/* Top Bar */
.pub-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--pub-card-bg);
    border-bottom: 1px solid var(--pub-border);
}

.pub-top-left,
.pub-top-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-pub-back {
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pub-page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pub-text-dark);
    margin: 0;
}

.pub-badge-status {
    background: #f1f5f9;
    color: var(--pub-text-muted);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.pub-auto-save {
    color: var(--pub-text-muted);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pub-auto-save svg {
    width: 16px;
    height: 16px;
}

.btn-pub-outline {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: var(--pub-text-dark);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-pub-primary,
.btn-pub-primary-large {
    background: var(--pub-primary);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-pub-primary svg,
.btn-pub-primary-large svg {
    width: 18px;
    height: 18px;
}

/* Grid Layout */
.pub-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* ปรับเป็น 1 คอลัมน์ */
    gap: 1.5rem;
    padding: 1.5rem;
    align-items: start;
}

/* General Card */
.pub-card {
    background: var(--pub-card-bg);
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--pub-border);
    box-shadow: 0 4px 12px #ebeaeb;
    margin-bottom: 1rem;
}

.pub-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pub-step-title {
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #333333;
}

.step-num {
    background: #333333 !important;
    color: white !important;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
}

.step-num-dark {
    background: var(--pub-text-dark);
    color: white;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
}

.magic-star i {
    color: var(--pub-primary);
    width: 18px;
    height: 18px;
}

.magic-star.green i {
    color: var(--pub-green);
}

/* Column 1: Editor */
.pub-col-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pub-editor-mid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pub-editor-mid-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pub-editor-bot-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

/* Hero Card */
.btn-pub-magic {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: var(--pub-text-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.hero-upload-area {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    height: 180px;
    margin-bottom: 1rem;
}

.hero-cover-img {
    width: 100%;
    height: 100%;
    }



.upload-box-inner.dragover {
    border-color: var(--pub-primary);
    background-color: #fff7ed;
    transform: scale(1.02);
}

.upload-box-inner i {
    margin-bottom: 0.5rem;
    color: var(--pub-text-dark);
}

.upload-box-inner p {
    margin: 0;
    font-size: 0.875rem;
}

.upload-box-inner .title {
    font-weight: 700;
    color: var(--pub-text-dark);
}

/* ?? คลาสสำหรับรูปภาพ/วิดีโอ ให้ลอยทับเต็มกรอบ 100% เสมอ */
.upload-box-inner .preview-media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    z-index: 10 !important;
    background-color: #000;
}

/* ?? คลาสสำหรับปุ่ม + เมื่อมีรูปแล้ว */
.upload-box-inner .change-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(0,0,0,0.6) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
}

.upload-box-inner .change-overlay i {
    margin: 0 !important;
    color: white !important;
}

.upload-box-inner.dragover {
    border-color: var(--pub-primary);
    background-color: #fff7ed;
    transform: scale(1.02);
}

.upload-box-inner i {
    margin-bottom: 0.5rem;
    color: var(--pub-text-dark);
}

.upload-box-inner p {
    margin: 0;
    font-size: 0.875rem;
}

.upload-box-inner .title {
    font-weight: 700;
    color: var(--pub-text-dark);
}

/* =========================================
   Media Upload Row (Image x3, B/A x1, Video x1)
   บังคับให้อยู่แถวเดียวกันด้วย Flexbox
   ========================================= */
.media-upload-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* บังคับไม่ให้ตกบรรทัด */
    gap: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
}

.media-box {
    flex: 1; /* บังคับให้แบ่งขนาดเท่ากัน 5 ช่อง */
    position: relative;
    height: 60px;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--pub-text-muted);
    font-size: 0.65rem;
    font-weight: 600;
}

.media-placeholder i {
    width: 16px;
    height: 16px;
    margin-bottom: 0.15rem;
}

.media-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-change-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.media-change-btn i {
    width: 14px;
    height: 14px;
}

.hidden-input {
    display: none !important;
}

.hidden-elem {
    display: none !important;
}


/* =========================================
   Media Upload Row (Image x3, B/A x1, Video x1)
   ========================================= */
.media-upload-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.media-box {
    position: relative;
    height: 60px;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--pub-text-muted);
    font-size: 0.65rem;
    font-weight: 600;
}

.media-placeholder i {
    width: 16px;
    height: 16px;
    margin-bottom: 0.15rem;
}

.media-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-change-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.media-change-btn i {
    width: 14px;
    height: 14px;
}

.hidden-input {
    display: none !important;
}

.hidden-elem {
    display: none !important;
}

.hero-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--pub-text-muted);
}

.hero-controls .control-left,
.hero-controls .control-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-play-preview {
    background: #f1f5f9;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

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

.pub-form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pub-text-muted);
    margin-bottom: 0.25rem;
}

.pub-form-group label.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pub-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pub-input,
.pub-select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--pub-text-dark);
    box-sizing: border-box;
}

.input-with-suffix {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    overflow: hidden;
}

.input-with-suffix .prefix,
.input-with-suffix .suffix {
    padding: 0.6rem;
    color: var(--pub-text-muted);
    background: #f8fafc;
    font-size: 0.875rem;
}

.input-with-suffix input {
    border: none;
    border-radius: 0;
    outline: none;
}

.select-with-dot {
    position: relative;
}

.select-with-dot .dot-orange {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--pub-primary);
    border-radius: 50%;
}

.select-with-dot select {
    padding-left: 1.75rem;
}

/* Tags & Buttons */
.btn-pub-outline-sm,
.btn-pub-outline-xs {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-pub-outline-sm {
    padding: 0.25rem 0.75rem;
}

.btn-pub-outline-xs {
    padding: 0.15rem 0.5rem;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pub-tag {
    background: #f1f5f9;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    color: var(--pub-text-dark);
}

.btn-pub-add-tag {
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: var(--pub-text-muted);
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}

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

.text-sm {
    font-size: 0.875rem;
}

.text-primary {
    color: var(--pub-primary);
    font-weight: 700;
}

.text-muted {
    color: var(--pub-text-muted);
}

/* Checkbox & Radio */
.pub-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pub-custom-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.pub-custom-checkbox input {
    display: none;
}

.pub-custom-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 1px solid var(--pub-primary);
    background: var(--pub-primary);
    border-radius: 4px;
    position: relative;
}

.pub-custom-checkbox input:not(:checked)~.checkmark {
    background: white;
    border-color: #cbd5e1;
}

.pub-custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pub-custom-checkbox input:checked~.checkmark::after {
    display: block;
}

.radio-group {
    display: flex;
    gap: 1rem;
}

.pub-radio {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--pub-text-muted);
}

.pub-radio.active {
    color: var(--pub-primary);
    font-weight: 600;
}

.pub-radio input {
    display: none;
}

.pub-radio .dot {
    width: 14px;
    height: 14px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.pub-radio input:checked~.dot {
    border-color: var(--pub-primary);
}

.pub-radio input:checked~.dot::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 6px;
    height: 6px;
    background: var(--pub-primary);
    border-radius: 50%;
}

/* Countdown */
.countdown-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.time-box {
    text-align: center;
}

.time-in {
    width: 40px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    border: none;
    background: #f8fafc;
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.time-lbl {
    display: block;
    font-size: 0.65rem;
    color: var(--pub-text-muted);
    margin-top: 0.25rem;
}

.colon {
    font-weight: 700;
    margin-top: -15px;
}

/* Toggle Switch */
.pub-toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.pub-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.pub-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 34px;
}

.pub-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.pub-toggle-switch input:checked+.pub-slider {
    background-color: var(--pub-primary);
}

.pub-toggle-switch input:checked+.pub-slider:before {
    transform: translateX(14px);
}

/* Column 2: Mobile Preview */
.mobile-frame-wrapper {
    display: flex;
    justify-content: center;
}

.mobile-phone-frame {
    width: 320px;
    height: 650px;
    background: white;
    border-radius: 2.5rem;
    box-shadow: 0 0 0 10px #f1f5f9, 0 10px 25px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.phone-status-bar {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    position: relative;
    z-index: 10;
    background: white;
}

.dynamic-island {
    width: 80px;
    height: 20px;
    background: black;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 5px;
}

.status-icons {
    display: flex;
    gap: 0.25rem;
}

.status-icons i {
    width: 14px;
    height: 14px;
}

.phone-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.preview-hero {
    position: relative;
    height: 220px;
}

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

.preview-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    padding: 0.5rem;
    display: flex;
}

.preview-flash-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--pub-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.preview-flash-badge i {
    width: 12px;
    height: 12px;
}

.preview-details {
    padding: 1rem;
}

.prev-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.prev-subtitle {
    font-size: 0.85rem;
    color: var(--pub-text-muted);
    margin: 0 0 1rem 0;
}

.prev-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.prev-duration {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--pub-text-muted);
}

.prev-duration i {
    width: 14px;
    height: 14px;
}

.prev-price strong {
    font-size: 1.25rem;
}

.prev-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.prev-tags span {
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: var(--pub-text-muted);
}

.prev-promo-box {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.promo-title {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.promo-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pub-primary);
}

.promo-timer {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.promo-timer i {
    width: 12px;
    height: 12px;
}

.prev-btn-book {
    width: 100%;
    background: var(--pub-primary);
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.prev-tech-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px solid var(--pub-border);
    padding-top: 1rem;
}

.prev-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.tech-text {
    flex: 1;
}

.tech-name {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0;
}

.tech-status {
    font-size: 0.75rem;
    color: var(--pub-text-muted);
    margin: 0;
}

.tech-rating {
    font-size: 0.75rem;
    font-weight: 600;
}

.tech-rating .star {
    color: #facc15;
}

.tech-rating .rating-count {
    color: var(--pub-text-muted);
    font-weight: 400;
}

.phone-bottom-nav {
    display: flex;
    justify-content: space-around;
    padding: 0.5rem;
    border-top: 1px solid var(--pub-border);
    background: white;
}

/* Column 3: Insights */
.pub-col-insights {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pub-sub-label {
    margin: 0;
}

.stat-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--pub-border);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.stat-icon-wrap {
    background: #f8fafc;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: var(--pub-text-muted);
    display: flex;
}

.stat-icon-wrap i {
    width: 18px;
    height: 18px;
}

.stat-details {
    display: flex;
    flex-direction: column;
}

.s-label {
    font-size: 0.75rem;
    color: var(--pub-text-muted);
}

.s-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pub-text-dark);
}

.pub-ai-suggestion {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.ai-text {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.btn-pub-ai-action {
    background: var(--pub-green-light);
    color: var(--pub-green);
    border: 1px solid #a7f3d0;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 700;
    width: 100%;
    cursor: pointer;
}

.pub-summary-panel {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.summary-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pub-text-dark);
    margin: 0 0 1rem 0;
}

.summary-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.summary-checklist li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--pub-text-muted);
    margin-bottom: 0.75rem;
}

.summary-checklist li span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-checklist li span i {
    width: 16px;
    height: 16px;
}

.check-green {
    color: var(--pub-green);
    width: 18px;
    height: 18px;
}

.btn-pub-primary-large {
    width: 100%;
    justify-content: center;
    padding: 1rem;
    font-size: 1.1rem;
    border-radius: 0.75rem;
}

.pub-footer-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--pub-text-muted);
    margin-top: 0.75rem;
}

/* Utilities */
.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-auto {
    margin-top: auto;
}

/* บังคับเลื่อน Hero Card */
.pub-hero-card {
    height: 500px !important;
    overflow-y: auto !important;
    display: block !important;
    position: relative !important;
}

.pub-hero-card::-webkit-scrollbar {
    display: none !important;
}

/* ปลดล็อกตัวแม่ */
.desktop-publisher-wrapper {
    overflow: visible !important;
}


/* =========================================
   Upload Box Preview Overlays (ภาพโชว์พอดีกรอบ 1:1)
   ========================================= */
.upload-box-inner {
    position: relative;
    overflow: hidden;
}
.upload-box-inner .preview-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
    background: #000;
}
.upload-box-inner .change-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.upload-box-inner .change-overlay i {
    width: 16px;
    height: 16px;
    color: white;
    margin: 0;
}

/* Hide file inputs natively to keep HTML clean */
.upload-hidden-inputs input[type="file"] {
    display: none !important;
}

/* =========================================
   Square Custom File Upload Styling
   ========================================= */
.normal-upload-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}



.img-upload-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.img-upload-item {
    position: relative;
    width: 80px; /* ขนาดกล่องสี่เหลี่ยม 1:1 */
    height: 80px;
}

.hidden-upload-input {
    display: block !important; /* แสดง input เพื่อเห็นปุ่ม Choose File */
    width: 100%;
    height: 100%;
    color: transparent; /* ซ่อนข้อความ 'No file chosen' ด้านข้างปุ่ม */
    background: transparent;
}

.hidden-upload-input::file-selector-button {
    width: 100%;
    height: 100%;
    border: 1px dashed #cbd5e1; /* กรอบเส้นประแบบเดิม */
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--pub-primary); /* สีส้มตามตัวแปรไฟล์ต้นฉบับ */
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.hidden-upload-input::file-selector-button:hover {
    border-color: var(--pub-primary);
    background-color: #fff7ed;
}

.img-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px dashed #cbd5e1; /* กรอบเส้นประ */
    border-radius: 6px;
    background-color: #ffffff;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.img-upload-label:hover {
    border-color: var(--pub-primary);
    background-color: #fff7ed; /* พื้นหลังสีส้มอ่อนเมื่อเอาเมาส์ชี้ */
}

.img-upload-label i {
    color: var(--pub-primary); /* ไอคอนสีส้ม */
    width: 20px;
    height: 20px;
    margin-bottom: 4px;
}

.img-upload-label .upload-text {
    color: var(--pub-primary); /* ตัวหนังสือสีส้ม */
    font-size: 0.65rem;
    line-height: 1.2;
    font-weight: 500;
}

/* =========================================
   Service Grid Layout (New Addition)
   ========================================= */
.service-grid-wrapper {
    grid-column: 1 / -1; /* บังคับให้แสดงเต็มความกว้าง */
    width: 100%;
    margin-top: 1rem;
}

.service-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    background: transparent;
}

.sg-title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sg-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pub-text-dark, #1e293b);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sg-filters {
    display: flex;
    gap: 0.5rem;
}



.sg-filter-badge {
    background: #f1f5f9;
    color: var(--pub-text-muted, #64748b);
    padding: 0.35rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sg-filter-badge.active {
    background: var(--pub-primary, #ff5e00);
    color: #ffffff;
}

.sg-filter-badge:hover:not(.active) {
    background: #e2e8f0;
    color: var(--pub-text-dark, #1e293b);
}

.sg-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sg-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--pub-text-dark, #1e293b);
}

.sg-sort i {
    width: 16px;
    height: 16px;
}

.sg-sort-container {
    position: relative;
    display: inline-block;
}

.sg-sort-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    z-index: 50;
    display: none;
    flex-direction: column;
}

.sg-sort-container:hover .sg-sort-menu {
    display: flex;
}

.sg-sort-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    text-align: left;
    background: transWparent;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pub-text-dark, #1e293b);
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

.sg-sort-item i {
    width: 14px;
    height: 14px;
}

.sg-sort-item:last-child {
    border-bottom: none;
}

.sg-sort-item:hover {
    background: #f8fafc;
}

.sg-sort-item.active {
    background: #f1f5f9;
    color: var(--pub-primary, #4338ca);
}

.sg-view-toggles {
    display: flex;
    background: #f8fafc;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.sg-view-btn {
    background: transparent;
    border: none;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    color: var(--pub-text-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.sg-view-btn.active {
    background: #333333;
    color: #ffffff;
}

.sg-view-btn i {
    width: 16px;
    height: 16px;
}

.service-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    width: 100%;
    min-height: 380px; /* เพิ่มความสูงขั้นต่ำ ป้องกันเลย์เอาต์ยุบตัวเมื่อไม่มีการ์ดแสดงผล */
    align-content: start; /* บังคับให้การ์ดเรียงชิดขอบบนเสมอ */
}

/* =========================================
   List View Mode (เปิดใช้งานเมื่อกดปุ่ม List)
   ========================================= */
.service-grid-container.list-view {
    grid-template-columns: 1fr;
}
.service-grid-container.list-view .service-card {
    flex-direction: row;
    height: auto;
    min-height: 70px; /* ลดความสูงขั้นต่ำลงให้แนบไปกับแถว */
    align-items: center; /* ดัน??????*/
}
.service-grid-container.list-view .sc-image-wrapper {
    width: 120px; /* ย่อภาพให้เล็กสมดุลกับขนาดฟอนต์ */
    height: 80px; /* กำหนดความสูงให้เป็นสัดส่วน Thumbnail พอดี */
    flex-shrink: 0;
    margin: 10px 0 10px 15px; /* ดันรูปภาพไม่ให้ชิดขอบการ์ดมากเกินไป */
    border-radius: 0.5rem;
    overflow: hidden;
}
/* กระจายข้อมูลด้านในออกเป็น 4 คอลัมน์แนวนอน */
.service-grid-container.list-view .sc-body {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.25rem 1.5rem;
    padding: 0.75rem 1.5rem; /* ลดความกว้างของขอบในเพื่อให้รับกับภาพที่เล็กลง */
    flex: 1;
}

/* บังคับขนาดฟอนต์ให้เท่ากันทั้งหมดในโหมด List */
.service-grid-container.list-view .sc-title,
.service-grid-container.list-view .sc-subtitle,
.service-grid-container.list-view .sc-meta,
.service-grid-container.list-view .sc-location,
.service-grid-container.list-view .sc-status,
.service-grid-container.list-view .sc-progress-header {
    font-size: 0.85rem;
}

.service-grid-container.list-view .sc-title {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin: 0;
}
.service-grid-container.list-view .sc-subtitle {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0;
}
.service-grid-container.list-view .sc-meta {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    justify-content: flex-start;
}
.service-grid-container.list-view .sc-progress-wrap {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
    width: 100%;
    max-width: 250px;
}
.service-grid-container.list-view .sc-actions {
    grid-column: 4;
    grid-row: 1 / span 2;
    margin: 0;
    justify-content: flex-end;
}
.service-grid-container.list-view .sc-btn {
    padding: 0.5rem 0.75rem;
}

.service-card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

.sc-image-wrapper {
    position: relative;
    height: 160px;
    width: 100%;
}

.sc-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    backdrop-filter: blur(4px);
}

.sc-badge i {
    width: 12px;
    height: 12px;
}

.badge-trending { background: #ff5e00; }
.badge-flash { background: #f59e0b; }
.badge-preventive { background: #22c55e; }
.badge-seasonal { background: #3b82f6; }

.sc-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sc-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pub-text-dark, #1e293b);
    margin: 0 0 0.25rem 0;
}

.sc-subtitle {
    font-size: 0.75rem;
    color: var(--pub-text-muted, #64748b);
    margin: 0 0 1rem 0;
}

.sc-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.sc-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--pub-text-dark, #1e293b);
}

.sc-location i {
    width: 14px;
    height: 14px;
    color: var(--pub-text-muted, #64748b);
}

.sc-status {
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.65rem;
}

.status-high { color: #ef4444; font-weight: 700; }
.status-medium { color: #f59e0b; font-weight: 700; }

.sc-progress-wrap {
    margin-bottom: 1.25rem;
}

.sc-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--pub-text-muted, #64748b);
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.sc-progress-header span:last-child {
    color: var(--pub-text-dark, #1e293b);
    font-weight: 700;
}

.sc-progress-bar {
    width: 100%;
    height: 6px;
    background: #f1f5f9;
    border-radius: 1rem;
    overflow: hidden;
}

.sc-progress-fill {
    height: 100%;
    border-radius: 1rem;
    background: #ff5e00;
}

/* Custom width classes for progress bar to avoid inline style */
.w-72 { width: 72%; }
.w-68 { width: 68%; }
.w-61 { width: 61%; }
.w-54 { width: 54%; }

.sc-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: auto;
}

.sc-btn {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--pub-text-dark, #1e293b);
    transition: all 0.2s;
}

.sc-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.sc-btn i {
    width: 16px;
    height: 16px;
}


/* =========================================
   Dashboard Widgets Layout (4 Columns)
   ========================================= */
.wdg-grid-container {
    grid-column: 1 / -1; /* ให้ทะลุ Grid แม่ 3 คอลัมน์ออกมาเต็มจอ */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* แก้จาก 4 เป็น 2 คอลัมน์ เพื่อให้การ์ด 3 และ 4 ปัดตกไปอยู่แถวใหม่ */
    gap: 1.25rem;
    width: 100%;
    margin-top: 1rem;
}

.wdg-card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.wdg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.wdg-mb-none {
    margin-bottom: 0;
}

.wdg-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    text-transform: uppercase;
}

.wdg-subtitle {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.25rem 0 1rem 0;
}

.wdg-list-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    margin: 1rem 0 0.75rem 0;
}

.wdg-link {
    font-size: 0.75rem;
    color: #94a3b8;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.1rem;
    font-weight: 600;
}

.wdg-link i {
    width: 14px;
    height: 14px;
}

/* List Items (Trending & Mission) */
.wdg-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wdg-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wdg-rank {
    font-size: 0.95rem;
    font-weight: 700;
    color: #334155;
    width: 16px;
    text-align: center;
}

.wdg-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wdg-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.wdg-sub {
    font-size: 0.7rem;
    color: #94a3b8;
}

.wdg-stat-green { font-size: 0.75rem; font-weight: 700; color: #10b981; }
.wdg-stat-red { font-size: 0.75rem; font-weight: 700; color: #ef4444; }
.wdg-stat-orange { font-size: 0.75rem; font-weight: 700; color: #f97316; }
.wdg-stat-blue { font-size: 0.75rem; font-weight: 700; color: #3b82f6; }
.wdg-stat-yellow { font-size: 0.75rem; font-weight: 700; color: #eab308; }

.wdg-loc {
    font-size: 0.75rem;
    color: #475569;
    font-weight: 600;
    width: 45px;
    text-align: left;
}

.wdg-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    width: 30px;
    text-align: right;
}

/* Risk Items */
.wdg-risk-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wdg-risk-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wdg-risk-icon i { width: 16px; height: 16px; }

.icon-gray { background: #f1f5f9; color: #64748b; }
.icon-orange { background: #fff7ed; color: #f97316; }
.icon-blue { background: #eff6ff; color: #3b82f6; }
.icon-yellow { background: #fefce8; color: #eab308; }

.wdg-chart {
    width: 50px;
    height: 20px;
}

.chart-red { color: #ef4444; }
.chart-orange { color: #f97316; }
.chart-blue { color: #3b82f6; }
.chart-yellow { color: #eab308; }

/* Flash Banner */
.wdg-flash-banner {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #991b1b 100%);
    border-radius: 0.75rem;
    padding: 1.25rem;
    color: #ffffff;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}

.flash-banner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.flash-time {
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.flash-time i { width: 14px; height: 14px; }
.flash-close { width: 16px; height: 16px; cursor: pointer; opacity: 0.8; }

.flash-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.flash-sub {
    font-size: 0.75rem;
    opacity: 0.9;
    margin: 0 0 1rem 0;
}

.flash-price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.flash-price-new {
    font-size: 1.25rem;
    font-weight: 700;
}

.flash-price-old {
    font-size: 0.85rem;
    text-decoration: line-through;
    opacity: 0.7;
}

.flash-discount {
    background: #ff5e00;
    color: #ffffff;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.wdg-flash-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    margin-bottom: 1rem;
}

.stat-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-lbl {
    font-size: 0.7rem;
    color: #94a3b8;
}

.stat-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
}

.wdg-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.wdg-progress-bar {
    flex: 1;
    height: 6px;
    background: #f1f5f9;
    border-radius: 1rem;
    overflow: hidden;
}

.wdg-progress-fill {
    height: 100%;
    background: #ff5e00;
    border-radius: 1rem;
}

.wdg-progress-pct {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

/* Mission Box */
.wdg-mission-box {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mission-icon {
    width: 40px;
    height: 40px;
    background: #e2e8f0;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.mission-info {
    flex: 1;
}

.m-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.m-sub {
    font-size: 0.7rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.m-joined {
    font-size: 0.7rem;
    color: #94a3b8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.m-pct {
    font-weight: 700;
    color: #334155;
    font-size: 0.75rem;
}

.wdg-badge-active {
    background: #ecfdf5;
    color: #10b981;
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Buttons */
.wdg-btn-outline {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.wdg-btn-outline:hover {
    background: #f1f5f9;
}

.wdg-mt-auto {
    margin-top: auto;
}

/* === DEMAND SURGE ALERT CARD === */
.dsa-card {
    position: relative;
    background: #0d0d0d;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    min-height: 120px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 77, 28, 0.25);
    box-shadow: 0 0 24px rgba(255, 60, 0, 0.12);
}

.dsa-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,0.08);
    border: none;
    color: #aaa;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    line-height: 1;
}

.dsa-close i {
    width: 12px;
    height: 12px;
}

.dsa-content {
    flex: 1;
    padding: 14px 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

.dsa-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ff4d1c;
    text-transform: uppercase;
}

.dsa-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin: 2px 0;
}

.dsa-sub {
    font-size: 10px;
    color: #888;
    margin: 0 0 6px 0;
}

.dsa-btn {
    display: inline-block;
    width: fit-content;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.22);
    background: transparent;
    color: #ddd;
    border-radius: 6px;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.dsa-btn:hover {
    background: rgba(255,255,255,0.08);
}

.dsa-map {
    position: relative;
    width: 110px;
    flex-shrink: 0;
    background: #111;
    overflow: hidden;
}

.dsa-map-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,60,0,0.45) 0%, transparent 70%);
    animation: dsa-pulse 2s ease-in-out infinite;
}

.dsa-map-svg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

@keyframes dsa-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.4; }
}

/* =========================================
   AI PRIORITY CENTER
   ========================================= */
.ai-priority-wrapper {
    grid-column: 1 / -1;
    width: 100%;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.ai-priority-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
}
.ai-priority-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.ai-priority-title i {
    color: #8b5cf6;
}
.ai-priority-subtitle {
    font-size: 0.875rem;
    color: #64748b;
}
.ai-priority-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.ai-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.2s ease;
}
.ai-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.ai-card-badge {
    position: absolute;
    top: -12px;
    left: 1rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.ai-card.urgent .ai-card-badge { background: #ef4444; }
.ai-card.urgent { border-color: #fca5a5; background: #fef2f2; }
.ai-card.risk .ai-card-badge { background: #f59e0b; }
.ai-card.risk { border-color: #fcd34d; background: #fffbeb; }
.ai-card.opportunity .ai-card-badge { background: #3b82f6; }
.ai-card.opportunity { border-color: #93c5fd; background: #eff6ff; }

.ai-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0.75rem 0 0.25rem 0;
}
.ai-card-loc {
    font-size: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 0.5rem 0;
}
.ai-card-loc i {
    width: 14px;
    height: 14px;
}
.ai-card-context {
    font-size: 0.875rem;
    color: #475569;
    flex: 1;
}
.ai-card-context.mt-2 {
    margin-top: 0.5rem;
}
.ai-card-context p {
    margin: 0 0 4px 0;
}
.ai-card-context .warning-text {
    color: #ea580c;
    font-weight: 600;
}
.ai-card-cta {
    margin-top: 1rem;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    width: 100%;
    border: none;
    transition: 0.2s;
}
.ai-card.urgent .ai-card-cta {
    background: #ef4444;
    color: white;
}
.ai-card.urgent .ai-card-cta:hover { background: #dc2626; }

.ai-card.risk .ai-card-cta {
    background: #f59e0b;
    color: white;
}
.ai-card.risk .ai-card-cta:hover { background: #d97706; }

.ai-card.opportunity .ai-card-cta {
    background: #3b82f6;
    color: white;
}
.ai-card.opportunity .ai-card-cta:hover { background: #2563eb; }

/* Responsive */
@media (max-width: 1024px) {
    .ai-priority-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .ai-priority-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   MARKETING OS / FACTORY INTELLIGENCE
   ========================================= */
.trend-why { font-size: 10px; font-weight: 600; margin-left: 4px; }
.why-orange { color: #f59e0b; }
.why-red { color: #ef4444; }

.flash-roi-box { margin-top: 8px; padding: 8px; background: #ecfdf5; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; }
.flash-roi-lbl { font-size: 12px; font-weight: 700; color: #059669; }
.flash-roi-val { font-size: 12px; font-weight: 700; color: #059669; display: flex; align-items: center; gap: 4px; }
.flash-roi-val i { width: 14px; height: 14px; }

.mt-8 { margin-top: 8px !important; }
.mt-12 { margin-top: 12px !important; }
.pb-none { padding-bottom: 0 !important; border-bottom: none !important; }

.mission-icon-summer { background: #fffbeb !important; color: #f59e0b !important; }

.ai-feed-card { border: 2px solid #8b5cf6 !important; background: #faf5ff !important; }
.ai-feed-title { color: #7c3aed !important; display: flex; align-items: center; gap: 6px; }
.ai-feed-title i { width: 16px; height: 16px; }
.ai-feed-item { align-items: flex-start !important; padding: 8px 0 !important; }
.ai-feed-item.border-dashed { border-bottom: 1px dashed #e9d5ff !important; }
.ai-feed-icon { margin-top: 2px; width: 16px; height: 16px; }
.icon-green { color: #10b981; }
.icon-red { color: #ef4444; }
.icon-blue { color: #3b82f6; }
.ai-feed-info { margin-left: 8px; }
.ai-feed-name { font-weight: 700 !important; }
.ai-feed-sub { font-weight: 600 !important; font-size: 10px; }
.sub-green { color: #059669; }
.sub-red { color: #ef4444; }
.sub-blue { color: #2563eb; }

.btn-action-green, .btn-action-red, .btn-action-blue { color: white; border: none; padding: 4px 8px; border-radius: 4px; font-size: 10px; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.btn-action-green { background: #10b981; }
.btn-action-green:hover { background: #059669; }
.btn-action-red { background: #ef4444; }
.btn-action-red:hover { background: #dc2626; }
.btn-action-blue { background: #3b82f6; }
.btn-action-blue:hover { background: #2563eb; }

/* Smart Timeline */
.smart-timeline-card { border-top: 3px solid #10b981 !important; }
.smart-timeline-list { position: relative; padding-left: 12px; border-left: 2px solid #e2e8f0; margin-left: 8px; margin-top: 10px; }
.st-item { position: relative; margin-bottom: 12px; }
.st-dot { position: absolute; left: -17px; top: 4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid white; }
.dot-green { background: #10b981; }
.dot-purple { background: #8b5cf6; }
.dot-orange { background: #f59e0b; }
.dot-blue { background: #3b82f6; }
.st-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; display: inline-block; }
.badge-green { color: #10b981; background: #ecfdf5; }
.badge-purple { color: #8b5cf6; background: #f3e8ff; }
.badge-orange { color: #f59e0b; background: #fffbeb; }
.badge-blue { color: #3b82f6; background: #eff6ff; }
.st-title { font-size: 12px; font-weight: 600; color: #1e293b; margin-top: 4px; }
.st-time { font-size: 10px; color: #64748b; margin-top: 2px; }

/* Quick Actions */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.qa-btn { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: 0.2s; }
.qa-text { font-size: 11px; font-weight: 600; color: #1e293b; }
.btn-boost:hover { background: #eff6ff; border-color: #93c5fd; }
.icon-boost { color: #3b82f6; }
.btn-duplicate:hover { background: #f5f3ff; border-color: #c4b5fd; }
.icon-duplicate { color: #8b5cf6; }
.btn-gen-package { grid-column: 1 / -1; }
.btn-gen-package:hover { background: #ecfdf5; border-color: #6ee7b7; }
.icon-gen { color: #10b981; }

/* Dashboard Center Content */
.ai-suggested-action { margin-top: 8px; padding: 8px; background: #ecfdf5; border-radius: 6px; border: 1px dashed #a7f3d0; }
.sa-title { font-size: 10px; font-weight: 700; color: #059669 !important; margin: 0 0 2px 0 !important; text-transform: uppercase; }
.sa-desc { font-size: 12px; font-weight: 700; color: #1e293b !important; margin: 0 0 4px 0 !important; }
.sa-rev { font-size: 11px; font-weight: 600; color: #10b981 !important; margin: 0 !important; }

.smart-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.smart-chip { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; background: white; border: 1px solid #cbd5e1; color: #475569; transition: 0.2s; }
.smart-chip:hover { border-color: #94a3b8; background: #f8fafc; }
.smart-chip.active { background: #1e293b; color: white; border-color: #1e293b; }

.sc-img-relative { position: relative; }
.sc-quality-badges { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.q-badge { background: rgba(255, 255, 255, 0.95); color: #1e293b; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.q-badge i { width: 10px !important; height: 10px !important; stroke-width: 3px; }

/* Synto right sidebar card standard: Booking Command Center parity */
.right-sidebar {
    --synto-rs-surface: #ffffff;
    --synto-rs-soft: #f7f8fa;
    --synto-rs-soft-strong: #f1f3f5;
    --synto-rs-ink: #333333;
    --synto-rs-muted: #666666;
    --synto-rs-accent: #fc5b08;
    --synto-rs-shadow: 0 18px 58px -18px rgba(51, 51, 51, 0.08);
    --synto-rs-shadow-hover: 0 22px 68px -20px rgba(51, 51, 51, 0.1);
}

.right-sidebar :is(
    #Synto_Desktop_Publisher_rigthsidebar-placeholder,
    #right-sidebar-dynamic-content,
    .synto-publisher-wrapper,
    .pub-col-insights,
    .wdg-grid-container
) {
    gap: 16px !important;
}

.right-sidebar :is(
    .card,
    .pub-card,
    .bt-card,
    .wdg-card,
    .ai-feed-card,
    .smart-timeline-card,
    .daily-mission-card,
    .right-sidebar-card,
    .sidebar-card,
    .bfc-rs-card,
    .risk-sidebar-card,
    .announcements-card,
    .app-preview-card,
    .time-attendance-card,
    .workforce-pulse-card,
    .upcoming-card,
    .qa-card,
    .rq-card,
    .pp-card,
    .st-card,
    .team-prod-card,
    .team-productivity-rs-card,
    .forecast-insights-rs-card,
    .drilldown-report-rs-card,
    .marketing-campaign-rs-card,
    .AreaIntelligence-card,
    .area-demand-card,
    .low-stock-rs-card,
    .popular-items-rs-card,
    .department-perf-rs-card,
    .dept-performance-rs-card,
    .contractor-rs-card,
    .contractor-crew-rs-card,
    .contractor-materials-rs-card,
    .contractor-milestone-rs-card,
    [class*="-rs-card"],
    [class*="rs-card"],
    .task-card, .upcoming-card, .dept-performance-rs-card, .pending-task-card, .risk-sidebar-card, .announcements-card, .app-preview-card, .time-attendance-card, .workforce-pulse-card, .qa-card, .rq-card, .pp-card, .team-prod-card, .team-productivity-rs-card,
    .smart-timeline-container,
    #timeSlotHeatmapModule,
    #serviceAlertModule,
    #realtimeTimelineModule,
    #flowEnergyModule,
    #delayDetectionModule,
    #drilldownReportModule,
    #forecastInsightsModule,
    #marketingCampaignModule,
    #readinessBanner,
    #projSystemInfoModule,
    #projOwnershipModule,
    #projActivityModule,
    #quickAssignModule,
    #productivityPulseModule,
    #riskQueueModule,
    #smartTimelineModule,
    #productivityPulse,
    #smartTimeline
) {
    background: var(--synto-rs-surface) !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: var(--synto-rs-ink) !important;
}

.right-sidebar :is(
    .wdg-card,
    .ai-feed-card,
    .smart-timeline-card,
    .daily-mission-card,
    .bfc-rs-card,
    .risk-sidebar-card,
    .announcements-card,
    .app-preview-card,
    .time-attendance-card,
    .workforce-pulse-card,
    .upcoming-card,
    .qa-card,
    .rq-card,
    .pp-card,
    .team-prod-card,
    .team-productivity-rs-card,
    [class*="-rs-card"],
    #timeSlotHeatmapModule,
    #serviceAlertModule,
    #realtimeTimelineModule,
    #flowEnergyModule,
    #delayDetectionModule,
    #drilldownReportModule,
    #forecastInsightsModule,
    #marketingCampaignModule,
    #readinessBanner,
    #projSystemInfoModule,
    #projOwnershipModule,
    #projActivityModule,
    #quickAssignModule,
    #productivityPulseModule,
    #riskQueueModule,
    #smartTimelineModule,
    #productivityPulse,
    #smartTimeline
) {
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
}

.right-sidebar :is(
    .wdg-card,
    .ai-feed-card,
    .smart-timeline-card,
    .daily-mission-card,
    .bfc-rs-card,
    .risk-sidebar-card,
    .announcements-card,
    .app-preview-card,
    .time-attendance-card,
    .workforce-pulse-card,
    .upcoming-card,
    .qa-card,
    .rq-card,
    .pp-card,
    .team-prod-card,
    .team-productivity-rs-card,
    [class*="-rs-card"],
    #timeSlotHeatmapModule,
    #serviceAlertModule,
    #realtimeTimelineModule,
    #flowEnergyModule,
    #delayDetectionModule,
    #drilldownReportModule,
    #forecastInsightsModule,
    #marketingCampaignModule,
    #readinessBanner,
    #projSystemInfoModule,
    #projOwnershipModule,
    #projActivityModule,
    #quickAssignModule,
    #productivityPulseModule,
    #riskQueueModule,
    #smartTimelineModule,
    #productivityPulse,
    #smartTimeline
):hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

.right-sidebar :is(
    .wdg-header,
    .bfc-rs-head,
    .hm-header,
    .bm-header,
    .rt-header,
    .fe-header,
    .ddc-header,
    .team-productivity-rs-header,
    .forecast-insights-rs-header,
    .drilldown-report-rs-header,
    .marketing-campaign-rs-header,
    .low-stock-rs-header,
    .popular-items-rs-header,
    .dept-performance-rs-header,
    .department-perf-rs-header,
    .contractor-rs-header,
    .risk-sidebar-header,
    .qa-header,
    .rq-header,
    .st-header,
    .workforce-pulse-header,
    .time-attendance-header,
    .team-header-rs
) {
    border: none !important;
    border-color: transparent !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

.right-sidebar :is(
    .wdg-list-item,
    .wdg-risk-item,
    .wdg-mission-box,
    .wdg-flash-banner,
    .wdg-flash-stats,
    .ai-feed-item,
    .hm-slot,
    .bm-card,
    .bm-service-item,
    .ddc-item,
    .ddc-ai-box,
    .hm-ai-box,
    .forecast-insights-rs-alert,
    .forecast-insights-rs-metric,
    .forecast-insights-rs-signal,
    .marketing-campaign-rs-item,
    .marketing-campaign-rs-state,
    .drilldown-report-rs-note,
    .dept-performance-rs-item,
    .department-perf-rs-item,
    .area-demand-item,
    .low-stock-rs-item,
    .popular-items-rs-item,
    .contractor-rs-item,
    .team-productivity-rs-item,
    .risk-signal-item,
    .risk-root-cause-step,
    .announcement-item-card,
    .app-preview-detail-section,
    .team-item,
    .team-productivity-rs-item,
    .rq-item,
    .qa-rec,
    .task-item,
    .upcoming-list li,
    .stat-box,
    .st-card,
    .pp-card
) {
    background: var(--synto-rs-soft) !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.right-sidebar :is(
    .card,
    .pub-card,
    .bt-card,
    .wdg-card,
    .bfc-rs-card,
    .ai-feed-card,
    .smart-timeline-card,
    .daily-mission-card,
    .right-sidebar-card,
    .sidebar-card,
    .risk-sidebar-card,
    .announcements-card,
    .app-preview-card,
    .time-attendance-card,
    .workforce-pulse-card,
    .upcoming-card,
    .qa-card,
    .rq-card,
    .pp-card,
    .team-prod-card,
    .team-productivity-rs-card,
    [class*="-rs-card"],
    [class*="rs-card"],
    #timeSlotHeatmapModule,
    #serviceAlertModule,
    #realtimeTimelineModule,
    #flowEnergyModule,
    #delayDetectionModule,
    #drilldownReportModule,
    #forecastInsightsModule,
    #marketingCampaignModule,
    #quickAssignModule,
    #productivityPulseModule,
    #riskQueueModule,
    #smartTimelineModule
) :is(div, section, article, aside):not(.wdg-progress-fill):not(.hm-bar):not(.bm-service-bar):not(.fe-donut-fill):not(.rt-dot):not(.st-dot):not(.progress-fill):not(.team-productivity-rs-progress-fill) {
    border: none !important;
    border-color: transparent !important;
}

.right-sidebar :is(
    .wdg-title,
    .bfc-rs-title,
    .hm-title,
    .bm-title,
    .rt-title,
    .fe-title,
    .ddc-title,
    .team-productivity-rs-title,
    .forecast-insights-rs-title,
    .drilldown-report-rs-title,
    .marketing-campaign-rs-title,
    .low-stock-rs-title,
    .popular-items-rs-title,
    .dept-performance-rs-title,
    .department-perf-rs-title,
    .contractor-rs-title,
    .risk-sidebar-title,
    .qa-header,
    .rq-title,
    .st-title,
    .team-header-rs h3
) {
    color: var(--synto-rs-ink) !important;
    letter-spacing: 0 !important;
}

.right-sidebar :is(
    .wdg-sub,
    .wdg-subtitle,
    .bfc-rs-sub,
    .bfc-rs-meta,
    .st-time,
    .rt-meta,
    .ddc-item-sub,
    .forecast-insights-rs-subtitle,
    .drilldown-report-rs-subtitle,
    .marketing-campaign-rs-subtitle,
    .rq-sub,
    .st-details,
    .pp-label
) {
    color: var(--synto-rs-muted) !important;
}

.right-sidebar :is(
    .wdg-link,
    .bfc-rs-link,
    .rt-link,
    .bm-timeline-link,
    .drilldown-report-rs-badge,
    .forecast-insights-rs-badge
) {
    color: var(--synto-rs-accent) !important;
}

.right-sidebar :is(
    .wdg-rank,
    .marketing-campaign-rs-rank,
    .bm-service-rank,
    .team-productivity-rs-rank
) {
    background: var(--synto-rs-soft-strong) !important;
    color: var(--synto-rs-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
    .right-sidebar :is(
        .wdg-card,
        .ai-feed-card,
        .smart-timeline-card,
        .daily-mission-card,
        .bfc-rs-card,
        .risk-sidebar-card,
        .announcements-card,
        .app-preview-card,
        .time-attendance-card,
        .workforce-pulse-card,
        .upcoming-card,
        .qa-card,
        .rq-card,
        .pp-card,
        .team-prod-card,
        .team-productivity-rs-card,
        [class*="-rs-card"],
        #timeSlotHeatmapModule,
        #serviceAlertModule,
        #realtimeTimelineModule,
        #flowEnergyModule,
        #delayDetectionModule,
        #drilldownReportModule,
        #forecastInsightsModule,
        #marketingCampaignModule,
        #quickAssignModule,
        #productivityPulseModule,
        #riskQueueModule,
        #smartTimelineModule
    ) {
        transition: none !important;
    }

    .right-sidebar :is(
        .wdg-card,
        .ai-feed-card,
        .smart-timeline-card,
        .daily-mission-card,
        .bfc-rs-card,
        .risk-sidebar-card,
        .announcements-card,
        .app-preview-card,
        .time-attendance-card,
        .workforce-pulse-card,
        .upcoming-card,
        .qa-card,
        .rq-card,
        .pp-card,
        .team-prod-card,
        .team-productivity-rs-card,
        [class*="-rs-card"],
        #timeSlotHeatmapModule,
        #serviceAlertModule,
        #realtimeTimelineModule,
        #flowEnergyModule,
        #delayDetectionModule,
        #drilldownReportModule,
        #forecastInsightsModule,
        #marketingCampaignModule,
        #quickAssignModule,
        #productivityPulseModule,
        #riskQueueModule,
        #smartTimelineModule
    ):hover {
        transform: none !important;
    }
}
/* Synto right sidebar card standard specificity lock */
html body[class] .right-sidebar {
    --synto-rs-surface: #ffffff;
    --synto-rs-soft: #f7f8fa;
    --synto-rs-soft-strong: #f1f3f5;
    --synto-rs-ink: #333333;
    --synto-rs-muted: #666666;
    --synto-rs-accent: #fc5b08;
    --synto-rs-shadow: 0 18px 58px -18px rgba(51, 51, 51, 0.08);
    --synto-rs-shadow-hover: 0 22px 68px -20px rgba(51, 51, 51, 0.1);
}

html body[class] .right-sidebar :is(
    .card,
    .pub-card,
    .bt-card,
    .wdg-card,
    .ai-feed-card,
    .smart-timeline-card,
    .daily-mission-card,
    .right-sidebar-card,
    .sidebar-card,
    .bfc-rs-card,
    .risk-sidebar-card,
    .announcements-card,
    .app-preview-card,
    .time-attendance-card,
    .workforce-pulse-card,
    .upcoming-card,
    .qa-card,
    .rq-card,
    .pp-card,
    .st-card,
    .team-prod-card,
    .team-productivity-rs-card,
    .forecast-insights-rs-card,
    .drilldown-report-rs-card,
    .marketing-campaign-rs-card,
    .AreaIntelligence-card,
    .area-demand-card,
    .low-stock-rs-card,
    .popular-items-rs-card,
    .department-perf-rs-card,
    .dept-performance-rs-card,
    .contractor-rs-card,
    .contractor-crew-rs-card,
    .contractor-materials-rs-card,
    .contractor-milestone-rs-card,
    [class*="-rs-card"],
    [class*="rs-card"],
    .task-card, .upcoming-card, .dept-performance-rs-card, .pending-task-card, .risk-sidebar-card, .announcements-card, .app-preview-card, .time-attendance-card, .workforce-pulse-card, .qa-card, .rq-card, .pp-card, .team-prod-card, .team-productivity-rs-card,
    .smart-timeline-container,
    #timeSlotHeatmapModule,
    #serviceAlertModule,
    #realtimeTimelineModule,
    #flowEnergyModule,
    #delayDetectionModule,
    #drilldownReportModule,
    #forecastInsightsModule,
    #marketingCampaignModule,
    #readinessBanner,
    #projSystemInfoModule,
    #projOwnershipModule,
    #projActivityModule,
    #quickAssignModule,
    #productivityPulseModule,
    #riskQueueModule,
    #smartTimelineModule,
    #productivityPulse,
    #smartTimeline
) {
    background: var(--synto-rs-surface) !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    color: var(--synto-rs-ink) !important;
}

html body[class] .right-sidebar :is(
    .wdg-card,
    .ai-feed-card,
    .smart-timeline-card,
    .daily-mission-card,
    .bfc-rs-card,
    .risk-sidebar-card,
    .announcements-card,
    .app-preview-card,
    .time-attendance-card,
    .workforce-pulse-card,
    .upcoming-card,
    .qa-card,
    .rq-card,
    .pp-card,
    .team-prod-card,
    .team-productivity-rs-card,
    [class*="-rs-card"],
    #timeSlotHeatmapModule,
    #serviceAlertModule,
    #realtimeTimelineModule,
    #flowEnergyModule,
    #delayDetectionModule,
    #drilldownReportModule,
    #forecastInsightsModule,
    #marketingCampaignModule,
    #readinessBanner,
    #projSystemInfoModule,
    #projOwnershipModule,
    #projActivityModule,
    #quickAssignModule,
    #productivityPulseModule,
    #riskQueueModule,
    #smartTimelineModule,
    #productivityPulse,
    #smartTimeline
):hover {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

html body[class] .right-sidebar :is(
    .wdg-list-item,
    .wdg-risk-item,
    .wdg-mission-box,
    .wdg-flash-banner,
    .wdg-flash-stats,
    .ai-feed-item,
    .hm-slot,
    .bm-card,
    .bm-service-item,
    .ddc-item,
    .ddc-ai-box,
    .hm-ai-box,
    .forecast-insights-rs-alert,
    .forecast-insights-rs-metric,
    .forecast-insights-rs-signal,
    .marketing-campaign-rs-item,
    .marketing-campaign-rs-state,
    .drilldown-report-rs-note,
    .dept-performance-rs-item,
    .department-perf-rs-item,
    .area-demand-item,
    .low-stock-rs-item,
    .popular-items-rs-item,
    .contractor-rs-item,
    .team-productivity-rs-item,
    .risk-signal-item,
    .risk-root-cause-step,
    .announcement-item-card,
    .app-preview-detail-section,
    .team-item,
    .rq-item,
    .qa-rec,
    .task-item,
    .upcoming-list li,
    .stat-box,
    .st-card,
    .pp-card
) {
    background: var(--synto-rs-soft) !important;
    border: none !important;
    border-color: transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

html body[class] .right-sidebar :is(
    .card,
    .pub-card,
    .bt-card,
    .wdg-card,
    .bfc-rs-card,
    .ai-feed-card,
    .smart-timeline-card,
    .daily-mission-card,
    .right-sidebar-card,
    .sidebar-card,
    .risk-sidebar-card,
    .announcements-card,
    .app-preview-card,
    .time-attendance-card,
    .workforce-pulse-card,
    .upcoming-card,
    .qa-card,
    .rq-card,
    .pp-card,
    .team-prod-card,
    .team-productivity-rs-card,
    [class*="-rs-card"],
    [class*="rs-card"],
    #timeSlotHeatmapModule,
    #serviceAlertModule,
    #realtimeTimelineModule,
    #flowEnergyModule,
    #delayDetectionModule,
    #drilldownReportModule,
    #forecastInsightsModule,
    #marketingCampaignModule,
    #quickAssignModule,
    #productivityPulseModule,
    #riskQueueModule,
    #smartTimelineModule
) :is(div, section, article, aside):not(.wdg-progress-fill):not(.hm-bar):not(.bm-service-bar):not(.fe-donut-fill):not(.rt-dot):not(.st-dot):not(.progress-fill):not(.team-productivity-rs-progress-fill) {
    border: none !important;
    border-color: transparent !important;
}
/* Synto right sidebar component standard: Booking Command Center parity */
html body[class] .right-sidebar {
    --synto-rs-primary: #fc5b08;
    --synto-rs-primary-hover: #e04f05;
    --synto-rs-accent: #d0ff2c;
    --synto-rs-surface: #ffffff;
    --synto-rs-soft: #f7f8fa;
    --synto-rs-soft-strong: #f1f3f5;
    --synto-rs-ink: #333333;
    --synto-rs-muted: #666666;
    --synto-rs-line: transparent;
    --synto-rs-focus: rgba(252, 91, 8, 0.24);
    --synto-rs-shadow: 0 18px 58px -18px rgba(51, 51, 51, 0.08);
    --synto-rs-shadow-hover: 0 22px 68px -20px rgba(51, 51, 51, 0.1);
}

html body[class] .right-sidebar :is(
    h1, h2, h3, h4, h5, h6,
    .wdg-title,
    .bfc-rs-title,
    .hm-title,
    .bm-title,
    .rt-title,
    .fe-title,
    .ddc-title,
    .qa-header,
    .rq-title,
    .st-title,
    .pp-header,
    .team-header-rs h3,
    [class*="-rs-title"],
    [class*="-title"]
) {
    color: var(--synto-rs-ink) !important;
    font-family: 'Anuphan', system-ui, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.28 !important;
    text-transform: none !important;
}

html body[class] .right-sidebar :is(
    p,
    small,
    .wdg-sub,
    .wdg-subtitle,
    .bfc-rs-sub,
    .bfc-rs-meta,
    .rt-meta,
    .st-time,
    .st-details,
    .rq-sub,
    .pp-label,
    [class*="-sub"],
    [class*="-meta"],
    [class*="-desc"]
) {
    color: var(--synto-rs-muted) !important;
    font-family: 'Anuphan', system-ui, sans-serif !important;
    letter-spacing: 0 !important;
    line-height: 1.45 !important;
}

html body[class] .right-sidebar :is(
    .card,
    .pub-card,
    .bt-card,
    .wdg-card,
    .bfc-rs-card,
    .ai-feed-card,
    .smart-timeline-card,
    .daily-mission-card,
    .right-sidebar-card,
    .sidebar-card,
    .risk-sidebar-card,
    .announcements-card,
    .app-preview-card,
    .time-attendance-card,
    .workforce-pulse-card,
    .upcoming-card,
    .qa-card,
    .rq-card,
    .pp-card,
    .team-prod-card,
    .team-productivity-rs-card,
    [class*="-rs-card"],
    [class*="rs-card"],
    #timeSlotHeatmapModule,
    #serviceAlertModule,
    #realtimeTimelineModule,
    #flowEnergyModule,
    #delayDetectionModule,
    #drilldownReportModule,
    #forecastInsightsModule,
    #marketingCampaignModule,
    #quickAssignModule,
    #productivityPulseModule,
    #riskQueueModule,
    #smartTimelineModule
) {
    padding: 18px 20px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

html body[class] .right-sidebar :is(
    .wdg-header,
    .bfc-rs-head,
    .hm-header,
    .bm-header,
    .rt-header,
    .fe-header,
    .ddc-header,
    .qa-header,
    .rq-header,
    .st-header,
    .pp-header,
    [class*="-rs-header"],
    [class*="-header"]
) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    min-height: 0 !important;
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
}

html body[class] .right-sidebar :is(
    button,
    .btn,
    .btn-action,
    .wdg-btn-outline,
    .hm-ai-btn,
    .ddc-ai-btn,
    .fe-btn,
    .rq-btn,
    .qa-btn,
    .bfc-rs-primary,
    .bfc-rs-secondary,
    [class*="-btn"],
    [class*="-action"]
) {
    min-height: 34px !important;
    border-radius: 999px !important;
    font-family: 'Anuphan', system-ui, sa