/** @license For full copyright and license information, please see the LICENSE.md file. */

/**
 * @file engine-grid.css
 * @description Central Engine DataGrid table styling, action columns, and 3D Coin Flip Toggle.
 * @module EngineStyles/Grid
 */

@import url("engine-grid-canvas.css");
@import url("engine-grid-widgets.css");
@import url("engine-grid-catalog.css");
@import url("engine-grid-view-mode.css");
@import url("engine-grid-actions-toolbar.css");
@import url("engine-grid-resize-badge.css");
@import url("engine-forms/engine-forms-quick-edit.css");

/* Engine DataGrid Row Action Menu & Title Links */
.engine-action-col {
    width: 48px !important;
    min-width: 48px !important;
}

.engine-row-actions {
    position: relative;
    display: inline-block;
}

.engine-row-actions .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 140px;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15) !important;
}

.engine-row-actions.show .dropdown-menu {
    display: block;
}

.hover-underline:hover {
    text-decoration: underline !important;
    color: var(--tblr-primary) !important;
}

.engine-code-preview {
    max-height: 180px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.engine-pre-wrap {
    white-space: pre-wrap;
}

.table-responsive {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.card.engine-grid-card {
    width: 100%;
    min-width: 0;
    container-type: inline-size;
    container-name: engineGrid;
}

.card.engine-grid-card.d-none,
.engine-grid-card.d-none,
.table-responsive.d-none {
    display: none !important;
}

/* Record title & link cells */
.engine-record-link {
    color: #0284c7 !important;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}

.engine-record-link:hover {
    color: #0369a1 !important;
    text-decoration: underline !important;
}

[data-bs-theme="dark"] .engine-record-link {
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .engine-record-link:hover {
    color: #7dd3fc !important;
}

/* 3D Coin Flip View Toggle (List View <-> Gridstack Grid View) */
.coin-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
    -webkit-perspective: 800px;
    margin-right: 0.35rem;
    height: 36px;
}

.coin-toggle-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.coin-toggle-btn:hover {
    transform: scale(1.15);
}

.coin-toggle-btn:active {
    transform: scale(0.92);
}

.coin-toggle-btn:focus-visible {
    outline: 2px solid rgba(12, 166, 120, 0.5);
}

.coin-toggle {
    width: 32px;
    height: 32px;
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.coin-toggle.is-flipped {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.coin-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Front Face: Shown on List View -> Vibrant Emerald / Mint icon without background */
.coin-face-front {
    color: #0ca678 !important;
    transform: rotateY(0deg) translateZ(1px);
    -webkit-transform: rotateY(0deg) translateZ(1px);
}

[data-bs-theme="dark"] .coin-face-front {
    color: #20c997 !important;
}

/* Back Face: Shown on Grid View -> Vibrant Cyan / Sky icon without background */
.coin-face-back {
    color: #0284c7 !important;
    transform: rotateY(180deg) translateZ(1px);
    -webkit-transform: rotateY(180deg) translateZ(1px);
}

[data-bs-theme="dark"] .coin-face-back {
    color: #38bdf8 !important;
}

.coin-toggle-btn:hover .coin-face-front {
    color: #099268 !important;
    filter: drop-shadow(0 0 4px rgba(12, 166, 120, 0.4));
}

[data-bs-theme="dark"] .coin-toggle-btn:hover .coin-face-front {
    color: #63e6be !important;
    filter: drop-shadow(0 0 6px rgba(32, 201, 151, 0.6));
}

.coin-toggle-btn:hover .coin-face-back {
    color: #0369a1 !important;
    filter: drop-shadow(0 0 4px rgba(2, 132, 199, 0.4));
}

[data-bs-theme="dark"] .coin-toggle-btn:hover .coin-face-back {
    color: #7dd3fc !important;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));
}

/* ==========================================================================
   Responsive DataGrid & Mobile Touch Optimizations (Bootstrap 5.3+)
   ========================================================================== */

.engine-select-checkbox {
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 24px !important;
    min-height: 24px !important;
    cursor: pointer;
}

@media (pointer: coarse) {
    .engine-action-col,
    .engine-selection-col {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .engine-row-actions .btn-icon {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .engine-select-checkbox {
        width: 1.65rem !important;
        height: 1.65rem !important;
        min-width: 26px !important;
        min-height: 26px !important;
    }
}

@media (max-width: 767.98px) {
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .engine-bulk-selection-toolbar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1040 !important;
        background: var(--tblr-card-bg, #ffffff) !important;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18) !important;
        border-top: 1px solid var(--tblr-border-color, #e2e8f0) !important;
    }

    .engine-tabs-toolbar {
        gap: 0.5rem !important;
    }

    .engine-filter-nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }

    .engine-filter-nav-tabs::-webkit-scrollbar {
        display: none;
    }
}