/* ==========================================================================
   X10 Utilization — Django admin (Unfold) skin.
   Mirrors the public site: dark-red sidebar, soft pink canvas, rounded cards
   with blur, Inter type. Loaded on every admin page via UNFOLD["STYLES"].
   Structural selectors lean on Unfold's stable ids (#nav-sidebar, #main,
   #content) and on our own x- prefixed classes from the overridden
   templates (admin/index.html, unfold/helpers/header.html).
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", sans-serif;
    --x-page: #f7f2f3;
    --x-line: #f0e3e5;
    --x-line-soft: #f7eff0;
    --x-ink: #1a1517;
    --x-ink-2: #3f3538;
    --x-muted: #7a6f72;
    --x-faint: #a39799;
    --x-p50: #fff1f2;
    --x-p100: #ffe1e3;
    --x-p500: #f21f2b;
    --x-p600: #e8262c;
    --x-p700: #c31520;
    --x-shadow: 0 10px 30px rgba(120, 20, 30, .06), 0 1px 2px rgba(120, 20, 30, .04);
}

html, body { font-family: var(--font-sans); }
body { letter-spacing: 0; background: var(--x-page); }
button, input, select, textarea { font-family: inherit; }
[x-cloak] { display: none !important; }

/* ---------- canvas ---------- */
#page { background: var(--x-page); }
#main {
    background:
        radial-gradient(900px 520px at 100% 0%, rgba(242, 31, 43, .12), transparent 60%),
        radial-gradient(700px 420px at 92% 55%, rgba(255, 157, 162, .18), transparent 62%),
        var(--x-page) !important;
}

/* ---------- header ---------- */
.x-header {
    position: sticky; top: 0; z-index: 45;
    display: flex; align-items: center; gap: 10px;
    height: 64px; padding: 0 22px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(240, 227, 229, .9);
}
.x-header-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.x-header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.x-hdr-icon-btn {
    position: relative; flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center; color: var(--x-ink-2); text-decoration: none;
}
.x-hdr-icon-btn:hover { background: var(--x-p50); color: var(--x-p700); }
.x-crumb-sep { color: #cfc2c4; }
.x-crumbs { font-size: 15px; font-weight: 700; color: var(--x-ink); min-width: 0; }
.x-crumbs > * { display: inline; }
.x-crumbs a { color: var(--x-muted); font-weight: 600; text-decoration: none; }
.x-crumbs a:hover { color: var(--x-p700); }
.x-search {
    display: flex; align-items: center; gap: 8px;
    height: 38px; min-width: 210px; padding: 0 14px;
    border: 1px solid var(--x-line); border-radius: 999px;
    background: #fff; color: var(--x-faint); font-size: 13.5px; cursor: pointer;
}
.x-search:hover { border-color: var(--x-p100); color: var(--x-muted); }
.x-search .material-symbols-outlined { font-size: 19px; }
.x-bell .x-dot {
    position: absolute; top: 6px; right: 7px;
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--x-p600); box-shadow: 0 0 0 2px #fff;
}
.x-user { position: relative; }
.x-user-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 6px 4px 4px; border: 1px solid transparent; border-radius: 14px;
    background: transparent; cursor: pointer; color: var(--x-ink);
}
.x-user-btn:hover { background: #fff; border-color: var(--x-line); }
.x-avatar {
    width: 38px; height: 38px; border-radius: 999px;
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px;
    background: radial-gradient(circle at 32% 28%, #ff8e94 0%, #e8262c 42%, #8f0e17 100%);
    box-shadow: 0 6px 16px rgba(232, 38, 44, .32);
}
.x-user-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.x-user-name { font-size: 13.5px; font-weight: 700; }
.x-user-role { font-size: 12px; color: var(--x-muted); }
.x-user-chev { color: var(--x-muted); font-size: 20px; }
.x-user-menu {
    position: absolute; right: 0; top: calc(100% + 8px); width: 236px; z-index: 60;
    background: #fff; border: 1px solid var(--x-line); border-radius: 16px;
    box-shadow: 0 18px 40px rgba(74, 11, 18, .14); padding: 8px;
}
.x-user-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--x-line-soft); margin-bottom: 4px; }
.x-user-menu-head .t { font-size: 13px; font-weight: 700; }
.x-user-menu a, .x-user-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 10px;
    background: #fff; color: var(--x-ink); font-size: 13px; font-weight: 600;
    text-align: left; text-decoration: none; cursor: pointer;
}
.x-user-menu a:hover, .x-user-menu button:hover { background: var(--x-p50); color: var(--x-p700); }
.x-user-menu .material-symbols-outlined { font-size: 18px; color: var(--x-muted); }
.x-user-menu a:hover .material-symbols-outlined,
.x-user-menu button:hover .material-symbols-outlined { color: var(--x-p700); }
.x-user-menu form { margin: 0; }
.x-user-menu .x-danger { color: #a5141b; }
@media (max-width: 767px) {
    .x-search-label, .x-user-meta { display: none; }
    .x-search { min-width: 0; }
}

/* ---------- content shell ---------- */
#content {
    background: #fff;
    border: 1px solid var(--x-line);
    border-radius: 20px;
    box-shadow: var(--x-shadow);
    padding: 22px 26px 26px;
    margin-bottom: 40px;
}
#content h1 { font-weight: 800; letter-spacing: -.01em; }
body.x-dashboard #content {
    background: transparent; border: 0; box-shadow: none; padding: 0; max-width: none;
}
#result_list thead th { background: #fdf7f8; }
#result_list tbody tr:hover td { background: #fff7f7; }
#content [data-simplebar] { border-color: var(--x-line) !important; }

/* ---------- sidebar ---------- */
#nav-sidebar {
    border-right: 0 !important;
    background:
        radial-gradient(520px 360px at 0% 100%, rgba(242, 31, 43, .55), transparent 60%),
        linear-gradient(175deg, #2a0508 0%, #4a0b12 42%, #6e101c 78%, #8f1521 100%) !important;
    box-shadow: 8px 0 30px rgba(74, 11, 18, .25);
    color: #fdeff0;
}
#nav-sidebar-inner { background: transparent !important; color: #fdeff0; }
#nav-sidebar-inner > div:first-child { border-bottom-color: rgba(255, 255, 255, .10) !important; }
#nav-sidebar-inner > div:first-child img {
    height: 40px !important; width: 72px; object-fit: contain; border-radius: 0 !important;
    box-shadow: none !important;
}
#nav-sidebar-inner > div:first-child .text-important,
#nav-sidebar-inner > div:first-child #site-name a { color: #fff !important; font-weight: 800; letter-spacing: .02em; }
#nav-sidebar-inner > div:first-child .text-subtle { color: rgba(255, 255, 255, .78) !important; }
#nav-sidebar-inner > div:first-child .material-symbols-outlined { color: #fbe6e7; }
#nav-sidebar input { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); color: #fff; }

#nav-sidebar-apps h2 {
    color: #ff9da2 !important; font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
}
#nav-sidebar-apps h2:hover { color: #fff !important; }
#nav-sidebar-apps h2 .material-symbols-outlined { color: #ff9da2; }
#nav-sidebar-apps hr { border-color: rgba(255, 255, 255, .10) !important; }
#nav-sidebar-apps a {
    color: #fbe6e7 !important; font-weight: 600; border-radius: 12px; height: 42px !important;
    margin-bottom: 2px; transition: background .15s, color .15s;
}
#nav-sidebar-apps a:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
#nav-sidebar-apps a.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--x-p500), var(--x-p700)) !important;
    box-shadow: 0 8px 22px rgba(242, 31, 43, .35);
}
#nav-sidebar-inner > div:last-child { border-top-color: rgba(255, 255, 255, .10) !important; }
#nav-sidebar-inner > div:last-child > div:last-child:hover { background: rgba(255, 255, 255, .06) !important; }
#nav-sidebar-inner > div:last-child .text-important { color: #fff !important; }
#nav-sidebar-inner > div:last-child .text-subtle { color: rgba(255, 255, 255, .72) !important; }
#nav-sidebar-inner > div:last-child .material-symbols-outlined { color: #fbe6e7 !important; }
#nav-sidebar-inner > div:last-child nav { color: var(--x-ink); border-radius: 14px; }
#nav-sidebar-inner > div:last-child nav .material-symbols-outlined { color: var(--x-muted) !important; }
#nav-sidebar .mt-auto a { color: #fbe6e7 !important; }
#nav-sidebar .mt-auto a:hover { color: #fff !important; }
#nav-sidebar-inner > div:last-child > div:last-child > div:first-child {
    background: radial-gradient(circle at 32% 28%, #ff8e94 0%, #e8262c 42%, #8f0e17 100%) !important;
    color: #fff !important; border-radius: 999px; box-shadow: 0 6px 16px rgba(232, 38, 44, .35);
}

/* ---------- dashboard ---------- */
.x-dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: 30px; }
@media (min-width: 1280px) { .x-dash { grid-template-columns: minmax(0, 1fr) 372px; } }
.x-dash-main, .x-dash-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.x-sub { font-size: 12.5px; color: var(--x-muted); line-height: 1.45; }

.x-icon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px;
    display: grid; place-items: center;
    background: var(--x-p50); color: var(--x-p600);
    box-shadow: inset 0 0 0 1px var(--x-p100);
}
.x-icon .material-symbols-outlined { font-size: 21px; }
.x-icon-sm { width: 32px; height: 32px; border-radius: 10px; }
.x-icon-sm .material-symbols-outlined { font-size: 18px; }
.x-icon-lg { width: 52px; height: 52px; border-radius: 16px; }
.x-icon-lg .material-symbols-outlined { font-size: 27px; }
.x-icon-muted { background: #f4eced; color: var(--x-muted); box-shadow: inset 0 0 0 1px #eadfe0; }

.x-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 18px;
    padding: 32px 30px; border-radius: 22px;
    border: 1px solid #f8dfe1;
    background: linear-gradient(115deg, #fff 0%, #fff6f6 42%, #ffe9ea 100%);
    box-shadow: var(--x-shadow);
}
.x-hero::after {
    content: ""; position: absolute; right: -140px; top: -180px; width: 620px; height: 520px;
    background: repeating-radial-gradient(circle at 100% 50%, rgba(232, 38, 44, .16) 0 1px, transparent 1px 13px);
    -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 85%);
    mask-image: linear-gradient(to left, #000 20%, transparent 85%);
    pointer-events: none;
}
.x-hero-text { position: relative; z-index: 1; min-width: 0; }
.x-hero-text h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--x-ink); }
.x-hero-text p { margin: 4px 0 0; font-size: 13.5px; color: var(--x-muted); }
.x-hero-tag {
    position: relative; z-index: 1; margin-left: auto; text-align: right;
    font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: #e2949a; line-height: 2;
}
@media (max-width: 767px) { .x-hero-tag { display: none; } }

.x-app, .x-card {
    background: #fff; border: 1px solid var(--x-line); border-radius: 20px;
    box-shadow: var(--x-shadow); overflow: hidden;
}
.x-app-head {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px; cursor: pointer; user-select: none;
}
.x-app-head:hover { background: #fffafa; }
.x-app-title { min-width: 0; }
.x-app-title .t { font-size: 15.5px; font-weight: 700; color: var(--x-ink); }
.x-badge {
    margin-left: auto; flex: 0 0 auto;
    background: var(--x-p100); color: var(--x-p700);
    border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 700;
}
.x-chev { color: var(--x-muted); transition: transform .18s ease; }
.x-chev-down { transform: rotate(180deg); }
.x-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px; border-top: 1px solid var(--x-line-soft);
    color: inherit; text-decoration: none;
}
.x-row:hover { background: #fffafa; }
.x-row:hover .x-go { color: var(--x-p600); transform: translateX(2px); }
.x-row-text { min-width: 0; }
.x-row-text .t { font-size: 14px; font-weight: 600; color: var(--x-ink); }
.x-go { margin-left: auto; color: #cfc2c4; transition: transform .15s ease, color .15s; }

.x-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--x-line-soft); }
.x-card-head h2 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--x-ink); }
.x-viewall {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; font-weight: 700; color: var(--x-p700); text-decoration: none;
}
.x-viewall .material-symbols-outlined { font-size: 16px; }
.x-viewall:hover { text-decoration: underline; }

.x-feed { display: flex; flex-direction: column; max-height: 470px; overflow-y: auto; }
.x-feed-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 18px; border-bottom: 1px solid var(--x-line-soft);
    color: inherit; text-decoration: none;
}
.x-feed-row:last-child { border-bottom: 0; }
a.x-feed-row:hover { background: #fffafa; }
.x-feed-text { min-width: 0; }
.x-feed-text .t {
    font-size: 13px; font-weight: 600; color: var(--x-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}
.x-feed-when { margin-left: auto; text-align: right; font-size: 11.5px; color: var(--x-muted); white-space: nowrap; }
.x-feed-when .x-sub { font-size: 11.5px; }
.x-empty { padding: 22px 20px; margin: 0; font-size: 13px; color: var(--x-muted); }

.x-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 18px; }
.x-quick-item {
    display: flex; flex-direction: column; gap: 8px; justify-content: flex-start;
    padding: 14px; border: 1px solid var(--x-line); border-radius: 14px;
    background: #fffafa; color: inherit; text-decoration: none;
}
.x-quick-item:hover { border-color: var(--x-p100); background: var(--x-p50); }
.x-quick-text .t { font-size: 13px; font-weight: 700; color: var(--x-ink); }
@media (max-width: 480px) { .x-quick { grid-template-columns: 1fr; } }

/* ---------- buttons ---------- */
.bg-primary-600 { background: linear-gradient(135deg, var(--x-p500), var(--x-p700)) !important; box-shadow: 0 8px 18px rgba(232, 38, 44, .28); }
.bg-primary-600:hover { filter: brightness(1.04); }
#main ul.messagelist li, #main .messagelist { border-radius: 12px; }