/* ============================================================
   TBANav
   RIVER LEVEL ASSESSMENT CARD
   FROZEN V1
   ============================================================

   This stylesheet controls ONLY the River Level Assessment
   component.

   Dashboard layout is controlled by dashboard.css.

   The Brown river icon is a frozen SVG asset and is NOT
   recreated by CSS.

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


/* ============================================================
   CARD
   ============================================================ */

.tbanav-river-card{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    box-sizing:border-box;

    background:#fff;

    border:2px solid #8a4b10;

    border-radius:18px;

    padding:14px 16px 10px;

    color:#0a408c;

    text-align:center;

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

    box-shadow:
        0 2px 8px rgba(20,45,75,.05);

    overflow:hidden;
}


/* ============================================================
   CARD KICKER
   ============================================================ */

.tbanav-river-kicker{
    font-size:15px;

    line-height:1.1;

    font-weight:900;

    letter-spacing:.3px;

    margin-bottom:2px;
}


/* ============================================================
   COLOUR STATUS
   ============================================================ */

.tbanav-river-colour{
    font-size:42px;

    line-height:1;

    font-weight:900;

    letter-spacing:.5px;

    margin:2px 0 9px;

    white-space:nowrap;
}


/* ============================================================
   STATUS BANNER
   ============================================================ */

.tbanav-river-banner{
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    box-sizing:border-box;

    border-radius:9px;

    background:#8a4b10;

    color:#fff;

    font-size:25px;

    line-height:1;

    font-weight:900;

    margin-bottom:11px;

    white-space:nowrap;

    overflow:hidden;
}


/* ============================================================
   MESSAGE BOX
   ============================================================ */

.tbanav-river-message-box{
    display:flex;

    align-items:center;

    text-align:left;

    gap:12px;

    border:1px solid rgba(138,75,16,.28);

    border-radius:11px;

    background:#fbf8f4;

    padding:10px 13px;

    min-height:72px;

    box-sizing:border-box;
}


/* ============================================================
   ICON CONTAINER
   ============================================================ */

.tbanav-river-icon{
    flex:0 0 56px;

    width:56px;
    height:56px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    box-sizing:border-box;

    color:#fff;

    font-size:42px;

    font-weight:900;

    line-height:1;

    overflow:hidden;
}


/* ============================================================
   FROZEN BROWN SVG ICON
   ============================================================ */

.tbanav-river-wave-icon{
    display:flex;

    align-items:center;
    justify-content:center;

    width:56px;
    height:56px;

    flex:0 0 56px;

    box-sizing:border-box;

    line-height:0;

    overflow:hidden;
}


.tbanav-river-wave-icon img{
    display:block;

    width:56px;
    height:56px;

    min-width:56px;
    min-height:56px;

    max-width:56px;
    max-height:56px;

    object-fit:contain;

    border:0;

    margin:0;

    padding:0;
}


/*
 * The SVG contains its own frozen brown circle.
 * Therefore the surrounding Brown icon must not add another
 * visible background layer.
 */

.tbanav-river-icon-brown{
    background:transparent;
}


/* ============================================================
   OTHER STATUS ICONS
   ============================================================ */

.tbanav-river-simple-icon{
    display:flex;

    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    font-size:42px;

    font-weight:900;

    line-height:1;
}


/* ============================================================
   ICON COLOURS
   ============================================================ */

.tbanav-river-icon-green{
    background:#4b9a2b;
}

.tbanav-river-icon-amber{
    background:#f39a00;
}

.tbanav-river-icon-red{
    background:#d52626;
}

.tbanav-river-icon-unknown{
    background:#68737d;
}


/* ============================================================
   MESSAGE TEXT
   ============================================================ */

.tbanav-river-message{
    flex:1;

    min-width:0;

    color:#111;

    font-size:14px;

    line-height:1.3;
}


/* ============================================================
   FOOTER
   ============================================================ */

.tbanav-river-footer{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-top:9px;

    color:#0a408c;

    font-size:11px;

    font-weight:800;
}


/* ============================================================
   DETAIL BUTTON
   ============================================================ */

.tbanav-river-detail-button{
    border:0;

    background:transparent;

    padding:0;

    color:#0a408c;

    font:inherit;

    font-weight:900;

    cursor:pointer;

    white-space:nowrap;
}


.tbanav-river-detail-button:hover{
    text-decoration:underline;
}


.tbanav-river-detail-button:focus-visible{
    outline:2px solid #0a408c;

    outline-offset:3px;

    border-radius:3px;
}


/* ============================================================
   CERTAINTY
   ============================================================ */

.tbanav-river-certainty{
    font-size:11px;

    color:#0a408c;

    font-weight:800;

    margin-top:4px;
}


.tbanav-river-certainty strong{
    font-weight:900;
}


/* ============================================================
   EXPANDED DETAILS
   ============================================================ */

.tbanav-river-details{
    margin-top:11px;

    padding:13px 14px;

    text-align:left;

    border-top:1px solid #d9dee5;

    color:#111;
}


.tbanav-river-details[hidden]{
    display:none;
}


.tbanav-river-details p{
    font-size:12px;

    line-height:1.45;

    margin:6px 0 12px;
}


.tbanav-river-detail-title{
    font-size:11px;

    color:#0a408c;

    font-weight:900;

    margin-top:10px;
}


/* ============================================================
   CONTROLLING EVIDENCE
   ============================================================ */

.tbanav-river-controller{
    border:1px solid #d9dee5;

    border-radius:8px;

    padding:8px;

    margin:6px 0;

    background:#fafbfc;
}


.tbanav-river-controller strong{
    display:block;

    color:#0a408c;

    font-size:12px;
}


.tbanav-river-controller span,
.tbanav-river-controller small{
    display:block;

    margin-top:2px;

    font-size:11px;
}


/* ============================================================
   DISCLAIMER
   ============================================================ */

.tbanav-river-disclaimer{
    font-size:11px !important;

    color:#5d6975;
}


/* ============================================================
   BROWN
   ============================================================ */

.tbanav-river-card-brown{
    border-color:#8a4b10;
}


.tbanav-river-card-brown
.tbanav-river-colour{
    color:#8a4b10;
}


.tbanav-river-card-brown
.tbanav-river-banner{
    background:#8a4b10;
}


.tbanav-river-card-brown
.tbanav-river-message-box{
    border-color:rgba(138,75,16,.28);

    background:#fbf8f4;
}


/* ============================================================
   GREEN
   ============================================================ */

.tbanav-river-card-green{
    border-color:#4b9a2b;
}


.tbanav-river-card-green
.tbanav-river-colour{
    color:#4b9a2b;
}


.tbanav-river-card-green
.tbanav-river-banner{
    background:#4b9a2b;
}


.tbanav-river-card-green
.tbanav-river-message-box{
    border-color:rgba(75,154,43,.28);

    background:#f5faf2;
}


/* ============================================================
   AMBER
   ============================================================ */

.tbanav-river-card-amber{
    border-color:#f39a00;
}


.tbanav-river-card-amber
.tbanav-river-colour{
    color:#f39a00;
}


.tbanav-river-card-amber
.tbanav-river-banner{
    background:#f39a00;
}


.tbanav-river-card-amber
.tbanav-river-message-box{
    border-color:rgba(243,154,0,.35);

    background:#fff8eb;
}


/* ============================================================
   RED
   ============================================================ */

.tbanav-river-card-red{
    border-color:#d52626;
}


.tbanav-river-card-red
.tbanav-river-colour{
    color:#d52626;
}


.tbanav-river-card-red
.tbanav-river-banner{
    background:#d52626;
}


.tbanav-river-card-red
.tbanav-river-message-box{
    border-color:rgba(213,38,38,.28);

    background:#fff2f2;
}


/* ============================================================
   UNKNOWN / DATA UNAVAILABLE
   ============================================================ */

.tbanav-river-card-unknown{
    border-color:#68737d;

    display:flex;
    flex-direction:column;

    justify-content:flex-start;

    padding-top:42px;
}

.tbanav-river-card-unknown
.tbanav-river-kicker{
    text-align:center;
}

.tbanav-river-card-unknown
.tbanav-river-banner{
    background:#68737d;

    text-align:center;
}

.tbanav-river-card-unknown
.tbanav-river-message-box{
    border-color:#d5d9dd;

    background:#f5f6f7;
}

.tbanav-river-card-unknown
.tbanav-river-footer{
    justify-content:center;

    text-align:center;
}


/* ============================================================
   ERROR FALLBACK
   ============================================================ */

.tbanav-river-card-error{
    border-color:#68737d;
}


.tbanav-river-card-error
.tbanav-river-status{
    font-size:32px;

    line-height:1;

    font-weight:900;

    color:#68737d;

    margin:5px 0 10px;
}


/* ============================================================
   TABLET / SMALL DESKTOP
   ============================================================ */

@media(max-width:1000px){

    .tbanav-river-colour{
        font-size:36px;
    }

    .tbanav-river-banner{
        font-size:22px;
    }

    .tbanav-river-message{
        font-size:13px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:800px){

    .tbanav-river-card{
        padding:12px;
    }


    .tbanav-river-kicker{
        font-size:14px;
    }


    .tbanav-river-colour{
        font-size:36px;
    }


    .tbanav-river-banner{
        height:44px;

        font-size:21px;
    }


    .tbanav-river-message-box{
        gap:10px;

        padding:9px 10px;

        min-height:66px;
    }


    .tbanav-river-icon{
        flex:0 0 52px;

        width:52px;
        height:52px;
    }


    .tbanav-river-wave-icon{
        width:52px;
        height:52px;

        flex-basis:52px;
    }


    .tbanav-river-wave-icon img{
        width:52px;
        height:52px;

        min-width:52px;
        min-height:52px;

        max-width:52px;
        max-height:52px;
    }


    .tbanav-river-simple-icon{
        font-size:38px;
    }


    .tbanav-river-message{
        font-size:13px;
    }


    .tbanav-river-footer{
        font-size:10px;
    }


    .tbanav-river-certainty{
        font-size:10px;
    }
}


/* ============================================================
   VERY SMALL SCREENS
   ============================================================ */

@media(max-width:480px){

    .tbanav-river-footer{
        flex-direction:column;

        align-items:flex-start;

        gap:4px;
    }


    .tbanav-river-detail-button{
        align-self:flex-end;
    }


    .tbanav-river-banner{
        font-size:19px;
    }
}
/* ============================================================
   RIVER LEVEL — LONG STATE PROTECTION
   Prevent long assessment states such as UNAVAILABLE
   from escaping the card.
   ============================================================ */

.journey-assessment-hero {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.journey-assessment-hero .assessment-kicker,
.journey-assessment-hero .assessment-state,
.journey-assessment-hero .assessment-status-banner,
.journey-assessment-hero .assessment-note,
.journey-assessment-hero .assessment-times {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.journey-assessment-hero .assessment-state {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-align: center !important;
    overflow: hidden !important;
}
.journey-assessment-hero .assessment-state {
    font-size: clamp(30px, 3vw, 42px) !important;
    letter-spacing: 0 !important;
}

/* ============================================================
   TBANAV — CLOSED CARD DESKTOP FOOTER SAFETY
   ============================================================
   The dashboard stylesheet owns the desktop card height.
   This component rule simply prevents the footer/certainty text
   from creating avoidable extra lines at normal desktop zoom.
   ============================================================ */

@media screen and (min-width: 1101px) {

    .tbanav-river-footer {
        min-width: 0;
    }

    .tbanav-river-footer > span,
    .tbanav-river-detail-button,
    .tbanav-river-certainty {
        white-space: nowrap;
    }
}