/* !
 * Ripple CSS v1.0  using Bootstrap 3.3.7 based on the Ripple design system
 * This CSS file is for the Ripple rebranding using Bootstrap 3.3.7.
 * Includes styles for typography, buttons, forms, panels, navigation, and utility classes.
 * No Bootstrap overriding. New class names are used to avoid conflicts.
 * Last update: 8 May 2025

/* Ripple color palette as CSS variables */
:root {
    --r-dark: #0B0F24;
    --r-gray: #5D7FAC;
    --r-blue: #3F91FF;
    --r-red: #E32F31;
    --r-orange: #FF783F;
    --r-light: #EFF4FA;
    --r-green: #2d8548;
    --r-font: 'Overpass', sans-serif;
}

/* Base Typography */
.r-ui,
body {
    font-family: var(--r-font);
    color: var(--r-dark);
}

/* Buttons */
.r-btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.r-btn-default {
    background-color: #fff;
    border-color: #ccc;
    color: #333;
}

    .r-btn-default:hover {
        background-color: #e6e6e6;
        border-color: #adadad;
    }

.r-btn-primary {
    background-color: var(--r-blue);
    border-color: var(--r-blue);
    color: #fff;
}

    .r-btn-primary:hover {
        background-color: #2c75e2;
        border-color: #2c75e2;
    }

.r-btn-link {
    background: none;
    border: none;
    color: var(--r-blue);
    text-decoration: underline;
    padding: 0;
}

.r-btn-success {
    background-color: #2d8548;
    border-color: #2d8548;
    color: #fff;
}

    .r-btn-success:hover {
        background-color: #276d3c;
        border-color: #276d3c;
    }

.r-btn-info {
    background-color: var(--r-gray);
    border-color: var(--r-gray);
    color: #fff;
}

    .r-btn-info:hover {
        background-color: #4c6b94;
        border-color: #4c6b94;
    }

.r-btn-warning {
    background-color: var(--r-orange);
    border-color: var(--r-orange);
    color: #fff;
}

    .r-btn-warning:hover {
        background-color: #e66a32;
        border-color: #e66a32;
    }

.r-btn-danger {
    background-color: var(--r-red);
    border-color: var(--r-red);
    color: #fff;
}

    .r-btn-danger:hover {
        background-color: #c62828;
        border-color: #c62828;
    }

.r-btn-link {
    background: none;
    border: none;
    color: var(--r-blue);
    text-decoration: underline;
    padding: 0;
}

    .r-btn-link:hover {
        color: #2c75e2;
    }

.r-btn-outline-default {
    background-color: transparent;
    border: 1px solid #ccc;
    color: #333;
}

    .r-btn-outline-default:hover {
        background-color: #f8f8f8;
    }

.r-btn-outline-primary {
    background-color: transparent;
    border: 1px solid var(--r-blue);
    color: var(--r-blue);
}

    .r-btn-outline-primary:hover {
        background-color: var(--r-blue);
        color: #fff;
    }

.r-btn-outline-success {
    background-color: transparent;
    border: 1px solid #2d8548;
    color: #2d8548;
}

    .r-btn-outline-success:hover {
        background-color: #2d8548;
        color: #fff;
    }

.r-btn-outline-info {
    background-color: transparent;
    border: 1px solid var(--r-gray);
    color: var(--r-gray);
}

    .r-btn-outline-info:hover {
        background-color: var(--r-gray);
        color: #fff;
    }

.r-btn-outline-warning {
    background-color: transparent;
    border: 1px solid var(--r-orange);
    color: var(--r-orange);
}

    .r-btn-outline-warning:hover {
        background-color: var(--r-orange);
        color: #fff;
    }

.r-btn-outline-danger {
    background-color: transparent;
    border: 1px solid var(--r-red);
    color: var(--r-red);
}

    .r-btn-outline-danger:hover {
        background-color: var(--r-red);
        color: #fff;
    }

/* Text */
.r-text-default {
    color: var(--r-dark);
}

.r-text-primary {
    color: var(--r-blue);
}

.r-text-success {
    color: #2d8548;
}

.r-text-info {
    color: var(--r-gray);
}

.r-text-warning {
    color: var(--r-orange);
}

.r-text-danger {
    color: var(--r-red);
}

.r-text-muted {
    color: #777;
}

.r-text-light {
    color: #f5f5f5;
}

.r-text-link {
    color: var(--r-blue);
    text-decoration: underline;
}

    .r-text-link:hover {
        color: #2c75e2;
    }


/* Forms */
.r-form-group {
    margin-bottom: 15px;
}

.r-form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

    .r-form-control:focus {
        border-color: var(--r-blue);
        outline: 0;
        box-shadow: 0 0 8px rgba(63, 145, 255, 0.2);
    }


/* Panel */
.r-panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #d9e1ec;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.r-panel-body {
    padding: 15px;
}

.r-panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid #d9e1ec;
    background-color: var(--r-light);
    font-weight: 600;
}

/* Alerts */
.r-alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.r-alert-info {
    color: var(--r-dark);
    background-color: var(--r-light);
    border-color: #c5d9f1;
}

.r-alert-success {
    color: #2d8548;
    background-color: #e8f8ee;
    border-color: #c4ebd8;
}

.r-alert-danger {
    color: var(--r-red);
    background-color: #ffe5e5;
    border-color: #f5b5b5;
}

/* States */
.r-disabled,
.r-btn[disabled],
.r-form-control[disabled] {
    opacity: 0.65;
    pointer-events: none;
}

.r-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}