/* =====================================================
   OKSY3 APP CSS
   Global UI
===================================================== */

:root {
    --oksy-primary: #7a5cff;
    --oksy-secondary: #ff7ac7;
    --oksy-bg: #f6f8fb;
    --oksy-card: #ffffff;
    --oksy-border: rgba(17, 24, 39, .08);
}

body {
    background: var(--oksy-bg);
    font-family: Sarabun, Arial, sans-serif;
    color: #1f2937;
}

/* container */

.content-card {
    background: var(--oksy-card);
    border: 1px solid var(--oksy-border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .05);
}

/* section title */

.section-title {
    font-family: Kanit, Sarabun, sans-serif;
    font-weight: 800;
    letter-spacing: -.2px;
}

/* card */

.portal-card {
    background: #fff;
    border: 1px solid var(--oksy-border);
    border-radius: 16px;
    transition: .18s ease;
}

.portal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

/* icon chip */

.icon-chip {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7a5cff20, #ff7ac720);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* badge */

.badge-soft {
    background: #f3f4f6;
    border: 1px solid var(--oksy-border);
    color: #374151;
    font-weight: 600;
}

/* buttons */

.btn-oksy {
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
}

.btn-oksy-primary {
    background: linear-gradient(135deg, var(--oksy-primary), var(--oksy-secondary));
    border: none;
    color: #fff;
}

/* table */

.table-oksy {
    border: 1px solid var(--oksy-border);
    border-radius: 14px;
    overflow: hidden;
}

.table-oksy thead {
    background: #f9fafb;
}

/* input */

.form-control {
    border-radius: 10px;
}

/* sidebar */

.oksy-sidebar {
    width: 280px;
}

/* avatar */

.oksy-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7a5cff, #ff7ac7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}