/* ffe169 yellow */
/* 00509d navy  */

:root,
[data-neo-theme='light'] {
    --neo-color-white: rgb(255, 255, 255);
    --neo-color-transparent: rgba(0, 0, 0, 0);

    --neo-color-primary: rgb(66, 133, 244);
    --neo-color-primary-hover: rgba(66, 133, 244, 0.8);
    --neo-bg-primary: rgba(66, 133, 244, 0.15);

    --neo-color-success: rgb(52, 168, 83);
    --neo-color-success-hover: rgb(52, 168, 83, 0.8);
    --neo-bg-success: rgba(52, 168, 83, 0.15);

    --neo-color-alert: rgb(234, 67, 53);
    --neo-color-alert-hover: rgba(234, 67, 53, 0.8);
    --neo-bg-alert: rgba(234, 67, 53, 0.15);

    --neo-color-idle: rgb(251, 188, 5);
    --neo-color-idle-hover: rgba(251, 188, 5, 0.8);
    --neo-bg-idle: rgba(251, 188, 5, 0.15);

    --neo-color-foreground: rgb(255, 255, 255);
    --neo-color-foreground-extra: rgb(31, 31, 31, 0.08);

    --neo-color-background: rgb(248, 250, 253);
    --neo-color-text: rgb(33, 33, 33);
    --neo-color-text-supporting: rgb(117, 117, 117);
    --neo-color-text-shy: rgba(0, 0, 0, 0.54);
    --neo-color-text-primary: rgb(66, 133, 244);
    --neo-color-mist: rgba(0, 0, 0, 0.06);
    --neo-color-mist-extra: rgba(0, 0, 0, 0.13);
    --neo-color-overlay: rgba(255, 255, 255, 0.8);
    --neo-color-contrast: rgb(0, 0, 0);

    --neo-color-red: rgb(255, 60, 56);
    --neo-color-orange: rgb(251, 133, 0);
    --neo-color-yellow: rgb(255, 213, 0);
    --neo-color-light-green: rgb(139, 195, 74);
    --neo-color-green: rgb(76, 175, 80);
    --neo-color-dark-green: rgb(56, 142, 60);
    --neo-color-teal: rgb(0, 150, 136);
    --neo-color-cyan: rgb(123, 223, 242);
    --neo-color-light-blue: rgb(194, 231, 255);
    --neo-color-blue: rgb(66, 133, 244);
    --neo-color-purple: rgb(156, 39, 176);
    --neo-color-magenta: rgb(233, 30, 99);
    --neo-color-pink: rgb(255, 64, 129);
}

[data-neo-theme='dark'] {
    --neo-color-white: rgb(255, 255, 255);
    --neo-color-transparent: rgba(0, 0, 0, 0);

    --neo-color-primary: rgb(31, 111, 235);
    --neo-color-primary-hover: rgba(31, 111, 235, 0.8);
    --neo-bg-primary: rgba(31, 111, 235, 0.15);

    --neo-color-success: rgb(64, 201, 87);
    --neo-color-success-hover: rgb(64, 201, 87, 0.8);
    --neo-bg-success: rgba(64, 201, 87, 0.15);

    --neo-color-alert: rgb(235, 86, 86);
    --neo-color-alert-hover: rgba(235, 86, 86, 0.8);
    --neo-bg-alert: rgba(235, 86, 86, 0.15);

    --neo-color-idle: rgb(219, 129, 26);
    --neo-color-idle-hover: rgba(219, 129, 26, 0.8);
    --neo-bg-idle: rgba(219, 129, 26, 0.15);

    --neo-color-foreground: #003d73;
    --neo-color-foreground-extra: rgb(51, 51, 51);

    --neo-color-background: #003d73;
    --neo-color-text: rgb(227, 230, 232);
    --neo-color-text-supporting: rgb(156, 156, 156);
    --neo-color-text-shy: rgba(255, 255, 255, 0.28);
    --neo-color-text-primary: rgb(68, 147, 248);
    --neo-color-mist: rgba(255, 255, 255, 0.06);
    --neo-color-mist-extra: rgba(255, 255, 255, 0.13);
    --neo-color-overlay: rgba(3, 3, 3, 0.8);
    --neo-color-contrast: rgb(255, 255, 255);

    --neo-color-red: rgb(215, 38, 61);
    --neo-color-orange: rgb(239, 152, 0);
    --neo-color-yellow: rgb(255, 213, 0);
    --neo-color-light-green: rgb(4, 231, 98);
    --neo-color-green: rgb(64, 201, 64);
    --neo-color-dark-green: rgb(31, 136, 61);
    --neo-color-teal: rgb(0, 155, 119);
    --neo-color-cyan: rgb(123, 223, 242);
    --neo-color-light-blue: rgb(194, 231, 255);
    --neo-color-blue: rgb(31, 111, 235);
    --neo-color-purple: rgb(113, 97, 239);
    --neo-color-magenta: rgb(217, 3, 104);
    --neo-color-pink: rgb(255, 71, 126);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    list-style: none;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

@font-face {
    font-family: 'vazirmatnr';
    src: url('./vazirmatnr.ttf');
}

body {
    font-family: 'vazirmatnr', sans-serif !important;
    font-size: 16px;
    color: var(--neo-color-text);
    background-color: var(--neo-color-background);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.header {
    width: 95%;
    display: flex;
    margin: 20px auto;
    height: 60px;
    border: 1px solid #fff;
    box-shadow: 0 0 6px #0000000d;
    border-radius: 9999px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 0 10px;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
}

.header-title img {
    width: 55px;
}

.table-container {
    width: 90%;
    margin: 20px auto;
    background-color: var(--neo-color-foreground);
    border-radius: 8px;
    box-shadow: 0 0 6px #0000000d;
    border: 1px solid var(--neo-color-mist-extra);
}

.product-table {
    width: 100%;
    border-collapse: collapse;
}

.product-table th,
td {
    border: 1px solid var(--neo-color-mist-extra);
    padding: 10px;
    text-align: center;
}

.product-table th {
    /* background-color: #003d73 !important;     */
}

.product-table tr:nth-child(odd) {
    background-color: var(--neo-bg-primary);
    /* color: var(--neo-color-primary); */
}

#clock {
    color: #000;
    padding: 7px 14px;
    color: var(--neo-color-text);
    border-radius: 999px;
    /* font-weight: bold; */
}

/* ======================= */
.table-container {
    width: min(95%, 1400px);
    margin: 20px auto;
    background-color: var(--neo-color-foreground);
    border-radius: 0px;
    box-shadow: 0 0 6px #0000000d;
    border: 1px solid var(--neo-color-mist-extra);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* اسکرول خوشگل */
.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--neo-color-mist-extra);
    border-radius: 20px;
}

.product-table {
    width: 100%;
    min-width: 600px;

    border-collapse: collapse;
    table-layout: fixed;
}

.product-table th,
.product-table td {
    border: 1px solid var(--neo-color-mist-extra);
    padding: 14px 16px;
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
}

.product-table th {
    font-weight: 700;
}

.product-table tr:nth-child(odd) {
    background-color: var(--neo-bg-primary);
}


/* Hover */
.product-table tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}

/* موبایل */
@media (max-width: 768px) {
    .table-container {
        width: 100%;
        border-radius: 0;
        margin: 0;
    }

    .product-table th,
    .product-table td {
        padding: 12px;
        font-size: 14px;
    }

    #clock {
        padding: 5px 10px;
        font-size: 10px;
    }
}

/* تلویزیون و مانیتور بزرگ */
@media (min-width: 1200px) {
    .product-table th,
    .product-table td {
        padding: 10px 22px;
        font-size: 38px !important;
        font-weight: bold !important;
    }

    .product-table th:first-child,
    .product-table td:first-child {
        padding: 18px 22px;
        font-size: 34px !important;
        font-weight: bold;
    }

    .product-table th {
        padding: 18px 22px;
        font-size: 32px !important;
    }
    #clock {
        font-size: 34px;
    }
    .zs-title {
        font-size: 36px;
    }
}

#fullscreenBtn,#refreshBtn {
    padding: 0px;
    border: none;
    border-radius: 12px;
    background: #111827;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
    opacity: 0.3;
}

.irt-th {
    font-size: 20px;
}

.product-table td:nth-child(3) {
    /*background-color: #fdf0d5 !important;*/
}

.float-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 10px;
    left: 10px;
    gap: 4px;
}

.table-header-row {
    background-color: var(--neo-bg-idle) !important;
    color: var(--neo-color-idle) !important;
}