/* =============================================
   RESPONSIVE BASE — viewport & box-sizing
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Make all tables scroll horizontally on small screens */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

tr.stat-row th.number,
tr.stat-header th.number,
td.sim-stat,
th.sim-stat {
    text-align: center !important;
}

td.no-good, td.red {
    background-color: #d7191c;
    color: white;
}

td.full-time, td.green {
    background-color: #2c7bb6;
    color: white;
}

td.part-time, td.yellow {
    background-color: #4dac26;
    color: white;
}

tr.player-left td {
    background-color: lightblue;
}

.admin-header th,
#log th {
    font-size: .90em;
    text-align: center;
}

#admin-writers input,
#log input,
#log textarea {
    font-size: .90em;
}

.borderless td, .borderless th {
    border: none;
}

td.day {
    min-height: 120px;
    max-height: 120px;
    height: 120px;
    border-left: 1px lightgrey solid;
    border-right: 1px lightgrey solid;
    border-bottom : 1px lightgrey solid;
    padding-left: 5px;
    vertical-align: top;
    word-break: break-word;
}

td.day .btn {
    margin-top: 5px;
}

td.callbl {
    border-top: 1px lightgrey solid;
    border-left: 1px lightgrey solid;
    border-right: 1px lightgrey solid;
    text-align: right;
    font-size: x-small;
}

.monthname {
    font-size: x-large;
    text-align: center;
    padding: 10px;
}

table.calendar {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    table-layout: fixed;
}

.dropdown-content {
    width: auto;
}

.dropdown-item {
    font-size: .9em;
}

td.rolling-month a {
    color: white;
    text-decoration: underline;
}
th.rolling-month, td.rolling-month {
    text-align: center;
}

td.calendar-today {
    background-color: lightblue;
}

ul.horizontal li {
  display:inline;
}

ul.horizontal {
    padding-left: 0px;
}

span.jp-line {
    font-size: .9em;
}

.dropdown-menu {
    max-height:500px;
    overflow-y:auto;
}

span.highlight {
    background-color: yellow;
}

tr.audit-table table, tr.audit-row th, tr.audit-row td, tr.diary-row th, tr.diary-row td, tr.diary-table table, tr.diary-row td span {
    font-size: .9em;
}
/* =============================================
   RESPONSIVE BREAKPOINTS
   ============================================= */

/* ---------- Large tablets / small laptops (max 992px) ---------- */
@media (max-width: 992px) {
    table.calendar {
        font-size: .85em;
    }

    td.day {
        min-height: 90px;
        max-height: 90px;
        height: 90px;
        padding-left: 3px;
    }

    .monthname {
        font-size: large;
    }

    .dropdown-menu {
        max-height: 350px;
    }
}

/* ---------- Tablets (max 768px) ---------- */
@media (max-width: 768px) {
    /* Stack admin inputs full-width */
    #admin-writers input,
    #log input,
    #log textarea {
        width: 100%;
        font-size: .85em;
    }

    /* Calendar shrinks further */
    table.calendar {
        font-size: .75em;
    }

    td.day {
        min-height: 70px;
        max-height: 70px;
        height: 70px;
        padding-left: 2px;
    }

    td.day .btn {
        font-size: .7em;
        padding: 2px 4px;
        margin-top: 3px;
    }

    td.callbl {
        font-size: 9px;
    }

    .monthname {
        font-size: medium;
        padding: 6px;
    }

    /* Horizontal list wraps on small screens */
    ul.horizontal li {
        display: inline-block;
        margin-bottom: 4px;
    }

    /* Dropdowns full width on mobile */
    .dropdown-content {
        width: 100%;
    }

    .dropdown-menu {
        max-height: 260px;
        width: 100%;
    }

    /* Audit / diary rows readable */
    tr.audit-table table,
    tr.audit-row th,
    tr.audit-row td,
    tr.diary-row th,
    tr.diary-row td,
    tr.diary-table table,
    tr.diary-row td span {
        font-size: .8em;
    }

    /* Rolling month cells */
    th.rolling-month,
    td.rolling-month {
        white-space: nowrap;
        font-size: .8em;
    }
}

/* ---------- Mobile phones (max 576px) ---------- */
@media (max-width: 576px) {
    /* Calendar collapses — show as scrollable */
    .calendar-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.calendar {
        min-width: 480px; /* force scroll rather than cramping */
        font-size: .7em;
    }

    td.day {
        min-height: 55px;
        max-height: 55px;
        height: 55px;
        padding: 2px;
    }

    td.day .btn {
        display: none; /* hide action buttons in tiny cells */
    }

    .monthname {
        font-size: 1rem;
        padding: 4px;
    }

    /* Admin table horizontal scroll */
    #admin-writers,
    #log {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* jp lines tighten */
    span.jp-line {
        font-size: .8em;
    }

    /* Status cells keep colour but shrink text */
    td.no-good, td.red,
    td.full-time, td.green,
    td.part-time, td.yellow {
        font-size: .8em;
    }

    /* Highlight visible on small screens */
    span.highlight {
        padding: 1px 2px;
    }

    /* Borderless tables still readable */
    .borderless td,
    .borderless th {
        padding: 4px 2px;
    }
}