/* ===== PostPlanner — design tokens & polish ===== */

/* ===== Custom theme: Catppuccin Mocha (daisyUI CDN ไม่มีให้) ===== */
[data-theme="mocha"] {
    color-scheme: dark;
    --color-base-100: #1e1e2e;   /* base */
    --color-base-200: #181825;   /* mantle */
    --color-base-300: #11111b;   /* crust */
    --color-base-content: #cdd6f4; /* text */
    --color-primary: #cba6f7;    /* mauve */
    --color-primary-content: #1e1e2e;
    --color-secondary: #94e2d5;  /* teal */
    --color-secondary-content: #1e1e2e;
    --color-accent: #f9e2af;     /* yellow */
    --color-accent-content: #1e1e2e;
    --color-neutral: #313244;    /* surface0 */
    --color-neutral-content: #cdd6f4;
    --color-info: #89b4fa;       /* blue */
    --color-info-content: #1e1e2e;
    --color-success: #a6e3a1;    /* green */
    --color-success-content: #1e1e2e;
    --color-warning: #f9e2af;    /* yellow */
    --color-warning-content: #1e1e2e;
    --color-error: #f38ba8;      /* red */
    --color-error-content: #1e1e2e;
    --radius-selector: .5rem;
    --radius-field: .25rem;
    --radius-box: .5rem;
    --size-selector: .25rem;
    --size-field: .25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Sarabun', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ตัวเลขราคา/งวดให้เรียงหลักตรงกัน */
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- animations ---------- */
@keyframes ppFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.animate-fade-up { animation: ppFadeUp .4s ease both; }

/* ---------- bottom nav safe area (iOS) ---------- */
.bottom-nav { padding-bottom: env(safe-area-inset-bottom); }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: oklch(var(--bc) / .16);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: oklch(var(--bc) / .3); }

/* ---------- card image hover ---------- */
.img-zoom img { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.img-zoom:hover img { transform: scale(1.05); }

/* ---------- file input ที่สวยขึ้น ---------- */
.file-input::file-selector-button {
    font-weight: 600;
}

/* ---------- segmented control (สไตล์ antd) ---------- */
.segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--color-base-200);
    border-radius: 9999px;
}
.segmented-item {
    border: 0;
    background: transparent;
    padding: 5px 14px;
    font-size: .8rem;
    font-weight: 500;
    border-radius: 9999px;
    color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.segmented-item:hover { color: var(--color-base-content); }
.segmented-item.active {
    background: var(--color-base-100);
    color: var(--color-base-content);
    font-weight: 600;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--color-base-content) 15%, transparent);
}

/* ---------- Edit page: จอใหญ่ (>=1024px) แสดงฟอร์ม + รูปพร้อมกัน ไม่ต้องพึ่ง tabs ---------- */
@media (min-width: 1024px) {
    .edit-tabs { display: none !important; }
    #tab-form, #tab-photos { display: block !important; }
}

/* ---------- ตาราง list: header ติด + hover + sort ---------- */
.table-sticky { max-height: 28rem; }
.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-base-100);
}
.table-sticky th[data-sort] { cursor: pointer; user-select: none; }
.table-sticky th[data-sort]:hover { color: var(--color-primary); }
.table-sticky .sort-arrow { font-size: .6rem; opacity: .5; margin-left: 2px; }
.table-sticky tbody tr:hover {
    background: color-mix(in srgb, var(--color-base-content) 6%, transparent);
}
.table-sticky tbody tr[data-edit-url] { cursor: pointer; }

/* ---------- ฟอร์ม focus ring ชัดขึ้น ---------- */
.input:focus, .select:focus, .textarea:focus {
    outline-offset: 0;
}