/* =====================================================
   CINTESA THEME - ELEGANT LIGHT & DARK
   File: assets/css/theme.css
   Letakkan SETELAH base.css/auth.css/admin.css/buyer.css/seller.css
===================================================== */

/* ===============================
   VARIABLE - LIGHT MODE
================================ */
:root {
    --text: #17211f;
    --muted: #66736f;

    --accent: #101827;
    --accent-2: #1d3557;
    --accent-3: #386f99;

    --gold: #c9a45c;
    --gold-2: #e7c77b;
    --gold-soft: #fff0c8;

    --cream: #fff8ed;
    --cream-2: #f7efe1;

    --blue-soft: #d9edf7;
    --blue-mid: #8cb9d4;
    --blue-deep: #3f7da7;

    --white: rgba(255, 255, 255, 0.88);
    --glass: rgba(255, 255, 255, 0.72);

    --border: rgba(18, 26, 40, 0.13);
    --border-strong: rgba(201, 164, 92, 0.38);

    --shadow: 0 24px 70px rgba(18, 26, 40, 0.16);
    --shadow-soft: 0 12px 32px rgba(18, 26, 40, 0.10);

    --danger: #9b1c1c;
    --danger-bg: #ffe1e1;

    --success: #17643b;
    --success-bg: #dff4e8;
}

/* ===============================
   VARIABLE - DARK MODE
================================ */
html[data-theme="dark"] {
    --text: #eef4f7;
    --muted: #b7c4cb;

    --accent: #f8f3ea;
    --accent-2: #d9b66f;
    --accent-3: #8fd0f4;

    --gold: #d9b66f;
    --gold-2: #f0d38a;
    --gold-soft: rgba(217, 182, 111, 0.18);

    --cream: #121926;
    --cream-2: #0f172a;

    --blue-soft: #172638;
    --blue-mid: #203b56;
    --blue-deep: #0d1522;

    --white: rgba(19, 28, 42, 0.88);
    --glass: rgba(18, 26, 40, 0.74);

    --border: rgba(255, 255, 255, 0.13);
    --border-strong: rgba(217, 182, 111, 0.34);

    --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.28);

    --danger: #ffb4b4;
    --danger-bg: rgba(255, 90, 90, 0.18);

    --success: #9be7b7;
    --success-bg: rgba(85, 190, 124, 0.18);
}

/* ===============================
   BACKGROUND GLOBAL
================================ */
body {
    color: var(--text) !important;
    background:
        radial-gradient(circle at 8% 14%, rgba(255, 205, 105, 0.95) 0%, rgba(255, 205, 105, 0.48) 14%, transparent 33%),
        radial-gradient(circle at 86% 18%, rgba(77, 151, 196, 0.92) 0%, rgba(77, 151, 196, 0.48) 18%, transparent 42%),
        radial-gradient(circle at 18% 82%, rgba(55, 116, 163, 0.92) 0%, rgba(55, 116, 163, 0.42) 22%, transparent 46%),
        radial-gradient(circle at 92% 88%, rgba(255, 245, 220, 0.96) 0%, rgba(255, 245, 220, 0.45) 20%, transparent 42%),
        linear-gradient(135deg, #fff5df 0%, #eef7fb 32%, #9bc2d8 62%, #3679a8 100%) !important;
    background-attachment: fixed !important;
    transition: background 0.35s ease, color 0.25s ease;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 8% 14%, rgba(217, 182, 111, 0.40) 0%, rgba(217, 182, 111, 0.18) 18%, transparent 38%),
        radial-gradient(circle at 86% 18%, rgba(67, 142, 190, 0.38) 0%, rgba(67, 142, 190, 0.16) 20%, transparent 44%),
        radial-gradient(circle at 18% 82%, rgba(76, 156, 198, 0.32) 0%, rgba(76, 156, 198, 0.14) 24%, transparent 48%),
        radial-gradient(circle at 92% 88%, rgba(38, 60, 87, 0.55) 0%, rgba(38, 60, 87, 0.24) 20%, transparent 42%),
        linear-gradient(135deg, #08101c 0%, #111b2b 34%, #17324b 66%, #050a12 100%) !important;
    background-attachment: fixed !important;
}

/* pola kotak halus */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.13) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 82%);
}

html[data-theme="dark"] body::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.045) 1px, transparent 1px);
}

/* dekorasi bulat blur kanan bawah */
body::after {
    content: "";
    position: fixed;
    width: 480px;
    height: 480px;
    right: -180px;
    bottom: -170px;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,164,92,.42), transparent 68%);
    filter: blur(12px);
}

html[data-theme="dark"] body::after {
    background: radial-gradient(circle, rgba(95, 165, 210, .24), transparent 70%);
}

/* ===============================
   NAVBAR
================================ */
.simple-navbar,
.role-navbar {
    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.64)) !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    box-shadow:
        0 20px 55px rgba(16, 24, 39, 0.16),
        inset 0 1px 0 rgba(255,255,255,.86) !important;
    backdrop-filter: blur(22px);
}

html[data-theme="dark"] .simple-navbar,
html[data-theme="dark"] .role-navbar {
    background:
        linear-gradient(135deg, rgba(21,31,48,.92), rgba(21,31,48,.66)) !important;
    border-color: rgba(255,255,255,.13) !important;
}

.brand-logo {
    color: var(--accent) !important;
    letter-spacing: 3px;
    text-shadow: 0 1px 0 rgba(255,255,255,.42);
}

html[data-theme="dark"] .brand-logo {
    text-shadow: none;
}

/* ===============================
   BUTTON
================================ */
.nav-button,
.main-button,
.icon-button,
.btn-primary-small,
.filter-form button,
.delete-button,
.btn-danger {
    transition: .25s ease;
}

.nav-button,
.icon-button {
    background: rgba(255,255,255,.78) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-soft) !important;
}

html[data-theme="dark"] .nav-button,
html[data-theme="dark"] .icon-button {
    background: rgba(24, 35, 53, .80) !important;
}

.nav-button:hover,
.icon-button:hover,
.main-button:hover,
.btn-primary-small:hover,
.filter-form button:hover,
.delete-button:hover,
.btn-danger:hover {
    transform: translateY(-2px);
}

.nav-button.dark,
.main-button,
.btn-primary-small,
.filter-form button,
.icon-button.dark {
    color: #fff !important;
    background:
        linear-gradient(135deg, #0e1625, #213b5c) !important;
    box-shadow:
        0 15px 34px rgba(16, 24, 39, 0.30),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] .nav-button.dark,
html[data-theme="dark"] .main-button,
html[data-theme="dark"] .btn-primary-small,
html[data-theme="dark"] .filter-form button,
html[data-theme="dark"] .icon-button.dark {
    background:
        linear-gradient(135deg, #d9b66f, #9b7839) !important;
    color: #111827 !important;
}

.delete-button,
.btn-danger {
    background: var(--danger-bg) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(155, 28, 28, 0.14) !important;
}

/* ===============================
   HEADING
================================ */
.page-heading h1,
.landing-content h1,
.auth-card h1,
.section-heading h2 {
    color: var(--accent) !important;
}

.page-heading p,
.landing-content p,
.section-heading p {
    color: var(--muted) !important;
}

.page-heading.center::after,
.section-heading::after {
    content: "";
    width: 96px;
    height: 4px;
    display: block;
    margin: 18px auto 0;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ===============================
   LANDING PAGE
================================ */
.landing-content {
    padding: 50px 28px;
    border-radius: 36px;
}

.landing-content h1 span {
    color: var(--accent) !important;
}

/* ===============================
   CARD GLOBAL
================================ */
.summary-card,
.table-card,
.product-card,
.seller-product-card,
.detail-card,
.product-form-card,
.message-card,
.seller-message-item,
.anggota-card,
.auth-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.64)) !important;
    border: 1px solid rgba(255,255,255,.76) !important;
    box-shadow:
        0 24px 64px rgba(16, 24, 39, 0.16),
        inset 0 1px 0 rgba(255,255,255,.86) !important;
    backdrop-filter: blur(18px);
}

html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .seller-product-card,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .product-form-card,
html[data-theme="dark"] .message-card,
html[data-theme="dark"] .seller-message-item,
html[data-theme="dark"] .anggota-card,
html[data-theme="dark"] .auth-card {
    background:
        linear-gradient(145deg, rgba(20,30,46,.92), rgba(20,30,46,.66)) !important;
    border-color: rgba(255,255,255,.13) !important;
}

.summary-card,
.product-card,
.seller-product-card,
.anggota-card {
    transition: .25s ease;
}

.summary-card:hover,
.product-card:hover,
.seller-product-card:hover,
.anggota-card:hover {
    transform: translateY(-5px);
}

/* ===============================
   FORM
================================ */
.input-group input,
.input-group select,
.field-group input,
.field-group select,
.field-group textarea,
.search-form input,
.filter-form input,
.filter-form select,
.buyer-search input,
.message-input-form textarea {
    background: rgba(255,255,255,.84) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 10px 28px rgba(16, 24, 39, 0.06) !important;
    transition: .25s ease;
}

html[data-theme="dark"] .input-group input,
html[data-theme="dark"] .input-group select,
html[data-theme="dark"] .field-group input,
html[data-theme="dark"] .field-group select,
html[data-theme="dark"] .field-group textarea,
html[data-theme="dark"] .search-form input,
html[data-theme="dark"] .filter-form input,
html[data-theme="dark"] .filter-form select,
html[data-theme="dark"] .buyer-search input,
html[data-theme="dark"] .message-input-form textarea {
    background: rgba(15, 23, 42, .78) !important;
    color: var(--text) !important;
}

.input-group input::placeholder,
.field-group input::placeholder,
.field-group textarea::placeholder,
.buyer-search input::placeholder,
.message-input-form textarea::placeholder {
    color: rgba(101, 114, 109, .86);
}

html[data-theme="dark"] .input-group input::placeholder,
html[data-theme="dark"] .field-group input::placeholder,
html[data-theme="dark"] .field-group textarea::placeholder,
html[data-theme="dark"] .buyer-search input::placeholder,
html[data-theme="dark"] .message-input-form textarea::placeholder {
    color: rgba(183, 196, 203, .72);
}

.input-group input:focus,
.input-group select:focus,
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus,
.search-form input:focus,
.filter-form input:focus,
.filter-form select:focus,
.buyer-search input:focus,
.message-input-form textarea:focus {
    border-color: var(--gold) !important;
    box-shadow:
        0 0 0 4px rgba(201, 164, 92, 0.18),
        0 12px 32px rgba(16, 24, 39, 0.08) !important;
}

/* password & select icons tetap kelihatan */
.password-toggle img,
.select-arrow-icon,
.icon-button img,
.back-icon {
    filter: none;
}

html[data-theme="dark"] .password-toggle img,
html[data-theme="dark"] .select-arrow-icon,
html[data-theme="dark"] .icon-button img,
html[data-theme="dark"] .back-icon {
    filter: invert(1);
}

html[data-theme="dark"] .icon-button.dark img {
    filter: none;
}

/* ===============================
   TABLE
================================ */
.data-table th {
    background:
        linear-gradient(135deg, #101827, #284766) !important;
    color: #fff !important;
    border-bottom: none !important;
}

html[data-theme="dark"] .data-table th {
    background:
        linear-gradient(135deg, #d9b66f, #8f6b31) !important;
    color: #111827 !important;
}

.data-table td {
    background: rgba(255,255,255,.36) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .data-table td {
    background: rgba(15,23,42,.26) !important;
}

.data-table tr:hover td {
    background: rgba(201,164,92,.18) !important;
}

/* ===============================
   PRODUCT
================================ */
.product-image,
.seller-product-image,
.anggota-photo,
.detail-gallery img,
.detail-no-image,
.preview-item {
    background:
        linear-gradient(135deg, rgba(238,244,247,.96), rgba(210,229,239,.88)) !important;
}

html[data-theme="dark"] .product-image,
html[data-theme="dark"] .seller-product-image,
html[data-theme="dark"] .anggota-photo,
html[data-theme="dark"] .detail-gallery img,
html[data-theme="dark"] .detail-no-image,
html[data-theme="dark"] .preview-item {
    background:
        linear-gradient(135deg, rgba(21,35,52,.96), rgba(38,65,88,.88)) !important;
}

.product-body h2,
.seller-product-body h2,
.anggota-info h3 {
    color: var(--accent) !important;
}

.price,
.message-price strong {
    color: var(--accent-3) !important;
}

.category {
    background: rgba(255, 231, 174, .90) !important;
    color: #664b16 !important;
}

html[data-theme="dark"] .category {
    background: rgba(217, 182, 111, .22) !important;
    color: #f2d28a !important;
}

.status-pill {
    background: rgba(214, 244, 226, .94) !important;
    color: #17643b !important;
}

html[data-theme="dark"] .status-pill {
    background: rgba(87, 190, 128, .20) !important;
    color: #a8efc0 !important;
}

/* ===============================
   MESSAGE
================================ */
.message-header {
    background:
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,231,174,.32)) !important;
}

html[data-theme="dark"] .message-header {
    background:
        linear-gradient(135deg, rgba(15,23,42,.88), rgba(217,182,111,.15)) !important;
}

.seller-avatar {
    background:
        linear-gradient(135deg, #0e1625, #284766) !important;
    box-shadow: 0 12px 28px rgba(16,24,39,.20);
}

html[data-theme="dark"] .seller-avatar {
    background:
        linear-gradient(135deg, #d9b66f, #8f6b31) !important;
    color: #111827 !important;
}

.message-info span,
.seller-message-content span {
    background: rgba(255, 231, 174, .90) !important;
    color: #664b16 !important;
}

html[data-theme="dark"] .message-info span,
html[data-theme="dark"] .seller-message-content span {
    background: rgba(217, 182, 111, .22) !important;
    color: #f2d28a !important;
}

.security-note {
    background:
        linear-gradient(135deg, rgba(238,244,247,.94), rgba(255,231,174,.44)) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
}

html[data-theme="dark"] .security-note {
    background:
        linear-gradient(135deg, rgba(15,23,42,.86), rgba(217,182,111,.15)) !important;
    border-color: rgba(255,255,255,.10) !important;
}

.message-body {
    background:
        radial-gradient(circle at 12% 8%, rgba(143,179,203,.18), transparent 30%),
        radial-gradient(circle at 90% 78%, rgba(201,164,92,.15), transparent 28%),
        rgba(255,255,255,.18) !important;
}

html[data-theme="dark"] .message-body {
    background:
        radial-gradient(circle at 12% 8%, rgba(98,164,203,.16), transparent 30%),
        radial-gradient(circle at 90% 78%, rgba(217,182,111,.11), transparent 28%),
        rgba(5,10,18,.22) !important;
}

.message-bubble {
    background: rgba(255,255,255,.82) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

html[data-theme="dark"] .message-bubble {
    background: rgba(15,23,42,.78) !important;
}

.message-row.me .message-bubble {
    background:
        linear-gradient(135deg, #0e1625, #203e5e) !important;
    color: #fff !important;
}

html[data-theme="dark"] .message-row.me .message-bubble {
    background:
        linear-gradient(135deg, #d9b66f, #8f6b31) !important;
    color: #111827 !important;
}

.attach-button {
    background: rgba(255,231,174,.92) !important;
    color: #111827 !important;
}

.send-button {
    background:
        linear-gradient(135deg, #0e1625, #213b5c) !important;
    color: #fff !important;
}

html[data-theme="dark"] .send-button {
    background:
        linear-gradient(135deg, #d9b66f, #8f6b31) !important;
    color: #111827 !important;
}

/* ===============================
   UPLOAD BOX
================================ */
.upload-box {
    background:
        linear-gradient(145deg, rgba(255,255,255,.76), rgba(238,244,247,.78)) !important;
    border-color: rgba(201,164,92,.45) !important;
}

html[data-theme="dark"] .upload-box {
    background:
        linear-gradient(145deg, rgba(15,23,42,.78), rgba(31,49,70,.78)) !important;
}

.upload-box:hover,
.upload-box.drag-active {
    background:
        linear-gradient(145deg, rgba(255,231,174,.70), rgba(238,244,247,.88)) !important;
    border-color: var(--gold) !important;
}

html[data-theme="dark"] .upload-box:hover,
html[data-theme="dark"] .upload-box.drag-active {
    background:
        linear-gradient(145deg, rgba(217,182,111,.18), rgba(31,49,70,.86)) !important;
}

.upload-icon {
    background:
        linear-gradient(135deg, #0e1625, #213b5c) !important;
}

html[data-theme="dark"] .upload-icon {
    background:
        linear-gradient(135deg, #d9b66f, #8f6b31) !important;
    color: #111827 !important;
}

/* ===============================
   ALERT
================================ */
.alert.success {
    background: var(--success-bg) !important;
    color: var(--success) !important;
    border: 1px solid rgba(23,100,59,.12) !important;
}

.alert.error {
    background: var(--danger-bg) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(155,28,28,.12) !important;
}

/* ===============================
   THEME TOGGLE BUTTON
================================ */
.theme-floating-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;

    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.68);

    background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.66));
    box-shadow:
        0 18px 46px rgba(16, 24, 39, .22),
        inset 0 1px 0 rgba(255,255,255,.84);

    color: #111827;
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    backdrop-filter: blur(18px);
    transition: .25s ease;
}

.theme-floating-btn:hover {
    transform: translateY(-4px) scale(1.04);
}

html[data-theme="dark"] .theme-floating-btn {
    background:
        linear-gradient(135deg, rgba(21,31,48,.94), rgba(21,31,48,.74));
    border-color: rgba(255,255,255,.14);
    color: #f8f3ea;
}

.theme-floating-btn span {
    line-height: 1;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
    .auth-card {
        padding: 34px 22px;
        border-radius: 28px;
    }

    .landing-content {
        padding: 34px 14px;
    }

    .theme-floating-btn {
        width: 52px;
        height: 52px;
        right: 16px;
        bottom: 16px;
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    body {
        background:
            radial-gradient(circle at 20% 12%, rgba(255, 205, 105, 0.72) 0%, transparent 35%),
            radial-gradient(circle at 88% 18%, rgba(77, 151, 196, 0.72) 0%, transparent 42%),
            radial-gradient(circle at 22% 86%, rgba(55, 116, 163, 0.76) 0%, transparent 46%),
            linear-gradient(135deg, #fff5df 0%, #edf7fb 42%, #3f7da7 100%) !important;
    }

    html[data-theme="dark"] body {
        background:
            radial-gradient(circle at 20% 12%, rgba(217, 182, 111, 0.30) 0%, transparent 38%),
            radial-gradient(circle at 88% 18%, rgba(67, 142, 190, 0.30) 0%, transparent 42%),
            radial-gradient(circle at 22% 86%, rgba(76, 156, 198, 0.24) 0%, transparent 46%),
            linear-gradient(135deg, #08101c 0%, #111b2b 42%, #050a12 100%) !important;
    }

    .brand-logo {
        letter-spacing: 2px;
    }
}