/*=========================================================
    gRecord Blackjack Session Manager
    Master Stylesheet
=========================================================*/

*{
    box-sizing:border-box;
}

html{
    -webkit-text-size-adjust:100%;
}

body{

    margin:0;

    padding:8px;

    background:#eceff3;

    color:#222;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:16px;

    line-height:1.4;

}

/******************************************************
 CONTAINER
******************************************************/

.container{

    width:100%;

    max-width:1800px;

    margin:0 auto;

}

/******************************************************
 HEADINGS
******************************************************/

h1{

    margin:0 0 15px;

    color:#17375e;

    font-size:2rem;

}

h2{

    margin:0 0 12px;

    color:#17375e;

    font-size:1.35rem;

}

h3{

    margin:0 0 10px;

}

/******************************************************
 CARDS
******************************************************/

.card{

    background:white;

    border-radius:10px;

    margin-bottom:14px;

    padding:18px;

    box-shadow:

        0 2px 10px

        rgba(0,0,0,.15);

}

/******************************************************
 BUTTONS
******************************************************/

.button,
.btn,
button,

input[type=submit]{

    display:inline-block;

    background:#0d6efd;

    color:white;

    text-decoration:none;

    border:none;

    border-radius:8px;

    cursor:pointer;

    padding:

        12px
        18px;

    font-size:16px;

    transition:.2s;

}

.button:hover,

button:hover,

input[type=submit]:hover{

    background:#084298;

}

.btn-success
{
    background:#28a745;
    color:#ffffff;
}

.btn-warning
{
    background:#ffc107;
    color:#000000;
}

.btn-danger
{
    background:#dc3545;
    color:#ffffff;
}

.btn-info
{
    background:#17a2b8;
    color:#ffffff;
}

/******************************************************
 FORMS
******************************************************/

label{

    display:block;

    margin-top:12px;

    margin-bottom:4px;

    font-weight:bold;

}

input,

select,

textarea{

    width:100%;

    padding:10px;

    font-size:16px;

    border:

        1px solid #bbb;

    border-radius:6px;

}

textarea{

    resize:vertical;

}

/******************************************************
 TABLES
******************************************************/

.table-responsive{

    width:100%;

    overflow-x:auto;

}

table{

    width:100%;

    border-collapse:collapse;

    white-space:nowrap;

    background:white;

}

th{

    background:#17375e;

    color:white;

    padding:10px;

}

td{

    padding:8px;

    border-bottom:

        1px solid #ddd;

}

tr:nth-child(even){

    background:#f9f9f9;

}

tr:hover{

    background:#ffffe5;

}

/******************************************************
 ALIGNMENT
******************************************************/

.money{

    text-align:right;

}

.center{

    text-align:center;

}

.right{

    text-align:right;

}

/******************************************************
 STATUS COLORS
******************************************************/

.win{

    color:#198754;

    font-weight:bold;

}

.loss{

    color:#c00000;

    font-weight:bold;

}

/******************************************************
 INFO BOXES
******************************************************/

.info{

    background:#e8f3ff;

    border-left:

        5px solid #0d6efd;

    padding:12px;

    margin-bottom:15px;

}

.warning{

    background:#fff6dd;

    border-left:

        5px solid orange;

    padding:12px;

}

.error{

    background:#ffe7e7;

    border-left:

        5px solid red;

    padding:12px;

}

/******************************************************
 MOBILE
******************************************************/

@media (max-width:900px){

body{

    padding:6px;

    font-size:18px;

}

.container{

    width:100%;

}

.card{

    padding:14px;

    margin-bottom:10px;

}

h1{

    font-size:1.5rem;

}

h2{

    font-size:1.2rem;

}

.button,
.btn,
button,

input[type=submit]{

    width:100%;

    padding:16px;

    margin-bottom:10px;

    font-size:19px;

}

input,

select,

textarea{

    min-height:52px;

    font-size:18px;

}

table{

    font-size:15px;

}

.app-header{

    flex-direction:column;

    align-items:flex-start;

}

.user-panel{

    margin-top:10px;

    text-align:left;

}

.top-menu{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

}

.top-menu .button{

    width:100%;

    min-width:0;

}

}

/******************************************************
 LARGE DESKTOPS
******************************************************/

@media (min-width:1400px){

body{

    padding:16px;

}

.container{

    max-width:1900px;

}

}

/******************************************************
APPLICATION HEADER
******************************************************/

.app-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#17375e;

    color:white;

    padding:14px 20px;

    border-radius:10px;

    margin-bottom:12px;

}

.app-title h1{

    margin:0;

    color:white;

    font-size:2rem;

}

.subtitle{

    opacity:.9;

    font-size:.95rem;

}

.user-panel{

    text-align:right;

}

/******************************************************
TOP MENU
******************************************************/

.top-menu{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:16px;

}

.top-menu .button{

    flex:1;

    min-width:140px;

    text-align:center;

}

/******************************************************
FOOTER
******************************************************/

.footer{

    text-align:center;

    color:#666;

    padding:18px;

    margin-top:20px;

    font-size:.9rem;

}

/******************************************************
ACTIVE SESSION BANNER
******************************************************/

.session-banner{

    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:12px;

    background:#17375e;

    color:white;

    padding:14px;

    border-radius:10px;

    margin-bottom:15px;

}

.session-banner div{

    text-align:center;

}

.session-banner strong{

    font-size:1.1rem;

}

@media (max-width:900px){

.session-banner{

    grid-template-columns:
        repeat(2,1fr);

}

}

.stat-value
{
    font-size: 1.4rem;
    font-weight: bold;
}

.text-success
{
    color: #198754;
}

.text-danger
{
    color: #dc3545;
}

.disp-outstanding{
    color:#dc3545;
    font-weight:bold;
}

.disp-session{
    color:#0d6efd;
    font-weight:bold;
}

.disp-cage{
    color:#198754;
    font-weight:bold;
}

.disp-bank{
    color:#6f42c1;
    font-weight:bold;
}

.disp-replacement{
    color:#fd7e14;
    font-weight:bold;
}

.disp-void{
    color:#6c757d;
    font-weight:bold;
}