/* wrapper */
.grid-dark {
    --bg: #0f172a;
    --bg-soft: #111827;
    --panel: #1e293b;
    --panel-2: #334155;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --accent: #60a5fa;
    --border: #243244;
    --row: #0f172a;
    --row-hover: #162033;
    --input-bg: #0b1220;
    background: transparent;
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, Roboto, Segoe UI, sans-serif;
}

/* cijeli grid */
.grid-dark.jsgrid {
    /*border: 1px solid var(--border);
    border-radius: 16px;*/
    overflow: hidden;
    background: var(--bg-soft);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* header */
    .grid-dark .jsgrid-grid-header {
        border-radius: 16px;
        overflow: hidden;
    }
    .grid-dark .jsgrid-header-row > th {
        background: linear-gradient(180deg, var(--panel), #172131);
        color: var(--text);
        border: 0;
        border-bottom: 1px solid var(--border);
        padding: 14px 16px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

/* filter row / insert row */
.grid-dark .jsgrid-filter-row > td,
.grid-dark .jsgrid-insert-row > td {
    background: #0d1524;
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
}

/* data cells */
.grid-dark .jsgrid-row > td,
.grid-dark .jsgrid-alt-row > td,
.grid-dark .jsgrid-edit-row > td {
    background: var(--row);
    color: var(--text);
    border: 0;
    border-bottom: 10px solid var(--bg-soft); /* “odvojeni redovi” */
    padding: 14px 16px;
    transition: background 0.18s ease, transform 0.18s ease;
}

/* hover */
.grid-dark .jsgrid-row:hover > td,
.grid-dark .jsgrid-alt-row:hover > td {
    background: var(--row-hover);
}

/* makni old-school zebra feeling */
.grid-dark .jsgrid-alt-row > td {
    background: #101a2b;
}

    /* prvi i zadnji cell neka izgledaju kao kartica */
    .grid-dark .jsgrid-row > td:first-child,
    .grid-dark .jsgrid-alt-row > td:first-child,
    .grid-dark .jsgrid-edit-row > td:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }

    .grid-dark .jsgrid-row > td:last-child,
    .grid-dark .jsgrid-alt-row > td:last-child,
    .grid-dark .jsgrid-edit-row > td:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }

/* inputs */
.grid-dark .jsgrid input,
.grid-dark .jsgrid select,
.grid-dark .jsgrid textarea {
    width: 100%;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    outline: none;
    box-sizing: border-box;
}

    .grid-dark .jsgrid input:focus,
    .grid-dark .jsgrid select:focus,
    .grid-dark .jsgrid textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
    }

/* pager */
.grid-dark .jsgrid-pager {
    background: #0d1524;
    color: var(--muted);
    padding: 14px 16px;
    border-top: 1px solid var(--border);
}

    .grid-dark .jsgrid-pager a {
        color: var(--text);
        text-decoration: none;
        padding: 6px 10px;
        border-radius: 8px;
    }

.grid-dark .jsgrid-pager-current-page {
    color: white;
    background: var(--accent);
    padding: 6px 10px;
    border-radius: 8px;
}

/* control buttons malo modernije */
.grid-dark .jsgrid-button {
    opacity: 0.9;
    transform: scale(1.05);
    margin: 0 2px;
}

/* no data */
.grid-dark .jsgrid-nodata-row td {
    background: var(--bg-soft);
    color: var(--muted);
    padding: 24px;
    border: 0;
    text-align: center;
}

.grid-dark .row-important > td {
    box-shadow: inset 3px 0 0 #60a5fa;
}