/* ==========================================================================
   Tema Clay: komponen seperti plastisin (empuk, membulat, pastel).
   Aktif bila <body data-soft="1" data-theme="clay" data-clay="<palet>">.
   Palet: lavender (default), mint, peach, langit. Dipilih dari menu tema di topbar.
   Ciri khas: bayangan luar + bayangan dalam (terang kiri-atas, gelap kanan-bawah),
   input terlihat cekung, tombol & menu aktif terlihat menonjol.
   ========================================================================== */

body[data-theme=clay] {
    /* Palet lavender (default) */
    --clay-bg: #ebe5ff;
    --clay-surface: #f8f5ff;
    --clay-input: #efeaff;
    --clay-ink: #3b3358;
    --clay-heading: #4a3f8f;
    --clay-muted: #8f86b3;
    --clay-border: #e1d9ff;
    --clay-primary: #8b7bff;
    --clay-primary-rgb: 139, 123, 255;
    --clay-primary-hover: #7a69f5;
    --clay-sh: 108 88 180;

    --clay-out: .45rem .45rem 1rem rgb(var(--clay-sh) / .22),
                inset -.2rem -.2rem .45rem rgb(var(--clay-sh) / .12),
                inset .2rem .2rem .45rem rgb(255 255 255 / .85);
    --clay-in: inset .15rem .15rem .35rem rgb(var(--clay-sh) / .2),
               inset -.15rem -.15rem .35rem rgb(255 255 255 / .9);
    --clay-raised: .25rem .3rem .6rem rgb(var(--clay-sh) / .32),
                   inset .15rem .15rem .3rem rgb(255 255 255 / .4),
                   inset -.15rem -.15rem .3rem rgb(0 0 0 / .14);

    --s-bg: var(--clay-bg);
    --s-ink: var(--clay-ink);
    --s-heading: var(--clay-heading);
    --s-muted: var(--clay-muted);
    --s-border: var(--clay-border);
    --s-surface: var(--clay-surface);
    --s-chrome: var(--clay-surface);
    --s-pop: var(--clay-surface);
    --s-input: var(--clay-input);
    --s-input-border: transparent;
    --s-input-shadow: var(--clay-in);
    --s-thead: transparent;
    --s-primary: var(--clay-primary);
    --s-primary-rgb: var(--clay-primary-rgb);
    --s-primary-hover: var(--clay-primary-hover);
    --s-btn-shadow: var(--clay-raised);
    --s-hover: rgb(var(--clay-sh) / .07);
    --s-active-bg: var(--clay-primary);
    --s-active-fg: #fff;
    --s-active-shadow: var(--clay-raised);
    --s-side-fg: var(--clay-ink);
    --s-radius: 24px;
    --s-radius-sm: 14px;
    --s-btn-radius: 999px;
    --s-shadow: var(--clay-out);
    --s-card-border: transparent;
    --s-font: "Nunito", "Be Vietnam", sans-serif;
    --s-font-head: "Fredoka", "Nunito", sans-serif;
    --float-gap: 16px;
}

body[data-theme=clay][data-clay=mint] {
    --clay-bg: #dff3ea;
    --clay-surface: #f5fcf8;
    --clay-input: #e7f6ef;
    --clay-ink: #24443a;
    --clay-heading: #1f6b4e;
    --clay-muted: #6f9b8b;
    --clay-border: #d3ece1;
    --clay-primary: #2fae7a;
    --clay-primary-rgb: 47, 174, 122;
    --clay-primary-hover: #26986a;
    --clay-sh: 60 140 110;
}

body[data-theme=clay][data-clay=peach] {
    --clay-bg: #ffe6da;
    --clay-surface: #fff6f1;
    --clay-input: #ffede5;
    --clay-ink: #4f3229;
    --clay-heading: #b04a2c;
    --clay-muted: #ab8174;
    --clay-border: #fbd9cb;
    --clay-primary: #f26a48;
    --clay-primary-rgb: 242, 106, 72;
    --clay-primary-hover: #e0573a;
    --clay-sh: 200 110 80;
}

body[data-theme=clay][data-clay=langit] {
    --clay-bg: #dfeaff;
    --clay-surface: #f5f8ff;
    --clay-input: #e8efff;
    --clay-ink: #283a5c;
    --clay-heading: #2a59b8;
    --clay-muted: #7b8fb6;
    --clay-border: #d6e2fb;
    --clay-primary: #4a86ff;
    --clay-primary-rgb: 74, 134, 255;
    --clay-primary-hover: #3a74ec;
    --clay-sh: 70 100 180;
}

html:has(body[data-theme=clay]) {
    background-color: #ebe5ff;
}

body[data-theme=clay] {
    font-weight: 500;
}

/* Logo & judul halaman */
body[data-theme=clay] .page-title-box h4,
body[data-theme=clay] .page-title-box .mb-sm-0 {
    font-weight: 600;
    font-size: 20px !important;
}

/* Menu sidebar: pill timbul */
body[data-theme=clay] #sidebar-menu ul li a {
    font-weight: 600;
}

body[data-theme=clay]:not([data-sidebar-size=sm]) #sidebar-menu > ul > li > a {
    border-radius: 16px;
}

body[data-theme=clay]:not([data-sidebar-size=sm]) #sidebar-menu ul.sub-menu {
    background: transparent;
}

body[data-theme=clay] #sidebar-menu > ul > li.mm-active > a .nav-icon,
body[data-theme=clay] #sidebar-menu > ul > li.mm-active > a i {
    color: #fff !important;
}

/* Header topbar: kolom cari cekung */
body[data-theme=clay] .app-search .form-control {
    background-color: var(--clay-input);
    box-shadow: var(--clay-in);
    border-radius: 999px;
}

/* Card header tanpa garis keras */
body[data-theme=clay] .card-header {
    border-bottom: 1.5px dashed var(--clay-border);
}

/* Tombol sekunder ikut empuk */
body[data-theme=clay] .btn-light,
body[data-theme=clay] .btn-secondary,
body[data-theme=clay] .btn-outline-secondary,
body[data-theme=clay] .btn-outline-primary {
    box-shadow: .15rem .2rem .45rem rgb(var(--clay-sh) / .18), inset .12rem .12rem .25rem rgb(255 255 255 / .7);
}

body[data-theme=clay] .btn-success,
body[data-theme=clay] .btn-danger,
body[data-theme=clay] .btn-warning,
body[data-theme=clay] .btn-info {
    box-shadow: var(--clay-raised);
}

body[data-theme=clay] .btn:active {
    box-shadow: var(--clay-in) !important;
}

/* Badge: permen kecil */
body[data-theme=clay] .badge {
    font-weight: 700;
    box-shadow: inset .08rem .08rem .2rem rgb(255 255 255 / .45), inset -.08rem -.08rem .2rem rgb(0 0 0 / .1);
}

/* Tabel: garis putus-putus yang lembut */
body[data-theme=clay] .table > :not(caption) > * > * {
    border-bottom-style: dashed;
}

body[data-theme=clay] .table-light th,
body[data-theme=clay] .go-table-thead th {
    font-weight: 700;
}

/* Modal & dropdown ikut empuk */
body[data-theme=clay] .modal-content,
body[data-theme=clay] .dropdown-menu {
    border: none;
    box-shadow: .6rem .6rem 1.6rem rgb(var(--clay-sh) / .28), inset .2rem .2rem .45rem rgb(255 255 255 / .8);
}

/* Checkbox & switch */
body[data-theme=clay] .form-check-input {
    box-shadow: var(--clay-in);
    border-color: transparent;
    background-color: var(--clay-input);
}

body[data-theme=clay] .form-check-input:checked {
    box-shadow: var(--clay-raised);
}