/* ==========================================================
   GIFT CATEGORIES (ADMIN) — INDEX/FORM (PREMIUM UI)
   File: resources/css/admin/gift-categories.css
========================================================== */

:root{
    --gc-bg-1: #f6f7fb;
    --gc-bg-2: #eef2ff;

    --gc-card: rgba(255,255,255,.86);
    --gc-card-solid: #ffffff;

    --gc-text: #0f172a;
    --gc-muted: #64748b;

    --gc-border: rgba(15, 23, 42, 0.10);
    --gc-border-2: rgba(15, 23, 42, 0.14);

    --gc-shadow: 0 18px 55px rgba(2, 8, 23, 0.10);
    --gc-shadow-2: 0 28px 90px rgba(2, 8, 23, 0.14);

    --gc-radius: 18px;
    --gc-radius-sm: 12px;

    --gc-primary: #2563eb;
    --gc-primary-2: #7c3aed;
    --gc-success: #16a34a;
    --gc-danger: #ef4444;

    --gc-ease: cubic-bezier(.2,.8,.2,1);
}

.admin-wrap,
.admin-content,
main,
.container-fluid,
.container{
    position: relative;
}

.admin-content{
    background:
        radial-gradient(1000px 420px at 18% 10%, rgba(37,99,235,.10), transparent 60%),
        radial-gradient(900px 420px at 78% 22%, rgba(124,58,237,.10), transparent 60%),
        radial-gradient(700px 420px at 50% 100%, rgba(34,211,238,.08), transparent 65%),
        linear-gradient(180deg, var(--gc-bg-2), var(--gc-bg-1));
}

/* ===== Cards on this page ===== */
.gc-toolbar.admin-card,
.admin-card:has(.gc-table),
.gc-form.admin-card{
    border-radius: var(--gc-radius);
    border: 1px solid var(--gc-border);
    background: var(--gc-card);
    backdrop-filter: blur(10px);
    box-shadow: var(--gc-shadow);
}

.gc-toolbar{
    position: relative;
    overflow: hidden;
}

.gc-toolbar::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
        radial-gradient(700px 200px at 18% 0%, rgba(37,99,235,.18), transparent 62%),
        radial-gradient(700px 240px at 85% 10%, rgba(124,58,237,.16), transparent 65%);
    pointer-events:none;
    opacity:.9;
}

.gc-toolbar::after{
    content:"";
    position:absolute;
    left: 14px;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gc-primary), var(--gc-primary-2));
    opacity:.85;
    pointer-events:none;
}

/* ===== Inputs ===== */
.gc-toolbar .form-control,
.gc-form .form-control{
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    transition: transform .18s var(--gc-ease), box-shadow .18s var(--gc-ease), border-color .18s var(--gc-ease);
    min-height: 42px;
}

.gc-toolbar .form-control:focus,
.gc-form .form-control:focus{
    border-color: rgba(37, 99, 235, 0.40);
    box-shadow:
        0 16px 36px rgba(37, 99, 235, 0.14),
        0 10px 26px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.gc-toolbar .form-control::placeholder{
    color: rgba(100,116,139,.9);
}

/* ===== Buttons ===== */
.gc-toolbar .btn,
.gc-actions .btn,
.gc-form .btn{
    border-radius: 14px;
    transition: transform .18s var(--gc-ease), box-shadow .18s var(--gc-ease), filter .18s var(--gc-ease);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.gc-toolbar .btn:hover,
.gc-actions .btn:hover,
.gc-form .btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.gc-toolbar .btn-success,
.gc-form .btn-success{
    background: linear-gradient(135deg, rgba(22,163,74,1), rgba(34,197,94,1));
    border: 0;
}
.gc-toolbar .btn-success:hover,
.gc-form .btn-success:hover{
    box-shadow: 0 22px 50px rgba(22,163,74,.18);
}

.gc-toolbar .btn-light{
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15, 23, 42, 0.10);
}

/* ===== Table as cards ===== */
.gc-table{
    border-collapse: separate;
    border-spacing: 0 12px;
}

.gc-table thead th{
    border: 0 !important;
    color: rgba(15, 23, 42, 0.60);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: 10px 12px;
    user-select: none;
}

.gc-table tbody tr{
    background: rgba(255,255,255,.92);
    border: 1px solid var(--gc-border);
    border-radius: var(--gc-radius);
    box-shadow: var(--gc-shadow);
    transition:
        transform .18s var(--gc-ease),
        box-shadow .18s var(--gc-ease),
        background .18s var(--gc-ease),
        border-color .18s var(--gc-ease);
}

.gc-table tbody tr:hover{
    transform: translateY(-2px);
    box-shadow: var(--gc-shadow-2);
    border-color: rgba(37,99,235,.22);
    background:
        linear-gradient(180deg, rgba(37,99,235,.05), rgba(255,255,255,.92));
}

.gc-table tbody td{
    border-top: 0 !important;
    vertical-align: middle;
    padding: 14px 12px;
}

.gc-table tbody tr td:first-child{
    border-top-left-radius: var(--gc-radius);
    border-bottom-left-radius: var(--gc-radius);
}
.gc-table tbody tr td:last-child{
    border-top-right-radius: var(--gc-radius);
    border-bottom-right-radius: var(--gc-radius);
}

.gc-title{
    font-weight: 800;
    color: rgba(15,23,42,.96);
    letter-spacing: .01em;
    line-height: 1.2;
}

.gc-slug{
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,.04);
    border: 1px solid rgba(15,23,42,.08);
    color: rgba(15,23,42,.78);
    font-size: 12px;
}

.gc-sort{
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.70), transparent 55%),
        linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.10));
    border: 1px solid rgba(37,99,235,.18);
    color: rgba(15,23,42,.82);
    font-weight: 800;
}

/* ===== Drag handle ===== */
.drag-handle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
    cursor: grab;
    user-select: none;
    font-size: 18px;
    line-height: 1;
    opacity: .92;
    transition: transform .18s var(--gc-ease), box-shadow .18s var(--gc-ease), opacity .18s var(--gc-ease);
}

.drag-handle:active{
    cursor: grabbing;
    transform: scale(.98);
}

.gc-table tbody tr:hover .drag-handle{
    transform: translateY(-1px);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
}

.drag-disabled .drag-handle{
    opacity: .25 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ===== Badges ===== */
.badge{
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 800;
    letter-spacing: .02em;
}

.badge-success{
    background: rgba(22,163,74,.12);
    color: rgba(22,163,74,1);
    border: 1px solid rgba(22,163,74,.18);
}

.badge-secondary{
    background: rgba(100,116,139,.12);
    color: rgba(71,85,105,1);
    border: 1px solid rgba(100,116,139,.20);
}

/* ===== SortableJS states ===== */
.sortable-ghost{
    opacity: .60;
    transform: rotate(-0.35deg) scale(0.995);
}

.sortable-chosen{
    box-shadow: 0 28px 80px rgba(37, 99, 235, 0.22) !important;
    border-color: rgba(37, 99, 235, 0.36) !important;
}

.sortable-drag{
    box-shadow: 0 34px 100px rgba(2, 8, 23, 0.24) !important;
}

/* ===== Pagination ===== */
.pagination{
    gap: 8px;
    flex-wrap: wrap;
}

.page-item .page-link{
    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    padding: 8px 12px;
    color: rgba(15,23,42,.80);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
    transition: transform .18s var(--gc-ease), box-shadow .18s var(--gc-ease), border-color .18s var(--gc-ease);
}

.page-item .page-link:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
    border-color: rgba(37,99,235,.28) !important;
}

.page-item.active .page-link{
    background: linear-gradient(135deg, rgba(37,99,235,1), rgba(124,58,237,1)) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 22px 55px rgba(37,99,235,.20);
}

/* ==========================================================
   ✅ MOBILE ADAPTATION (index table -> cards)
========================================================== */

@media (max-width: 575.98px){

    /* toolbar */
    .gc-toolbar form{
        width: 100%;
    }

    .gc-toolbar .form-control{
        min-width: 0 !important;
        width: 100%;
    }

    .gc-toolbar .btn{
        width: 100%;
    }

    .gc-toolbar .d-flex.gap-2{
        width: 100%;
    }

    /* table -> cards */
    .gc-table{
        border-spacing: 0 10px;
    }

    .gc-table thead{
        display: none;
    }

    .gc-table tbody tr{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 10px 12px;
    }

    .gc-table tbody td{
        padding: 8px 8px !important;
        width: 100%;
    }

    /* 1) drag */
    .gc-table tbody td:nth-child(1){
        width: 54px;
        order: 1;
    }

    /* 2) title */
    .gc-table tbody td:nth-child(2){
        width: calc(100% - 54px);
        order: 2;
    }

    /* 3) slug */
    .gc-table tbody td:nth-child(3){
        order: 3;
        width: 100%;
        padding-top: 2px !important;
    }

    /* 4) sort */
    .gc-table tbody td:nth-child(4){
        order: 4;
        width: 50%;
    }

    /* 5) status */
    .gc-table tbody td:nth-child(5){
        order: 5;
        width: 50%;
        text-align: right;
    }

    /* 6) actions */
    .gc-table tbody td:nth-child(6){
        order: 6;
        width: 100%;
        text-align: left !important;
        padding-top: 6px !important;
    }

    .gc-actions .btn{
        width: 100%;
        margin-top: 6px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .gc-actions form{
        display: block !important;
        width: 100%;
    }

    .drag-handle{
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }

    .gc-slug{
        font-size: 11px;
        word-break: break-word;
        white-space: normal;
    }
}

/* ==========================================================
   ✅ MOBILE ADAPTATION (form)
========================================================== */

@media (max-width: 575.98px){
    .gc-form .btn{
        width: 100%;
    }

    .gc-form .d-flex.gap-2{
        flex-direction: column;
    }
}