/* Estado de las migraciones de base de datos.
   El modulo se pinta dentro del panel derecho del dialogo de Configuracion
   (#divContentTableConfigureManagement), asi que todo cuelga de .dbChanges*. */

/* Sin padding en el contenedor: el resto de paneles de Configuracion van
   pegados al borde y este debe verse igual. */
.dbChanges {
    width: 100%;
}

.dbChanges .toolbar {
    padding: 5px;
}

.dbChangesBadge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 11px;
    background-color: #eeeeee;
    color: #555555;
}

.dbChangesBadge-applied {
    background-color: #e2f0d9;
    color: #3c6b28;
}

.dbChangesBadge-pending {
    background-color: #fdf3d8;
    color: #8a6d1a;
}

.dbChangesBadge-error {
    background-color: #f8dcda;
    color: #9c2f26;
}

.dbChangesBadge-missing {
    background-color: #e4e4e4;
    color: #666666;
}

.dbChangesNotice {
    margin: 8px 10px;
    padding: 7px 10px;
    font-size: 11px;
    border-left: 3px solid #cccccc;
    background-color: #f4f4f4;
    color: #555555;
}

.dbChangesNotice-pending {
    border-left-color: #e0b73c;
    background-color: #fdf3d8;
    color: #8a6d1a;
}

.dbChangesNotice-error {
    border-left-color: #c0392b;
    background-color: #f8dcda;
    color: #9c2f26;
}

.dbChangesNotice-modified {
    border-left-color: #7f8c8d;
    background-color: #ececec;
    color: #555555;
}

.dbChangesTable {
    margin: 0 0 10px 0;
    font-size: 11px;
    border-collapse: collapse;
}

.dbChangesTable th {
    padding: 5px 8px;
    text-align: left;
    background-color: #ededed;
    border-bottom: 1px solid #cccccc;
    font-weight: bold;
    color: #444444;
}

.dbChangesTable td {
    padding: 4px 8px;
    border-bottom: 1px solid #eeeeee;
    vertical-align: top;
}

.dbChangesRow-pending td {
    background-color: #fffdf5;
}

.dbChangesRow-error td {
    background-color: #fdf6f5;
}

.dbChangesRow-missing td {
    color: #888888;
}

.dbChangesState {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    text-transform: uppercase;
}

.dbChangesState-applied {
    background-color: #e2f0d9;
    color: #3c6b28;
}

.dbChangesState-pending {
    background-color: #fdf3d8;
    color: #8a6d1a;
}

.dbChangesState-error {
    background-color: #f8dcda;
    color: #9c2f26;
}

.dbChangesState-missing {
    background-color: #e4e4e4;
    color: #666666;
}

.dbChangesFlag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    background-color: #ececec;
    color: #666666;
    cursor: help;
}

/* El mensaje de error de MySQL viene con saltos de linea y la sentencia
   completa: se respeta el formato y se deja romper por si es muy larga. */
.dbChangesError {
    padding: 6px 10px 8px 10px !important;
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    color: #9c2f26;
    white-space: pre-wrap;
    word-break: break-word;
}

.dbChangesEmpty {
    padding: 15px !important;
    text-align: center;
    color: #888888;
}

.dbChangesHelp {
    margin: 10px;
    padding: 8px 10px;
    background-color: #f4f4f4;
    border-left: 3px solid #cccccc;
    font-size: 11px;
    color: #555555;
}