/* ============================================================
   assets/css/custom.css
   Rubie Store — Ruby Cyberpunk Theme (Permanent Dark)
   Tidak ada light mode toggle — satu tema, konsisten.
   ============================================================ */

/* ============================================================
   CSS VARIABLES — Ruby Cyberpunk
   ============================================================ */
:root {
    --color-primary:           #E11D48;
    --color-primary-dark:      #BE123C;
    --color-primary-light:     #FB7185;
    --color-primary-glow:      rgba(225,29,72,0.35);
    --color-secondary:         #06B6D4;
    --color-secondary-dk:      #0891B2;
    --color-secondary-lt:      #67E8F9;
    --color-secondary-glow:    rgba(6,182,212,0.35);

    /* Background — Ruby Dark */
    --color-bg:                #070B14;
    --color-bg-secondary:      #0A0F1E;
    --color-card:              #0D1426;
    --color-card-hover:        #111929;
    --color-card-elevated:     #141E30;

    /* Border */
    --color-border:            rgba(225,29,72,0.08);
    --color-border-subtle:     rgba(255,255,255,0.06);
    --color-border-hover:      rgba(225,29,72,0.25);

    /* Text */
    --color-text:              #F1F5F9;
    --color-text-muted:        #94A3B8;
    --color-text-subtle:       #475569;

    /* Input */
    --color-input-bg:          rgba(255,255,255,0.04);
    --color-input-border:      rgba(255,255,255,0.08);
    --color-input-focus:       rgba(225,29,72,0.3);

    /* Navbar & Footer */
    --color-navbar-bg:         rgba(7,11,20,0.90);
    --color-footer-bg:         #080C18;

    /* Ruby accent gradient */
    --gradient-ruby:           linear-gradient(135deg, #E11D48, #BE123C);
    --gradient-ruby-cyan:      linear-gradient(135deg, #E11D48, #06B6D4);
    --gradient-card:           linear-gradient(135deg, #0D1426, #111929);

    --font-main:               'Plus Jakarta Sans', sans-serif;
    --radius-card:             1rem;
    --radius-btn:              0.75rem;
    --transition-base:         all 0.2s ease;
    --shadow-glow-primary:     0 0 25px rgba(225,29,72,0.4);
    --shadow-glow-secondary:   0 0 25px rgba(6,182,212,0.4);
    --shadow-card:             0 4px 24px rgba(0,0,0,0.4);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
    background: rgba(225,29,72,0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ============================================================
   NAVBAR — Ruby style
   ============================================================ */
#navbar {
    background: var(--color-navbar-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(225,29,72,0.1) !important;
}

/* ============================================================
   CARDS — Ruby dark dengan subtle red border
   ============================================================ */
.ruby-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ruby-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: 0 8px 32px rgba(225,29,72,0.15);
}

.glass-card {
    background: rgba(13,20,38,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--color-card-elevated);
    border-radius: 8px;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(225,29,72,0.06) 50%,
        transparent 100%
    );
    animation: skeleton-wave 1.6s ease-in-out infinite;
    background-size: 200% 100%;
}

@keyframes skeleton-wave {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.skeleton-text   { height: 14px; border-radius: 4px; }
.skeleton-title  { height: 20px; border-radius: 4px; }
.skeleton-image  { border-radius: var(--radius-card); }
.skeleton-circle { border-radius: 9999px; }

/* ============================================================
   BADGE ANIMASI
   ============================================================ */
.badge-populer {
    background: rgba(251,191,36,0.15);
    color: #FCD34D;
    border: 1px solid rgba(251,191,36,0.25);
    font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.badge-baru {
    background: rgba(34,197,94,0.15);
    color: #86EFAC;
    border: 1px solid rgba(34,197,94,0.25);
    font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 6px;
    text-transform: uppercase;
}
.badge-sale {
    background: rgba(225,29,72,0.2);
    color: #FB7185;
    border: 1px solid rgba(225,29,72,0.35);
    font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 6px;
    animation: pulse-badge 2s ease-in-out infinite;
}
.badge-terlaris {
    background: rgba(251,191,36,0.12);
    color: #FCD34D;
    border: 1px solid rgba(251,191,36,0.2);
    font-size: 9px; font-weight: 700;
    padding: 2px 6px; border-radius: 6px;
}
@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* ============================================================
   GLOW & GRADIENT UTILITIES
   ============================================================ */
.glow-primary   { box-shadow: var(--shadow-glow-primary); }
.glow-secondary { box-shadow: var(--shadow-glow-secondary); }

.text-gradient {
    background: var(--gradient-ruby-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   LINE CLAMP
   ============================================================ */
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ============================================================
   PROSE (Artikel)
   ============================================================ */
#article-content p      { margin-bottom:1rem; line-height:1.8; color:#CBD5E1; }
#article-content strong { color:#F1F5F9; font-weight:600; }
#article-content br     { display:block; margin-bottom:0.25rem; }

/* ============================================================
   INPUT & SELECT
   ============================================================ */
input, textarea {
    color: var(--color-text) !important;
    caret-color: var(--color-primary);
}

input::placeholder, textarea::placeholder {
    color: var(--color-text-subtle) !important;
    opacity: 1;
}

/* SEARCH INPUT — Fix teks tidak kelihatan */
#search-input {
    color: #F1F5F9 !important;
    background: rgba(255,255,255,0.06) !important;
}

#search-input::placeholder {
    color: #475569 !important;
}

select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px !important;
    color: var(--color-text); cursor: pointer;
}
select option { background-color: var(--color-card); color: var(--color-text); }
input:focus, select:focus, textarea:focus { outline: none; }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.product-card {
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.product-card.selected {
    background: rgba(225,29,72,0.12) !important;
    border-color: #E11D48 !important;
    box-shadow: 0 0 0 2px rgba(225,29,72,0.2), 0 0 24px rgba(225,29,72,0.2) !important;
}

.product-card.selected .selected-check { display: flex !important; }

/* Product name — fix terpotong di mobile */
.product-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}
@media (min-width: 400px) {
    .product-name { -webkit-line-clamp: unset; overflow: visible; display: block; }
}
@media (max-width: 399px) {
    .product-card .absolute.top-2.right-2 {
        position: static; display: flex; flex-wrap: wrap;
        gap: 2px; margin-bottom: 4px;
    }
}

/* ============================================================
   MOBILE BOTTOM SHEET
   ============================================================ */
#mobile-summary {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   PAYMENT GROUPS
   ============================================================ */
.payment-group { transition: all 0.2s ease; }
.payment-group:hover { border-color: rgba(225,29,72,0.2) !important; }
.payment-group-header:hover { background: rgba(225,29,72,0.04) !important; }
.payment-group-header:focus { outline: none; }
.payment-price-display {
    font-variant-numeric: tabular-nums;
    min-width: 80px; text-align: right;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}
@keyframes scaleIn {
    from { transform:scale(0.92); opacity:0; }
    to   { transform:scale(1);    opacity:1; }
}
@keyframes checkmark {
    0%   { stroke-dashoffset:50; }
    100% { stroke-dashoffset:0; }
}
@keyframes rubyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(225,29,72,0); }
    50%       { box-shadow: 0 0 0 6px rgba(225,29,72,0.15); }
}

.animate-fade-in-up { animation: fadeInUp 0.4s ease-out both; }
.animate-fade-in    { animation: fadeIn 0.3s ease-out both; }
.animate-scale-in   { animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-ruby-pulse { animation: rubyPulse 2s ease-in-out infinite; }

/* ============================================================
   BTN PRIMARY
   ============================================================ */
.btn-primary {
    background: var(--gradient-ruby);
    color: white; border: none; cursor: pointer;
    transition: var(--transition-base);
}
.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-primary);
}

.transition-smooth { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* ============================================================
   CHECKMARK ANIMATION (Invoice)
   ============================================================ */
.checkmark-circle {
    stroke-dasharray: 166; stroke-dashoffset: 166;
    animation: checkmark-circle 0.6s ease-in-out forwards;
}
.checkmark-check {
    stroke-dasharray: 50; stroke-dashoffset: 50;
    animation: checkmark 0.4s 0.6s ease-in-out forwards;
}
@keyframes checkmark-circle { to { stroke-dashoffset: 0; } }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-sidebar { transition: transform 0.3s ease, width 0.3s ease; }
.admin-sidebar.collapsed { width:0; overflow:hidden; }

.drag-item { cursor:grab; transition:opacity 0.2s, transform 0.2s; }
.drag-item:active { cursor:grabbing; }
.drag-item.dragging { opacity:0.4; transform:scale(0.98); }
.drag-over { border-color: var(--color-primary) !important; background:rgba(225,29,72,0.05) !important; }

.admin-table { width:100%; border-collapse:collapse; }
.admin-table th {
    text-align:left; font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.08em; color:#64748B;
    padding:10px 16px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    white-space:nowrap;
}
.admin-table td {
    padding:12px 16px; font-size:13px; color:#CBD5E1;
    border-bottom:1px solid rgba(255,255,255,0.04);
    vertical-align:middle;
}
.admin-table tr:hover td { background:rgba(225,29,72,0.03); }

.log-line {
    font-family:'Courier New',monospace; font-size:11px;
    padding:4px 8px; border-radius:4px;
    line-height:1.5; word-break:break-all; color:#94A3B8;
}
.log-line.error   { color:#FB7185; background:rgba(225,29,72,0.05); }
.log-line.warning { color:#FCD34D; background:rgba(245,158,11,0.05); }
.log-line.success { color:#86EFAC; background:rgba(34,197,94,0.05); }

#sales-chart { max-width:100%; height:200px !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .product-card { padding: 12px; }
    #mobile-summary { z-index: 40; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}