/* ========================================
   PAITO TOOLBAR - STICKY & RAPI
======================================== */
.paito-toolbar {
    position: sticky;
    top: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;

    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin: 0 0 10px;

    background: #fff;
    border: 1px solid #d7dce2;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Palet warna di kiri */
.paito-color-tools {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 320px;
    min-width: 0;
}

/* Form pencarian di kanan */
.paito-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
}

/* Tombol warna */
.paito-swatch,
#color-selector .color {
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.paito-swatch.selected,
#color-selector .color.selected {
    outline: 2px solid #263747;
    outline-offset: 2px;
}

/* Tombol toolbar */
.paito-reset,
.paito-eraser,
#rb,
#btnSubmit,
#clear,
#get-html-button {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #ccd2da;
    border-radius: 4px;
    background: #fff;
    color: #222;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
}

#btnSubmit {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.paito-reset:hover,
.paito-eraser:hover,
#rb:hover,
#clear:hover,
#get-html-button:hover {
    background: #e9eef5;
}

#btnSubmit:hover {
    background: #1d4ed8;
}

/* ========================================
   INPUT AS / KOP / KEP / EKOR
======================================== */
.paito-search input,
#asc,
#kopc,
#kepalac,
#ekorc {
    box-sizing: border-box;
    width: 42px;
    height: 30px;
    padding: 4px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #222;
    background: #fff;
}

#asc:focus,
#kopc:focus,
#kepalac:focus,
#ekorc:focus {
    outline: 2px solid #3498db;
    outline-offset: 1px;
}

/* ========================================
   AREA TABEL MINGGUAN
======================================== */
#table-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    margin: 12px auto;
    border: 1px solid #d7dce2;
    border-radius: 5px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

/* Mendukung beberapa jenis tabel */
#drawing-table,
#table-wrap > table,
table.paito-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    background: #fff;
    color: #222;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

/* Semua sel tabel */
#drawing-table td,
#drawing-table th,
#table-wrap > table td,
#table-wrap > table th,
table.paito-table td,
table.paito-table th {
    border: 1px solid #d7dce2;
    padding: 5px 3px;
    height: 27px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* Header nama hari */
#drawing-table tr.head th,
#table-wrap > table tr.head th,
table.paito-table tr.head th {
    background: #263747;
    color: #fff;
    font-weight: 700;
    padding: 8px 3px;
}

/* Sel angka */
#drawing-table td.asu,
#table-wrap > table td.asu,
table.paito-table td.asu {
    background-color: #fff;
    color: #000;
    cursor: crosshair;
    transition: background-color .1s ease;
    user-select: none;
    font-weight: bold;
}

/* Kolom kelima setiap hari */
#drawing-table td.asux,
#table-wrap > table td.asux,
table.paito-table td.asux {
    /*! background-color: #e5e5e5; */
    color: #cdcdcd;
    font-weight: 700;
}

/* Hover sel angka */
#drawing-table td.asu:hover,
#table-wrap > table td.asu:hover,
table.paito-table td.asu:hover {
    outline: 1px solid #64748b;
    outline-offset: -1px;
}

/* ========================================
   WARNA AS: a0 - a9
======================================== */
.asu.a0 { background-color: #ffcdd2 !important; color: #7f0000 !important; }
.asu.a1 { background-color: #f8bbd0 !important; color: #880e4f !important; }
.asu.a2 { background-color: #e1bee7 !important; color: #4a148c !important; }
.asu.a3 { background-color: #d1c4e9 !important; color: #311b92 !important; }
.asu.a4 { background-color: #c5cae9 !important; color: #1a237e !important; }
.asu.a5 { background-color: #bbdefb !important; color: #0d47a1 !important; }
.asu.a6 { background-color: #b2dfdb !important; color: #004d40 !important; }
.asu.a7 { background-color: #c8e6c9 !important; color: #1b5e20 !important; }
.asu.a8 { background-color: #fff9c4 !important; color: #795500 !important; }
.asu.a9 { background-color: #ffe0b2 !important; color: #e65100 !important; }

/* ========================================
   WARNA KOP: c0 - c9
======================================== */
.asu.c0 { background-color: #ef9a9a !important; color: #7f0000 !important; }
.asu.c1 { background-color: #f48fb1 !important; color: #880e4f !important; }
.asu.c2 { background-color: #ce93d8 !important; color: #4a148c !important; }
.asu.c3 { background-color: #b39ddb !important; color: #311b92 !important; }
.asu.c4 { background-color: #9fa8da !important; color: #1a237e !important; }
.asu.c5 { background-color: #90caf9 !important; color: #0d47a1 !important; }
.asu.c6 { background-color: #80cbc4 !important; color: #004d40 !important; }
.asu.c7 { background-color: #a5d6a7 !important; color: #1b5e20 !important; }
.asu.c8 { background-color: #fff59d !important; color: #795500 !important; }
.asu.c9 { background-color: #ffcc80 !important; color: #e65100 !important; }

/* ========================================
   WARNA KEP: k0 - k9
======================================== */
.asu.k0 { background-color: #ff5252 !important; color: #fff !important; }
.asu.k1 { background-color: #ff4081 !important; color: #fff !important; }
.asu.k2 { background-color: #e040fb !important; color: #fff !important; }
.asu.k3 { background-color: #7c4dff !important; color: #fff !important; }
.asu.k4 { background-color: #536dfe !important; color: #fff !important; }
.asu.k5 { background-color: #448aff !important; color: #fff !important; }
.asu.k6 { background-color: #18ffff !important; color: #004d40 !important; }
.asu.k7 { background-color: #69f0ae !important; color: #004d40 !important; }
.asu.k8 { background-color: #ffff00 !important; color: #333 !important; }
.asu.k9 { background-color: #ffab40 !important; color: #333 !important; }

/* ========================================
   WARNA EKOR: e0 - e9
======================================== */
.asu.e0 { background-color: #b71c1c !important; color: #fff !important; }
.asu.e1 { background-color: #880e4f !important; color: #fff !important; }
.asu.e2 { background-color: #4a148c !important; color: #fff !important; }
.asu.e3 { background-color: #311b92 !important; color: #fff !important; }
.asu.e4 { background-color: #1a237e !important; color: #fff !important; }
.asu.e5 { background-color: #0d47a1 !important; color: #fff !important; }
.asu.e6 { background-color: #00695c !important; color: #fff !important; }
.asu.e7 { background-color: #2e7d32 !important; color: #fff !important; }
.asu.e8 { background-color: #f9a825 !important; color: #222 !important; }
.asu.e9 { background-color: #e65100 !important; color: #fff !important; }

/* ========================================
   WARNA BARIS KELIPATAN 5
   Baris 5, 10, 15, 20, dst.
   Tidak menimpa warna angka a0-e9
======================================== */
#drawing-table tr:nth-child(5n) td:not(.a0):not(.a1):not(.a2):not(.a3):not(.a4):not(.a5):not(.a6):not(.a7):not(.a8):not(.a9):not(.c0):not(.c1):not(.c2):not(.c3):not(.c4):not(.c5):not(.c6):not(.c7):not(.c8):not(.c9):not(.k0):not(.k1):not(.k2):not(.k3):not(.k4):not(.k5):not(.k6):not(.k7):not(.k8):not(.k9):not(.e0):not(.e1):not(.e2):not(.e3):not(.e4):not(.e5):not(.e6):not(.e7):not(.e8):not(.e9),
#table-wrap > table tr:nth-child(5n) td:not(.a0):not(.a1):not(.a2):not(.a3):not(.a4):not(.a5):not(.a6):not(.a7):not(.a8):not(.a9):not(.c0):not(.c1):not(.c2):not(.c3):not(.c4):not(.c5):not(.c6):not(.c7):not(.c8):not(.c9):not(.k0):not(.k1):not(.k2):not(.k3):not(.k4):not(.k5):not(.k6):not(.k7):not(.k8):not(.k9):not(.e0):not(.e1):not(.e2):not(.e3):not(.e4):not(.e5):not(.e6):not(.e7):not(.e8):not(.e9),
table.paito-table tr:nth-child(5n) td:not(.a0):not(.a1):not(.a2):not(.a3):not(.a4):not(.a5):not(.a6):not(.a7):not(.a8):not(.a9):not(.c0):not(.c1):not(.c2):not(.c3):not(.c4):not(.c5):not(.c6):not(.c7):not(.c8):not(.c9):not(.k0):not(.k1):not(.k2):not(.k3):not(.k4):not(.k5):not(.k6):not(.k7):not(.k8):not(.k9):not(.e0):not(.e1):not(.e2):not(.e3):not(.e4):not(.e5):not(.e6):not(.e7):not(.e8):not(.e9) {
    background-color: #e7e7e7 !important;
}

/* ========================================
   PALET WARNA MANUAL
======================================== */
#color-selector,
.paito-color-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

#color-selector .color {
    border-radius: 50%;
}

#colormenu {
    z-index: 100;
}

#colormenu.fixed {
    position: fixed;
    top: 0;
    z-index: 999;
    background: #fff;
}

/* Gambar tracing */
#tracing-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ========================================
   TAMPILAN MOBILE
======================================== */
@media (max-width: 600px) {
    .paito-toolbar {
        align-items: flex-start;
        gap: 10px;
        padding: 8px;
    }

    .paito-color-tools {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-start;
    }

    .paito-search {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-start;
        gap: 5px;
    }

    #table-wrap {
        border-radius: 3px;
    }

    #drawing-table,
    #table-wrap > table,
    table.paito-table {
       width: 100%; */
        font-size: 12px;
    }

    #drawing-table td,
    #drawing-table th,
    #table-wrap > table td,
    #table-wrap > table th,
    table.paito-table td,
    table.paito-table th {

        padding: 1px;
    }
    #drawing-table tr.head th, #table-wrap > table tr.head th, table.paito-table tr.head th {
  background: #263747;
  color: #fff;
        font-weight: normal;
  padding: 0px
}
}