/* ==========================================
   LOGNEXUS COMPONENTS
========================================== */

/* ==========================
   BUTTONS
========================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:48px;

    padding:0 24px;

    border-radius:var(--button-radius);

    font-weight:600;

    font-size:15px;

    transition:var(--transition);

    cursor:pointer;

}

.btn-primary{

    background:var(--primary);

    color:var(--white);

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

    box-shadow:var(--shadow);

}

.btn-secondary{

    background:var(--secondary);

    color:var(--white);

}

.btn-secondary:hover{

    background:var(--secondary-hover);

}

.btn-outline{

    border:1px solid var(--border);

    color:var(--white);

}

.btn-outline:hover{

    background:var(--card-hover);

}

.btn-danger{

    background:var(--danger);

    color:var(--white);

}

/* ==========================
   CARDS
========================== */

.card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:24px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

/* ==========================
   PRODUCT CARD
========================== */

.product-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;

    transition:var(--transition);

}

.product-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.product-logo{

    width:70px;

    height:70px;

    object-fit:contain;

    margin:auto;

}

.product-title{

    font-size:20px;

    font-weight:700;

    color:var(--white);

}

.product-price{

    font-size:28px;

    font-weight:700;

    color:var(--primary);

}

/* ==========================
   BADGES
========================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.badge-success{

    background:rgba(34,197,94,.15);

    color:var(--success);

}

.badge-danger{

    background:rgba(239,68,68,.15);

    color:var(--danger);

}

.badge-warning{

    background:rgba(245,158,11,.15);

    color:var(--warning);

}

.badge-primary{

    background:rgba(37,99,235,.15);

    color:var(--primary);

}

/* ==========================
   INPUTS
========================== */

.input{

    width:100%;

    height:50px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:14px;

    padding:0 16px;

    color:var(--white);

    transition:var(--transition);

}

.input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.textarea{

    width:100%;

    min-height:140px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:14px;

    padding:16px;

    resize:vertical;

    color:var(--white);

}

/* ==========================
   SELECT
========================== */

.select{

    width:100%;

    height:50px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:14px;

    color:var(--white);

    padding:0 16px;

}

/* ==========================
   MODAL
========================== */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:var(--z-modal);

}

.modal-content{

    width:min(95%,650px);

    background:var(--card);

    border-radius:24px;

    padding:30px;

    border:1px solid var(--border);

}

/* ==========================
   TABLE
========================== */

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    background:var(--surface);

    color:var(--white);

    padding:16px;

}

.table td{

    padding:16px;

    border-top:1px solid var(--border);

}

.table tbody tr:hover{

    background:rgba(255,255,255,.03);

}

/* ==========================
   EMPTY STATE
========================== */

.empty-state{

    padding:80px 20px;

    text-align:center;

}

.empty-state i{

    font-size:60px;

    color:var(--primary);

    margin-bottom:20px;

}

.empty-state h3{

    margin-bottom:10px;

}

.empty-state p{

    color:var(--muted);

}