/* =========================================================
   mrThao TableOPS V3.1
   showtables.css
   ---------------------------------------------------------
   Module  : ShowTables
   Versie  : 3.1
   Status  : Stable
   ========================================================= */
/* =========================================================
   HEADER
   ========================================================= */
.mto-header{
    margin-bottom:28px;
	color:var(--mto-primary);
}

.mto-header-title{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.mto-header h2{
    margin:0;
    font-family:Georgia,serif;
    font-size:30px;
    font-weight:400;
    color:var(--mto-primary);
}

.mto-header-subtitle{
    font-size:14px;
    color:#5A6E82;
}

.mto-header-subtitle strong{
    color:var(--mto-primary);
}

/* =========================================================
   WRAPPER
   ========================================================= */
.mto-showtables-wrapper{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* =========================================================
   TAFELGRID
   ========================================================= */
.mto-showtables-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(120px,1fr));
    gap:18px;
    width:100%;
    align-items:start;
}

/* =========================================================
   TAFEL
   ========================================================= */
.mto-showtables-table{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:8px;
    min-height:120px;
    padding:16px;
    border:2px solid transparent;
    border-radius:12px;
    cursor:pointer;
    transition:all .20s ease;
    box-shadow:0 3px 10px rgba(0,0,0,.18);
    text-align:center;
}

.mto-showtables-table:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,.18);
}

.mto-showtables-table strong{
    font-size:22px;
    line-height:1.1;
}

.mto-showtables-table span{
    font-size:15px;
}

.mto-showtables-table small{
    font-size:13px;
    opacity:.90;
}

/* =========================================================
   STATUSKLEUREN
   ========================================================= */
.mto-showtables-status-free{
    background:var(--mto-free);
    color:var(--mto-white);
    border-color:var(--mto-free);
}

.mto-showtables-status-occupied{
    background:var(--mto-occupied);
    color:var(--mto-white);
    border-color:var(--mto-occupied);
}

.mto-showtables-status-reserved{
    background:var(--mto-reserved);
    color:var(--mto-white);
    border-color:var(--mto-reserved);
}

.mto-showtables-status-linked{
    background:var(--mto-linked);
    color:#333;
    border-color:var(--mto-linked);
}

/* =========================================================
   GESELECTEERDE TAFEL
   ========================================================= */
.mto-showtables-table.is-selected{
    outline:4px solid var(--mto-sky);
    outline-offset:2px;
}

/* =========================================================
   INFO BLOKKEN
   ========================================================= */
.mto-showtables-info{
    display:flex;
    flex-direction:column;
    gap:18px;
    width:100%;
}

/* =========================================================
   LEGENDA
   ========================================================= */
.mto-showtables-legend-wrapper{
    background:#FFFFFF;
    border:1px solid #D6E8F8;
    border-radius:12px;
    padding:16px;
}

.mto-showtables-legend{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:center;
}

.mto-showtables-legend span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:#355F82;
}

.mto-showtables-legend i{
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:50%;
    flex:none;
}

.mto-showtables-legend .mto-showtables-status-free{
    background:var(--mto-free);
}

.mto-showtables-legend .mto-showtables-status-occupied{
    background:var(--mto-occupied);
}

.mto-showtables-legend .mto-showtables-status-reserved{
    background:var(--mto-reserved);
}

.mto-showtables-legend .mto-showtables-status-linked{
    background:var(--mto-linked);
}

/* =========================================================
   LINKPANEL
   ========================================================= */
.mto-showtables-linkpanel{
    background:#FFFFFF;
    border:1px solid #D6E8F8;
    border-radius:12px;
    padding:18px;
}

.mto-showtables-linkpanel h3{
    margin:0 0 8px;
    color:#0F4C81;
}

.mto-showtables-linkpanel small{
    display:block;
    margin-bottom:16px;
    color:#60778F;
}

.mto-showtables-linkgrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:12px;
}

.mto-showtables-linkgrid label{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px;
    border:1px solid #D6E8F8;
    border-radius:8px;
    background:#FFFFFF;
    cursor:pointer;
    transition:.20s;
}

.mto-showtables-linkgrid label:hover{
    background:#F5FAFF;
}

/* =========================================================
   STATUSBALK
   ========================================================= */
.mto-showtables-statusbar{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items:center;
    background:#FFFFFF;
    border:1px solid #D6E8F8;
    border-radius:12px;
	font-size: 18px;
    padding:16px;
}

.mto-showtables-statusbar > div{
    display:flex;
    align-items:center;
    gap:8px;
}

.mto-showtables-statusbar strong{
    color:#0F4C81;
    font-weight:600;
}

/* =========================================================
   TAFEL ACTIES
   ========================================================= */
.mto-showtables-table-actions{
    background:#FFFFFF;
    border:1px solid #D6E8F8;
    border-radius:12px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:24px;	
}

.mto-showtables-table-actions h4{
    margin:0 0 24px;
    font-size:20px;
    font-weight:600;
    color:#0F4C81;
}

/* =========================================================
   ACTIE BUTTONS
   ========================================================= */
.mto-showtables-action-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.mto-showtables-action-buttons button{
    flex:1 1 0;
    min-width:0;
    min-height:42px;
    appearance:none;
    cursor:pointer;
    transition:transform .18s ease;
}

.mto-showtables-action-buttons button:hover{
    transform:translateY(-1px);
}

.mto-showtables-action-buttons button:active{
    transform:translateY(0);
}

/* =========================================================
   ALGEMENE BUTTON
   (voor toekomstig gebruik)
   ========================================================= */
.mto-showtables-button{

    flex:1 1 0;
    min-width:0;

}

.mto-showtables-button:active{
    transform:translateY(1px);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:768px){
    .mto-showtables-grid{
        grid-template-columns:repeat(2,minmax(120px,1fr));
    }

    .mto-showtables-statusbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .mto-showtables-action-buttons{
        flex-direction:column;
    }

    .mto-showtables-action-buttons button{
        width:100%;
        min-width:0;
    }
}

/* =========================================================
   RESPONSIVE - KLEINE SCHERMEN
   ========================================================= */
@media (max-width:640px){
    .mto-showtables-grid{
        grid-template-columns:1fr;
    }

    .mto-header h2{
        font-size:26px;
    }

    .mto-header-subtitle{
        font-size:13px;
    }

    .mto-showtables-table{
        min-height:100px;
        padding:14px;
    }

    .mto-showtables-table strong{
        font-size:20px;
    }
}


/* =========================================================
   TOEKOMSTIGE UTILITIES
   ========================================================= */
.mto-showtables-hidden{
    display:none !important;
}

.mto-showtables-text-center{
    text-align:center;
}

.mto-showtables-full-width{
    width:100%;
}

.mto-showtables-disabled{
    opacity:.50;
    pointer-events:none;
}

.mrthao-tableops-app
.mto-showtables-table.mto-showtables-status-free{
    background:var(--mto-free);
}

.mrthao-tableops-app
.mto-showtables-table.mto-showtables-status-occupied{
    background:var(--mto-occupied);
}

.mrthao-tableops-app
.mto-showtables-table.mto-showtables-status-reserved{
    background:var(--mto-reserved);
}

.mrthao-tableops-app
.mto-showtables-table.mto-showtables-status-linked{
    background:var(--mto-linked);
	color:#333;
}

/* =========================================================
   EINDE BESTAND
   ---------------------------------------------------------
   mrThao TableOPS
   showtables.css

   Versie : V3.1
   Status : Stable

   Onderdeel van:

   mrthao-core/
       modules/
           tableops/
               css/
                   showtables.css
---
✅ Header
✅ Wrapper
✅ Grid
✅ Tafels
✅ Statuskleuren
✅ Legenda
✅ Linkpanel
✅ Statusbalk
✅ Actieknoppen
✅ Responsive
---
   Laatste wijziging:
   29-06-2026

   ========================================================= */